Android:CustomListView

by Murtaza FarhatYar | 11 Jan 2019

CustomListView or customizing the listView needs in every project in order to create a ListView which content your won custome data, In this article I want to show you how to customize listView  for your won purpose in your project

Please follow the steps below and practice by your self.

  • Create a new java class called CustomAdpater and extends from ArrayAdapter which the type is String(ArrayAdapter<String>)

CustomeAdapter.java

package com.webjow.murtaza.top10fitness;

import android.app.Activity;
import android.content.Context;
import android.support.annotation.NonNull;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by MURTAZA on 2019-01-08.
 */

public class CustomAdappter extends ArrayAdapter<String> {
    private final Activity context;
    private final String[]title;
    private final Integer[] img;

    public CustomAdappter(Activity context, String[] title, Integer[] img) {
        super(context, R.layout.chest_item_layout, maintitle);
        this.context=context;
        this.maintitle=title;
        this.imgid=img;
    }

    @NonNull
    @Override
    public View getView(int position, View convertView,  ViewGroup parent) {

        LayoutInflater inflater=context.getLayoutInflater();
        View view=inflater.inflate(R.layout.chest_item_layout, null,true);

        TextView titleText = (TextView)          rowView.findViewById(R.id.chesttitle);
        ImageView imageView = (ImageView) rowView.findViewById(R.id.chestimage);

        titleText.setText(maintitle[position]);
        imageView.setImageResource(imgid[position]);



        return view;
    }
}

See also:Dynamic ListView – Android

  • Create a new other java class called ReadContactData to add data to listview
  • ReadContactData.java
package com.webjow.murtaza.top10fitness;

import android.app.Activity;
import android.database.Cursor;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
import java.util.ArrayList;

/**
 * Created by MURTAZA on 2019-01-08.
 */

public class ChestReaddata extends Activity {
    ListView list;

    String[] title ={
            "Push Up",
            "Dumbbell Pullover",
            "Decline Bench Press",
            "Incline Bench Press",
    };

    Integer[] img={
            R.drawable.pushup,
            R.drawable.frag,
            R.drawable.roch,
            R.drawable.source,
    };
    @Override
    protected void onCreate( Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chest_listview_layout);

        list = findViewById(R.id.cheslistveiw);

        CustomAdappter adappter = new CustomAdappter(ChestReaddata.this,title,img);
        list.setAdapter(adappter);


        list.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                // TODO Auto-generated method stub
                if(position == 0) {
                    //code specific to first list item
                    Toast.makeText(getApplicationContext(),"Place Your First Option Code",Toast.LENGTH_SHORT).show();
                }

                else if(position == 1) {
                    //code specific to 2nd list item
                    Toast.makeText(getApplicationContext(),"Place Your Second Option Code",Toast.LENGTH_SHORT).show();
                }

                else if(position == 2) {

                    Toast.makeText(getApplicationContext(),"Place Your Third Option Code",Toast.LENGTH_SHORT).show();
                }
                else if(position == 3) {

                    Toast.makeText(getApplicationContext(),"Place Your Forth Option Code",Toast.LENGTH_SHORT).show();
                }
                else if(position == 4) {

                    Toast.makeText(getApplicationContext(),"Place Your Fifth Option Code",Toast.LENGTH_SHORT).show();
                }
            }
        });

    }

}
  • Create an item layout called chest_item_layout.

chest_item_layout.XML

<?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"
    >


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >

        <TextView
            android:id="@+id/chesttitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="47dp"
            android:layout_marginStart="47dp"
            android:layout_toEndOf="@+id/chestimage"
            android:layout_toRightOf="@+id/chestimage"
            android:text="Push Up"
            android:textSize="15sp" />

        <ImageView
            android:id="@+id/chestimage"
            android:layout_width="60sp"
            android:layout_height="60sp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:src="@drawable/pushup" />

    </RelativeLayout>

</LinearLayout>
  • create another Layout called chest_listview_layout

chest_listview_layout.XML

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/white"
    android:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/toolbar"
        android:minHeight="?attr/actionBarSize"
        app:title="Chest Day"
        android:theme="?attr/actionBarTheme" />

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

</LinearLayout>
  • The Manifest class

AndroidManifst.XML

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.webjow.murtaza.top10fitness">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity
            android:name=".MainActivity"
            android:hardwareAccelerated="false"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

The output will be: