how can i add an image on the border of the cardview

Question

the design I want to make

the image view in the left side of the card view in which 'KM' is written I want to know how can i make the same design in my app in Android Studio using XML and Java

I have tried multiple ways and also can't find any solution on the internet also

Answer 1

You can easily achieve this using a RelativeLayout or ConstraintLayout. Below is an example using RelativeLayout.

First align the ImageView to the to the top left of the CardView and then using margins to move it to the required position. To offset it out of the card view using negative margins. Remember to set elevation of your ImageView higher than elevation of CardView, so that it appears on top.

<?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="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <androidx.cardview.widget.CardView
        android:id="@+id/card"
        android:layout_width="300dp"
        android:layout_centerInParent="true"
        app:cardCornerRadius="12dp"
        android:elevation="8dp"
        android:layout_height="200dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textStyle="bold"
            android:textSize="22sp"
            android:layout_marginTop="32dp"
            android:layout_height="wrap_content"
            android:text="Title" />
    </androidx.cardview.widget.CardView>

    <ImageView
        android:id="@+id/image"
        android:elevation="12dp"
        android:layout_width="50dp"
        android:layout_marginTop="32dp"
        android:layout_marginStart="-32dp"
        android:layout_alignTop="@id/card"
        android:background="@color/black"
        android:layout_alignStart="@id/card"
        android:layout_height="50dp"/>
</RelativeLayout>

Sample Output:

Answer 2

simply add the image outside a carview in a ConstaintLayout parent and you can achieve this result with this code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="180dp">


    <androidx.cardview.widget.CardView
        android:id="@+id/cardView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="48dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:elevation="2dp"
        app:cardElevation="2dp"
        app:cardBackgroundColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:cardCornerRadius="18dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:id="@+id/linearLayout"
                android:layout_marginTop="36dp"
                android:layout_marginStart="54dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Khan Mubashshir"
                    android:textColor="#403F3F"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Thane | Android Developer"
                    android:textColor="#403F3F" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Within 100m"
                    android:textColor="#403F3F"
                    android:textStyle="bold" />
            </LinearLayout>

            <TextView
                android:id="@+id/button_invite"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="16dp"
                android:text="+ INVITE"
                android:textColor="#403F3F"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <LinearLayout
                android:id="@+id/linearLayout3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:layout_marginBottom="16dp"
                android:orientation="vertical"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Coffee | Business | Friendship"
                    android:textColor="#403F3F"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text='Hi community! I am open to new connections ""'
                    android:textColor="#403F3F" />
            </LinearLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:adjustViewBounds="false"
        app:cardCornerRadius="12dp"
        android:elevation="5dp"
        app:layout_constraintEnd_toStartOf="@+id/cardView2"
        app:layout_constraintHorizontal_bias="0.098"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <ImageView
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:id="@+id/imageView"
            android:src="@mipmap/ic_launcher"
            android:translationZ="5dp"
 />
    </androidx.cardview.widget.CardView>



</androidx.constraintlayout.widget.ConstraintLayout>

Result of this code

I have put image in cardview to add round corner and elevation for shadow effect

Happy Coding !