Android clip to background

Issue

I have the following drawable squared_card_background.xml which I wish to apply as background for different views and let the view children as well as the view itself to be clipped after.

squared_card_background_left.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="16dp"
    android:width="16dp"
    android:viewportHeight="1"
    android:viewportWidth="1">
    <path
        android:name="left"
        android:fillColor="@color/colorSurface"
        android:pathData="M0,1 L1,0 L1,1z" />
    <clip-path android:name="leftClip"
        android:pathData="M0,1 L1,0 L1,1z"/>
</vector>

squared_card_background_right.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="16dp"
    android:width="16dp"
    android:viewportHeight="1"
    android:viewportWidth="1" >
    <path
        android:name="v"
        android:fillColor="@color/colorSurface"
        android:pathData="M1,1 L0,0 L0,1z" />
</vector>

squared_card_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="fill|top|clip_horizontal|clip_vertical"
        android:start="16dp"
        android:end="16dp"
        android:height="16dp">
        <shape android:shape="rectangle"
            android:useLevel="false">
            <solid android:color="@color/colorSurface"/>
        </shape>
    </item>
    <item android:drawable="@drawable/squared_card_background_left"
        android:gravity="start|top|clip_horizontal|clip_vertical"
        android:height="16dp"
        android:width="16dp">
    </item>
    <item android:drawable="@drawable/squared_card_background_right"
        android:gravity="end|top|clip_horizontal|clip_vertical"
        android:height="16dp"
        android:width="16dp">
    </item>
    <item android:top="16dp">
        <color android:color="@color/colorSurface"/>
        <scale android:scaleGravity="fill"/>
    </item>
</layer-list>

I have tried setting the view to clip children and outline background, but it does not seem to recognize the correct clipping path, any ideas?

The layout where I'm currenty trying to set the view background.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="match_parent"
    android:background="@color/colorBackground"
    android:orientation="vertical">

    <com.mobile.indico.indicomobile.views.Toolbar
        android:id="@+id/sync_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:toolbarTitle="@string/title_sync"
        app:showNavigationIcon="false"
        app:layout_constraintTop_toTopOf="parent">
        <ImageButton
            android:id="@+id/sync_start"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/preview_button_background"
            android:tint="@color/colorOnPrimary"
            android:src="@drawable/ic_refresh_white"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>
    </com.mobile.indico.indicomobile.views.Toolbar>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/sync_recycler"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/sync_toolbar"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@drawable/squared_card_background"
        android:clipChildren="true"/>
</android.support.constraint.ConstraintLayout>

Finally, I tried creating a parent FrameLayout clipping a single child to the background, but the same result, and I do not know how to create a clipping path from the drawable and insert into the onDraw method.

Solution

Ended up using this... Thanks for the downvotes I guess

override fun onDraw(canvas: Canvas?) = super.onDraw(canvas?.also {
        it.clipPath(Path().apply{
            moveTo(0f, height.toFloat())
            lineTo(0f, _cornerRadius)
            lineTo(_cornerRadius, 0f)
            lineTo(width - _cornerRadius, 0f)
            lineTo(width.toFloat(), _cornerRadius)
            lineTo(width.toFloat(), height.toFloat())
            lineTo(0f, height.toFloat())
            close()
        })
    })

Answered By - SlyOtis