I'm trying to do a shape as this one in xml:
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?
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