Place two multiline TextViews with wrap_content width on both sides of the parent view

user_6383050 0
Viewed 743

Help me please achieve following arrangement of two TextViews:

enter image description here

  1. On the left is a simple TextView with title, and on the right is another TextView with a Drawable on the left side of it (it is important because of it I can’t use match_parent). Both TextViews should be wrap_content and pressed to their side.
  2. If one of the TextViews is too long, it should rest against another TextView and wrap its own text.
  3. If both TextViews are long, then they should take up the same space. None of them should be pushed outside the parent view.
android-constraintlayout layout textview android
5 Answers

You can use both LinearLayout or ConstraintLayout, and the main here is android:maxWidth this we need to give one view and the other view will get adjust based on that.

ConstraintLayout example

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/start"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@+id/end"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Loooooooooong Texxxxxxxt!!!!!!!!!!!!" />

    <TextView
        android:id="@+id/end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="250dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="May be this is short"/>

</androidx.constraintlayout.widget.ConstraintLayout>

LinearLayout Example:

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

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Loooooooooong Texxxxxxxt!!!!!!!!!!!!!!!!!!!!!!" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="250dp"
        android:text="May be this is short with maxwidth"/>

</LinearLayout>
user_9001280
user_80520580 
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:gravity="left" />

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/left"
        android:gravity="right" />

</RelativeLayout>

note that left TextView may occupy whole available space if got very long text, so you may add some maxWidth param - if its not supported by TextView itself then you may wrap first one into LinearLayout (which supports maxWidth for shure). another way may be to use TableLayout and TableRow views or ConstraintLayout

user_42176820

Check this out

activity_main.xml

<?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="match_parent"
    android:id="@+id/constraintLayout"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/startTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="On"
        android:gravity="center"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/endTextView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/endTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_margin="8dp"
        android:text="If one of the TextViews is too long"
        android:textSize="20sp"
        app:drawableStartCompat="@android:drawable/ic_btn_speak_now"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/startTextView"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

 private TextView startTV, endTV;
    private ConstraintLayout constraintLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        constraintLayout = findViewById(R.id.constraintLayout);
        startTV = findViewById(R.id.startTextView);
        endTV = findViewById(R.id.endTextView);


        constraintLayout.postDelayed(new Runnable() {
            @Override
            public void run() {
                int systemWidth = Resources.getSystem().getDisplayMetrics().widthPixels;

                int startTVWidth = startTV.getMeasuredWidth();
                int endTVWidth = endTV.getMeasuredWidth();

                if ((startTVWidth + endTVWidth) >= systemWidth) {

                    if (startTVWidth > endTVWidth) {

                        startTV.setMaxWidth(systemWidth - endTVWidth - 24);

                        startTV.setPadding(12, 12, 12, 12);
                        endTV.setPadding(12, 12, 12, 12);

                    } else if (endTVWidth > startTVWidth) {

                        endTV.setMaxWidth(systemWidth - startTVWidth - 24);

                        startTV.setPadding(12, 12, 12, 12);
                        endTV.setPadding(12, 12, 12, 12);
                    }
                }
            }
        }, 1);
    }

A bit long. But this works.

user_96526210

Do try this -

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

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="left"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@+id/text2"
    android:text="TextView1" />

<TextView
    android:id="@+id/text2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:layout_alignParentRight="true"
    android:drawableLeft="@drawable/basket"
    android:text="TextView2" />
</RelativeLayout>
user_98920840
Related