Hey friends, in this post we will make an app using ListView .
When the app starts, a list displays the names of different animals. And whenever the name of the animal is clicked, its image is displayed in another activity.
1.Add Images in the res/drawable folder
You can download the images from google or by this link.
2. Create a Class to store the names and images on Animals
We will add a new class named as Animals where all the information (names and image id of animals) would be stored.
This class is created to separate the information from the activities. Objects of this class would be used in the Activities.
Let’s say the name of this class in Animals.java.
In this Activity, we will create two variable as Name and imageResourceId.
Make constructor of Animals class
Set getters
Remember to create the toString method as it will be used by the ArrayAdapter in the MainActivity to display the Name variable of the animal object.
The code of the Animals.java class is :-
package com.abhi.listview.listviewtutorial; /** * Created by abhi on 2/1/2016. */ public class Animals { private String Name; private int imageResourceID; //for image //constructor private Animals(String Name,int imageResourceID) { this.Name=Name; this.imageResourceID=imageResourceID; } //getters public String getName() { return Name; } public String toString() { return Name; } public int getImageResourceID() { return imageResourceID; } // creating objects of the class public static final Animals[] animals= {new Animals("Dog",R.drawable.dog), new Animals("Cat",R.drawable.cat), new Animals("Cow",R.drawable.cow)}; }
3. Create textView and ListView in the content_main.xml
The content_main.xml code would be as follows. Make sure to ID the ListView as it would be recalled in the MainActivity.java
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.abhi.listview.listviewtutorial.MainActivity" tools:showIn="@layout/activity_main"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Animals" android:id="@+id/textView" android:textSize="@android:dimen/app_icon_size" android:textColor="@android:color/holo_blue_dark" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> <ListView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/listView" android:layout_below="@+id/textView" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> </RelativeLayout>
4. Add the code in the MainActivity.java to display the listview
To display the Animal’s name in the listview, add the following code to the Main Activity.java
ArrayAdapter is used here as it is used to bind the arrays to the views. It acts like a bridge between them. It can be used with any subclass of the AdapterView , can be ListView or Spinner.
Animals is the java class we created in the beginning and animals is its object.
Make sure to use setAdapter as it is used to attach the ArrayAdapter to the listView.
ListView lv= (ListView) findViewById(R.id.listView);
ArrayAdapter<Animals> animalsArrayAdapter= new ArrayAdapter<Animals>(this, android.R.layout.simple_list_item_1,Animals.animals);
lv.setAdapter(animalsArrayAdapter);
If you will Run you app now, you will see the name of the Animals displayed in a listview.
5. Adding Clicks in the App for the listview
To create any action on clicks for the listview, we need to use OnItemClickListener and its onItemClick method.
When the name of the animal i.e the item in the listview would be clicked, onItemClick would start an Intent for another activity. Let’s call that activity as SecondActivity.java .
Add the following code in the onCreate method in MainActivity.java to add clicks.
Here we are using putExtra method to send the value “id” which will tell us that which item was clicked. This value is being sent to the SecondActivity by the name “ImageID”
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i= new Intent(MainActivity.this,SecondActivity.class); i.putExtra("ImageId",id); startActivity(i); } });
6. Create SecondActivity.java
Now if you will play the app, on clicking any animal name in the listview. you will be directed to an to SecondActivity which will show nothing at the moment.
Now to add the Image to the Second Activity’s layout. We need to have an ImageView in the content_second.xml.
Here is the code of content_second.xml.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.abhi.listview.listviewtutorial.SecondActivity" tools:showIn="@layout/activity_second"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> </RelativeLayout>
Add this code to the SecondActivity.java in the onCreate Method
Intent i=getIntent();
int imageID= (int) i.getLongExtra("ImageId", 0);
Animals animals= Animals.animals[imageID];
ImageView imageView= (ImageView) findViewById(R.id.imageView);
imageView.setImageResource(animals.getImageResourceID());
Here the “ImageId” is recovered back and used to get the Animal object from the array.
and then Image is shown in the imageView using setImageResource method.
Now run the app and you will see the desired output.
DOWNLOAD COMPLETE PROJECT
Hope you like this tutorial and get a good understanding about ListView.
.
Techwithabhi 