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.
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.
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:
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~
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>
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
Using PopUpWindow you can achieve your goal. Here is a good link to start with.
