Transparent Listview over google Map android

Question

In my application I need to create a transparent listview over google map. I am using toggle button to open and close listview. When listview is visible it should be transparent so that google map should be visible/semi-visible.

For this part there are three layouts. 1. custom_cluster_mapview.xml 2. bottomlayout.xml 3. map_list_view_row

custom_cluster_mapview.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:materialdesign="http://schemas.android.com/apk/com.gc.materialdesign"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".map.MapView" >

<LinearLayout
    android:id="@+id/myLinearLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/mapLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <fragment
            android:id="@+id/mycustomemap"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            class="com.google.android.gms.maps.SupportMapFragment" />
    </LinearLayout>

    <include layout="@layout/bottomlayout" />




</LinearLayout>

</RelativeLayout>

bottomlayout.xml

   <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/outerLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:weightSum="2"
    android:orientation="vertical"
    >



        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >
        <ToggleButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/up_arrow"
            android:textOff=""
            android:textOn=""
            android:id="@+id/toggleButtonListView"
            android:layout_gravity="center_horizontal" />
        </LinearLayout>

    <LinearLayout
        android:id="@+id/mapListViewSlider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:layout_weight="1.95"
        android:orientation="vertical">


        <CheckBox
            android:id="@+id/sort_distance"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sort By Distance"/>
        <ListView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:dividerHeight="5dp"
            android:divider="@color/red"
            android:id="@+id/map_listview"/>
        </LinearLayout>

</LinearLayout>

3. map_list_view_row.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="10dp"
    android:paddingBottom="12dp">


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginLeft="10dp"
        android:weightSum="4"
        android:id="@+id/linearLayout">
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <TextView
                android:id="@+id/map_list_view_tv1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:text="@string/label_name" />

            <TextView
                android:id="@+id/map_list_view_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/map_list_view_tv1"
                android:text="abcde"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:id="@+id/map_list_view_tv2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/label_category" />
            <TextView
                android:id="@+id/map_list_view_category"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/map_list_view_tv2"
                android:text="abcde" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <TextView
                android:id="@+id/map_list_view_tv3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/label_location" />
            <TextView
                android:id="@+id/map_list_view_location"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/map_list_view_tv3"
                android:text="abcde" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:id="@+id/map_list_view_tv4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_marginBottom="10dp"
                android:text="@string/label_distance" />

            <TextView
                android:id="@+id/map_list_view_distance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/map_list_view_tv4"
                android:text="abcde" />

        </RelativeLayout>
    </LinearLayout>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/map_list_view_imageView"
        android:background="@drawable/med"
        android:layout_marginTop="4dp"
        android:layout_marginRight="16dp"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

Following is the picture when map is loaded https://i.stack.imgur.com/GtizG.png

At bottom of the screen there is up arrow button. I want to make background of that transparent. So that only arrow is visible without any background. When I click on the arrow listView is shown. Like below

https://i.stack.imgur.com/CUFZz.png

How to make listView transparent so that the google map is visible/semi-visible.

Thanks in advance.

I am not sure but can you try : android:background="@null" – Miriana Itani Aug 04 '15 at 12:06 — Miriana Itani, Aug 04 '15 at 12:06
Please add it to the listview itself – Miriana Itani Aug 04 '15 at 12:13 — Miriana Itani, Aug 04 '15 at 12:13
Bhavesh N gave the solution. It is working.\ – Sateesh Aug 04 '15 at 12:27 — Sateesh, Aug 04 '15 at 12:27
Great :D will keep noted in case I need it – Miriana Itani Aug 04 '15 at 12:30 — Miriana Itani, Aug 04 '15 at 12:30

score 1 · Accepted Answer · answered Aug 04 '15 at 12:01

1

put this line in relative layout not in Linear layout

 <include layout="@layout/bottomlayout" />

and set all color in this layout is semi tratnsparent.

answered Aug 04 '15 at 12:01

bhavesh N

787
3
9
27

Semi transparent in bottom layout ? I have tried all the things. I have made activity transparent with android:theme="@android:style/Theme.Translucent". But Nothing happened. – Sateesh Aug 04 '15 at 12:08
1

Thanks a lot. It worked. Can you explain this ? Once again. Thanks. – Sateesh Aug 04 '15 at 12:21
Bhavesh N can you explain why it worked ? What was the mistake ? – Sateesh Aug 04 '15 at 12:28
You have put include tag inside the linear layout, so it is always show below the map, so when you click on arrow your entire map moves up. – bhavesh N Aug 04 '15 at 12:34

score 1 · Answer 2 · edited May 23 '17 at 12:32

1

Just add this attribute in your listview

 android:background="@android:color/transparent" 
 android:cacheColorHint="@android:color/transparent"

Reference

edited May 23 '17 at 12:32

Community

1
1

answered Aug 04 '15 at 12:05

IntelliJ Amiya

74,896
15
165
198

Machado · Answer 3 · 2015-08-04T12:10:25.290

0

ListView has a transparent/translucent background by default, and so all default Android widgets. This implies that when ListView redraws its children, it has to blend the children with the window's background.

To solve your problem, all you have to do is either disable the cache color hint optimization, if you use a non-solid color background, or set the hint to the appropriate solid color value. This can be dome from code or preferably from XML.

XML:

android:cacheColorHint="#0000"
android:background="@android:color/transparent"

Code:

listView.setCacheColorHint(Color.TRANSPARENT);

edited Aug 04 '15 at 12:10

answered Aug 04 '15 at 12:01

Machado

14,105
13
56
97

Holmes. I tried edited version as well. bhavesh N solution works fine. – Sateesh Aug 04 '15 at 12:25

Transparent Listview over google Map android

3 Answers3

XML:

Code: