Building Interactive ListViews with Custom Layouts in Android

Android custom listview :

Android custom listview example gives you the flexibility in add required elements to your listview. i.e., you can design  listview the way you want.

As every app don’t have same requirements to be displayed in listview so there is a need for customization of the listview according to the data populated.

In general you might have gone through apps like youtube, amazon, flipkart swiggy, zomato and more these apps use listview / gridview using recyclerview which is almost same.

They have there own customizations i..e, the style they follow in populating data may be just a banner image, or title description, or product icon and details so on..

Custom listview gives you the freedom of adding the fields required to your listview and also you can customize the way you want the listview to be displayed in terms of shape and size.

So now let’s get started with android custom listview implementation.

 

Listview :

In this android tutorial i will show you image, name and number of 5 persons as a custom listview. A custom adapter in android is used in this tutorial to get listview.

Listview has several uses which we have seen in different listview tutorials.

In general we use listview to display dynamic data onto the screen instead of using multiple textview’s or any other components.

 

MainActivity.java :

Providing the full code for android custom listview implementation. For efficiency you may use View binding here

public class MainActivity extends Activity {

	ListView listView;
	TextView txtName, txtNumber;
	ArrayAdapter adapter;
	ImageView imageView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		listView = (ListView) findViewById(R.id.listView);

		int[] image = new int[] { R.drawable.one, R.drawable.two,

				R.drawable.three, R.drawable.four, R.drawable.five };

		String[] name = new String[] { "Abhi", "Abhishek", "Abhinav",
				"Ram", "Ramesh" };

		String[] number = new String[] { "9999999999", "8888888888",
				"7777777777", "6666666666","5555555555" };


		listView.setAdapter(new CustomAdapter(this, image,name,number));

		listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView parent, final View view,
					int position, long id) {

			}
		});

	}

	private class CustomAdapter extends BaseAdapter {

		Context context;
	    String[] namedisplay;
	    String[] numberdisplay;
	    int[] images;
	    private  LayoutInflater inflater = null;

	    public CustomAdapter(Context context, int[] image, String[] name, String[] number) {
	        // TODO Auto-generated constructor stub
	        this.context = context;
	        this.namedisplay = name;
	        this.numberdisplay = number;
	        this.images = image;
	        inflater = (LayoutInflater) context
	                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	    }

	    @Override
	    public int getCount() {
	        // TODO Auto-generated method stub
	        return namedisplay.length;
	    }

	    @Override
	    public Object getItem(int position) {
	        // TODO Auto-generated method stub
	        return namedisplay[position];
	    }

	    @Override
	    public long getItemId(int position) {
	        // TODO Auto-generated method stub
	        return position;
	    }

	    @Override
	    public View getView(int position, View convertView, ViewGroup parent) {
	        // TODO Auto-generated method stub
	        View vi = convertView;
	        if (vi == null)
	            vi = inflater.inflate(R.layout.listview_row, null);

	        imageView = (ImageView) vi.findViewById(R.id.imageView);
	        txtName = (TextView) vi.findViewById(R.id.txtName);
	        txtNumber = (TextView) vi.findViewById(R.id.txtNumber);
	        txtName.setText(namedisplay[position]);
	        txtNumber.setText(numberdisplay[position]);
	        imageView.setBackgroundResource(images[position]);
	        return vi;
	    }

}

 

activity_main.xml :

Adding listview and textview to xml file you can customize the screen according to your requirement with images and much more.

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.androidcoding.abhi.custom_listview.MainActivity" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Custom ListView"
        android:layout_marginTop="80dp"
        android:layout_marginBottom="10dp"
        android:layout_gravity="center"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>


Adding textviews and imageview to listview_row.xml

 

listview_row.xml :

This is the screen where you can make the customization’s for the listview i.e., in the shape, size, color and much more.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginTop="10dp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#F2EAEA"
            android:orientation="vertical"
            android:padding="10dp" >

            <TextView
                android:id="@+id/txtName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Large Text"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            <TextView
                android:id="@+id/txtNumber"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="Medium Text"
                android:textAppearance="?android:attr/textAppearanceMedium" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

 

AndroidManifest.xml :

There is no special permissions required for displaying the android custom listview.

 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidcoding.abhi.custom_listview"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="21" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.androidcoding.abhi.custom_listview.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>



Output:

The screen depicts the usage of android custom listview implementation.

android custom listview

 

If you have any query’s in this tutorial on android custom listview do let us know in the comment below

Do like and share this tutorial if you like it for more interesting  tutorials.

 

Show Buttons
Hide Buttons
Read previous post:
Step-by-Step Tutorial: Creating Context Menus in Android

Android context menu : Context menu in android is a type used to open a android popup menu when a Long...

Close