Advanced Mobile development

Plan
01 Advanced UI: RecyclerView

02 Advanced UI: Fragments

03 AsyncTask & Services

04 Data Persistence: SQLite

05 Data Persistence: Web Serice & MySQL

06 Geo localization & Maps

07 Phones Advanced Components

Chapter 1
Advanced UI: Lists &
RcyclerView
 How to show multiple Items
ListView Spinner GridView

How to fill it with data

 Fill it in XML

XML File
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/marques"
android:entries="@array/jours">

Res File
<string-array name=“jours">
<item>Lundi</item>
<item>Mardi</item>
<item>Mercredi</item>
</string-array>
 Fill in Java

Java File
 Fill With Array Adapter

DataSource
« Table »
ArrayAdapter View
1) Fill Adapter 2) Bind Adapter
with data to the View
1) Fill adapter with data (table):

ArrayAdapter adaptername =new ArrayAdapter(context, Layout, datasrc);

2) Bind adapter to view:

Viewname.setAdapter(adaptername);
 Example
Java File: ListView
public class MainActivity extends AppCompatActivity { TextView
String[] tab= {"Lundi", "Mardi", "Mercredi"};
TextView
ListView maliste;
@Override TextView
protected void onCreate(Bundle savedInstanceState) { TextView
super.onCreate(savedInstanceState);
TextView
setContentView(R.layout.activity_main);
maliste=findViewById(R.id.listview);

ArrayAdapter a= new
ArrayAdapter(this,android.R.layout.simple_list_item_1, tab);
maliste.setAdapter(a);
ListView & RecyclerView
- a short history -
 Back to basics:
ListView is it usefull?
Can we see a Why Using aRV?
complete Example? Benefits?

RecyclerView
In Android

Why the Term

How RV is used to build RecyclerView?
a listView?
 ListView: history

Old Widget for scrolling

Introduced since API1

Simplest way to just create the vertical-scrolling

list
 ListView: How does it works?

ListView
Data Adapter Item1
source
Item2
Item3
1. Create Custom Layout for one row item
2. Extend the BaseAdapter to create a Custom Adapter Item4
3. Use Custom BaseAdapter to inflate the new layout Item5
4. Bind the Custom BaseAdapter to ListView Item6
 ListView:
What’s the problem?
One Methode
=
getView

- Inflate the View

Click to see the video -Populate Data
(findViewById)
- Return the view filled
 ListView: What’s the problem?
Performance !!!

Vertical Scrolling !!!

How to ensure high performance ?

RecyclerView
 RecyclerView
- Definition & advantages-
 RecyclerView: Advantages

A more advanced and flexible version of ListView.

More possibilities over the data set inside the adapter.

Vertical & Horizontal Scrolling.

API 21
Suitable for a list of elements based on large data sets (or
data that frequently changes).

Animation & decoration.

RecyclerView: the term Recycling

- When the list is first populated, it

creates and binds some view
holders on either side of the list.
If the view is displaying list

Example: positions 0 through 5, the

RecyclerView creates and
binds those views, and
might also create and bind
the
view for position 6.
That way, if the user
scrolls the list, the
next element is
ready to display.
 RecyclerView: the term Recycling

As the user
scrolls the list,
the RV
creates new
views as
necessary.
It also saves
the view which
have scrolled
off-screen, so
they can be
reused.
RecyclerView: the term Recycling
On the other hand, if the
user keeps scrolling in
the same direction, the
view holders which
have been off-screen
the longest can be re-
bound to new data.
The view holder does not
need to be created or
have its view inflated;
instead, the app just
updates the view's
contents to match the new
item it was
bound to.
 RecyclerView: the term Recycling

Once an item
scrolls out of the
visible area, it
essentially gets
placed in a
queue.
Sooner or later, it
will be needed
again when a new
item
scrolls in.
Then, the values of
the text in
the item’s UI are
replaced.
RecyclerView Flow
 What’s new with the RV?
Your Picture Here

choose the way that we want to show

the row views and how to scroll the list What’s new?
 Project Implementation
1) Add the RV widget to your Layout

2) Obtain a handle to the object

3) Create a DataModel & an XML representation

4) Connect the RV object to a layout manager

5) Create an Adapter

6) Attach the RV to the Adapter

 RecyclerView Widget
1&2-Add the RV widget to your Layout & Obtain a handle to the object
Add the v7 Support Libraries to your project

Layout Source Code

<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/recycler_view"
>

Obtain a handle to the object

RecyclerView recyclerView = findViewById(R.id.recycler_view);
Data Model
3- Create a DataModel
What’s on one Row ?
public class Contact {

//Attributes
Name private String Name, Phone;

//Constructor
Phone Number public Contact(String n, String p)
{
this.Name = n;
this.Phone = p;
}

//Getters
public String getName() {
return Name;
}
public String getPhone() {
return Phone;
}
}
XML Representation
3- Create a DataModel & XML representation
What’s on one Row ?
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
TextView …
Id=name >
<TextView
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
TextView android:layout_alignParentTop="true"
android:textColor="@color/title"
Id=phone android:textSize="16dp"
android:textStyle="bold" />
my_row.xml
<TextView
android:id="@+id/phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/name" />
</RelativeLayout>
 The Layout Manager
4- Connect the RV object to a layout manager
Serves to Measuring and positioning item views within a RecyclerView in the chosen
way

Vertical
Grid

Arrangment
Staggered
Horizontal
 LinearLayoutManager
4- Connect the RV object to a layout manager

public LinearLayoutManager (Context context, int orientation, boolean reverseLayout)

RecyclerView rv;
rv =findViewById(R.id.recycler_view);
LinearLayoutManager LM = new LinearLayoutManager(this,
LinearLayoutManager.HORIZONTAL, false);
rv.setLayoutManager(LM);

VERTICAL
LinearLayoutManager
Vertical & Horizontal

VERTICAL HORIZONTAL
Click to Click to
see the see the
video video
 GridLayoutManager
4- Connect the RV object to a layout manager
GridLayoutManager (Context context, int spanCount)
//By default, each item occupies 1 span

GridLayoutManager layoutManager=
new GridLayoutManager(this,2);

recyclerView.setLayoutManager(layoutManager);
 GridLayoutManager
4- Connect the RV object to a layout manager
GridLayoutManager (Context context, int spanCount)
//By default, each item occupies 1 span

GridLayoutManager layoutManager=
new GridLayoutManager(this,3);

recyclerView.setLayoutManager(layoutManager);
 StaggeredGridLayoutManager
4- Connect the RV object to a layout manager

lays out children in a staggered grid formation

StaggeredGridLayoutManager(int spanCount, int orientation);

StaggeredGridLayoutManager staggeredGridLayoutManager =
new StaggeredGridLayoutManager(3, LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(staggeredGridLayoutManager);
 StaggeredGridLayoutManager
HORIZONTAL VERTICAL

me
l
p
Exa
 Adapter & View Holder
5-Create an Adapter

ViewHolder

Views in the list are represented by

View Holder objects
ViewHolder

These objects are instances of a class to define

by extending RecyclerView.ViewHolder.
public class Adapter extends
RecyclerView.Adapter<Adapter.MyViewHolder>
{

//Adapter Implementation

}
public class Adapter extends RecyclerView.Adapter<Adapter.MyViewHolder> {

private List<Contact> myList;

public Adapter(List<Contact> myList) {

}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

public class MyViewHolder extends RecyclerView.ViewHolder {

public MyViewHolder(View view) {

}
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {

}
@Override
public int getItemCount() {

}
}
public class Adapter extends RecyclerView.Adapter<Adapter.MyViewHolder> {

private List<Contact> myList; Data

public Adapter(List<Contact> x) {

this.myList = x;

}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

}
public class MyViewHolder extends RecyclerView.ViewHolder {
public MyViewHolder(View view) {

}
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
}
@Override
public int getItemCount() {
}
}
public class Adapter extends RecyclerView.Adapter<Adapter.MyViewHolder> {

private List<Contact> myList;

public Adapter(List<Contact> x) {
//constructor
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.my_row, parent, false);

return new MyViewHolder(v);

Creates a new ViewHolder

object whenever the
}
public class MyViewHolder extends RecyclerView.ViewHolder { RecyclerView needs a new
public MyViewHolder(View view) {
one.
} This is the moment when the
}
row layout is inflated, passed
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
to the ViewHolder object and
} each child view can be found
@Override
public int getItemCount() { and stored.
}
}
the ViewHolder prevents
unnecessary findViewById() c
public class Adapter extends RecyclerView.Adapter<Adapter.MyViewHolder> {

private List<Contact> myList;

public Adapter(List<Contact> x) {
//constructor
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

//Inflate the view & create viewholder

}
public class MyViewHolder extends RecyclerView.ViewHolder {
public TextView n, p;

public MyViewHolder(View view) {

super(view);
Handle view objects
n= view.findViewById(R.id.name);
p= view.findViewById(R.id.phone);
}
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
}
@Override
public int getItemCount() {
}
}
public class Adapter extends RecyclerView.Adapter<Adapter.MyViewHolder> {

private List<Contact> myList;

public Adapter(List<Contact> x) {
//constructor
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//Inflate the view & create viewholder
}
public class MyViewHolder extends RecyclerView.ViewHolder {
public MyViewHolder(View view) {
//findVueById
} Takes the ViewHolder object
}
@Override and sets the proper list data
public void onBindViewHolder(MyViewHolder holder, int position) { for the particular row on the
Studiant s= myList.get(position); views inside.
holder.n.setText(s.getName());
holder.p.setText(s.getPhone());

}
@Override
public int getItemCount() {
}
}
public class Adapter extends RecyclerView.Adapter<Adapter.MyViewHolder> {

private List<Contact> myList;

public Adapter(List<Contact> x) {
//constructor
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

//Inflate the view & create viewholder

}
public class MyViewHolder extends RecyclerView.ViewHolder {
public MyViewHolder(View view) {
//findVueById
}
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
//fill ViewHolder with data
}
@Override Returns the total number of the list size
public int getItemCount() { The list values are passed
return myList.size(); by the constructor
}
}
onCreateViewHolder()
method is called and
the ViewHolder
objects are created
for a couple of first
views and then the
created ones are Click here to see the video
being reused,
while the adapter is
just binding the data
with
onBindViewHolder()
method.
 Main Activity
public class MainActivity extends AppCompatActivity {
private List<Contact> stList = new ArrayList<>(); private
RecyclerView recyclerView;
private Adapter myAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
LinearLayoutManager LM = new LinearLayoutManager(this,
LinearLayoutManager.HORIZONTAL, false);
recyclerView.setLayoutManager(LM);
Studiant s= new Studiant("Walt Disney", "123456");
stList.add(s);
s = new Studiant("Bill Gates", "789456");
stList.add(s);
mAdapter = new Adapter(stList);
recyclerView.setAdapter(mAdapter);
Everyone can have a new
beginning.
That’s why we have
tomorrow’s.

-A D. Williams-