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>

score 2 · Accepted Answer · answered Jun 09 '15 at 13:46

2

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>

answered Jun 09 '15 at 13:46

Rachit

3,173
3
28
45

Well, I think you should use this instead: `layout_weight="85"` and `layout_weight=15` for the text views and `weightSum="100"` for the LinearLayout. – Chaoz Jun 09 '15 at 13:54
For some reason that doesn't seem to work for me. When I do that the width allocated to the Date field is less than 15%. And as i increase the value from 15 to 25 (and from 85 to 75), the area for Date becomes even smaller. – Rachit Jun 09 '15 at 13:56
Also add `layout_width="0dp"` for both TextViews – Chaoz Jun 09 '15 at 13:59
I did. Still doesn't work for me. Strangely, if I change the values to 95 and 5, the width of the date field slightly increases. It seems to be working as an inverse of weight – Rachit Jun 09 '15 at 14:01
Did you also add the `weightSum`? Also try to add `layout_height="0dp"` – Chaoz Jun 09 '15 at 14:02
I added the weightSum. And I now also tried with layout_height="0dp". Still the same. The code that I shared does work just as I wanted it to. However it shouldn't and that's crazy. – Rachit Jun 09 '15 at 14:08
It's very normal it is working. The date has no weight and `wrap_content` which means it's as big as possible. The big text has `fill_parent` and weight so it fills the remaining space. So that's even better, but I wonder why the other one doesn't work. – Chaoz Jun 09 '15 at 14:14
That's the thing, the big text doesn't have fill parent. It has a width of "0dp" and a weight of "0.1". So it should only take up 10% of the screen width. It should work with width="fill_parent", but not with the code that I've used. – Rachit Jun 09 '15 at 14:23
Sorry, I meant `0dp`. And if it is the only view who has a `layout_weight` it fits all the remaining space, in your case everything except the date, – Chaoz Jun 09 '15 at 14:26
Oh, ok, I didn't know that. Thanks for that. I'll try and figure out why your answer isn't working, must be some stupid mistake that I'm making, since logically it should work. I'll update here when I figure it out. Thanks for your inputs. – Rachit Jun 09 '15 at 14:27

score 1 · Answer 2 · answered Jun 09 '15 at 13:44

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!

Thanks buddy but I got the solution through the xml itself. But thanks for your answer, I appreciate it. :) — Rachit, Jun 09 '15 at 13:46

score 1 · Answer 3 · answered Jun 09 '15 at 13:44

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.

Hey thanks man, I just came to this solution myself like 5 mins back. — Rachit, Jun 09 '15 at 13:48

score 1 · Answer 4 · answered Nov 15 '22 at 07:14

1

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

answered Nov 15 '22 at 07:14

Hisham Hijjawi

1,803
2
17
27

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

4 Answers4