Develop Reference

RelativeLayout matching parent although it shouldn't

I'm trying to create a message layout in a chat application.
This message layout should contain:
Message Textview in a rounded rectangle
Message status check icon ImageView within that same rectangle
Message send time TextView outside the rounded rectangle and to its right.
When text is short, the whole layout should align itself to the right.
When the text is long, message TextView is going to expand itself to the left and upon touching the left side of the screen, it expands to a new row.
The problem is: Rounded rectangle stretches to the whole screen regardless of the message being short or long although underlying FrameLayout width is set to wrap_content.
Here is an image of the problem:
The layout I am using is:
<RelativeLayout
android:id="#+id/outer_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="8dp">
<TextView
android:id="#+id/text_message_time"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:textSize="10sp"
app:showDate="#{message.postedAt}" />
<RelativeLayout
android:id="#+id/bubble_ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/text_message_time"
android:background="#drawable/rounded_rectangle_bubble_sent"
android:padding="8dp">
<ImageView
android:id="#+id/iv_check"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
android:layout_marginLeft="4dp"
app:setStatusPng="#{message.status}" />
<TextView
android:id="#+id/messagetext_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="2dp"
android:layout_toLeftOf="#id/iv_check"
android:singleLine="false"
android:text="#{message.messageText}"
android:textColor="#ffffff" />
</RelativeLayout>
</RelativeLayout>
The inner RelativeLayout named bubble_ll has its width equals wrap_content.
What I am expecting is:
text_message_time TextView should be attached to the right of the screen due to its layout_alignParentEnd property set true.
bubble_ll stands left of the text_message_time view, due to its layout_toLeftOf property set. And it should have a width of its contents.
I have tried other layouts such as Linear, ConstraintLayout etc.
The LinearLayout approach did not work, since the width is set to wrap_content for TextView always overlaps status info checks and message time make them disappear when the message in the TextView is long.
With ConstraintLayout I could not align bubble to stay still on the right. It stays on the center of the screen horizontally since it is constrained on both horizontal sides of the screen.
Any help will be appreciated.

I have come up with the following layout which is a combination of RelativeLayout and LinearLayout. I hope this serves your purpose. Please change the drawables and the ids if necessary.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/outer_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="8dp">
<TextView
android:id="#+id/text_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/message_container"
android:layout_alignParentRight="true"
android:layout_margin="4dp"
android:text="10:30 am"
android:textSize="10sp" />
<LinearLayout
android:id="#+id/message_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_toLeftOf="#+id/text_message_time"
android:background="#android:color/holo_blue_dark"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/messagetext_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:layout_weight="1"
android:padding="4dp"
android:singleLine="false"
android:text="You have a long message here. This is so long that it takes two lines inside the TextView. No wonder, now its taking three lines and now its four. How long this message can go? I now have that question!!!"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/iv_check"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_centerVertical="true"
android:layout_margin="8dp"
android:src="#android:drawable/presence_online" />
</LinearLayout>
</RelativeLayout>

How to make view at the end of textview even if the textview is so long?

