CODEWITHSUNDEEP
androidgoogle-maps
Andrei Pascale
Andrei Pascale

Reputation: 232

Shadow in custom info window

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>

Upvotes: 1

Views: 468

Answers (1)

Bhoomi
Bhoomi

Reputation: 172

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!

Upvotes: 1

Related Questions