How align two TextViews in one line on left side

Question

I should align two TextViews in one lane. But the first TextView should be cropped when it's too a long.

<RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/subtitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:maxLines="1"
                    tools:text="subtitle" />

                <TextView
                    android:id="@+id/date"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/subtitle"
                    android:maxLines="1"
                    tools:text=" * date" />
            </RelativeLayout>

I have issue. When the first TextView has too long text, so the second TextView is hidden.

First case. Short subtitle

Second case. Long subtitle. Second TextView is cropped

Both views should be placed on the left side when text short. But the first text should be cropped when text is long.

Answer 1

Use Layout with weight :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">

<TextView
    android:id="@+id/subtitle"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:maxLines="1"
    android:text="subtitlevvnvnvnnvnvnvnvnvnvnvnvnvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv"
    android:ellipsize="end"
    android:layout_weight="0.5" />

<TextView
    android:id="@+id/date"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:maxLines="1"
    android:text=" * date"
    android:layout_weight="0.5" />
</LinearLayout>

Output:

Answer 2

Add padding in both the TextView

android:paddingLeft="10dp"

            <TextView
                android:id="@+id/subtitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxLines="1"
                android:paddingLeft="10dp"
                tools:text="subtitle" />

            <TextView
                android:id="@+id/date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/subtitle"
                android:maxLines="1"
                android:paddingLeft="10dp"
                tools:text=" * date" />
        </RelativeLayout>

Answer 3

Do this It may help in equal size . I have given them the layout weight , you can change it and adjust textviews accordingly . you can read more about linear layout weight from here

 <?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="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >

        <TextView
            android:id="@+id/subtitle"
            style="@style/m4w_TextView.Subtitle"
            fontPath="fonts/InterstatePro-Light.otf"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:ellipsize="end"
            android:layout_weight="1"
            tools:text="subtitle" />

        <TextView
            android:id="@+id/date"
            style="@style/m4w_TextView.Subtitle"
            fontPath="fonts/InterstatePro-Light.otf"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:ellipsize="end"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/subtitle"
            android:maxLines="1"
            tools:text=" * date" />
    </LinearLayout>

</LinearLayout>

Answer 4

Try the below code. You just need to place date element first, then the subtitle in relative layout.

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

<TextView
                android:id="@+id/date"
                android:layout_width="30dp"
                android:layout_height="wrap_content"
                android:maxLines="1"
                tools:text=" * date" />

            <TextView
                android:id="@+id/subtitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:maxLines="1"
                android:layout_toLeftOf="@+id/date"
                tools:text="subtitle" />


        </RelativeLayout>

Answer 5

Try this code it may help you

  <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/subtitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:layout_weight="1"
            tools:text="ajay bhimani this is practice"/>

        <TextView
            android:id="@+id/date"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/subtitle"
            android:maxLines="1"
            android:layout_weight="1"
            tools:text=" * date"/>
    </LinearLayout>

Answer 6

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/subtitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight = 1
                tools:text="subtitle" />

            <TextView
                android:id="@+id/date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight = 1
                tools:text=" * date" />
        </LinearLayout >

Answer 7

Try below code

 <LinearLayout
    android:layout_width="match_parent"
    android:weightSum="2"
    android:orientation="horizontal"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/subtitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:layout_weight="1"
        android:ellipsize="end"
        tools:text="subtitle  df  ds fgfg cvb vbcfvnb cbxfcb" />

    <TextView
        android:id="@+id/date"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        tools:text=" * date" />
</LinearLayout>

Answer 8

Try replacing the RelativeLayout to LinearLayout and add layout_weight=1 for both the TextViews

Change To:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/subtitle"
        style="@style/m4w_TextView.Subtitle"
        fontPath="fonts/InterstatePro-Light.otf"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:maxLines="1"
        tools:text="subtitle" />

    <TextView
        android:id="@+id/date"
        style="@style/m4w_TextView.Subtitle"
        fontPath="fonts/InterstatePro-Light.otf"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_toRightOf="@+id/subtitle"
        android:maxLines="1"
        tools:text=" * date" />
</LinearLayout>

Answer 9

To achieve both, you need wrap_content in the Layout wrap_content in the second TextView and the combination of width:0dp and layout_weight:1 in the first TextView . This way the second TextView will always be large enough to display the content and the first TextView will extend up to the available space next to it.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/subtitle"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_weight="1"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="this text is tool long so it will be cut. this text is tool long so it will be cut." />

    <TextView
        android:id="@+id/date"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:maxLines="1"
        android:text=" * date" />
</LinearLayout>