INTERSHIP MOBILE PROGRAMING

Instructor: Vo Tan Toan

Theory: 30 hours
Practice: 30 hours
Course material developed by:

ThS. Vo Tan Toan

([email protected])

Khoa CNTT ĐH Nông Lâm - Võ Tấn Toàn 1

 Grade
Lab: 5%
Middle exam: 30% (quiz test or seminar 5 member)
Final project: 60% (5 member)
Quick test in class: 5%
Project Grading
It is expected that everyone is a good programmer.
Comments (documentation) are required.
Structured, readable code is required.
80% of the grade depends on the quality of the code
(No sharing of code in any form)

Khoa CNTT ĐH Nông Lâm - Võ Tấn 2

 Mobile programing

Native App Cross Flatform

Khoa CNTT ĐH Nông Lâm - Võ Tấn 3

 Course Topics

Introduction to Intership Mobile Programming

Part 1: Reviews RecyclerViews, Fragment
Part 2: Reviews Async Task, Animation Android
Part 3: Webservices SOAP, REST Structure
Part 4: Connect Webservices, Parse Json, XML.
Part 5: QRCode Scanner, Barcode Scanner
Part 6,7,8: Flutter Structure, Call API,…

Khoa CNTT ĐH Nông Lâm - Võ Tấn 4

 Literatute

▪ Head First Android Development, 2011

▪ Beginning App Development with Flutter:
Create Cross-Platform Mobile Apps,2019
▪ Android based Mobile Application
Development and its Security, 2012
▪ The future of teaching programming is on
mobile devices, July 2012
▪ Flutter Apps Development: Build
Cross-Platform Flutter Apps with Trust,
2023
Khoa CNTT ĐH Nông Lâm - Võ Tấn 5
RECYCLER VIEW
RecyclerView is a ViewGroup that is used to prepare and display similar Views.
COMPONENTS OF RECYCLER VIEW
LayoutManagers
▪ is a ViewGroup that is used to prepare and display similar Views.
▪ A RecyclerView needs a layout manager and an adapter to be initialized. The layout
manager determines how the items inside the RecyclerView are displayed and when to
reuse view items.

▪ LinearLayoutManager : displays items in a list that can be scrolled vertically (horizontal)

or horizontally (Vertical).
COMPONENTS OF RECYCLER VIEW
LayoutManagers

▪ GridLayoutManager : Display list items in a grid.

COMPONENTS OF RECYCLER VIEW
LayoutManagers

StaggeredGridLayoutManager : displays list items in a staggered grid.

COMPONENTS OF RECYCLER VIEW
RecyclerView will include a new adapter that works similar to the adapters you have used
before but has a few differences such as requiring a ViewHolder . And you will have to
override 3 main methods. Let's look at the image below to understand these 3 methods:
USING RECYCLER VIEW
Using RecyclerView
To use Recycler View, there are 7 main steps:
1. Add RecyclerView support library to gradle build file
2. Define model class to use data source
3. Add RecyclerView to the activity you want to display
4. Create an XML file to define how an item is represented
5. Create RecyclerView.Adapter and ViewHolder to assign data to
items
6. Connect adapter to data source to put into RecyclerView
USING RECYCLER VIEW
Install the library
dependencies {
implementation 'com.android.support:design:28.0.0'
}
Then click "Sync Project with Gradle files" to let the IDE download the necessary resources.

Define the Model

public class Hero {
private String mName;
private int mImage;

public Hero(String mName, int mImage) {

this.mName = mName;
this.mImage = mImage;
}

Getter(), Setter()...
}
USING RECYCLER VIEW
Add RecyclerView to layout
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerHero"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
USING RECYCLER VIEW
Create Custom row layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
android:id="@+id/image_hero"
android:layout_width="0dp"
android:layout_height="@dimen/dp_180"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:scaleType="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="TextView"
android:textColor="#FFF"
app:layout_constraintBottom_toBottomOf="@+id/image_hero"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.112"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/image_hero"
app:layout_constraintVertical_bias="1.0" />
</android.support.constraint.ConstraintLayout>
USING RECYCLER VIEW
Create RecyclerView.Adapter
public class HeroAdapter extends
RecyclerView.Adapter<HeroAdapter.ViewHolder> {

public class ViewHolder extends RecyclerView.ViewHolder {

private ImageView mImageHero;
private TextView mTextName;

public ViewHolder(@NonNull View itemView) {

super(itemView);
mImageHero = itemView.findViewById(R.id.image_hero);
mTextName = itemView.findViewById(R.id.text_name);
}
}
}

public class HeroAdapter extends

RecyclerView.Adapter<HeroAdapter.ViewHolder> {
private Context mContext;
private ArrayList<Hero> mHeros;

public HeroAdapter(Context mContext, ArrayList<Hero> mHeros) {

this.mContext = mContext;
this.mHeros = mHeros;
}
USING RECYCLER VIEW
Every Adapter will have 3 important methods:
public class HeroAdapter extends RecyclerView.Adapter<HeroAdapter.ViewHolder> {
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
LayoutInflater inflater = LayoutInflater.from(mContext);
View heroView = inflater.inflate(R.layout.item_hero, parent, false);
ViewHolder viewHolder = new ViewHolder(heroView);
return viewHolder;
}

@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
Hero hero = mHeros.get(position);
Glide.with(mContext)
.load(hero.getImage())
.into(holder.mImageHero);
holder.mTextName.setText(hero.getName());
}

