How to make a CustomListView with image and Text

Posted by Shoaib at 11:46:00 am Read our previous post

I have used
 a. 3 Java class(MainActivity, CustomListAdapter, )
                         - Main Acitvity is main class
                         - CustomListAdapter is template type class

                       


 b. 3 xml (activity_main.xml and my_list.xml)
               
            - activity_main.xml is just for showing listview
            - my_list.xml is for how listview looks (like 1 imageview, 2 textview)
           - activity_details (Details Activity xml)

c. string.xml (This is my data  source) Main activity collected data from string using get resourse.




Main Activity.java:

package com.example.shoaibm.top20comedymovies;

import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;


public class MainActivity extends AppCompatActivity {
    ListView listView;
    Integer[] image = {R.drawable.mukul, R.drawable.alim
            ,R.drawable.rahman, R.drawable.rajesh,
            R.drawable.linkon,R.drawable.shoaib,
            R.drawable.hitler,R.drawable.kim,
            R.drawable.omar,R.drawable.insan};
    String[] teacher, year, desc;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = (ListView)findViewById(R.id.listView);
        Resources res = getResources();
        teacher = res.getStringArray(R.array.programmer_list);
        year = res.getStringArray(R.array.year_list);
        desc = res.getStringArray(R.array.desc_list);
        listView.setAdapter(new CustomListView(MainActivity.this, teacher,image,year));
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                Intent intent = new Intent(MainActivity.this, Details.class);
                intent.putExtra("teacher", teacher[position]);
                intent.putExtra("desc", desc[position]);
                startActivity(intent);
            }
        });


    }
     

}

CustomListAdapter.java:
It's a kind of template which you can use to make any listview, just need change your xml desingn what you want)

package com.example.shoaibm.top20comedymovies;

import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomListView extends ArrayAdapter{

    private final Activity context;
    private final String[] web;
    private final Integer[] imgid;
    public String[] year;



    public CustomListView(Activity context,String[] web, Integer[] imgid, String[] year) {

        super(context, R.layout.my_list,R.id.textView, web);

        this.context = context;
        this.web = web;
        this.imgid = imgid;
        this.year=year;

    }

    @Override
    public View getView(int position, View view, ViewGroup parent) {

        LayoutInflater inflater = context.getLayoutInflater();
        View rowView= inflater.inflate(R.layout.my_list, null, true);


        ImageView imageView = (ImageView) rowView.findViewById(R.id.imageView);
        TextView textview = (TextView) rowView.findViewById(R.id.textView);
        TextView txtYear = (TextView)rowView.findViewById(R.id.txtYear);

        textview.setText(web[position]);
        imageView.setImageResource(imgid[position]);
        txtYear.setText(year[position]);


        return rowView;
    }
}

Details.java: (You are passing data from MainActivity.java to Detail.java). We will use un

item click listener is click on listview item. 

package com.example.shoaibm.top20comedymovies;

import android.content.Intent;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;


public class Details extends AppCompatActivity {
    TextView txtDetails;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_details);
        txtDetails = (TextView)findViewById(R.id.txtDetails);

        Intent intent = getIntent();
        String prog = intent.getStringExtra("teacher");
        String title = intent.getStringExtra("desc");
        txtDetails.setText(prog+"\n\n"+title);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_details, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

}

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

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listView"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

layout/my_list.xml:

xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="#000000"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/imageView"
        android:background="@drawable/black"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_toRightOf="@+id/imageView"
        android:textColor="#FFFFFF"
        android:id="@+id/textView"
        android:text="Trainer Name"
        android:textSize="20dp"
        android:layout_marginLeft="5dp"
        android:textStyle="bold"
        android:layout_height="wrap_content" />
    <TextView
        android:layout_width="wrap_content"
        android:text="Title"
        android:textColor="#FFFFFF"
        android:id="@+id/txtYear"
        android:textSize="15dp"
        android:textStyle="bold"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView"
        android:layout_centerHorizontal="true" />
</RelativeLayout>





Layout/activity_details:
<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.example.shoaibm.top20comedymovies.Details">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/txtDetails"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>




Values/string.xml:


<resources>
    <string name="app_name">Programmer List</string>

    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    
<string-array name="programmer_list">
        
        <item>Mahbub Hasan</item>
        <item>Abdul Alim</item>
        <item>Probash Rahman</item>
        <item>Rajesh Gosh</item>
        <item>Linkon Islam</item>
        <item>Shoaib Mahmud</item>
        <item>Hitler</item>
        <item>Kim Jong Un</item>
        <item>Omar Shohid</item>
        <item>Insan Haque</item>
    </string-array>
    <string-array name="title_list">

        <item>Android</item>
        <item>Java</item>
        <item>Android</item>
        <item>PHP</item>
        <item>Ruby</item>
        <item>Android</item>
        <item>C++</item>
        <item>Python</item>
        <item>Android</item>
        <item>Android</item>

    </string-array>
    <string-array name="desc_list">

        <item>Expert in Android</item>
        <item>Expert in Java</item>
        <item>Expert in Android</item>
        <item>Expert in PHP</item>
        <item>Expert in Ruby</item>
        <item>Expert in Android</item>
        <item>Expert in C++</item>
        <item>Expert in Python</item>
        <item>Expert in Android</item>
        <item>Expert in Android</item>

    </string-array>
    <string name="title_activity_details">Details</string>
</resources