Search code examples
androidandroid-layoutandroid-gridlayout

Aligning columns in gridlayout

Android Studio 2.1.1

This is what I have with the current xml below. enter image description here

However, this is my expected. enter image description here

I want to align the "LAST SALE $230" TextView next to the icon. However, the "LAST SALE .." is in column 2, and the icon is in column 1.

Is this possible to do this in GridLayout?

Many thanks for any suggestions,

I am using gridlayout and this is my xml

android.support.v7.widget.GridLayout
    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"
    app:columnCount="3"
    app:rowCount="5">

    <!-- Row 1 -->
    <ImageView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_marginStart="8dp"
        android:id="@+id/ivOptions"
        android:src="@drawable/ic_remove_circle_outline_black_24dp"/>

    <TextView
        android:id="@+id/tvSize"
        app:layout_columnSpan="2"
        android:text="Size 8.0/ Tubular Doom Primeknit Core Black"
        android:textSize="14sp"
        android:textColor="@android:color/black"
        android:fontFamily="sans-serif-condensed"/>

    <!-- Row 2 -->
    <TextView
        android:id="@+id/tvPartNumber"
        app:layout_column="1"
        app:layout_columnSpan="2"
        android:text="S74921"
        android:textSize="12sp"
        app:layout_row="1" />

    <!-- Row 3 -->
    <ImageView
        android:id="@+id/ivSneaker"
        android:layout_width="80dp"
        android:layout_height="50dp"
        app:layout_gravity="center"
        app:layout_columnWeight="1"
        android:src="@drawable/sneakers_200"
        android:scaleType="fitXY"/>

    <include
        android:id="@+id/top_offers"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_gravity="center"
        layout="@layout/top_offers"/>

    <include
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_gravity="center"
        app:layout_columnWeight="1"
        layout="@layout/offers_button"/>

    <!-- Row 4 -->
    <ImageView
        android:layout_width="wrap_content"
        app:layout_column="1"
        android:layout_marginEnd="8dp"
        android:src="@drawable/ic_trending_down_black_24dp"/>

    <TextView
        android:id="@+id/tvLastSale"
        app:layout_gravity="center_vertical"
        android:text="LAST SALE $230"/>
</android.support.v7.widget.GridLayout>
Solution

  • Managed to do this by creating a new linearLayout with the icon and text. Then including it in column 1:

     <!-- Row 4 -->
 <include
    app:layout_column="1"
    layout="@layout/last_sale_row"/>