Android - Simple Custom List View With Image

Submitted by razormist on Friday, February 23, 2018 - 21:44.

Operating System

In this tutorial we will create a Simple Custom List View With Image using Android. This simple app display a list with image using custom array. Android is basically a piece of software which allows your hardware to function. It used in several gadget like smartphone, tablet, and even television. The android is an open source operating system it's free and user friendly to mobile developers. So let's now do the coding...

Getting Started:

First you will have to download & install the Android Development IDE (Android Studio or Eclipse). Android Studio is an open source development feel free to develop your things. Here's the link for the Android Studio https://developer.android.com/studio/index.html.

Layout Design

We will now create the design for the application, first locate the layout file called activity_main.xml, this is the default name when create a new activity. Then write these codes inside your layout file.

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.razormist.simplelistviewwithimage.MainActivity">
 
    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/lv_content"/>
 
</RelativeLayout>

Now that we're done with the main layout we will create then a layout that display the value of the list. First right click on resource then create a new layout resource namely laptop_list then write these codes inside your layout 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"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">
 
 
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
 
    <TextView
        android:id="@+id/tv_list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_marginTop="30dp"
        android:fontFamily="monospace" />
 
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right">
 
            <ImageView
                android:id="@+id/iv_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 app:srcCompat="@mipmap/ic_launcher"
            android:padding="3dp"/>
 
        </LinearLayout>
    </LinearLayout>
 
</LinearLayout>

Android Manifest File

The Android Manifest file provides essential information about your app to the Android system in which the system must required before running the code. It describe the overall information about the application. It contains some libraries that needed to access the several method within the app.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.razormist.simplelistviewwithimage">
 
    <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:configChanges="orientation"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Creating the Custom Adapter

This code handle the list of data that will be needed to display. First create a new java file namely ListHandler, then open the newly create file and extend the class by adding extends ArrayAdapter. Next write these variables inside the ListHandler class

String[] name_list;
int[] laptop;
Context context;

After assigning the variables we will now create a certain methods to handle each data that will be listed. To do that write these methods inside the class.

public ListHandler(Context context, String[] name_list, int[] laptop) {
        super(context, R.layout.laptop_list);
        this.name_list = name_list;
        this.laptop = laptop;
        this.context = context;
    }
 
    @Override
    public int getCount() {
        return name_list.length;
    }
 
    @NonNull
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        TagHolder tagHolder = new TagHolder();
        if(convertView == null) {
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.laptop_list, parent, false);
            tagHolder.iv_image = (ImageView) convertView.findViewById(R.id.iv_image);
            tagHolder.tv_list = (TextView) convertView.findViewById(R.id.tv_list);
            convertView.setTag(tagHolder);
        }else{
            tagHolder = (TagHolder)convertView.getTag();
        }
 
        tagHolder.iv_image.setImageResource(laptop[position]);
        tagHolder.tv_list.setText(name_list[position]);
        return convertView;
    }
 
    static class TagHolder{
        ImageView iv_image;
        TextView tv_list;
 
    }

The Main Function

This code contains the main function of the application. This code will automatically call the list method to display it inside the resource layout. To start with first locate your MainActivity java file and open it, then write this variable inside the MainActivity class.

 ListView lv_content;
 
    String[] name_list = {
            "ASUS VivoBook Max X441UR",
            "Acer Aspire One D270-268",
            "Lenovo Ideapad 100S 11",
            "Dell Inspiron 11-3162",
            "HP 11-D002TU",
            "MSI GV62 7RC",
            "Sony Vaio VPCW126AG"
    };
 
    int[] laptop = {
            R.drawable.asus_vivobook_max_x441ur_l,
            R.drawable.acer_aspire_one_d270_268_l,
            R.drawable.dell_inspiron_11_3162_l,
            R.drawable.lenovo_ideapad_100s_11_ph_l,
            R.drawable.hp_11_d002tu_l,
            R.drawable.msi_gv62_7rc_l,
            R.drawable.sony_vpcw_126ag_l_5
    };

Finally, initialize the require methods inside the onCreate method to run the application.

lv_content = (ListView)findViewById(R.id.lv_content);
        ListHandler listHandler = new ListHandler(MainActivity.this, name_list, laptop);
        listHandler.sort(new Comparator<String>() {
            @Override
            public int compare(String lhs, String rhs) {
                return lhs.compareTo(rhs);
            }
        });
        lv_content.setAdapter(listHandler);

Try to run the app and see if it worked. There you have it we have created a Simple Custom List View With Image using Android. I hope that this tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

1966 views