Aligning items in cardview

Question

I want my card to look like the following

I kept my layout like this

    <android.support.v7.widget.CardView
        android:layout_gravity="center"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="2dp"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Order# GAMH2103"
            android:layout_marginStart="5dp"
            android:layout_marginLeft="5dp"
            android:gravity="start"
            android:textSize="15dp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Confirmed"
                android:drawableRight="@drawable/check"
                android:textColor="#00FF00"
                android:gravity="end"
                android:textSize="15dp"/>

        </LinearLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@android:color/darker_gray"
                android:layout_marginTop="5dp"
                />

        </LinearLayout>

Somehow, i am not able to get the "confirmed" TextView visible. I can see the order# though.

I have played with the gravity and layout_gravity but somehow couldn't get through.

Please help.

Thanks, Lakshman.

Because you set width the "order# though" TextView `android:layout_width="match_parent"`, so the "confirmed" TextView can't visible. Change to `android:layout_width="wrap_content"`. You can add `android:layout_weight="1"` if you want the "confirmed" TextView allways visible. — Hoang Nguyen, Mar 23 '16 at 04:34

score 13 · Accepted Answer · answered Jan 26 '17 at 05:47

Use the following layout.This will work for you.

It is always preferred to use Relative Layout instead of Linear layout for better view alignment .

<android.support.v7.widget.CardView
    android:layout_gravity="center"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="2dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Order# GAMH2103"
            android:layout_marginStart="5dp"
            android:layout_marginLeft="5dp"
            android:gravity="start"
            android:textSize="15dp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Confirmed"
            android:textColor="#00FF00"
            android:gravity="end"
            android:textSize="15dp"/>


    </RelativeLayout>

    </android.support.v7.widget.CardView>

score 1 · Answer 2 · edited Jan 26 '17 at 04:52

A simple relative layout should do the job.

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Order# GAMH2103"
        android:layout_marginStart="5dp"
        android:layout_marginLeft="5dp"
        android:gravity="start"
        android:textSize="15dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Confirmed"
        android:drawableRight="@drawable/check"
        android:textColor="#00FF00"
        android:layout_gravity="end"
        android:textSize="15dp"/>

</RelativeLayout>

Note the difference between gravity and layout_gravity, if you use gravity in a TextView, it pertains to the position of the text inside the invisible box that is the border of TextView, so for example, layout_gravity on the other hand pertains to the position of the view inside the parent.

Aligning items in cardview

2 Answers2

Linked