Mobile Application

Development
Instructor:
Muhammad Jameel
Lecturer
[email protected]
List View
 What is the List View?
• You have very small device, which is your mobile device
and you want to display a large amount of information.
• For example say, 100 contacts on your phone, now
there are two approaches you can load everything on
your phone, and then expect that user will see
everything.
• In the second approach you can load the data partially,
both have disadvantages.
• If you load everything, it is going to take a lot of
resources, and if you are displaying partially then you
have to manage, how much data exactly you have to
display on screen.
 What is the List View?
• List view takes care of data management for android
applications.
• List view also avoid the need of paging like the web applications.
Example: Facebook view (List view)
Youtube view(Grid view)
 Displaying large and complex amount of data

• When you have large amount of information, view alone

is not enough for cover how the data will be displayed.
• You also need something called a model, and that’s why
you have something called an adapter.
• An adapter is a class or you can say series of classes,
that are responsible for managing, fetch to data, and
how to create simple view out of that data.
• Then you something called adapter view, it is
responsible for how the data should be presented to
the user.
 Working of List View
• You have data source, which can be an array inside your java
program or it can be database through your cursor.
• This data is fetched by something called list adapter, for each
element it fetches, it creates a simple view out of that data, it
creates a very simple view like a text view or an image view.
• Now this list adapter is actually is an interface, there are many
sub-classes, that provide the implementations.
• For example, array adapter, fetches the data from a string array,
simple cursor adapter fetches the data from a database, base
adapter allows you to customize how to fetch data and how to
display that as a view.
 Working of List View
• Now this single view replicated entirely inside your
view adapter which is list view in our case.
• This is how the list view works in android.
 How to make a simple list view
• Step 1: Define the array or data source.
• Step 2: Define how data will be converted to a simple view using
a list adapter.
• Step 3: Define what happens after the list view will be created
and user interacts with a row in list view.
 How to make a simple list view
• There are two ways to implement the list view, one you can have
list view like any other view and second way is you can actually
extends a class list view.
• So in first we are going to implement list view by using simple
activity.
 Implementing it inside the Android Studio
Step 1: Add a list view in your layout file.
• After you will add the list view there will be some dummy text
shown in the list view.
• But if you go inside the code file there will be nothing but id,
width, height and stuff like that.
Step 2: Put the list view inside the java. For that open the main
activity java file and create a reference to list view.
Step 3: Bring that list view from XML file to Java file. To bring the
list view from XML to Java, we will use find view by id method,
which always help to bring XML object to Java file.
Step 4: Define the data source. Here in our case I am going to
create a simple array to define data.
• Step 5: Now time to actually create an adapter. As you already
know list view is made up of two parts, one part is responsible
for taking the data from the data source, the second part is
actually responsible for displaying the data.
• In our case list view is responsible for taking the data, but there
is an adapter that are responsible for taking data source values
and converting them into a simple view.
• I have an array data source, so I am going to create an array
adapter. An array adapter that will use the data of the type
string.
• There are three parameters, you have to give to an array
adapter.
• First is Context itself, for which you can simple use this
keyword.
• The second one is for define how a single row should appear
inside your list view.
• Here you can have two option, either you can define your
own layout and say that this is the appearance of a single
row or you can use predefined layouts android has already
provided.
• Third parameter is simply the data which is days in our case.
• Step 6: Now time to set the adapter by using set adapter method. It
tells who is responsible for fetching the data, in our case it is adapter.
• Step 7: In this step, I am going to implement event handling
mechanism. For which I am going to implement “On Item Click
Listener” interface and then its method set on item click listener
will be use to put the required functionality inside it.
• On item click method, it takes many parameters, in our simple list
view case, there are four parameters.
• First parameter is the list view, second parameter is the row
which was clicked, in our case remember each row is a text view,
which means it actually contain reference to text view, which was
clicked by user.
• The next parameter is int, which is nothing but position, which
represents the row number in list view, and last long is nothing
but an id of text view that was generated by the system.
• In my case inside the on item click method, I simply convert the
View into text view object and then use get text method inside
simple toast to display that text
 List Activity
