Post
Ask Question

Create Custom List View In Your Android Application

Introduction

 
Android is one of the most popular operating systems for the mobile. The maximum number of Applications contains the Custom List View module. It shows our information or the data with the images in the ListView. I will show you how to create Custom ListView in an Android Application, using Android Studio. Android is the kernel-based operating system. It allows the user to modify the GUI components and the source code.
 
Requirements
Steps to be followed are given below
 
Follow the steps given below to create Custom ListView in your Android Application, using an Android Studio. 
 
Step 1
 
Open Android Studio and start the new project.
 
Android
 
Step 2
 
Put the Application name and the company domain. If you wish to use C++ to code the project, include C++ support, followed by clicking Next.
 
Android
 
Step 3
 
Select the Android minimum SDK. Afterward, you need to choose the minimum SDK. It will show an approximate percentage of the people using the SDK, followed by clicking Next.
 
Android
 
Step 4
 
Choose the basic activity, followed by clicking Next.
 
Android
 
Step 5
 
Put the activity name and the layout name. Android Studio basically takes the Java class name, which you provided in the activity name and click Finish.
 
Android
 
Step 6
 
First, you need to design the Application. Thus, go to activity_main.xml, followed by clicking the text bottom. This XML file contains designing the code for an Android app. In the activity_main.xml, copy and paste the code given below.
 
Activity_main.xml code
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"  
  3.     android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"  
  4.     android:paddingRight="@dimen/activity_horizontal_margin"  
  5.     android:orientation="vertical"  
  6.     android:paddingTop="@dimen/activity_vertical_margin"  
  7.     android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">  
  8.   
  9.     <ListView  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="wrap_content"  
  12.         android:id="@+id/listView" />  
  13.   
  14. </LinearLayout>  
The code given above is to create the ListView in Activity_main.xml page.
 
Android
 
Step 7
 
Create a new list_layout.xml file (File ⇒ New ⇒Activity⇒Empty_activity).
 
Go to list_layout.xml, followed by clicking the text bottom. This XML file contains the designing code for an Android app. In the list_layout.xml, copy and paste the code given below.
 
list_layout.xml code
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.   
  7.     <ImageView  
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:layout_rowSpan="2"  
  11.         android:id="@+id/imageView"  
  12.         android:layout_row="0"  
  13.         android:layout_column="0" />  
  14.   
  15.     <TextView  
  16.         android:layout_width="wrap_content"  
  17.         android:layout_height="wrap_content"  
  18.         android:text="New Text"  
  19.         android:layout_columnWeight="1"  
  20.         android:id="@+id/textViewName"  
  21.         android:layout_row="0"  
  22.         android:layout_column="1" />  
  23.   
  24.   
  25.     <TextView  
  26.         android:layout_width="wrap_content"  
  27.         android:layout_height="wrap_content"  
  28.         android:text="New Text"  
  29.         android:layout_columnWeight="1"  
  30.         android:id="@+id/textViewDesc"  
  31.         android:layout_row="1"  
  32.         android:layout_column="1" />  
  33.   
  34.   
  35. </GridLayout>  
The code given above is used to assign List View text messages and the images. Add your images into the drawable folder.
 
Android
 
Step 8
 
In MainActivity.java, copy and paste the code given below. Java programming is the backend language for Android. Do not replace your package name, else an app will not run.
 
MainActivity.java code
  1. package ganeshannt.customlistviewsample;    
  2. import android.os.Bundle;    
  3. import android.support.v7.app.AppCompatActivity;    
  4. import android.view.Menu;    
  5. import android.view.MenuItem;    
  6. import android.view.View;    
  7. import android.widget.AdapterView;    
  8. import android.widget.ListView;    
  9. import android.widget.Toast;    
  10.     
  11.     
  12. public class MainActivity extends AppCompatActivity {    
  13.     
  14.     private ListView listView;    
  15.     private String names[] = {    
  16.             "HTML",    
  17.             "CSS",    
  18.             "Java Script",    
  19.             "Wordpress"    
  20.     };    
  21.     
  22.     private String desc[] = {    
  23.             "The Powerful Hypter Text Markup Language 5",    
  24.             "Cascading Style Sheets",    
  25.             "Code with Java Script",    
  26.             "Manage your content with Wordpress"    
  27.     };    
  28.     
  29.     
  30.     private Integer imageid[] = {    
  31.             R.drawable.html,    
  32.             R.drawable.css,    
  33.             R.drawable.js,    
  34.             R.drawable.wp    
  35.     };    
  36.     
  37.     
  38.     @Override    
  39.     protected void onCreate(Bundle savedInstanceState) {    
  40.         super.onCreate(savedInstanceState);    
  41.         setContentView(R.layout.activity_main);    
  42.     
  43.         CustomList customList = new CustomList(this, names, desc, imageid);    
  44.     
  45.         listView = (ListView) findViewById(R.id.listView);    
  46.         listView.setAdapter(customList);    
  47.     
  48.         listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {    
  49.             @Override    
  50.             public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {    
  51.                 Toast.makeText(getApplicationContext(),"You Clicked "+names[i],Toast.LENGTH_SHORT).show();    
  52.             }    
  53.         });    
  54.     }    
  55.     
  56.     @Override    
  57.     public boolean onCreateOptionsMenu(Menu menu) {    
  58.         // Inflate the menu; this adds items to the action bar if it is present.    
  59.         getMenuInflater().inflate(R.menu.menu_main, menu);    
  60.         return true;    
  61.     }    
  62.     
  63.     @Override    
  64.     public boolean onOptionsItemSelected(MenuItem item) {    
  65.         // Handle action bar item clicks here. The action bar will    
  66.         // automatically handle clicks on the Home/Up button, so long    
  67.         // as you specify a parent activity in AndroidManifest.xml.    
  68.         int id = item.getItemId();    
  69.     
  70.         //noinspection SimplifiableIfStatement    
  71.         if (id == R.id.action_settings) {    
  72.             return true;    
  73.         }    
  74.     
  75.         return super.onOptionsItemSelected(item);    
  76.     }    
  77. }   
