[et_pb_section admin_label=”section”][et_pb_row admin_label=”row”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]
Android custom listview :
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.
[/et_pb_text][et_pb_video admin_label=”Video” src=”https://www.youtube.com/watch?v=N7agvKDjf7M”] [/et_pb_video][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#000000″ border_style=”solid” custom_padding=”15px|15px|15px|15px”]
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;
}
}
[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#000000″ border_style=”solid” custom_padding=”15px|15px|15px|15px”]
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>
[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#000000″ border_style=”solid” custom_padding=”15px|15px|15px|15px”]
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>
[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#000000″ border_style=”solid” custom_padding=”15px|15px|15px|15px”]
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>
[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]
Output:
The screen depicts the usage of android custom listview implementation.
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.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
