Android: How do I set max-width of TextVIew as ratio of screen size?

Question

I'm trying to create a simple Android chat app. What I need to do is create a chat bubble around the chat text. The width of this bubble can should not be greater than 85% of the width of the screen, even if it contains more text (the text should move to the next line). However, if the amount of text is less in the bubble, the width of the bubble should wrap the content.

The reason for this is that I'm displaying the time of the chat to the right of the Bubble, and if the bubble width becomes greater than 85% screen size, the date won't be visible.

Below is the layout file:

        <TextView
            android:id="@+id/chatBody"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chat Text"
            android:textColor="#222222"
            android:textSize="19sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/chatDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:gravity="right"
            android:text="Date"
            android:textColor="#999999"
            android:textSize="12sp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="20dp"/>

    </LinearLayout>

Answer 1

It is only possible to make it in Java code. In your activity:

private TextView yourBubbleTextView;

In your onCreate() :

yourBubbleTextView = (TextView) findViewById(R.id.yourBubbleTvId);
// paddings is the total amount of paddings which surround the bubble
// i.e. if you lave LinearLayout padding="5" then use 10 (5 left 5 right)
int totalSize = getWindoManager().getDefaultDisplay().getWidth() - paddings;
// if you aren't using LinearLayout, replace it with whatever layout manager you are using
yourBubbleTextView.setLayoutParams(new LinearLayout.LayoutParams(totalSize, ViewGroup.LayoutParams.WRAP_CONTENT));

Hope I helped!

Answer 2

If you're already displaying this in a LinearLayout then you can take advantage of layout_weight.

So your code would end up looking like this:

<TextView
        android:id="@+id/chatBody"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="4"
        android:text="Chat Text"
        android:textColor="#222222"
        android:textSize="19sp"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/chatDate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginRight="10dp"
        android:gravity="right"
        android:text="Date"
        android:textColor="#999999"
        android:textSize="12sp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="20dp"/>

</LinearLayout>

So assuming your LinearLayout takes up the entire width of the screen (using fill_parent or match_parent ) chatBody will now be 80% of thew width and chatDate will be 20% of the width. If you want it to be 85% you could do like weights of 17 and 3, or even 85 and 15 if you want to be precise.

Answer 3

OK, So i got the answer. For anybody who might be looking for the same answer.

All I did was set the width's for the first TextView's to "0dp". Then I gave it a layout_weight of anything more than 0.

Here's the code that worked for me.

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="left"
        android:orientation="horizontal"
        android:background="@drawable/chat_bubble"
        android:padding="10dp">

        <TextView
            android:id="@+id/chatBody"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Chat Text is a lot of long text that should ideally move to the next line automatically"
            android:textColor="#222222"
            android:layout_weight="0.1"
            android:textSize="19sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/chatDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:gravity="right"
            android:text="Date"
            android:textColor="#999999"
            android:textSize="12sp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="20dp"/>

    </LinearLayout>

Answer 4

Place the TextView in a constraint layout and then use the following two attributes in the TextView:

app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="0.4" 

Inspired by this answer:

ConstraintLayout max width percentage