How to draw a rounded corners layout in android

Question

I'm writing a sample app in android studio and I want to have a layout with rounded corners in front of parent layout. so I've created a shape and apply it to background of the layout but I don't saw a desired result. note: both layouts are ConstraintLayout

below is my main activity xml 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@drawable/flv_bridge"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".27"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.005" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@drawable/vie_bg"  **-----------------> this is my target**
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent=".78"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent=".7"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tab_layout" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_google"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            android:backgroundTint="@color/white"
            android:elevation="35dp"

            android:src="@drawable/googleicon"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view_pager" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_facebook"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            android:layout_marginRight="10dp"
            android:backgroundTint="@color/white"
            android:elevation="35dp"
            android:src="@drawable/facebookicone"
            app:flow_firstHorizontalBias="1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/fab_google"
            app:layout_constraintHorizontal_bias="0.483"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view_pager"
            app:layout_constraintVertical_bias="0.0" /> 
      

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0" />


    </androidx.constraintlayout.widget.ConstraintLayout>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="60dp"

        android:layout_height="60dp"

        android:src="@drawable/taminlogo"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/imageView"
        app:layout_constraintVertical_bias="0.094" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/logo"
        android:textColor="@color/white"
        android:textStyle="bold"
        android:textSize="18sp"
        app:layout_constraintVertical_bias=".2"

        app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2" />


</androidx.constraintlayout.widget.ConstraintLayout>

and the shape xml:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white"/>
    <corners android:topLeftRadius="40dp"
        android:topRightRadius="40dp"/>

</shape>

best regards

Answer 1

just set your shape xml file in background attribute in the layout which you want to be round , and after that if you cant see the result , maybe the shape color and your parent layout background color are the same color

Answer 2

Try Like This

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

   <solid android:color="#f6faff"/>
 
    <corners
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" />

</shape>

OR

<?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
    
       <solid android:color="#f6faff"/>
     
        <corners
            android:radius="20dp" />
    
    </shape>

In Your Layoutfile

android:background="@drawable/you_rounded_corner_file_from_drawable"