RelativeLayout elements get out abroad

Question

The situation is as follows. I make a template for a text message on the messenger message screen.

For layout, I use RelativeLayout, inside of which is a TextView with the text of the message and another 1 RelativeLayout with the image of the read message and the TextView over time.

This message should be located on the right side of the screen. For small messages, everything is fine:

But for long messages that no longer fit into 1 line, problems begin:

I can not understand why the text goes beyond the edge of the parent RelativeLayout? At the same time, the android:layout_alignParentLeft and android:layout_alignParentStart have no effect whatsoever. The shift is removed if you remove the binding of the element with the text to RelativeLayout with time and status, but they begin to overlap each other.

I give the full layout code below:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingLeft="62dp"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/talk_message_my" android:paddingTop="9dp" android:paddingLeft="11dp" android:paddingBottom="7dp" android:paddingRight="18dp" android:layout_alignParentEnd="true" android:gravity="right"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Денег нет, но вы держитесь. Всего вам хорошего, счастья, здоровья" android:id="@+id/message" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> <RelativeLayout android:layout_width="48dp" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:id="@+id/relativeLayout4" android:layout_alignBottom="@+id/message" android:layout_toEndOf="@+id/message"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/status" android:src="@drawable/icon_message_read" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="15:21" android:id="@+id/time" android:textSize="@dimen/label_font_size" android:layout_toRightOf="@+id/status" /> </RelativeLayout> </RelativeLayout> </RelativeLayout>

Then explain the choice of RelativeLayout for creating the layout - why didn't you choose LinearLayout?
@YuriySPb LinearLayout tried too, but the effect is the same, though not the message flies off the border of the parent Layout, but the time

Accepted Answer · 2016-07-11T18:22:21

You need to set a specific width for the image and time, and the message itself should take the rest of the width and shift your text to the right.

Your markup should look something like this:

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="62dp"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/talk_message_my" android:paddingTop="9dp" android:paddingLeft="11dp" android:paddingBottom="7dp" android:paddingRight="18dp" android:orientation="horizontal" android:layout_gravity="right"> <TextView android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="Денег нет, но вы держитесь. Всего вам хорошего, счастья, здоровья" android:id="@+id/message" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/status" android:src="@drawable/icon_message_read" android:layout_gravity="bottom" android:layout_marginLeft="16dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="15:21" android:id="@+id/time" android:textSize="@dimen/label_font_size" android:layout_gravity="bottom" /> </LinearLayout>

Using RelativeLayout is not justified in your case. Moreover, the messages should be displayed via RecyclerView, rather than adding them to one common container

in this case, the message cloud is stretched to the full width of the parent, even if the message itself may consist of only 1 character.
However, I changed your code to fit my needs and now the template looks as it should, I will update the question and add the final code.
@NikitaLeshchev, I didn’t check my code and it may contain inaccuracies / errors.
If you managed to modify it as needed, then you can change my answer through editing.
It is better if you do so in order not to embarrass the future visitors of the question, which will see the wrong code in the answer)
Yes, something did not immediately think about it, so I will.
Regarding the output of messages, I gather them through a ListView, and the external RelativeLayout is used so that the message is always displayed from the right edge of the screen + this element should always occupy a maximum of 100% - 62dp of the screen width.
@NikitaLeshchev, the studio sometimes happens to be wrong and autocompletion does not always work stably, especially in the xml part.
The preview is generally very buggy - it’s better not to use it at all.

RelativeLayout elements get out abroad

1 answer 1

More articles: