CardView with a smaller body and Image floating outside it

Question

I am trying to create a CardView in Android that would have the image look like it is floating outside the box and the CardView box covering it would look smaller.

Since I do not know how to better describe it I found a similar design and tried to draw it on Paint.

The confusing part for me is to make the box appear smaller than the actual CardView is.

Check this question: https://stackoverflow.com/q/30640745/1574250 — André Sousa, Nov 09 '18 at 13:29

score 2 · Accepted Answer · answered Nov 09 '18 at 14:22

Try out this code (for your item's layout file):

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@android:color/holo_green_dark"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="25dp"
        app:cardBackgroundColor="@android:color/holo_orange_light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView One"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:layout_marginStart="70dp"
            android:layout_marginTop="15dp"
            android:layout_marginBottom="5dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView Two"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:layout_marginStart="70dp"
            android:layout_marginBottom="5dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView Three"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:layout_marginStart="70dp"
            android:layout_marginBottom="15dp" />

        </LinearLayout>

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

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="14dp"
        android:layout_marginStart="12dp"
        android:elevation="2dp"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Note: You must give more elevation to the ImageView that has to be placed above the CardView as because CardView has already got some its own elevation by default.

In your build.gradle (Module: app) file, under the dependencies add these two dependencies as follows:

dependencies {
    // For ConstraintLayout:
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'

    // For CardView:
    implementation 'com.android.support:cardview-v7:27.1.1'
}

Screenshot (for the above code):

For screen size - 5.0 inch (1080 x 1920 pixels) [Device: Pixel 2]

I hope, this helps you.

Thank you, this is pretty much what I wanted – Richard Nov 09 '18 at 15:03 — Richard, Nov 09 '18 at 15:03

score 0 · Answer 2 · answered Nov 09 '18 at 13:14

0

You should try a FrameLayout with the CardView and the ImageView. Then, give some margin to the CardView and you will get it.

Hope it helps.

answered Nov 09 '18 at 13:14

Juanje

1,235
2
11
28

TheWanderer · Answer 3 · 2018-11-09T13:22:24.450

Just don't put the ImageView inside the CardView.

Try something like this:

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|start"
        android:elevation="16dp"
        />

    <CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:margin_top="8dp"
        android:margin_start="8dp">

            <!-- CardView contents -->
    </CardView>

</FrameLayout>

You'll need to adjust the dimensions to suit your layout.

And what about the `"floating"` image? – Richard Nov 09 '18 at 13:21 — Richard, Nov 09 '18 at 13:21

score 0 · Answer 4 · answered Nov 09 '18 at 15:46

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">



        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_margin="20dp"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:background="@color/cinza_claro"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:foregroundGravity="bottom"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>



        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:background="@color/red_app_accent"
            android:foregroundGravity="center"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

I think you can do like this example, using margin to adjust the image.

CardView with a smaller body and Image floating outside it

4 Answers4