Tuesday, July 2, 2013

Customized List View

How to customized the list view 

Today I'm going to explained how to design list view with your custom styles and colors instead of using default list view style

In this article i custom designed a list view which contains an image on left side, time and arrow at the right end and a title in middle. I used Relative Layout as parent node and placed all the remaining items using relative positioning properties. Check the following image

dicussion_row.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" >

    <!--  ListRow Left sied Thumbnail image -->
    <LinearLayout android:id="@+id/thumbnail3c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dip"
        android:layout_alignParentLeft="true"
        
        android:layout_marginRight="5dip">

        <ImageView
            android:id="@+id/list_image"
            android:layout_width="35dip"
            android:layout_height="35dip"
            
            android:src="@drawable/forumsdefaultprofilepic" />

    </LinearLayout>

   

    <TextView
        android:id="@+id/txtMessage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/thumbnail3c"
        android:layout_toRightOf="@+id/thumbnail3c"
        android:text="forum"
        android:textColor="#040404"
        android:textSize="10dip"
        android:textStyle="bold"
        android:typeface="sans" />

   

    <TextView
        android:id="@+id/txtUser"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/txtMessage"
        android:layout_marginTop="1dip"
        android:layout_toRightOf="@+id/thumbnail3c"
        android:text="Replier"
        android:textColor="#343434"
        android:textSize="7dip"
        android:textStyle="bold|italic" />

    <!-- Rightend Duration -->

    <TextView
        android:id="@+id/txtTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@id/txtUser"
        android:layout_marginRight="5dip"
        android:gravity="right"
        android:text="time"
        android:textColor="#10bcc9"
        android:textSize="5dip"
        android:textStyle="bold" />

     <!-- Rightend Arrow -->
     <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/arrow"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"/>
     
                 
                    <TextView
            android:id="@+id/txtUserid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="110dp"
            android:layout_marginRight="120dp"
            android:text="aaaaa"
            android:textColor="#040404"
            android:textSize="5dip"
            android:textStyle="bold"
            android:typeface="sans"
            android:visibility="gone" />

         <TextView
            android:id="@+id/txtPid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="130dp"
            android:layout_marginRight="140dp"
            android:text="aaaaa"
            android:textColor="#040404"
            android:textSize="5dip"
            android:textStyle="bold"
            android:typeface="sans"
            android:visibility="gone" />


</RelativeLayout>
LazyAdapter.java
package others; import com.project.androm.*; import java.util.ArrayList; import java.util.HashMap; import android.R; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.os.Bundle; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.Button; import android.widget.ImageView; import android.widget.ListView; import android.widget.TextView; public class LazyAdapter3c extends BaseAdapter { private Runnable _run; private Activity _activity; private ArrayList<HashMap<String, String>> _data; private static LayoutInflater _inflater=null; Context mContext; public static String Postuid; public LazyAdapter3c(Activity a, ArrayList<HashMap<String, String>> d) { _activity = a; _data=d; _inflater = (LayoutInflater)_activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE); } public LazyAdapter3c(Runnable runnable,Activity a, ArrayList<HashMap<String, String>> subjectsList,Context pContext) { // TODO Auto-generated constructor stub _run=runnable; _activity = a; _data=subjectsList; _inflater = (LayoutInflater)_activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE); mContext=pContext; } public int getCount() { return _data.size(); } public Object getItem(int position) { return position; } public long getItemId(int position) { return position; } public View getView(final int position, View convertView, ViewGroup parent) { View vi=convertView; if(convertView==null) vi = _inflater.inflate(com.project.androm.R.layout.discussion_row3c, null); TextView title1 = (TextView)vi.findViewById(com.project.androm.R.id.txtMessage); TextView title2 = (TextView)vi.findViewById(com.project.androm.R.id.txtUser); TextView title4 = (TextView)vi.findViewById(com.project.androm.R.id.txtUserid); TextView title3 = (TextView)vi.findViewById(com.project.androm.R.id.txtTime); TextView title5 = (TextView)vi.findViewById(com.project.androm.R.id.txtPid); title1.setText(_data.get(position).get("message")); title2.setText(_data.get(position).get("username")); title3.setText(_data.get(position).get("created")); title5.setText(_data.get(position).get("id")); title4.setText(_data.get(position).get("userid")); return vi; } }