How to stop child Linearlayout to overlap parent Linearlayout rounded corners?

Question

I have a LinearLayout which is parent layout, it has rounded corners. Inside this parent layout there is child Linearlayout which has sharp corners. Now the problem is that child Linearlayout is overlapping the parent Linearlayout's rounded corners. I know we can fix this by giving rounded corners to the child parent as well. But i need an alternative way. How can we fix it? Here is the code i have tried

    <!-- HorizontalLinearStart   -->   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:orientation="vertical"
    android:background="@drawable/whiteroundedbg"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="20dp"
    android:elevation="4dp">


  





    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:baselineAligned="false"
        android:background="#ededed">

       







    </LinearLayout>




</LinearLayout><!-- HorizontalLinearEnd   -->

Answer 1

You can do this in code if you're on API level 21 and above using

outerLayout.setOutlineProvider(ViewOutlineProvider.BACKGROUND);
outerLayout.setClipToOutline(true);

Answer 2

In your child linear layout add margin using the following syntax:

android:layout_margin="24dp"

You should replace the margin dp value with your own value so that it gives the desired result.

Answer 3

just swap this content of two linearlayout:-

<!-- HorizontalLinearStart   -->
<LinearLayout

android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="horizontal"
android:baselineAligned="false"
android:background="#ededed"


xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:orientation="vertical"
    android:background="@drawable/ic_launcher_background"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="20dp"
    android:elevation="4dp">
</LinearLayout>

NOTE:-keep both height and width of linear layout same

method 2

or why not using views instead of viewgroup

example:

<androidx.cardview.widget.CardView android:clipToPadding="true"
app:cardBackgroundColor="@color/colorPrimaryDark"
app:cardCornerRadius="30dp"
android:layout_width="200dp"
android:layout_height="200dp"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">



        <ImageView
            android:scaleType="centerCrop"
            android:src="@drawable/ic_launcher_background"
            android:id="@+id/customProfileGridImg"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:paddingBottom="100dp"
            android:paddingTop="100dp"/>
</androidx.cardview.widget.CardView>