Step 9
 
Create a new CustomList.java file (File ⇒ New ⇒Java class).
 
In the CustomList.java, copy and paste the code given below. Java programming is the backend language for Android. Do not replace your package name, else an app will not run.
 
CustomList.java code
  1. package ganeshannt.customlistviewsample;    
  2.     
  3. import android.app.Activity;    
  4. import android.view.LayoutInflater;    
  5. import android.view.View;    
  6. import android.view.ViewGroup;    
  7. import android.widget.ArrayAdapter;    
  8. import android.widget.ImageView;    
  9. import android.widget.TextView;    
  10.     
  11. public class CustomList extends ArrayAdapter<String> {    
  12.     private String[] names;    
  13.     private String[] desc;    
  14.     private Integer[] imageid;    
  15.     private Activity context;    
  16.     
  17.     public CustomList(Activity context, String[] names, String[] desc, Integer[] imageid) {    
  18.         super(context, R.layout.list_layout, names);    
  19.         this.context = context;    
  20.         this.names = names;    
  21.         this.desc = desc;    
  22.         this.imageid = imageid;    
  23.     
  24.     }    
  25.     
  26.     @Override    
  27.     public View getView(int position, View convertView, ViewGroup parent) {    
  28.         LayoutInflater inflater = context.getLayoutInflater();    
  29.         View listViewItem = inflater.inflate(R.layout.list_layout, null, true);    
  30.         TextView textViewName = (TextView) listViewItem.findViewById(R.id.textViewName);    
  31.         TextView textViewDesc = (TextView) listViewItem.findViewById(R.id.textViewDesc);    
  32.         ImageView image = (ImageView) listViewItem.findViewById(R.id.imageView);    
  33.     
  34.         textViewName.setText(names[position]);    
  35.         textViewDesc.setText(desc[position]);    
  36.         image.setImageResource(imageid[position]);    
  37.         return  listViewItem;    
  38.     }    
  39. }   
Step 10
 
In Strings.xml, add the code given below. In this string, provide the app settings bar.
 
Strings.xml code
  1. <resources>  
  2.     <string name="app_name">CustomListViewSample</string>  
  3.     <string name="hello_world">Hello world!</string>  
  4.     <string name="action_settings">Settings</string>  
  5. </resources>  
Step 11
 
Create a new dimens.xml file into the values folder (File ⇒ New ⇒Activity⇒values resource file).
 
Go to dimens.xml, followed by clicking the text bottom. This XML file contains the designing code for an Android app. In the dimens.xml, copy and paste the code given below.
 
dimens.xml code
  1. <resources>  
  2.     <!-- Default screen margins, per the Android Design guidelines. -->  
  3.     <dimen name="activity_horizontal_margin">16dp</dimen>  
  4.     <dimen name="activity_vertical_margin">16dp</dimen>  
  5. </resources>  
Step 12
 
Create the menu folder into the resource folder.
 
Create a new menu_main.xml file into the values folder (File ⇒ New ⇒Activity⇒values resource file).
 
Go to menu_main.xml, followed by clicking the text bottom. This XML file contains the designing code for an android app. In the menu_main.xml, copy and paste the code given below.
 
menu_main.xml
  1. <menu xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  3.     xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">  
  4.     <item android:id="@+id/action_settings" android:title="@string/action_settings"  
  5.         android:orderInCategory="100" app:showAsAction="never" />  
  6. </menu>  
The code given above provides the settings functionality to our Application.
 
Android
 
Step 13
 
This is our user interface of the Application. Click Make project option.
 
Android
 
Step 14
 
Run the Application, followed by choosing the virtual machine. Click OK.
 
Android
 
Deliverables
 
Here, we successfully created Custom ListView in an Android Application and is executed.
 
Android
 
If you click any one of the ListView, I will show you the toast notification in the Application given below.
 
Android
 
If you have any doubts, just comment below.


Similar Articles