How can I create a CardView and ImageView with a rounded border?

Question

I want to make the following design:

But I do not know how to round up the ImageView and vertical lines.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
    android:orientation="vertical">


    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_margin="10dp"
        app:cardCornerRadius="40dp">



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


</LinearLayout>

minSdkVersion 16
targetSdkVersion 28

EDIT:

According to document: CardView

Due to expensive nature of rounded corner clipping, on platforms before Lollipop, CardView does not clip its children that intersect with rounded corners. Instead, it adds padding to avoid such intersection (See setPreventCornerOverlap(boolean) to change this behavior).

I wrote this code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
    android:background="#cccccc"
    android:orientation="vertical">


    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_margin="10dp"
        android:clickable="true"
        android:focusable="true"
        android:foreground="?attr/selectableItemBackgroundBorderless"
        app:cardCornerRadius="40dp"
        app:cardElevation="0dp"
        app:cardPreventCornerOverlap="false">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">


            <com.makeramen.roundedimageview.RoundedImageView
                android:layout_width="170dp"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/test_ex"
                app:riv_corner_radius_bottom_left="40dp"
                app:riv_corner_radius_top_left="40dp" />


            <View
                android:layout_width="4dp"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:layout_marginRight="10dp"
                android:background="@color/colorPrimaryDark" />


        </RelativeLayout>

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


</LinearLayout>

And the result in the Android 4.3 emulator:

How can I do the clipping? What is the best solution?

@beigirad it is circular image view. I wan radius corner left imageview in CardView — Zardchoobe, Jan 01 '19 at 18:00

score 0 · Answer 1 · answered Jan 01 '19 at 18:09

Try below code :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:orientation="vertical">


<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_margin="10dp"
    app:cardCornerRadius="40dp"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

    <ImageView
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher_background"
        android:scaleType="centerCrop"
        android:id="@+id/image_"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        android:rotation="15"
        android:layout_marginLeft="-30dp"
        android:layout_marginBottom="-40dp"
        android:layout_toRightOf="@id/image_">

    </View>


       <View
           android:layout_width="5dp"
           android:layout_height="match_parent"
           android:background="#be0202"
           android:layout_alignParentRight="true"
           android:layout_marginRight="20dp"/>

        <View
            android:layout_width="5dp"
            android:layout_height="match_parent"
            android:background="#be0202"
            android:layout_alignParentRight="true"
            android:layout_marginRight="30dp"/>

    </RelativeLayout>


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


</LinearLayout>

Result :

Thanks. it's true code, but not work on pre api 21 version. please see: https://i.imgur.com/qYErAJt.png - — Zardchoobe, Jan 01 '19 at 18:38
https://stackoverflow.com/questions/47347411/imageview-in-cardview-not-show-radius-on-android-4-3 — Zardchoobe, Jan 01 '19 at 18:42
For API below 21 you need to use some library which can round corners of an image . Try this library https://github.com/sparrow007/CircularImageview — charan ghumman, Jan 01 '19 at 19:10

score -1 · Answer 2 · answered Jan 01 '19 at 18:54

Already answered by charan

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:map="http://schemas.android.com/tools"
    android:id="@+id/cardview1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="26dp"
    card_view:cardElevation="10dp"
    card_view:cardMaxElevation="2dp"
    card_view:contentPadding="0dp"
    android:layout_margin="@dimen/dp_8">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:padding="5dp">
        <TextView
            android:id="@+id/name_tag"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="HELLO!"
            android:textSize="40sp"/>

       </RelativeLayout>

</androidx.cardview.widget.CardView>

Result

How can I create a CardView and ImageView with a rounded border?

2 Answers2