两个视图之间的相对布局位置视图

Question

so I'm currently working on an app on Android, and I got stuck on a specific problem regarding the RelativeLayout, which I can't find a way to solve.

I have in the layout three views as follows: TextView, Textview and ImageView (laid horizontally), here is a screenshot of the ios counterpart:

the Textview at the middle should stick to the first one, until he gets to the Imageview, when he does, he keeps his minimum size (wrap content), while the first Textview truncate.

On IOS I setted priorities to the constraint to accomplish this, but I can't figure out how to solve this on Android.

Here what I tried:

<android.support.percent.PercentRelativeLayout 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"
android:background="@drawable/daily_movie_title_box">

    <TextView
    android:id="@+id/daily_header_textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"


    android:padding="15dp"
    android:text="New Text aawi oa ioawfwi"
    android:textSize="16sp"

    android:textStyle="bold"
    android:textColor="@color/white"

    android:lines="1"
    android:singleLine="true"

    android:layout_alignParentStart="true"
    />


    <TextView
    android:id="@+id/duration_text"
    android:text="138 mins"
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:textSize="13sp"
    android:textColor="@color/white"
    android:lines="1"
    android:layout_alignBaseline="@id/daily_header_textview"

    android:layout_toStartOf="@+id/certification_icon"
    android:layout_toEndOf="@id/daily_header_textview"

    />

    <ImageView
    android:id="@id/certification_icon"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:src="@drawable/uk12a"
    android:layout_alignBottom="@id/daily_header_textview"
    app:layout_aspectRatio="100%"/>

</android.support.percent.PercentRelativeLayout>

Which resulted in this (which is what I want):

But when I increase the first Textview text it's not behaving as I desire...

Is it possible to achieve the behaviour I want in Android (keep the middle Textview wrap content, and truncate the first one if needed)?

I will post an update if I find a solution eventually, just wanted to see if anyone can find an easy way to achieve this behaviour, as I suspect there is.

Thanks.

Answer 1

From my understanding, you want the first TextView to be as large as possible, without adding space after the text if the text is too small. The second TextView should only wrap_content , but it should fill the rest of the parent layout when the row doesn't. The ImageView is set to wrap_content .

I tested it with this layout:

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

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="0"
        android:stretchColumns="1">

        <TableRow>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:text="Shrinking text dddddddddddddddddddddd"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Midle column"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
        </TableRow>

    </TableLayout>

</LinearLayout>

The only problem is that if the second column has a incredibly large text, it will push the other views out of the parent. But in your case, I don't think that will be a problem. Otherwise, I think it does the job.

Answer 2

These are some suggested solutions:

• You can use LinearLayout with horizontal orientation and weight for each component ( TextViews and ImageView ).
• You can set the minimum and maximum text length for the second TextView.

But i prefer to apply the first solution. You can assign a weight for each component ( amount of space on the screen ) using:

android:layout_height