Responsive layout on Android

Question

I have three elements in layout, two TextViews and one ImageView between them. I'm trying to achieve this behavior:

1. image (arrow) has 9patch
2. image is wide as possible
3. image has set minimal width
4. right and left texts go wider with longer text but only to meet image's minWidth, then new line appears

Below are few screenshots from Android Studio layout preview, gained with different layouts.

What I have tried:

• Relative layout: image centered, minWidth set, texts have set toRightOf/toLeftOf
• Relative layout: image has set toRightOf/toLeftOf
• Constraint layout: "constraint arrows" go from image to text
• Constraint layout: "constraint arrows" go from text to image
• Linear layout: using weight (not really responsive)

What I always get:

What I want seems quite straightforward to me but I cannot do it. Am I missing something or is it really impossible? Thank you in advance.

Answer 1

Use below code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <TextView
        android:id="@+id/left_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:text="TextView" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="100dp"
        android:layout_toLeftOf="@+id/right_tv"
        android:layout_toRightOf="@+id/left_tv"
        app:srcCompat="@drawable/arrow" />

    <TextView
        android:id="@+id/right_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="TextView" />
</RelativeLayout>

Replace your image with arrow

Answer 2

Here is one more answer done via constraintLayout by creating horizontal chains.

Updated as you asked

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="wrap_content">

    <TextView
        android:id="@+id/left_tv"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="ajn sdhbch chf nbhjgvbf vkjf vhf bvihfijnvj vfknvv ihvb jnvkjnfv kjnvfn"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/imageView6"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/left_tv"
        app:layout_constraintRight_toLeftOf="@+id/right_tv"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_next_button" />

    <TextView
        android:id="@+id/right_tv"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/imageView6"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Answer 3

Updated: the code is updated for more responsive layout.

Now play with maxwidth of both text views.

For your problem updating maxwidth programmatically will be better.

This code is done with Linear layout method. There is a GridLayout method also along with constraintLayout method. Can be achieved with many layouts, if you know the right technique to do so.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:id="@+id/left_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView is long and very long" />
    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_add_circle_green" />
    <TextView
        android:id="@+id/right_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="60dp"
        android:text="TextView is long and very long" />
</LinearLayout>