Search code examples
androidandroid-cardview

How to apply border on one side of CardView?

I'm trying to make a custom CardView with a coloured rounded border on the left side. How can I achieve the below?

Desired CardView

I've tried 2 different approaches using a FrameLayout inside a CardView. In the first one I put a shape as background, and in the other I put an ImageView on the left side.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_margin="8dp"
    card_view:cardElevation="2dp"
    card_view:cardCornerRadius="5dp">

    <FrameLayout
        android:background="@drawable/card_edge"
        android:layout_width="4dp"
        android:layout_height="match_parent"/>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:orientation="vertical">

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Headline"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Title" />

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Body1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Content here" />

    </LinearLayout>

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

First try

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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="wrap_content"
    app:cardCornerRadius="5dp"
    app:cardElevation="2.5dp"
    android:layout_marginTop="15dp"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:layout_marginBottom="2dp"
    android:id="@+id/background"
    android:background="@drawable/rectangle_skylightblue">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="56.3dp"
            android:orientation="horizontal">

            <TextView
                android:fontFamily="@font/sfpro_display_regular"
                android:id="@+id/text"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="15dp"
                android:layout_weight="1"
                android:text="BASF GUARA - SP"
                android:textColor="#00c0ff"
                android:textSize="15sp" />

            <ImageView
                android:id="@+id/forward"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginRight="11.7dp"
                android:src="@drawable/ic_arrow_skyblue" />
        </LinearLayout>
    </FrameLayout>

    <ImageView
        android:id="@+id/line"
        android:layout_width="5dp"
        android:layout_height="56.3dp"
        android:src="@drawable/rectangle_skyblue" />

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

Second try

However, as you can see none of the both tries achieve the desire result, and the second try using an ImageView is the worst as the color is going to change based on the action type. So, what I need to change on the first to achieve the border details?

Solution

  • I found this answer online that is close to what you're looking for. https://www.android-examples.com/show-add-one-side-left-border/

    All you need to add to it is the curved corner radius.