• It is specialized version of an activity, that be default associate
itself with list view in XML.
• In the simple activity you implement the list view inside the XML
file and then link you list view in list activity object in Java file,
then you use to have a listener that response when a row list is
clicked.
• In the list activity a lots of things are simplified for you.
• But it is recommended not to use list activity because it is not
good for reusability, you can’t extend this class to support your
own functionality.
• The best part about the list activity is you don’t have to define
the event listeners for it.
 Steps
• Step 1: Define the List Activity.
• Step 2: Get the reference to list View in the code and assign ID
value to list view inside the XML file.
• Step 3: Override the on List Item Click method.
• Step 1: Define data source.
• Step 2: Extends the List Activity Class
• Step 3: Put the list view inside the XML file.
• The one thing you might have noticed, you can’t give your own id in
the case of list activity.
• You have to give @android:id/list as id to your list view when you are
using the list view, that’s how things works in this case.
• Step 4: Get a reference to list view.
• Step 5: Now bring the list view from XML to Java file, here you don’t
have to call Find view by id method, just use get list view method to
bring the required list view inside the Java file. It will automatically
call the list view in XML inside Java file.
• Step 5: Just like as we did in Simple Activity, define adapter here same
as we did in Simple activity example.
• Step 6: Set the adapter for the list view.
• Step 7: For events, we don’t have to implement Listeners here, just
use the On List Item Click and you are done with on click event.
• This method has same kind of parameters as on Item click listener
had.
List View with Icons
 What is the Array Adapter?
• By default, array adapter assumes that single row is represented
by a text view. This is the default behavior.
• Give it the context, which is an object that has reference to all
the resources.
• Give it appearance for single row or child view.
• Give it data source.
 How to display icons in List View?
• Step 1: Define single row appearance in separate resource file.
It can be [Image View + Text View].
• Step 2: Define the adapter that use that layout file and also
define the data source.
• Step 3: Define what will happen once the list view is clicked.
 What do you tell to Array Adapter?
Here we will use, four parameters in array adapter
constructor.
1. The context.
2. Layout file for single row.
3. ID of the Text View where data is to be displayed.
4. Data which is going to be displayed in the List View.
 Example
Step 1: After the creating the project go to res > layout > main
activity XML file and add a List View inside it.
• Step 2: Create another layout file, which is going to only define how a
single row appears. In my case, I have an icon and with it some day
name written alongside it. So that is an image view and text view.
Step 3: Now open the main activity java file and define
the data source.
Step 4: Now get a reference to list view from XML file inside the
Java code and bring it inside the java code by using find view by id
method.
Step 5: Now it is the most important part of the view, define the adapter
for your data. In my case as array is my data source so I am going to
create an array adapter.
• As you have noticed in previous screen shot, now I have used
four parameters, but when I was creating simple list view, I only
used three parameters.
• Difference is now we have to tell the adapter that which is our
customized row where we are going to represent our data.
• First parameter is same as previous which is context and is
represented by this keyword.
• In the second parameter, we have tell the adapter about our
customized row, which in my case I have created in separate
layout resource file singlerow.xml.
• Forth parameter is id of text view where I am going to put the
data from my data source.
• And at the last is object of data source of data that will be used
in list view.
• Step 6: This is last step for this application, in this I am just
setting the adding the adapter for adapter view which is list
view in our case and then I am going to implement On item click
listener interface to show the toast whenever the any item in list
view clicked.
Output
 List View with [Images + Titles + Descriptions]

• Step 1: Prepare the data source [ Images + Titles + Descriptions

]
• Step 2: Define the Appearance of single row in XML, as you
know a single row inside the list view can contain number of
other views, so here you have to define the appearance of single
row that will be appeared inside the list view.
• Step 3: Create a custom adapter that maps the data from the
data source to single row.
• Step 4: Decide what will happen when the user will click on an
item of list view.
 Step 1: Prepare the data sources.
