Custom Listview

Android Custom Listview with Image and Text:-

xml files:-

list_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:background="#ffffff"
        android:gravity="center" >

        <TextView
            android:id="@+id/txttitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="-Whatapp Status-"
            android:textColor="#000"
            android:textSize="18sp"
            android:textStyle="bold" />
    </LinearLayout>

    <ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="#fff"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/list_selector" />


</LinearLayout>


list_single.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/list_selector"
    android:orientation="horizontal"
    android:padding="5dip" >

    <LinearLayout
        android:id="@+id/thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="5dip"
        android:background="@drawable/image_bg"
        android:padding="3dip" >

        <ImageView
            android:id="@+id/list_image"
            android:layout_width="50dip"
            android:layout_height="50dip" />
    </LinearLayout>

    <TextView
        android:id="@+id/txt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:layout_toRightOf="@+id/thumbnail"
        android:text="Subject"
        android:textColor="#fff"
        android:textSize="18dip"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txt1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txt"
        android:layout_marginTop="1dip"
        android:layout_toRightOf="@+id/thumbnail"
        android:text="Subject"
        android:textColor="#fff"
        android:textSize="15dip" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/arrowwhite" />


</RelativeLayout>


drawable xml file:

res/drawable/gradient_bg_hover.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <!-- Gradient BgColor for listrow Selected -->
  <gradient
      android:startColor="#18d7e5"
      android:centerColor="#16cedb"
      android:endColor="#09adb9"
      android:angle="270" />

</shape>

res/drawable/gradient_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <!--  Gradient Bg for listrow -->
  <gradient
      android:startColor="#b03060"
      android:centerColor="#b03060"
      android:endColor="#b03060"
      android:angle="270" />

</shape>

res/drawable/list_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selector style for listrow -->
<item
 android:state_selected="false"
    android:state_pressed="false"
    android:drawable="@drawable/gradient_bg" />
<item android:state_pressed="true"
    android:drawable="@drawable/gradient_bg_hover" />
<item android:state_selected="true"
 android:state_pressed="false"
    android:drawable="@drawable/gradient_bg_hover" />

</selector>

res/drawable/image_bg.xml:

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>

      <shape 

        android:shape="rectangle">

            <stroke android:width="1dp" android:color="#dbdbdc" />

            <solid android:color="#FFFFFF" />

        </shape>

   </item>

</layer-list>

Java files:

MainActivity.java

package com.parthiv.customlistview;

import android.os.Bundle;

import android.view.View;

import android.view.Window;

import android.widget.AdapterView;

import android.widget.ListView;

import android.widget.Toast;

import android.app.Activity;

public class MainActivity extends Activity {

ListView list;

String[] web = { "Parthiv", "Raj", "Sabari", "Pandian", "Ashok",

"Kannan", "sivakumar" };

String[] web2 = { "Available", "Busy", "At work", "In a meeting", "At the gym",

"Sleeping", "Battery about to die" };

Integer[] imageId = { R.drawable.photo, R.drawable.photo, R.drawable.photo,

R.drawable.photo, R.drawable.photo, R.drawable.photo,

R.drawable.photo

};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

this.requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.list_main);

CustomList adapter = new CustomList(

MainActivity.this, web, web2, imageId);

list = (ListView) findViewById(R.id.list);

list.setAdapter(adapter);

list.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view,

int position, long id) {

Toast.makeText(MainActivity.this,

"You Clicked at " + web[+position], Toast.LENGTH_SHORT)

.show();

}

});

}

}

CustomList.java

package com.parthiv.customlistview;

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 CustomList extends ArrayAdapter<String> {

private final Activity context;

private final String[] web, web2;

private final Integer[] imageId;

public CustomList(Activity context, String[] web, String[] web2,

Integer[] imageId) {

super(context, R.layout.list_single, web);

this.context = context;

this.web = web;

this.web2 = web2;

this.imageId = imageId;

}

@Override

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

LayoutInflater inflater = context.getLayoutInflater();

View rowView = inflater.inflate(R.layout.list_single, null, true);

TextView txtTitle1 = (TextView) rowView.findViewById(R.id.txt1);

TextView txtTitle = (TextView) rowView.findViewById(R.id.txt);

ImageView imageView = (ImageView) rowView.findViewById(R.id.list_image);

txtTitle.setText(web[position]);

txtTitle1.setText(web2[position]);

imageView.setImageResource(imageId[position]);

return rowView;

}

}

Output:-

                              

Click Listview:

                                                     

Keep Updating Every Day...