androidxmlandroid-drawableandroid-vectordrawableandroid-shape

Android - Make an envelope shape background in xml/vector


I'm trying to do a shape as this one in xml:

enter image description here

It is a simple rectangle, with a solid color and a little transparent triangle in the top-center, from the inner side.

Can this be achieved using vectors?


Solution

  • This is a bit of a hack using ConstraintLayout and a vector drawable, but it works! It will expand to fill the width of its container.

    dimens.xml

    <dimen name="toolbar_height">200dp</dimen>
    <dimen name="toolbar_notch_width">100dp</dimen>
    

    notch.xml

    <vector
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="12dp"
        android:viewportWidth="24"
        android:viewportHeight="12">
    
        <path
            android:fillColor="#000000"
            android:pathData="m0 0 12 12 12 -12 v12 h-24 v-12 z"/>
    
    </vector>
    

    toolbar.xml

    <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="@dimen/toolbar_height"
        tools:layout_gravity="bottom">
    
        <View
            android:id="@+id/left"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#F44336"
            app:layout_constraintEnd_toStartOf="@id/notch"
            app:layout_constraintStart_toStartOf="parent"/>
    
        <View
            android:id="@+id/notch"
            android:layout_width="@dimen/toolbar_notch_width"
            android:layout_height="0dp"
            android:background="@drawable/notch"
            android:backgroundTint="#4CAF50"
            app:layout_constraintDimensionRatio="1:0.5"
            app:layout_constraintEnd_toStartOf="@id/right"
            app:layout_constraintStart_toEndOf="@id/left"
            app:layout_constraintTop_toTopOf="parent"/>
    
        <View
            android:id="@+id/center"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#FFEB3B"
            app:layout_constraintTop_toBottomOf="@id/notch"
            app:layout_constraintStart_toStartOf="@id/notch"
            app:layout_constraintEnd_toEndOf="@id/notch"
            app:layout_constraintBottom_toBottomOf="parent"/>
    
        <View
            android:id="@+id/right"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#3F51B5"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/notch"/>
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    Result

    enter image description here