How to mimic RelativeLayout params in GridLayout

Question

I am trying to rework one of my layouts using GridLayout and a bit stuck with one of the problems. Here is what I have now:

And this is my layout:

<GridLayout
    style="@style/Widget.Card"
    android:layout_width="match_parent"
    android:layout_height="@dimen/card_height"
    android:background="@color/news_card_background"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:columnCount="3"
    android:rowCount="2" >

    <ImageView
        android:id="@+id/thumbnail"
        android:layout_width="@dimen/card_thumbnail_width"
        android:layout_height="match_parent"
        android:layout_rowSpan="2"
        android:background="@drawable/news_card_thumbnail_background"
        android:contentDescription="@string/thumbnail"
        android:cropToPadding="true"
        android:scaleType="centerCrop"
        android:visibility="visible" />

    <com.inrix.twc.view.RobotoTextView
        android:id="@+id/title"
        style="@style/TextAppearenceNewsTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/news_title_horizontal_margin"
        android:layout_marginRight="@dimen/news_title_horizontal_margin"
        android:text="Title" />

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:layout_rowSpan="2"
        android:src="@drawable/audio_mrss"
        tools:ignore="ContentDescription" />

    <com.inrix.twc.view.RobotoTextView
        android:id="@+id/footer"
        style="@style/TextAppearenceNewsFooter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginLeft="@dimen/news_description_horizontal_margin"
        android:layout_marginRight="@dimen/news_description_horizontal_margin"
        android:text="description" />
</GridLayout>

But when one of the text views goes very long, it pushes my last column out of the screen:

The question is - how do I restrict my text to go beyond row's bounds, so my icon always stays right-aligned. So basically I'm trying to mimic RelativeLayout's toLeftOf attribute.

I realize I can easily do that with RelativeLayout, but it doesn't quite work for me because of other reasons. I hope it is possible to do with GridLayout

Answer 1

Thats not the target of gridlayout. I don't think that is even (easily) possible. Blockqoute from GridLayout limitations.

GridLayout does not provide support for the principle of weight, as defined in weight. In general, it is not therefore possible to configure a GridLayout to distribute excess space between multiple components. Some common use-cases may nevertheless be accommodated as follows. To place equal amounts of space around a component in a cell group; use CENTER alignment (or gravity). For complete control over excess space distribution in a row or column; use a LinearLayout subview to hold the components in the associated cell group. When using either of these techniques, bear in mind that cell groups may be defined to overlap.

TextView needs weight to define his own size on the screen (using wrap content).

You can try to use relative layout or build a tree of linearlayout like this:

• LinearLayout horizontal
  • ImageView @thumbnail
  • LinearLayout vertical weight 1
    • TextView @title
    • TextView @footer
  • ImageView @icon