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

You can use the Material Component Library to create custom shapes.
The library provides the TriangleEdgeTreatment which creates a triangle treatment of the given size, which faces inward or outward relative to the shape.

You can use something like:

TriangleEdgeTreatment triangleEdgeTreatment = new TriangleEdgeTreatment(radius,false);

LinearLayout linearLayout= findViewById(R.id.xxxx);
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
    .toBuilder()
    .setBottomEdge(triangleEdgeTreatment)
    .build();

MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
ViewCompat.setBackground(linearLayout,shapeDrawable);

Also for edge treatments the parent view must disable clipping of children by setting android:clipChildren="false" in xml.clipToPadding may also need to be false if there is any padding on the parent that could intersect the shadow.

Answer 2

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:

Hope this will help~

Answer 3

Try this:

For triangle :

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="45"
            android:pivotX="-40%"
            android:pivotY="87%"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <stroke
                    android:width="10dp"
                    android:color="@android:color/transparent" />
                <solid android:color="#000000" />
            </shape>
        </rotate>
    </item>
</layer-list>

For rectangle:

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#B2E3FA" />
        </shape>
    </item>
</layer-list>

Use both xml in the Layout :

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/rlv1"
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:background="@drawable/rectringle" />
    <RelativeLayout
        android:id="@+id/rlv2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_below="@+id/rlv1"
        android:layout_marginLeft="30dp"
        android:background="@drawable/tringle"
        android:rotation="180" />
</LinearLayout>

Answer 4

You can make use of layer-list. Create a triangular shape at the bottom, then create a rectangular shape as next layer and give bottom margin that matches your triangle's height.

here is a sample to make triangle shape. https://stackoverflow.com/a/18421795/1987045

Answer 5

Using PopUpWindow you can achieve your goal. Here is a good link to start with.

Answer 6

You can use a 9patch as background for your custom layout.