I have this layout, where I have text view and an icon next to it.
However, the text is dynamically changing, so sometime it will be too long which push the icon out of the screen.
I tried to add weight to the text but it makes the icon on the right side of the screen which I don't want, I just want it right after the text even if the text go to the next line.
There is my code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/Text"
android:layout_marginLeft="25dp"
android:text="llllll"
/>
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_arrow_drop_down_black_24dp" />
</LinearLayout>
any idea :(?

You can use ConstraintLayout to handle this.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/image"
app:layout_constraintWidth_default="wrap"/>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="#+id/text"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

Just simply add one property line in textview "android:maxWidth" like below :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/Text"
android:layout_marginLeft="25dp"
android:text="llllll"
android:maxWidth="100dp" //it can be your specific size
/>
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_arrow_drop_down_black_24dp" />
</LinearLayout>

You could use <img> tags in the HTML
to know how to do that see this qution (is-it-possible-to-display-inline-images-from-html-in-an-android-textview)

Put the text view inside a relative layout with match parent as width and height wrap content.
Set text view to the same dimensions ie march parent as width and height as wrap content.
Have the image button in the same relative layout and use alignParentEnd as true. You'll see it always add the end of your text view.
If you choose to do this, set some maxEms and ellipsize end so that the text does not overlap the button. You'll get the value by testing it yourself, depends on the text size usually.
Since you want it as a button I'm suggesting this. If you want it just be an icon with no use, you should look into drawableEnd property of the text view.

Textview next to an ImageView

I am trying to have a TextView with an ImageView directly to its right. Right now the image partially overlaps the far right of the text, so if the text inputted is long, then the image is "over" the text. I have an ellipse setting on the text but I need the TextView to "stop" right at the left border of the ImageView.
TextView layout settings:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
ImageView layout settings:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"

Try this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/iv"
android:singleLine="true"
android:maxLines="1"
android:ellipsize="end"
.... />
<!-- background == #null if you don't want default button background -->
<ImageButton
android:id="#id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="3dp"
android:background="#null"
.... />
</RelativeLayout>
EDIT
See the comments in regards to why this works and the posted question doesn't. Also take a look at
Android Relative Layout alignParentRight and alignParentEnd
for a reference to end/right and start/left attributes.

How to achieve the following layout on Android

I'm trying to build the following layout on Android without any success.
I want a text to be displayed on my screen. It can take the whole width, but must be centered horizontally.
On the same line, on the right side of the screen I want to display a small layout. It shouldn't impact the horizontal centering of the main text and the main text shouldn't be visible behind the layout displayed on the right.
I cannot use a hard color for my layout background as it's displayed on a transparent background over a bitmap...
Any idea on how to achieve this ?
I can either use a RelativeLayout in which case the main text isn't centered based on the middle of the screen (it takes the right layout width into account)
Or the text is displayed behind the right layout...
Edit:
Here is one of my test
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom|center_horizontal"
android:layout_centerInParent="true"
android:fontFamily="sans-serif"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:singleLine="true"
android:textColor="?android:attr/textColorPrimary"
android:textSize="17sp"
android:text="very looooooooooooooooooooooooooooooooong text"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerInParent="true"
android:layout_alignParentRight="true"
android:padding="3dp"
android:visibility="visible" >
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical"
android:filter="true"
android:src="#drawable/device_access_time" />
<Spinner
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
</LinearLayout>
</RelativeLayout>

RelativeLayouts adhere to the principle of z-indexes, so if you put the right-aligned layout first, the centered text view will be drawn correctly on top.

Dynamic TextViews wrapping to next row/line in Linear layout

I am trying to build a UI, where in I have a linear layout which has been defined in the XML.
As per the user's input, I need to add some TextViews to this linear layout. I am able to do this.
My actual problem is, when I have more text views, they are stacked next to each other and some of text views text are hidden or stretched vertically as shown in the image below.
I would like to use the whole width of the linear layout and if the text view can not fit in this row, it should be put in a new row or below the first text view.. I would like the display to be as below.
Following is my Linear layout configuration in XML:
<RelativeLayout
android:id="#+id/RL1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:paddingBottom="5dip"
android:paddingTop="5dip" >
<TextView
android:id="#+id/text1"
android:layout_width="85dip"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:gravity="left"
android:text="Lable 1"
android:textColor="#999999" />
<LinearLayout
android:id="#+id/LL1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/button1"
android:layout_toRightOf="#+id/text1"
android:gravity="left|center_vertical"
android:orientation="horizontal"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:paddingTop="3dip" >
</LinearLayout>
<Button
android:id="#+id/button1"
android:layout_width="30dip"
android:layout_height="30dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginTop="2dip"
android:background="#drawable/plus"
android:clickable="true"
android:focusable="true"
android:paddingTop="5dip" />
</RelativeLayout>
Can any one please help me in how to realign the same in java code.

I would Like to suggest you about how you can provide equal sizes to all your views in Linear Layout,you can do that by using weight property in the XML file i.e., android:weight for that particular View and when you use this property you should give width=0dp or 0dip.I think this will solve your problem easily.
Please I suggest you first you take full Knowledge of how to use this property in the following Link:-Weight property with an example

Please see:
How to wrap Image buttons in a horizontal linear layout?
How can I do something like a FlowLayout in Android?
You also might search github for FlowLayout.java.
An alternative approach is given in:
Android - multi-line linear layout
In addition, there's a class that adds images into a TextView:
https://stackoverflow.com/a/21250752/755804
which is not the same as wrapping views in the general case, but sometimes may do the job.

i'm korean.
so i don't speak English well, but i'll help you.
first, Create 'item.xml' with four text boxes.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/set_checkbox"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text2"
android:text="0"
android:layout_weight="1"
android:gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text3"
android:text="0"
android:layout_weight="4"
android:gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text4"
android:text="0"
android:layout_weight="4"
android:gravity="center"/>
</LinearLayout>
second, Create 'main.xml' where 'item.xml' will be dynamically generated.
'orientation' helps to create one line at a time.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
Finally, You can create four TextView per line using the code below.
LinearLayout layout = (LinearLayout)findViewById(R.id.mainxml);
LinearLayout item = (LinearLayout)layout.inflate(this.getContext(), R.layout.itemxml, null);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT);
item.setLayoutParams(params);
CheckBox cb = item.findViewById(R.id.set_checkbox);
TextView text2 = item.findViewById(R.id.text2);
TextView text3 = item.findViewById(R.id.text3);
TextView text4 = item.findViewById(R.id.text4);
cb.setChecked(true);
text2.setText("text2");
text3.setText("text3");
text4.setText("text3");
layout.addView(item);
The 10th loop is shown in the following picture.
enter image description here