Search code examples
androidxmlandroid-studioandroid-layout

How to create a Custom border shape with round corners in android?


The picture demonstrate the actual result I need . how to crate the borders with view

<View android:layout_width="4dp"
android:layout_height="match_parent"
android:background="#72979494" />

Which will look like border from all sides


Solution

  • Without custom view, you can have this shape with below XML:

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
    
        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="24dp"
            android:elevation="4dp"
            android:orientation="vertical"
            android:weightSum="2">
    
            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:weightSum="5">
    
                <FrameLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:background="#FFFFFF"
                    android:layout_weight="2" />
    
                <View
                    android:layout_width="4dp"
                    android:layout_height="match_parent"
                    android:visibility="visible"/>
    
                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginEnd="6dp"
                    android:layout_weight="3"
                    android:visibility="visible"/>
    
    
    
            </androidx.appcompat.widget.LinearLayoutCompat>
    
        </androidx.appcompat.widget.LinearLayoutCompat>
    
    
        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="24dp"
            app:cardCornerRadius="24dp"
            app:cardElevation="0dp"
            app:strokeColor="#72979494"
            app:strokeWidth="4dp">
    
            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:weightSum="2">
    
                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:weightSum="5">
    
                    <FrameLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="2" />
    
                    <View
                        android:layout_width="4dp"
                        android:layout_height="match_parent"
                        android:background="#72979494" />
    
    
                    <androidx.appcompat.widget.LinearLayoutCompat
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_marginEnd="6dp"
                        android:layout_weight="3"
                        android:gravity="center"
                        android:orientation="vertical"
                        android:visibility="visible">
    
                        <androidx.appcompat.widget.AppCompatTextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Your Safety matters"
                            android:textSize="18sp"
                            android:textStyle="bold" />
    
                        <androidx.appcompat.widget.AppCompatTextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="8dp"
                            android:layout_marginEnd="8dp"
                            android:gravity="center"
                            android:text="We've taken actions to keep you safe while using our services"
                            android:textSize="12sp" />
                    </androidx.appcompat.widget.LinearLayoutCompat>
    
    
                </androidx.appcompat.widget.LinearLayoutCompat>
    
                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:weightSum="5">
    
                    <androidx.appcompat.widget.LinearLayoutCompat
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="2"
                        android:orientation="vertical">
    
                        <View
                            android:layout_width="match_parent"
                            android:layout_height="4dp"
                            android:background="#72979494" />
    
                        <androidx.appcompat.widget.AppCompatImageView
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:padding="16dp"
                            app:srcCompat="@drawable/ic_launcher_background" />
    
                    </androidx.appcompat.widget.LinearLayoutCompat>
    
                    <FrameLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="3">
    
    
                        <com.google.android.material.button.MaterialButton
                            android:layout_width="160dp"
                            android:layout_height="40dp"
                            android:layout_gravity="center"
                            android:backgroundTint="#3F51B5"
                            android:text="Read More"
                            android:textAllCaps="false"
                            android:textSize="12sp"
                            app:cornerRadius="20dp" />
                    </FrameLayout>
    
                </androidx.appcompat.widget.LinearLayoutCompat>
            </androidx.appcompat.widget.LinearLayoutCompat>
        </com.google.android.material.card.MaterialCardView>
    
    </FrameLayout>
    

    there is a Material Card View and an empty view on top of that to cover an unneeded corner of that.