Android Custom ListView (Image & Text)
For adding content from data source, custom ListView uses Adapter class. (Adapter class basically use for making bridge between UI component and data source)..
Example:
1. activity_main.xml file
<?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"
tools:context=".MainActivity">
<ListView
android:id="@+id/lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp"
android:layout_alignParentLeft="true" />
</RelativeLayout>
2. my_list.xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="horizontal">
<ImageView
android:id="@+id/imageView"
android:layout_width="75dp"
android:layout_height="75dp"
tools:srcCompat="@tools:sample/avatars" />
<TextView
android:id="@+id/t1"
android:layout_width="334dp"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="This is sample list"
android:textSize="20dp" />
</LinearLayout>
3. MainActivity.java file
package com.example.customlist;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
ListView l;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
l =(ListView)findViewById(R.id.lv);
adapter ad = new adapter(this);
l.setAdapter(ad);
l.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
if(position == 0) {
//code specific to first list item
Toast.makeText(getApplicationContext(),"Animal Clicked",Toast.LENGTH_SHORT).show();
}
else if(position == 1) {
//code specific to 2nd list item
Toast.makeText(getApplicationContext(),"Bird Clicked",Toast.LENGTH_SHORT).show();
}
else if(position == 2) {
Toast.makeText(getApplicationContext(),"Car Clicked",Toast.LENGTH_SHORT).show();
}
else if(position == 3) {
Toast.makeText(getApplicationContext(),"Fruit Clicked",Toast.LENGTH_SHORT).show();
}
else if(position == 4) {
Toast.makeText(getApplicationContext(),"Flower Clicked",Toast.LENGTH_SHORT).show();
}
else if(position == 5) {
Toast.makeText(getApplicationContext(),"Vegetable clicked",Toast.LENGTH_SHORT).show();
}
}
});
}
}
4. adapter.java file
package com.example.customlist;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
public class adapter extends BaseAdapter {
Context c;
int image[]={R.drawable.a1,R.drawable.b1,R.drawable.c1,R.drawable.f4,R.drawable.fl1,R.drawable.v3};
String data[]={"Animal","Bird","Car","Fruit","Flower","Vegetable"};
adapter(Context c){
this.c=c;
}
@Override
public int getCount() {
return image.length;
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater li =(LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView= li.inflate(R.layout.my_list,null);
ImageView iv =convertView.findViewById(R.id.imageView);
TextView t =convertView.findViewById(R.id.t1);
t.setText(data[position]);
iv.setImageResource(image[position]);
return convertView;
}
}