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:
[Link](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
[Link](savedInstanceState);
TextView
setContentView([Link].activity_main);
maliste=findViewById([Link]);
ArrayAdapter a= new
ArrayAdapter(this,[Link].simple_list_item_1, tab);
[Link](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
<[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/recycler_view"
>
Obtain a handle to the object
RecyclerView recyclerView = findViewById([Link].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)
{
[Link] = n;
[Link] = 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="[Link]
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([Link].recycler_view);
LinearLayoutManager LM = new LinearLayoutManager(this,
[Link], false);
[Link](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);
[Link](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);
[Link](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, [Link]);
[Link](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 [Link].
public class Adapter extends
[Link]<[Link]>
{
//Adapter Implementation
}
public class Adapter extends [Link]<[Link]> {
private List<Contact> myList;
public Adapter(List<Contact> myList) {
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
public class MyViewHolder extends [Link] {
public MyViewHolder(View view) {
}
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
}
@Override
public int getItemCount() {
}
}
public class Adapter extends [Link]<[Link]> {
private List<Contact> myList; Data
public Adapter(List<Contact> x) {
[Link] = x;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
}
public class MyViewHolder extends [Link] {
public MyViewHolder(View view) {
}
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
}
@Override
public int getItemCount() {
}
}
public class Adapter extends [Link]<[Link]> {
private List<Contact> myList;
public Adapter(List<Contact> x) {
//constructor
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v = [Link]([Link]()).inflate([Link].my_row, parent, false);
return new MyViewHolder(v);
Creates a new ViewHolder
object whenever the
}
public class MyViewHolder extends [Link] { 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 [Link]<[Link]> {
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 [Link] {
public TextView n, p;
public MyViewHolder(View view) {
super(view);
Handle view objects
n= [Link]([Link]);
p= [Link]([Link]);
}
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
}
@Override
public int getItemCount() {
}
}
public class Adapter extends [Link]<[Link]> {
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 [Link] {
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= [Link](position); views inside.
[Link]([Link]());
[Link]([Link]());
}
@Override
public int getItemCount() {
}
}
public class Adapter extends [Link]<[Link]> {
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 [Link] {
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 [Link](); 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) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
recyclerView = (RecyclerView) findViewById([Link].recycler_view);
LinearLayoutManager LM = new LinearLayoutManager(this,
[Link], false);
[Link](LM);
Studiant s= new Studiant("Walt Disney", "123456");
[Link](s);
s = new Studiant("Bill Gates", "789456");
[Link](s);
mAdapter = new Adapter(stList);
[Link](mAdapter);
Everyone can have a new
beginning.
That’s why we have
tomorrow’s.
-A D. Williams-