@Override
public int getItemCount() {
return mHeros.size();
}
USING RECYCLER VIEW
Connect Adapter to RecyclerView
public class HeroActivity extends AppCompatActivity {
private ArrayList<Hero> mHeros ;
private RecyclerView mRecyclerHero;
private HeroAdapter mHeroAdapter ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_hero);
mRecyclerHero = findViewById(R.id.recyclerHero);
mHeros = new ArrayList<>();
createHeroList();
mHeroAdapter = new HeroAdapter(this,mHeros);
mRecyclerHero.setAdapter(mHeroAdapter);
mRecyclerHero.setLayoutManager(new LinearLayoutManager(this));
}

private void createHeroList() {

mHeros.add(new Hero("Thor",R.drawable.image_thor));
mHeros.add(new Hero("IronMan",R.drawable.image_ironman));
mHeros.add(new Hero("Hulk",R.drawable.image_hulk));
mHeros.add(new Hero("SpiderMan",R.drawable.image_spiderman));
mHeros.add(new Hero("Thor",R.drawable.image_thor));
mHeros.add(new Hero("IronMan",R.drawable.image_ironman));
mHeros.add(new Hero("Hulk",R.drawable.image_hulk));
mHeros.add(new Hero("SpiderMan",R.drawable.image_spiderman));
mHeros.add(new Hero("Thor",R.drawable.image_thor));
mHeros.add(new Hero("IronMan",R.drawable.image_ironman));
}
}
USING RECYCLER VIEW
Compile and run the results
FRAGMENT
What is fragment?
First, let's check the dictionary to see exactly what
this word means:
Fragment | noun | /’frag-mənt/
Mảnh vỡ, mẩu, bộ phận của một vật gì đó

Fragment is an Android Component, is part of the user interface

or behavior of an application .. As the name implies, fragment is
not independent (độc lập), tied to a single Activity. They have
many of the same functions as Activities.
FRAGMENT
FRAGMENT
Represents a behavior or a part of user
interface in a FragmentActivity

Android introduced fragments in Android 3.0

(API level 11)

You can combine multiple fragments in a

single activity to build a multi-pane UI and
reuse a fragment in multiple activities

Can add and remove while activity running. Call

FRAGMENT
Example when you have music app with
playlist. Playlist can have in every activity.

For example, when the activity is paused, so are all

FRAGMENT
When you add a fragment as a part of your activity
layout, it lives in a ViewGroup inside view layout.
DESIGN
Think of how to modular and re-use
Add component for large screen and remove for
small screen
FRAGMENT LIFE CYCLE

Creation start Visible Active

onAttach() onCreate() onCreateView() onActivityCreated() onStart() onResume()

Recreated
From the
backstack

onDetach() onDestroy() onDestroyView() onStop() onPause()

IMPLEMENT FRAGMENT
extend Fragment class and implement
OnCreateView() method
IMPLEMENT FRAGMENT
Dynamic Fragment
Static Fragment
Static Fragment is the fragment type declared (defined) directly
in the activity_main.xml file

For example, we have 2 static fragments Fragment1.java

(fragment1.xml) and Fragment2.java (fragment2.xml) In the file
activity_main.xml declared static
IMPLEMENT FRAGMENT
mainactivity.xml
<? xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
<fragment
android: id = "@ + id / listFragment"
class = "com.example.haitm.fragmentdemo.MyFragment1"
android: layout_width = "0dp"
android: layout_height = "match_parent"
android: layout_weight = "1"
tools: layout = "@ layout / fragment1">
</fragment>
<fragment
android: id = "@ + id / detailFragment"
class = "com.example.haitm.fragmentdemo.MyFragment2"
android: layout_width = "0dp"
android: layout_height = "match_parent"
android: layout_weight = "1"
tools: layout = "@ layout / fragment2">
</fragment>
IMPLEMENT FRAGMENT
IMPLEMENT FRAGMENT
mainactivity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
<FrameLayout
android:id=“ @+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="300dp">
</FrameLayout>
<Button
android:id=“ @+id/btn_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="add fragment" />
</LinearLayout>
IMPLEMENT FRAGMENT
Main activity
public class MainActivity extends AppCompatActivity {
Button btn;
FragmentManager fm;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
fm = getSupportFragmentManager();
btn = (Button) findViewById(R.id.btn_add);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
FragmentTransaction ft_add = fm.beginTransaction();
ft_add.add(R.id.frame_layout, new MyFragment1());
ft_add.commit();
}
IMPLEMENT FRAGMENT
Mobile Programming

Thank you!
Khoa CNTT ĐH Nông Lâm - Võ Tấn 33