androidandroid-layoutandroid-shapedrawable

android:How to make triangular layout


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.

enter image description here


Solution

  • You can create this custom shape using <layer-list>. Below is a working example. Put custom_triangular_shape.xml into your res/drawable folder.

    custom_triangular_shape.xml

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        <!-- Transparent Rectangle -->
        <item>
            <shape android:shape="rectangle">
                <size
                    android:width="300dp"
                    android:height="80dp" />
                <solid android:color="@android:color/transparent" />
            </shape>
        </item>
    
        <!-- Colored Rectangle -->
        <item
            android:bottom="20dp">
            <shape android:shape="rectangle">
                <corners
                    android:radius="4dp">
    
                </corners>
                <size
                    android:width="300dp"
                    android:height="80dp" />
                <solid android:color="#FFFFFF" />
            </shape>
        </item>
    
        <!-- Bottom Triangle -->
        <item
            android:left="90dp"
            android:right="110dp"
            android:top="0dp"
            android:bottom="30dp">
            <rotate android:fromDegrees="45">
                <shape android:shape="rectangle">
                    <solid android:color="#FFFFFF" />
                </shape>
            </rotate>
        </item>
    
    </layer-list>
    

    USE:

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_triangular_shape">
    
    </LinearLayout>
    

    OUTPUT:

    enter image description here

    Hope this will help~