Bubble Chat layout

Question

I have an layout

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/background"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:background="@drawable/chat_bg">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="32dip"
        android:layout_height="32dip"
        android:layout_marginRight="4dip"
        android:src="@drawable/avatar_1_1"        
        />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5sp"
        />

</LinearLayout>

and in the java code i have :

LayoutParams lp1 = (LayoutParams) textView.getLayoutParams();
    LayoutParams lp2 = (LayoutParams) avatarView.getLayoutParams();
    if (incoming) {
        lp1.gravity = Gravity.LEFT;
        lp2.gravity = Gravity.LEFT;
        textView.setBackgroundResource(R.drawable.speech_bubble_green);
        textView.setLayoutParams(lp1);
        avatarView.setLayoutParams(lp2);
    } else {
        lp1.gravity = Gravity.RIGHT;
        lp2.gravity = Gravity.RIGHT;
        textView.setBackgroundResource(R.drawable.speech_bubble_orange);
        textView.setLayoutParams(lp1);
        avatarView.setLayoutParams(lp2);
    }

I want the incomming message and its avatar will be align right like Viber, outgoing on the left, but all message now is align left

Thanks for all suggestions

Answer 1

Solution here

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/background"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingRight="4dip"
android:paddingBottom="4dip"
android:background="@drawable/chat_bg">

<ImageView
    android:id="@+id/avatar"
    android:layout_width="32dip"
    android:layout_height="32dip"
    android:layout_marginLeft="4dip"
    android:src="@drawable/avatar_1_1"
    />

<TextView
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/avatar"
    android:paddingLeft="4dip"
    />

And here java code :

RelativeLayout bg = (RelativeLayout)view.findViewById(R.id.background);         
        if (incoming) {
            textView.setBackgroundResource(R.drawable.speech_bubble_orange);

            bg.setGravity(Gravity.LEFT);
        } else {
            textView.setBackgroundResource(R.drawable.speech_bubble_green);

            LayoutParams avatarParams = (LayoutParams) avatarView.getLayoutParams();
            avatarParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
            avatarView.setLayoutParams(avatarParams);

            /*android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@id/avatar"
                    android:paddingLeft="4dip"*/
            LayoutParams tvParam = (LayoutParams) textView.getLayoutParams();
            tvParam.removeRule(RelativeLayout.RIGHT_OF);
            tvParam.addRule(RelativeLayout.LEFT_OF, R.id.avatar);
            textView.setLayoutParams(tvParam);

            bg.setGravity(Gravity.RIGHT);
        }

Answer 2

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/background"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        <!-- android:layout_gravity="left" -->
        android:orientation="horizontal">

        <ImageView
                android:id="@+id/avatar"
                android:layout_width="32dip"
                android:layout_height="32dip"
                android:layout_marginRight="4dip"
                android:src="@drawable/controller"
        />

        <TextView
                android:id="@+id/text"
                android:text="asd"
                android:textColor="#FFFFFF"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5sp"
        />

</LinearLayout>

To set gravity in your Activity:

LinearLayout lp = (LinearLayout) findViewById(R.id.background);
lp.setGravity(Gravity.RIGHT);
lp.setGravity(Gravity.Left);

So, the only thing that i changed is in your LinearLayout in XML file, change layout_width from fill_parent to wrap_content

---

EDIT: (due to more information)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/background"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_gravity="left"
                android:orientation="horizontal">


    <RelativeLayout android:id="@+id/avatar2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/text2">
        <ImageView
                android:id="@+id/avatar"
                android:layout_width="32dip"
                android:layout_height="32dip"
                android:layout_marginRight="4dip"
                android:src="@drawable/controller"
                />
    </RelativeLayout>

    <RelativeLayout android:id="@+id/text2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/avatar">
        <TextView
                android:id="@+id/text"
                android:text="asd"
                android:textColor="#FFFFFF"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
    </RelativeLayout>

</RelativeLayout>

So, use

RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)yourLayout.getLayoutParams();
params.addRule(RelativeLayout.RIGHT_OF, R.id.id_to_be_left_of);
//params.addRule(RelativeLayout.LEFT_OF, R.id.id_to_be_left_of);
yourLayout.setLayoutParams(params); //causes layout update

Do not forget that dependencies cannot be circular