android:How to make triangular layout

Question

I want to make custom Info window for google map I can make it but I am not able to make triangle bellow layout. I can add image there but layout have shadow on outer line. Anyone suggest me what to do. how to make portion inside red area. as you can see outer layout have shadow.

Answer 1

This can be achieved using MaterialCardView and Shape theming.

Dependency: (Use the latest stable version)

def materialVersion = '1.3.0'

implementation "com.google.android.material:material:$materialVersion"

Layout:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/backgroundWhite"
        app:cardElevation="4dp"
        app:cardCornerRadius="8dp">

        //Content layout here          

    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.card.MaterialCardView
        style="@style/PointerCardViewStyle"
        android:layout_width="20dp"
        android:layout_height="10dp"
        app:cardBackgroundColor="@color/whiteColor"
        android:layout_gravity="center"
        app:cardElevation="4dp" />
</LinearLayout>

Style:

<style name="PointerCardViewStyle" parent="Widget.MaterialComponents.CardView">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlayPointerCardView</item>
</style>

<style name="ShapeAppearanceOverlayPointerCardView" parent="@style/Widget.MaterialComponents.CardView">
    <item name="cornerFamily">cut</item>
    <item name="cornerSizeTopRight">0dp</item>
    <item name="cornerSizeTopLeft">0dp</item>
    <item name="cornerSizeBottomRight">10dp</item>
    <item name="cornerSizeBottomLeft">10dp</item>
</style>

Result: