Zeeshan Shabbir Zeeshan Shabbir - 4 months ago 20
Android Question

How to show ImageView over the bottom of CardView

Struggling with xml. I want to show

RoundedCornerImageView
over
CardView
's bottom. Having a hard time to implement it.

Here is snap how i want layout to look like

enter image description here

Here is
xml
for what i have tried so far.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="300dp"
android:id="@+id/card"
android:orientation="vertical">
<LinearLayout
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is Title"
android:textSize="24sp"
android:textColor="#000"/>
<TextView
android:padding="5dp"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#c5c5c5"
android:text="This is content.This is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is content"/>
</LinearLayout>
</android.support.v7.widget.CardView>

<com.softoven.ultron.util.RoundedImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/avatar"
android:paddingTop="20dp"
android:layout_gravity="bottom|center_horizontal"/>
</FrameLayout>

Answer

This should work for you:

1) With RelativeLayout as root view:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/container">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:id="@+id/card"
            android:orientation="vertical">
            <LinearLayout
                android:layout_margin="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <TextView
                    android:padding="5dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="This is Title"
                    android:textSize="24sp"
                    android:textColor="#000"/>
                <TextView
                    android:padding="5dp"
                    android:layout_marginTop="10dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="#c5c5c5"
                    android:text="This is content.This is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is content"/>
            </LinearLayout>
        </android.support.v7.widget.CardView>
    </LinearLayout>

    <com.softoven.ultron.util.RoundedImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/avatar"
        android:paddingTop="20dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="-40dp"
        android:layout_below="@+id/container" />

</RelativeLayout>

2) With LinearLayout as root view:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/container">

                <android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:id="@+id/card"
                    android:orientation="vertical">
                    <LinearLayout
                        android:layout_margin="10dp"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">
                        <TextView
                            android:padding="5dp"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="This is Title"
                            android:textSize="24sp"
                            android:textColor="#000"/>
                        <TextView
                            android:padding="5dp"
                            android:layout_marginTop="10dp"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:textColor="#c5c5c5"
                            android:text="This is content.This is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is content"/>
                    </LinearLayout>
                </android.support.v7.widget.CardView>
            </LinearLayout>

            <com.softoven.ultron.util.RoundedImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:src="@drawable/avatar"
                android:paddingTop="20dp"
                android:layout_marginTop="-40dp"
                android:layout_gravity="center_horizontal" />

</LinearLayout>