Android set max width in percentage of a TextView in LinearLayout of vertical orientation

Question

I'd like to set the layout_weight of the TextView with the tv_long_text to 80% in the following LinearLayout of vertical orientation.

<LinearLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:orientation="vertical">
    <TextView
            android:id="@+id/tv_short_text"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            tools:text="short text" />
    <TextView
            android:id="@+id/tv_long_text"
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:layout_weight="0.8"
            tools:text="a pretty long text" />
</LinearLayout>

The above is not working because the orientation of the textview's parent is vertical.

So, I tried to set the android:layout_width="match_parent" in the xml and then set the width at run time by getting the measured width and then sets the width to 80% but the getMeasuredWidth is giving me 0.

int measuredWidth = longTextView.getMeasuredWidth();
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) longTextView.getLayoutParams();
params.width = (int) (measuredWidth * 0.8);
longTextView.setLayoutParams(params);

I also tried to set the layout_weight at run time but it didn't work either and it's probably because it's parent view is in vertical orientation.

longTextView.setLayoutParams(
        new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.MATCH_PARENT,
                0.8f)
);

The one that worked for me is by adding some extra views for the long text view. But it's 2 more extra views added for just trying to set the width of this view in percentage. Is there any other efficient way to do this?

<LinearLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:orientation="vertical">
    <TextView
            android:id="@+id/tv_short_text"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            tools:text="short text" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/tv_long_text"
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:layout_weight="0.8"
            android:textStyle="bold"
            tools:text="a pretty long text" />
        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"/>
    </LinearLayout>
</LinearLayout>

Liz

Answer 1

I would not try to fiddle with run time measurements. Your solution with a second horizontal Layout is perfectly fine since you have two TextViews expanding horizontally.
Another option would be PercentRelativeLayout from the support library com.android.support:percent:25.1.0 See here

This is from the docs

 <android.support.percent.PercentRelativeLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
 </android.support.percent.PercentRelativeLayout>

Austro

Now in 2021 it migrated to AndroidX and need to be replaced to androidx.percentlayout.widget.PercentRelativeLayout – Girlfriend

Answer 2

use android:layout_weight

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            />
        <android.support.v4.widget.Space
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="3"/>
    </LinearLayout>

TRY This structure to let TextView flow only upto 75% of the screen width. you can adjust SPACER width to achieve, what you want like 2 for 50%.

Taneka

Answer 3

You can use android:weightSum, and achieve the same result without additional View like:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/activity_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:weightSum="10"
            android:orientation="vertical">

    <TextView
        android:id="@+id/tv_short_text"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        tools:text="short text" />
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="10">
        <TextView
            android:id="@+id/tv_long_text"
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:layout_weight="8"
            android:textStyle="bold"
            tools:text="a pretty long text a pretty long text a pretty long text" />
    </LinearLayout>
</LinearLayout>

Drier

still have this extra LinearLayout wrapper :P – Liz

LinearLayout wrapper on the right side stays, something must since 80% of the space is used, but the TextView is 80%, and when you are displaying some text, only that area will be used :) – Drier

Answer 4

Solution with ConstraintLayout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:background="@drawable/selector_rect_white_gray">

    <TextView
        android:id="@+id/tv_short_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="short text" />

    <TextView
        android:id="@+id/tv_long_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_short_text"
        app:layout_constraintWidth_percent=".8"
        tools:text="very long text - 80% of screen width exact" />

</androidx.constraintlayout.widget.ConstraintLayout>

Carreon