Wsrtjtyk

This is what I'm trying to achieve

And this is what I have so far and the code below is the code for this screenshot

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:orientation="vertical">



    <android.support.v7.widget.CardView

        android:layout_width="270dp"

        android:layout_height="wrap_content"

        android:layout_gravity="right"

        android:layout_margin="10dp">



        <RelativeLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:padding="16dp">



            <ImageView

                android:id="@+id/imageView"

                android:layout_width="80dp"

                android:layout_height="80dp"

                android:layout_centerVertical="true" />



            <TextView

                android:id="@+id/title"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginLeft="5dp"

                android:layout_toRightOf="@id/imageView"

                android:textColor="#000000"

                android:textSize="40sp" />

        </RelativeLayout>



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

Basically, I can't figure out how to get the image outside but still touching the card. Any help is appreciated, thanks.

You can use FrameLayout and elevation to fulfill your target.

According to the documentation of FrameLayout

Child views are drawn in a stack, with the most recently added child
on top

You need to play with the elevation of the ImageView to bring it above the CardView.

This is what I have achieved: You can then modify your paddings/margins according to design.

Code:

<?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="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:orientation="vertical">



<FrameLayout

    android:layout_width="match_parent"

    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView

        app:cardCornerRadius="4dp"

        app:cardBackgroundColor="@android:color/holo_blue_bright"

        android:layout_width="308dp"

        android:layout_height="112dp"

        android:layout_gravity="right"

        android:layout_margin="10dp">



        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:orientation="vertical">



            <TextView

                android:layout_marginStart="40dp"

                android:id="@+id/title"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginLeft="5dp"

                android:paddingLeft="8dp"

                android:text="EARTH"

                android:textColor="#000000"

                android:textSize="70sp" />

        </LinearLayout>



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



    <ImageView

        android:src="@drawable/planet"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="16dp"

        android:elevation="2dp" />

</FrameLayout>

</LinearLayout>

Try this layout

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

            xmlns:card_view="http://schemas.android.com/apk/res-auto"

            xmlns:app="http://schemas.android.com/apk/res-auto"

            android:id="@+id/activity_main"

            android:layout_width="match_parent"

            android:layout_height="match_parent">



<FrameLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content">



    <android.support.v7.widget.CardView

            android:id="@+id/first"

            app:cardBackgroundColor="@android:color/white"

            app:cardCornerRadius="@dimen/cardview_default_radius"

            app:cardElevation="4dp"

            android:layout_width="match_parent"

            android:layout_height="80dp"

            android:layout_marginLeft="50dp"

            card_view:cardUseCompatPadding="true">



        <RelativeLayout

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_marginLeft="32dp">



            <TextView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:text="TEXT"

                    android:textSize="18sp"/>



        </RelativeLayout>



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



</FrameLayout>



<ImageView

        android:layout_width="50dp"

        android:layout_height="50dp"

        android:layout_marginLeft="32dp"

        android:background="#000000"

        android:layout_marginTop="15dp"

        android:contentDescription="@null"/>



</RelativeLayout>

Result:

You can use ConstraintLayout cool property for doing this easily

Xml snippet :

<?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:layout_width="match_parent"

  android:layout_height="100dp"

  android:layout_margin="10dp"

  app:cardUseCompatPadding="true">

  <android.support.v7.widget.CardView

    android:layout_width="0dp"

    android:layout_height="0dp"

    android:layout_marginStart="35dp"

    app:cardBackgroundColor="@color/cardview_dark_background"

    app:cardUseCompatPadding="true"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintEnd_toEndOf="parent"

    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toTopOf="parent" />

  <de.hdodenhof.circleimageview.CircleImageView

    android:layout_width="70dp"

    android:layout_height="70dp"

    android:src="@android:drawable/ic_dialog_info"

    android:translationZ="2dp"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintEnd_toEndOf="parent"

    app:layout_constraintHorizontal_bias="0.0"

    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toTopOf="parent" />





</android.support.constraint.ConstraintLayout>

Output View :