How to make list view items align left and right programmatically in Android

Question

I am working on a chat app and on chat view I have to show message left and right. But as I am pretty new in Android programming, I am not being able to achieve this. Here is what I am getting :

Here is my chatbubble.xml that is being used to show line items.

    <?xml version="1.0" encoding="utf-8"?>
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/bubble_layout_parent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <LinearLayout
                android:id="@+id/bubble_layout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/bg_msg1">

                <TextView
                    android:id="@+id/message_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:maxEms="12"
                    android:layout_gravity="center"
                    android:text="Hi! new message"
                    android:textColor="@android:color/primary_text_light" />
            </LinearLayout>

        </LinearLayout>

And getView method of ChatApapter.java

    @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = layoutInflater.inflate(resource, parent, false);

            Holder holder = new Holder();
            holder.txtMsg = (TextView) view.findViewById(R.id.message_text);

            HashMap<String,String> hashMap = new HashMap<String,String>();
            hashMap = chats.get(position);

            LinearLayout layout = (LinearLayout) view.findViewById(R.id.bubble_layout);
            LinearLayout parent_layout = (LinearLayout) view.findViewById(R.id.bubble_layout_parent);

            layout.setPadding(20,20,20,20);

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
            params.setMargins(0,0,0,20);
            layout.setLayoutParams(params);

            if(hashMap.get("is_mine").equals("yes")) {
                layout.setBackgroundResource(R.drawable.bg_msg1);
                parent_layout.setGravity(Gravity.RIGHT);
            } else {
                layout.setBackgroundResource(R.drawable.bg_msg2);
                parent_layout.setGravity(Gravity.LEFT);
            }

            holder.txtMsg.setText(hashMap.get("message"));
            holder.txtMsg.setTextColor(Color.BLACK);

            return view;
        }

Here is activity_chat_list.xml that is main list view file which is being used with adapter.

<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.mychatapp.UserChat">

    <ListView
        android:id="@+id/msgListView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/form"
        android:divider="@null"
        android:dividerHeight="0dp"
        android:paddingBottom="10dp"
        android:text="Hello World" />

    <LinearLayout
        android:id="@+id/form"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="#91f1f1f1"
        android:paddingBottom="2dp">

        <EditText
            android:id="@+id/messageEditText"
            android:layout_width="252dp"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_toLeftOf="@+id/sendMessageButton"
            android:layout_weight="0.72"
            android:ems="10"
            android:maxHeight="80dp" />

        <ImageButton
            android:id="@+id/sendMessageButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@drawable/send_button"
            android:text="d" />

    </LinearLayout>


</RelativeLayout>

So can someone help me to make message left and right. Thanks in advance.

@PrateekRathore Can you show me an example of start and end. So that I can implement in code. — Ankit, Sep 17 '16 at 09:37
Try it in xml file, if you get it working put it dynamically — AndroConsis, Sep 17 '16 at 09:39
Infate two layouts one for right and another for left based on the getViewType decide which layout to show right and left — Sunil Kumar, Sep 28 '16 at 19:46

score 1 · Answer 1 · edited May 23 '17 at 12:02

1

You should set your layout_gravity to left or right, instead of the gravity.

I'm copying the concept from How to set layout_gravity programmatically?

Example (warning, code is not tested):

    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);


    if(hashMap.get("is_mine").equals("yes")) {
        layout.setBackgroundResource(R.drawable.bg_msg1);
        params.gravity = Gravity.RIGHT;
        parent_layout.setParams(params);
    } else {
        layout.setBackgroundResource(R.drawable.bg_msg2);
        params.gravity = Gravity.LEFT;
        parent_layout.setParams(params);
        parent_layout.setGravity(Gravity.LEFT);
    }

Alternatively, you make 2 different XMLs and assign layout_gravity inside the xml itself, and inflate appropriate layout for each row.

edited May 23 '17 at 12:02

Community

1
1

answered Sep 17 '16 at 09:47

Jonathan Darryl

946
11
16

