How to use wrap_content with a maximum width?

Question

I am trying to layout a view that should wrap its content, but it shouldn't be more than ~100dp less than its parent width. How can I do that using a RelativeLayout or some other layout? What I have right now will always make the view 100dp less than its parent so that there is space for another view.

This picture is an example of what I have:

As you can see, the text doesn't fill the whole box, so it could be smaller. But, it should never be larger than 100dp less than its parent, so that there is room for the time the message was sent.

This is my layout.

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:clipChildren="false"     android:orientation="vertical"     android:paddingBottom="10dp"     android:paddingRight="@dimen/horizontalMargin"     android:paddingTop="10dp">       <TextView         android:id="@+id/message_holder"         android:layout_toLeftOf="@id/blank"         android:layout_alignParentLeft="true"         android:layout_marginLeft="@dimen/horizontalMargin"         android:background="@drawable/message_corners"         style="@style/white_text"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="alsdkjf; alsdkf" />      <RelativeLayout         android:id="@+id/blank"         android:layout_width="wrap_content"         android:layout_height="1dp"         android:layout_alignParentRight="true"         android:minWidth="100dp">      </RelativeLayout>      <TextView         android:minWidth="100dp"         android:id="@+id/time"         style="@style/gray_text"         android:layout_toRightOf="@id/message_holder"         android:paddingLeft="10dp"         android:text="Yesterday,\n11:30 PM" />       <RelativeLayout         android:layout_width="40dp"         android:layout_height="40dp"         android:layout_alignBottom="@id/message_holder"         android:layout_alignParentLeft="true"         android:background="@drawable/triangle" />  </RelativeLayout> 

I have tried using the "minWidth" property on a blank view to the right of the message box to provide spacing, but it doesn't resize to be larger (which would make the message box smaller). When I don't have the blank view, and simply place the time TextView to the right of the message box, then that TextView isn't visible when the message box expands.

Update:

This is my "message_corners.xml":

<?xml version="1.0" encoding="utf-8"?> <shape     xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">       <solid         android:color="@color/green" >     </solid>       <padding         android:left="10dp"         android:top="10dp"         android:right="10dp"         android:bottom="10dp"    >     </padding>       <corners         android:radius="10dp">     </corners>  </shape> 

Update 2:

This is what I am looking for in a layout with short text:

And this is what I am looking for in a layout with long text:

Answer 1

Here you go, a layout that does exactly what you want.

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:clipChildren="false"     android:paddingBottom="10dp"     android:paddingRight="10dp"     android:paddingTop="10dp">       <RelativeLayout         android:id="@+id/blank"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="#aaaaaa">         <LinearLayout             android:id="@+id/message_container"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:paddingRight="100dp">             <TextView                 android:id="@+id/message"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="Hello?"                 android:background="#00ff00" />         </LinearLayout>          <TextView             android:id="@+id/time"             android:layout_width="100dp"             android:layout_height="wrap_content"             android:layout_toRightOf="@id/message_container"             android:layout_marginLeft="-100dp"             android:text="12:30 PM"             android:background="#ff0000" />     </RelativeLayout>  </RelativeLayout> 

Short message

Long message

Answer 2

I know this is a really old question, but it's a frustrating problem I've encountered several times now and the existing answers weren't quite what I was looking for. Some colleagues and I came up with the following:

<?xml version="1.0" encoding="utf-8"?>  <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:orientation="vertical"     android:background="#FFFFFF">      <LinearLayout         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="#888888"         android:padding="10dp"         android:orientation="horizontal">          <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_weight="1"             android:background="#00FF00"             tools:text="Short message."/>          <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_marginLeft="10dp"             android:layout_weight="0"             android:background="#CCCCCC"             tools:text="Yesterday,\n11:30pm"/>      </LinearLayout>      <LinearLayout         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginTop="10dp"         android:background="#888888"         android:padding="10dp"         android:orientation="horizontal">          <TextView             android:id="@+id/message_text_view"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_weight="1"             android:background="#00FF00"             tools:text="Super ultra mega awesome long message which is going to help us take over the world."/>          <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_marginLeft="10dp"             android:layout_weight="0"             android:background="#CCCCCC"             tools:text="Yesterday,\n11:31pm"/>      </LinearLayout>  </LinearLayout> 

Which looks like this when rendered:

The magic seems to be the zero value for the weight of the text box on the right (in addition to the non-zero weight value of the text box on the left, which some of the other answers already have).

Honestly, I can't explain exactly why it works, but after having looked for a solution to this for so long I'm not questioning it! :)

As an aside, I like this approach because it doesn't require any explicit or minimum widths, any intermediate wrapper views, or the use of clipping settings, margins, padding, etc. to implement view overlay.