Custom ListView

Custom ListView Using Base Adapter in Android:

In this tutorial we will learn to implement the custom listview using BaseAdapter using Android Studio.

Create new project and name it as CustomListView.
Create a new layout resource file and name it as list_cell.
Download some images and save it in drawable folder in Android Studio.


  • Create Listview in activity_main.xml
File: activity_main.xml:

<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"    
xmlns:tools="http://schemas.android.com/tools"    
android:layout_width="match_parent"    
android:layout_height="match_parent"    
android:paddingBottom="@dimen/activity_vertical_margin"    
android:paddingLeft="@dimen/activity_horizontal_margin"    
android:paddingRight="@dimen/activity_horizontal_margin"    
android:paddingTop="@dimen/activity_vertical_margin"    
tools:context="com.example.hss_24.customlistview.MainActivity">

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

</RelativeLayout>

  • Create layout list_cell.xml and do the following things.
File: list_cell.xml:

<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="80dp"        
android:orientation="horizontal"        
android:paddingBottom="10dp"        
android:paddingTop="10dp"        
android:weightSum="3">

<ImageView            
android:id="@+id/image"            
android:layout_width="0dp"            
android:layout_height="match_parent"            
android:layout_weight="1" />

<TextView            
android:id="@+id/text"            
android:layout_width="0dp"            
android:layout_height="wrap_content"            
android:layout_gravity="center_vertical"            
android:layout_weight="2"            
android:paddingLeft="10dp"            
android:textColor="#303F9F"            
android:textSize="20sp"            
android:textStyle="bold" />

</LinearLayout>

</LinearLayout>

  • Do the following in MainActivity.java.
File: MainActivity.java:


import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    String [] names = {"Cupcake","Donut","Eclair","Froyo","Ginger Bread","Honeycomb",
            "IceCream Sandwich","Jelly Bean","Kitkat","Lollipop","MarshMallow"};

    int [] images = {R.drawable.cupcake,R.drawable.donut,R.drawable.eclair,R.drawable.froyo,R.drawable.gingerbread,
            R.drawable.honeycomb,R.drawable.icecream_sandwich,R.drawable.jellybean,R.drawable.kitkat,
            R.drawable.lollipop,R.drawable.marsh_mallow};

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

        ListView listView = (ListView)findViewById(R.id.listview);
        listView.setAdapter(new MyAdapter());
    }

    public class MyAdapter extends BaseAdapter{
        public MyAdapter() {
            super();
        }

        @Override        
public int getCount() {
            return names.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 inflater = LayoutInflater.from(MainActivity.this);
            convertView = inflater.inflate(R.layout.list_cell,null);

            ImageView imageView = (ImageView)convertView.findViewById(R.id.image);
            TextView textView = (TextView)convertView.findViewById(R.id.text);

            imageView.setImageResource(images[position]);
            textView.setText(names[position]);
            return convertView;
        }
    }
}


  • Download and paste the images to dwawable folder as shown below.





















  • After completing all the mentioned tasks
  • Now run the Application and enjoy the output.

Output:























Thank you!!!
please like and share..

Comments