@Ankit try changing the layout_width on `bubble_layout_parent` to `match_parent` and set the `layout_gravity` of `bubble_layout` instead of the `bubble_layout_parent`. – Jonathan Darryl Sep 17 '16 at 10:05
I tried this but still not working. Do I need to post main listview.xml to more understanding ? – Ankit Sep 17 '16 at 10:11
Is your listview layout_width=match_parent? If yes, i dont think theres a problem – Jonathan Darryl Sep 17 '16 at 10:19
I have added activity_user_chat.xml file. Please see my updated code again. – Ankit Sep 17 '16 at 10:23
1

Pls try changing listview layout_width in the xml to match_parent, i think thats the problem – Jonathan Darryl Sep 17 '16 at 10:24
No prob! Congrats :) – Jonathan Darryl Sep 17 '16 at 10:27
Thanks once again. You saved my day :) – Ankit Sep 17 '16 at 10:27

DevKRos · Answer 2 · 2016-09-17T10:09:05.793

0

Instead of using listview try using dynamic textview : create new Linear layout like

    Lineqarlayout ll =new Linear Layout();
     LayoutParams lparams = new LayoutParams(
    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
      TextView tvIncoming=new TextView(this);
     tvIncoming.setLayoutParams(lparams);
     tvIncoming.setGravity(GRAVITY.RIGHT);
     tvIncoming.setText("test");
    this.ll.addView(tv);
  //similarly tvOutgoing with gravity left

    if(hashMap.get("is_mine").equals("yes")) {
        tvOutgoing.setBackgroundResource(R.drawable.bg_msg1);
       holder.txtMsg.setText(hashMap.get("message"));
      } else {
        tvincogoing.setBackgroundResource(R.drawable.bg_msg1);
       holder.txtMsg.setText(hashMap.get("message"));
      }

Let me know if it helps::) Edit: Use this code(or pseudocode ) in your activity and not in adapter

edited Sep 17 '16 at 10:09

answered Sep 17 '16 at 09:39

DevKRos

422
2
15

No, its not working.. Text is showing always on left side. I don't know why ? – Ankit Sep 17 '16 at 09:52
@Ankit are you using same listview or making dynamic layout .? – DevKRos Sep 17 '16 at 09:58
I am using same list view. – Ankit Sep 17 '16 at 09:59
i will say don't use listview because list view renders its view and textview is part of remeber listview is not view group .so get your message from hashmap and add it in dynamic textview everytime.. should i edit my code accordingly using your hashmap – DevKRos Sep 17 '16 at 10:02
I have added activity_user_chat.xml file. Please see my updated code again. – Ankit Sep 17 '16 at 10:23

score 0 · Answer 3 · answered Sep 17 '16 at 09:44

0

Use two different textview left and right for is_mine if is_mine is yes set visbility GONE for the other one and set your text on that textview and vice versa.

answered Sep 17 '16 at 09:44

Tanveer Bulsari

213
1
10

score 0 · Answer 4 · answered Feb 23 '20 at 11:47

In your Layout folder, you should create 2 different xml files: rightchatbubble.xml and leftchatbubble.xml with android:layout_gravity="right" and android:layout_gravity="left" respectively.

In your Adapter you should change the following:

 if(hashMap.get("is_mine").equals("yes")) {
                layout.setBackgroundResource(R.drawable.bg_msg1);
                parent_layout.setGravity(Gravity.RIGHT);
            } else {
                layout.setBackgroundResource(R.drawable.bg_msg2);
                parent_layout.setGravity(Gravity.LEFT);
            }

with:

if (hashMap.get("is_mine").equals("yes")) {
                    convertView = LayoutInflater.from(getContext()).inflate(R.layout.leftchatbubble, parent, false);
                }
                else {
                    convertView = LayoutInflater.from(getContext()).inflate(R.layout.rightchatbubble, parent, false);
                }

and it should work fine. Obviously, in the main remember to update

YOURadapter.notifyDataSetChanged();

How to make list view items align left and right programmatically in Android

4 Answers4