I'm trying to make a custom CardView with a coloured rounded border on the left side. How can I achieve the below?
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>
<?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>
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?
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.