Nikola Nikola - 6 months ago 9
Android Question

Google map overflow like in foursquare app

I am trying to integrate map in my android app similar like in foursquare. I need to make part of the map transparent and then covered with text. Does anyone know how to do that?

Here is an example:

Example is presented here.

Answer

You can do it using a RelativeLayout and setting a gradient background:

activity_maps.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradient"
        android:padding="8dp"
        android:text="Your layout here"
        android:gravity="left|center_vertical" />

</RelativeLayout>

gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:startColor="#ffffff"
        android:endColor="#00ffffff" />

</shape>

MapsActivity.java (trivial, but completes the example)

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {
    private GoogleMap mMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);

        ((SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map)).getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
        Marker m = mMap.addMarker(new MarkerOptions().position(new LatLng(40, -4)));
    }
}

The result looks like this:

enter image description here