Android Studio Tutorial : Custom ListView with Image and Text Example using ArrayAdapter

Android Studio Tutorial for Beginners, How to Custom ListView with Image and Text Example using ArrayAdapter? this lesson will show you how to Custom ListView with Image and Text Example

In this lesson, we ill learn how to create a custom Android listview using images and TextView in each list item. To display image, topic, and description in ListView we have to create a new XML file in res/layout folder and add ImageView and TextView.

To implement ListView in android, you have to work more in java activity file. ListView is a common component/layout in android application. It is difficult to make some awesome application without using listview like news app, tutorial app, social app, etc.

Video Tutorial Custom ListView with Image and Text Example using ArrayAdapter


Source Code Custom ListView with Image and Text

activity_main.xml

<?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"
    tools:context=".MainActivity">

    <ListView
        android:background="#fff"
        android:id="@+id/list_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    </ListView>
    
</LinearLayout>

listview_items.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:padding="7dp"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/listview_images"
        android:layout_width="wrap_content"
        android:padding="10dp"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:padding="7dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/Title"
            android:textSize="12sp"
            android:textStyle="bold"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/DEscription"
            android:textSize="10sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

MainActivity.java

package com.codeajaib.listview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    // we will create array data and store to listview
    // title
    String[] ListviewTitle = new String[]{
            "Listview Title 1","Listview Title 2","Listview Title 3","Listview Title 4","Listview Title 5",
            "Listview Title 6","Listview Title 7","Listview Title 8","Listview Title 9","Listview Title 10",
            "Listview Title 11","Listview Title 12","Listview Title 13","Listview Title 14","Listview Title 15",
            "Listview Title 16","Listview Title 17","Listview Title 18","Listview Title 19","Listview Title 20"
    };
    // description
    String[] ListviewDescription = new String[]{
            "Listview Description 1","Listview Description 2","Listview Description 3","Listview Description 4",
            "Listview Description 5","Listview Description 6","Listview Description 7","Listview Description 8",
            "Listview Description 9","Listview Description 10","Listview Description 11","Listview Description 12",
            "Listview Description 13","Listview Description 14","Listview Description 15","Listview Description 16",
            "Listview Description 17","Listview Description 18","Listview Description 19","Listview Description 20"
    };
    // images
    int[] ListviewImages = new int[]{
            R.drawable.ic_sentiment_very_dissatisfied_black_24dp,R.drawable.ic_sentiment_very_satisfied_black_24dp,R.drawable.ic_person_black_24dp,R.drawable.ic_sentiment_very_dissatisfied_black_24dp,
            R.drawable.ic_person_black_24dp,R.drawable.ic_sentiment_very_satisfied_black_24dp,R.drawable.ic_person_black_24dp,R.drawable.ic_sentiment_very_dissatisfied_black_24dp,
            R.drawable.ic_sentiment_very_satisfied_black_24dp,R.drawable.ic_sentiment_very_dissatisfied_black_24dp,R.drawable.ic_sentiment_very_dissatisfied_black_24dp,R.drawable.ic_person_black_24dp,
            R.drawable.ic_person_black_24dp,R.drawable.ic_sentiment_very_satisfied_black_24dp,R.drawable.ic_sentiment_very_dissatisfied_black_24dp,R.drawable.ic_person_black_24dp,
            R.drawable.ic_person_black_24dp,R.drawable.ic_person_black_24dp,R.drawable.ic_sentiment_very_satisfied_black_24dp,R.drawable.ic_sentiment_very_dissatisfied_black_24dp
    };

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

        List<HashMap<String,String>> aList = new ArrayList<HashMap<String, String>>();
        for (int x = 0; x < 20; x++){
            HashMap<String, String> hm = new HashMap<String,String>();
            hm.put("ListTitle",ListviewTitle[x]);
            hm.put("ListDescription",ListviewDescription[x]);
            hm.put("ListImages",Integer.toString(ListviewImages[x]));
            aList.add(hm);
        }

        String[] from = {
                "ListImages","ListTitle","ListDescription"
        };
        int[] to = {
                R.id.listview_images,R.id.Title,R.id.DEscription
        };

        SimpleAdapter simpleAdapter = new SimpleAdapter(getBaseContext(),aList, R.layout.listview_items,from,to);
        ListView simpleListview = (ListView)findViewById(R.id.list_view);
        simpleListview.setAdapter(simpleAdapter);
    }
}

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.codeajaib.listview">

    <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">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Follow our social media and see you next lessons ...

COMMENTS

Next Recomended


Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,84,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,5,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: Android Studio Tutorial : Custom ListView with Image and Text Example using ArrayAdapter
Android Studio Tutorial : Custom ListView with Image and Text Example using ArrayAdapter
Android Studio Tutorial for Beginners, How to Custom ListView with Image and Text Example using ArrayAdapter? this lesson will show you how to Custom ListView with Image and Text Example
https://i.ytimg.com/vi/06G2iHuuxzs/hqdefault.jpg
https://i.ytimg.com/vi/06G2iHuuxzs/default.jpg
KODE AJAIB
https://www.kodeajaib.com/2018/10/android-custom-listview-with-image-and-text.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2018/10/android-custom-listview-with-image-and-text.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy