Shadow in custom info window

Question

I am working on dark mode for my app which contains a map with a lot of markers. Therefore, I have to darken the custom info windows of the google maps. Because these windows have a margin by default which is white, I had to create one from the ground up.

This is the custom window:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:background="#ffffff">
        ......
    </LinearLayout>
    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="@drawable/custom_info_window_triangle"
        android:rotation="180"/>
    <View
        android:layout_width="1dp"
        android:layout_height="5dp"/>
</LinearLayout>

For the triangle I have found this approach to be the best: https://stackoverflow.com/a/31704460/6612631.

Until here, everything works as expected. The problem is with shadow. I tried to use a cardview, but setting cardElevation doesn't show any shadow.

Later Edit: this is the cardview in which I've tried to put the second linear layout:

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    card_view:cardBackgroundColor="#ffffff"
    card_view:cardCornerRadius="8dp"
    card_view:cardElevation="4dp">
</androidx.cardview.widget.CardView>

Could you add the code of your card view? – Tamir Abutbul Sep 13 '19 at 10:43 — Tamir Abutbul, Sep 13 '19 at 10:43
@TamirAbutbul sure. I added it. – Andrei Pascale Sep 13 '19 at 10:52 — Andrei Pascale, Sep 13 '19 at 10:52

Bhoomi · Answer 1 · 2019-09-14T09:21:32.703

I had the same issue of showing shadow on custom info window on maps, And I solved by using drawable as a background to the parent layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:drawable/dialog_holo_light_frame"
    android:orientation="vertical"
    android:gravity="center">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:background="#ffffff">
        ......
    </LinearLayout>
    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="@drawable/custom_info_window_triangle"
        android:rotation="180"/>
    <View
        android:layout_width="1dp"
        android:layout_height="5dp"/>
</LinearLayout>

I have used the android default drawable, which is nine patch image: android:background="@android:drawable/dialog_holo_light_frame"

You can use this according to your requirement or can create one such image with shadow in it and add as your linear layout background instead of cardview. Hope this helps!

Shadow in custom info window

1 Answers1