Search code examples
androidandroid-layouttextviewandroid-relativelayout

Relativelayout position view between two views


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:

enter image description here

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):

enter image description here

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

enter image description here

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.


Solution

  • 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.