android - How to set listView item background like whatsapp

Question

I was wondering how could I set an background image for each listView item ? I've done this so far but no success , I made a customListView and set an image as background for the layout . It did work but for long items , the image stretch and become to a very bad shape . Could you help me . this is an image of what i mean .

thanks you

Answer 1

Following code will help you:

Custom class to implement custom row in ListView:

MessageAdapter

 public class MessageAdapter extends BaseAdapter{
    private Context mContext;
    private ArrayList<Message> mMessages;



    public MessageAdapter (Context context, ArrayList<Message> messages) {
        super();
        this.mContext = context;
        this.mMessages = messages;
    }
    @Override
    public int getCount() {
        return mMessages.size();
    }
    @Override
    public Object getItem(int position) {       
        return mMessages.get(position);
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Message message = (Message) this.getItem(position);

        ViewHolder holder; 
        if(convertView == null)
        {
            holder = new ViewHolder();
            convertView = LayoutInflater.from(mContext).inflate(R.layout.sms_row, parent, false);
            holder.message = (TextView) convertView.findViewById(R.id.message_text);
            convertView.setTag(holder);
        }
        else
            holder = (ViewHolder) convertView.getTag();
        
        holder.message.setText(message.getMessage());
        
        LayoutParams lp = (LayoutParams) holder.message.getLayoutParams();
        //check if it is a status message then remove background, and change text color.
        if(message.isStatusMessage())
        {
            holder.message.setBackgroundDrawable(null);
            lp.gravity = Gravity.LEFT;
            holder.message.setTextColor(R.color.textFieldColor);
        }
        else
        {       
            //Check whether message is mine to show green background and align to right
            if(message.isMine())
            {
                holder.message.setBackgroundResource(R.drawable.speech_bubble_green);
                lp.gravity = Gravity.RIGHT;
            }
            //If not mine then it is from sender to show orange background and align to left
            else
            {
                holder.message.setBackgroundResource(R.drawable.speech_bubble_orange);
                lp.gravity = Gravity.LEFT;
            }
            holder.message.setLayoutParams(lp);
            holder.message.setTextColor(R.color.textColor); 
        }
        return convertView;
    }
    private static class ViewHolder
    {
        TextView message;
    }

    @Override
    public long getItemId(int position) {
        //Unimplemented, because we aren't using Sqlite.
        return 0;
    }

}

layout for list row: sms_row.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" >

    <TextView
        android:id="@+id/message_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5sp"
        android:background="@drawable/speech_bubble_green"
        android:shadowColor="@color/textShadow"
        android:shadowDx="1"
        android:shadowDy="1"
        android:text="Medium Text"
        android:textColor="@color/textColor"
        android:textSize="20sp" />

</LinearLayout>

Other Utility Classes are

Message:

    public class Message {
    /**
     * The content of the message
     */
    String message;
    /**
     * boolean to determine, who is sender of this message
     */
    boolean isMine;
    /**
     * boolean to determine, whether the message is a status message or not.
     * it reflects the changes/updates about the sender is writing, have entered text etc
     */
    public boolean isStatusMessage;
    
    /**
     * Constructor to make a Message object
     */
    public Message(String message, boolean isMine) {
        super();
        this.message = message;
        this.isMine = isMine;
        this.isStatusMessage = false;
    }
    /**
     * Constructor to make a status Message object
     * consider the parameters are swaped from default Message constructor,
     *  not a good approach but have to go with it.
     */
    public Message(boolean status, String message) {
        super();
        this.message = message;
        this.isMine = false;
        this.isStatusMessage = status;
    }
    public String getMessage() {
        return message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
    public boolean isMine() {
        return isMine;
    }
    public void setMine(boolean isMine) {
        this.isMine = isMine;
    }
    public boolean isStatusMessage() {
        return isStatusMessage;
    }
    public void setStatusMessage(boolean isStatusMessage) {
        this.isStatusMessage = isStatusMessage;
    }
    
    
}

Utility:

     public class Utility {
        public static final String [] sender= new String [] {"Lalit", "RobinHood", "Captain", "HotVerySpicy", "Dharmendra", "PareshMayani", "Abhi", "SpK", "CapDroid"};
        public static final String [] messages= new String [] {
            "Aah! thats cool",
            "Tu really CoLor 6e", 
            "Get Lost!!",
            "@AdilSoomro @AdilSoomro",
            "Lets see what the Rock is cooking..!!",
            "Yeah! thats great.",
            "Awesome Awesome!",
            "@RobinHood.",
            "Lalit ka Dillllll...!!!",
            "I'm fine, thanks, what about you?"};
        
    }

Answer 2

设置ListView与任何父背景drawable的资产和listView背景transparent ，然后在listViewAdapter你有项目背景transparent与9patch image在wrapContent的宽度参数textView中listItem 。

Answer 3

first set drawable for listview layout,then make listview trasperent place background like bellow

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/paper"
android:orientation="vertical" >
<ListView
    android:id="@android:id/list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/popup_bg"
    android:cacheColorHint="#00000000" />
</LinearLayout>