How to restrict the width of textview in linearlayout for long words

Question

Here is my layout file:

<?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:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="80dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:textSize="50sp"
            android:background="#FFFF00"
            android:ellipsize="end"
            android:maxLines="1"
            tools:text="THIS IS A LONG SENTENCE"
            />

        <RelativeLayout
            android:layout_width="50dp"
            android:layout_height="match_parent"
            android:background="#0000FF"
            android:padding="4dp">

        </RelativeLayout>

</LinearLayout>

Here is the layout result:

I found the textview will occupy the neighbor relativelayout's space.

What I expect is:

For long sentence:

And for short sentence:

That is, I want the width of blue block to be fixed and to be right of the textview. How to to that ? Thanks.

HelloBird · Answer 1 · 2016-04-19T05:49:46.293

Set wrap_content to LinearLayout width, and set weight to the TextView like this:

<?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:id="@+id/linearLyout"
      android:orientation="horizontal"
      android:layout_width="wrap_content"
      android:layout_height="80dp">

<TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:textSize="50sp"
    android:background="#FFFF00"
    android:ellipsize="end"
    android:maxLines="1"
    tools:text="THIS IS A LONG SENTENCE"
    />

<RelativeLayout
    android:id="@+id/relativeLayout"
    android:layout_width="50dp"
    android:layout_height="match_parent"
    android:background="#0000FF"
    android:padding="4dp">

</RelativeLayout>

</LinearLayout>

this is an answer now, THK you – HelloBird Apr 19 '16 at 05:52 — HelloBird, Apr 19 '16 at 05:52

score 2 · Accepted Answer · answered Apr 19 '16 at 06:35

If you can change the container of the layout from linearlayout to relative or framelayout, then I have a solution for you.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:orientation="horizontal"
          android:layout_width="wrap_content"
          android:layout_height="80dp">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:textSize="50sp"
    android:background="#FFFF00"
    android:ellipsize="end"
    android:maxLines="1"
    tools:text="THIS IS A LONG SENTENCE"
    android:layout_marginRight="50dp"
    />

<RelativeLayout
    android:layout_gravity="right"
    android:layout_width="50dp"
    android:layout_height="match_parent"
    android:background="#0000FF"
    android:padding="4dp">

</RelativeLayout>

From what I tried, it give produces layout as you desire. Solution works on framelayout's (or relativelayout's) ability to overlay its children. Since you wanted (blue block) relativelayout to be of fixed width, I simply allocated margin for textview of the same size....

I hope it helps you...

Linh · Answer 3 · 2016-04-19T13:59:28.440

Set android:layout_weight="1" and android:layout_width="0dp" for your TextView

<?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:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="80dp">

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:textSize="50sp"
            android:background="#FFFF00"
            android:ellipsize="end"
            android:maxLines="1"
            tools:text="THIS IS A LONG SENTENCE"
            />

        <RelativeLayout
            android:layout_width="50dp"
            android:layout_height="match_parent"
            android:background="#0000FF"
            android:padding="4dp">

        </RelativeLayout>

</LinearLayout>

Here is result image on Android Studio 2.1 Preview

Also you can use RelativeLayout like this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="80dp">

    <RelativeLayout
        android:id="@+id/layout_test"
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:background="#0000FF"
        android:padding="4dp">

    </RelativeLayout>

    <TextView
        android:id="@+id/text_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_toLeftOf="@+id/layout_test"
        android:background="#FFFF00"
        android:ellipsize="end"
        android:maxLines="1"
        android:textSize="50sp"
        tools:text="THIS IS A LONG SENTENCE" />
</RelativeLayout>

It will produce same result image like LinearLayout. Hope this help

Hi Phal, your layout works for long sentence case, but in short sentence. I will looks like this: http://i.imgur.com/Ltgfvx6.png . the blue block is not tightly right of the textview — Cody, Apr 19 '16 at 01:30
Yes, but in short sentence case. I don't want textview to use the remaining free space. Your solution seems not get this result: http://i.stack.imgur.com/sg6YK.png — Cody, Apr 19 '16 at 01:46
I have no updated code. My requirement is how to have a layout for long sentence like this: http://i.stack.imgur.com/bnKI0.png and short sentence like this: http://i.stack.imgur.com/sg6YK.png — Cody, Apr 19 '16 at 01:57
@Cody I have no idea why you get the result like this. I have update my answer, please check it again — Linh, Apr 19 '16 at 13:54

Rihan Husain · Answer 4 · 2016-04-19T06:42:23.877

try setting maxWidth dynamically in java instead. as wrap_content of the TextView will eat up the space of your RelativeLayout. so in order to make your app more device friendly calculate the width of the parent layout either using DisplayMetrics or simply using getHeight() method and then set the maxWidth to your TextView. For example:

below is your xml code which you've mentioned with added ID's

    <?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:id="@+id/linearLyout"
          android:orientation="horizontal"
          android:layout_width="match_parent"
          android:layout_height="80dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textSize="50sp"
        android:background="#FFFF00"
        android:ellipsize="end"
        android:maxLines="1"
        tools:text="THIS IS A LONG SENTENCE"
        />

    <RelativeLayout
        android:id="@+id/relativeLayout"
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:background="#0000FF"
        android:padding="4dp">

    </RelativeLayout>

    </LinearLayout>

in java first find the width of your LinearLayout by

    int layoutWidht = linearLayout.getWidth();

calculate the max desired width

    int textViewWidthInPixels = layoutWidht -  <some_integer_value_in_pixels_you_wish_for_relativeLayout>

then set maxWidth to textView in java by

    textView.setMaxWidth(textViewWidthInPixels);

Hope this helps. Happy Coding

P.S. if you want to set width according to dp then convert the desired dp into pixels http://stackoverflow.com/a/12147550/5297758 — Rihan Husain, Apr 19 '16 at 05:17
Nguyễn Trung Hiếu's answer is also correct and short, but if you want to use LinearLayout, you can do it using java, Also his method will not work as desired by you for SHORT sentence — Rihan Husain, Apr 19 '16 at 05:24

score 0 · Answer 5 · answered Apr 19 '16 at 03:26

Try this !!!

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="80dp">

<TextView
    android:id="@+id/text_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_toLeftOf="@+id/layout_test"
    android:background="#FFFF00"
    android:ellipsize="end"
    android:maxLines="1"
    android:textSize="50sp"
    tools:text="THIS IS A LONG SENTENCE" />

<RelativeLayout
    android:id="@+id/layout_test"
    android:layout_width="50dp"
    android:layout_height="match_parent"
    android:layout_alignParentRight="true"
    android:background="#0000FF"
    android:padding="4dp">

</RelativeLayout>

</RelativeLayout>

It worked perfect !!!

Thanks. In short sentence your layout is like this : http://i.imgur.com/Fped6tK.png , but I would like this: http://i.stack.imgur.com/sg6YK.png. — Cody, Apr 19 '16 at 05:33

How to restrict the width of textview in linearlayout for long words

5 Answers5