• In this example I am going to need images, titles, and
descriptions.
• I can place titles, and descriptions inside the string.xml file by
using the string-array attribute.
• In the same I can place the images inside the draw-able folder.
 Step 2: Define the appearance of single row.

So I am going to create a structure like this in the XML

file.
 Step 3: Create custom adapter
• This custom adapter is going to be responsible for taking the
data from those places which I will define, and putting that
inside the appearance of single row.
• Step 1: Create class that extends array adapter class.
• Step 2: Calls a constructor that over ride one of predefined
super class constructors.
• Step 3: Override the get View method. This method is
responsible for taking the data and putting that inside the
appropriate views for creating a single row.
 Constructor that we are going to override.

ArrayAdapter ( Context context, int resource, int textViewResourceId, String [] objects)

• Here, context is current context.
• int resource, is the id of the layout file inside which
appearance of single row is defined.
• int textViewResourceId, is the id of the text view, inside
which I am going to put the data, contained by the
string array.
 Step 1: Setting up data
Open the res > values > string.xml and create two different arrays for holding
the titles and descriptions data.
• For images, you can copy ten different kind of images for image
view but here in this project I am going to use the launcher icon
image.
• Step 2: In the second step I am going to get the data resource values inside
the main activity java file. For that purpose I am going to create two arrays.
• One for holding the titles and other for descriptions.
• The next step is to bring title and description values inside the Java Main
Activity file by using the get Resources method.
Step 3: Now I am going to get the images inside the Main Activity
Java file.
• With this step data part of the application is done.
Step 4: In this step, I am going to create an appearance for single row.
Go to res > layout > and create a new resource file with any name. In my case I
am going to give it the name single_row.xml.
• Step 5: Open the Activity Main XML file and put the list view
inside the XML file and bring the list view inside the java main
activity file.
• Step 6: Create a custom adaptor, for which create a user define
class, which will extends the Array Adaptor class and will
override the constructor that I have explained earlier.
• After creating the class, first step is to override one of standard
Array Adapter class constructor.
• This constructor takes four parameters, as I have discussed
earlier, it is going to be the same constructor, which I will
override here.
• Step 7: In this step, I am going to get the single row structure
from the single_row.xml file.
• Remember at first, this single row structure is not active, it will
be activated at run time by the list view by the appropriate data.
• Actually this activation is done by get View method. So in this
step we are going to override this method.
• Each time this method is called a row will be created and
displayed to the user.
• Single_row structure is an XML description file, which needs to
be converted in Java object, for that purpose I am going to user
the inflator class.
• Actually this row is the root element of single_row.xml which is in my
case is relative layout and with the help of this root element we can
find the view within that xml file.
• Step 8: In this step, I am going to find views inside the single_row.xml
file with the help of row view object.
• Step 9: In this step, I am going to set the resources for every views of the row
structure that will be displayed inside the list view.
• Step 10: Now open the on Create method inside Main Activity Java
file and create a reference to customize adapter.
• After initializing the customized adapter, set the adapter for the list
view.
• Step 11: Now go to MyAdapter class > getView method and return
that view which represents the root of single_row.xml which in our
case is row View, which we created by using inflator method.
• So that list view can construct each view with it.
List View with BaseAdapter
Steps to create List View
• Step 1: Prepare the data source.
• Step 2: Define the appearance of single row in XML.
• Step 3: Create a Custom Adapter that maps data from the data source
to single row.
• Step 4: Decide what will happen when user will click on an item on a
single row.
Step 1: Prepare the data source.
• Data source include images, Titles, and Descriptions,
• Descriptions can be stored in string.xml file inside the string-array tag.
• Images can be place inside the draw-able folder of resources folder.
• Similarly titles can also be saved inside string.xml file inside the string-
array tag.
Step 2: Define the appearance of
single row
Working of list view with base
adapter.
How to create Custom Adapter
• Step 1: Create a class that extends base adapter.
• Step 2: Implement all the methods that you need to override.
• Step 3: Use the getView method to map the data from the data
source to the views of singleRow.xml.
Assignment Reference Link
https://abhiandroid.com/ui/listview
https://www.javatpoint.com/android-listview-example