Bubble Chat Layout

Question

I have a 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 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 incoming message and its avatar to be aligned to the right as Viber, outgoing to the left , but now all messages are left aligned

Thanks for all the 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 is the 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 establish gravity in your work:

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

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

---

EDIT: (due to more info)

 <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 

Remember that dependencies cannot be round.