Xtykutl

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.

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.

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.

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.

<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.