ListView Over GoogleMapView

 Hi,

Here I show you how to set listview over google mapview in android
So just start with a new project

Add the dependency for google play service on your app.gradle
compile 'com.google.android.gms:play-services-maps:10.2.0'

And also add below line in to the project.gradle file
 classpath 'com.google.gms:google-services:3.0.0'


Add the map key on your AndroidManifest.xml file


 <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="XXEEzaSyArhRHi0c1MQqStWN-x0E8otZonMahbLqM" />


Here is a xml layout for this one

<?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:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:orientation="vertical"
    tools:context="com.demosample.activity.ListMapActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white">

    <com.google.android.gms.maps.MapView
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible" />

        <ListView
            android:id="@+id/list_hotels"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/LL_searchhotel"
            android:background="@android:color/transparent"
            android:divider="@null"
            android:visibility="visible"
            android:focusable="false" />
    </FrameLayout>
</LinearLayout>
 
 

Here I use an empty view as a header for the list so we can see that the google map is behind our list view

Xml layout for the empty view as below
<?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">
    <LinearLayout
        android:id="@+id/spaceview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:background="@android:color/transparent"
        android:visibility="visible" />
</LinearLayout>

You may to generate a google map key from your email

Lets start to write an Activity code

Here I used static data to generate list view and set some hard code latitude and longitude array


package com.demosample.activity;

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.LayoutRes;
import android.support.v7.app.AppCompatActivity;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RelativeLayout;

import com.google.android.gms.maps.CameraUpdate;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapView;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.LatLngBounds;
import com.google.android.gms.maps.model.MarkerOptions;

import java.util.ArrayList;

public class ListMapActivity extends AppCompatActivity implements View.OnClickListener, OnMapReadyCallback {

    private View listHeader;
    ListView list_hotels;
    LinearLayout spaceview;
    ArrayList<String> listData = new ArrayList<>();
    ArrayList<Double> Parislat = new ArrayList<Double>();
    ArrayList<Double> Parislog = new ArrayList<Double>();
    MapView mapView;
    GoogleMap googleMap;
    private AccelerateDecelerateInterpolator mSmoothInterpolator;
    private int mMinHeaderTranslation;
    private int mHeaderHeight;
    LinearLayout LL_searchhotel;
    boolean isBottom = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list_map);
        mSmoothInterpolator = new AccelerateDecelerateInterpolator();
        int dimen = (int) getResources().getDimension(R.dimen.dist_150);
        mHeaderHeight = getResources().getDisplayMetrics().heightPixels
                - dimen;
        mMinHeaderTranslation = -mHeaderHeight;

        mapView = (MapView) findViewById(R.id.map);
        mapView.onCreate(savedInstanceState);
        mapView.onResume();
        mapView.getMapAsync(this);
        mapView.setOnClickListener(this);
        inititlaized();
    }

    private void inititlaized() {
        list_hotels = (ListView) findViewById(R.id.list_hotels);
        LayoutInflater inflater1 = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        listHeader = inflater1.inflate(R.layout.emptyview,
                null);

        spaceview = (LinearLayout) listHeader.findViewById(R.id.spaceview);
        spaceview.setLayoutParams(new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT, getResources().getDisplayMetrics().heightPixels / 3));
        spaceview.setBackgroundResource(android.R.color.transparent);
        spaceview.setOnClickListener(this);

        list_hotels.addHeaderView(listHeader, null, false);
        list_hotels.setTextFilterEnabled(true);
        list_hotels.setItemsCanFocus(true);
        LL_searchhotel = (LinearLayout) findViewById(R.id.LL_searchhotel);

        ViewGroup parentGroup = (ViewGroup) list_hotels.getParent();
        View empty = getLayoutInflater().inflate(R.layout.emptyview, parentGroup, false);
        parentGroup.addView(empty);
        list_hotels.setEmptyView(empty);

        for (int i = 0; i < 20; i++) {
            listData.add("Item - " + (i + 1));
        }

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.single_textview, listData);
        list_hotels.setAdapter(adapter);
        adapter.notifyDataSetChanged();

    }

    private void LoadGoogleMap() {
        get_LatLong();
        MapSetup(Parislat, Parislog);
    }

    private void get_LatLong() {
        Parislat.add(19.160526);
        Parislat.add(19.162411);
        Parislat.add(19.173883);
        Parislat.add(19.187126);
        Parislat.add(19.172838);
        Parislat.add(19.154879);
        Parislat.add(19.152001);
        Parislat.add(19.200091);
        Parislat.add(19.186917);
        Parislat.add(19.185267);

        Parislog.add(72.851258);
        Parislog.add(72.850571);
        Parislog.add(72.860899);
        Parislog.add(72.849043);
        Parislog.add(72.835668);
        Parislog.add(72.858014);
        Parislog.add(72.847090);
        Parislog.add(72.842371);
        Parislog.add(72.849017);
        Parislog.add(72.846535);
    }

    private void MapSetup(ArrayList<Double> lat2, ArrayList<Double> log2) {
        // TODO Auto-generated method stub

        if (Parislat.size() != 0) {
            String lat1 = "";
            String lng1 = "";

            LatLngBounds.Builder builder = new LatLngBounds.Builder();
            for (int i = 0; i < lat2.size(); i++) {
                googleMap.addMarker(new MarkerOptions()
                        .position(new LatLng(Parislat.get(i), Parislog.get(i)))
                        .icon(BitmapDescriptorFactory
                                .fromResource(R.drawable.marker_icon))
                        .draggable(false));

                builder.include(new LatLng(Parislat.get(i), Parislog.get(i)));
            }
            LatLngBounds bounds = builder.build();
            CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds,
                    getResources().getDisplayMetrics().widthPixels, (mHeaderHeight), 5);
            googleMap.animateCamera(cu);

        }
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.spaceview:
            case R.id.map:
                if (isBottom == true) {
                    SlideToDown();
                    isBottom = false;
                } else {
                    SlideToAbove();
                    isBottom = true;
                }

                break;
            default:
                break;
        }
    }

    @Override
    public void onMapReady(GoogleMap gMap) {

        googleMap = gMap;
        googleMap.getUiSettings().setMyLocationButtonEnabled(false);
        // googleMap.setInfoWindowAdapter(new CustomInfoWindowAdapter());

        googleMap.getUiSettings().setZoomControlsEnabled(true);

        googleMap.setOnMapClickListener(new GoogleMap.OnMapClickListener() {
            @Override
            public void onMapClick(LatLng latLng) {
                SlideToAbove();
                isBottom = true;
            }
        });
        LoadGoogleMap();
        @LayoutRes final int ZOOM_CONTROL_ID = 0x1;
        View zoomControls = mapView.findViewById(ZOOM_CONTROL_ID);

        if (zoomControls != null && zoomControls.getLayoutParams() instanceof RelativeLayout.LayoutParams) {
            // ZoomControl is inside of RelativeLayout
            RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) zoomControls.getLayoutParams();

            // Align it to - parent top|left
            params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
            params.addRule(RelativeLayout.ALIGN_PARENT_START);

            // Update margins, set to 10dp
            final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10,
                    getResources().getDisplayMetrics());
            params.setMargins(0, margin, 0, 0);
            params.setMarginStart(margin);
        }
    }

    public void SlideToAbove() {

        Animation slide = null;
        slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,
                Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.66f,
                Animation.RELATIVE_TO_SELF, 0.0f);

        slide.setDuration(1000);
        slide.setFillAfter(true);
        slide.setFillEnabled(true);
        list_hotels.startAnimation(slide);
        list_hotels.setVisibility(View.VISIBLE);


        slide.setAnimationListener(new Animation.AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                list_hotels.clearAnimation();
            }

        });

    }

    public void SlideToDown() {
        Animation slide = null;
        slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,
                Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f,
                Animation.RELATIVE_TO_SELF, 0.66f);

        slide.setDuration(1000);
        slide.setFillAfter(true);
        slide.setFillEnabled(true);
        list_hotels.startAnimation(slide);

        slide.setAnimationListener(new Animation.AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                list_hotels.clearAnimation();
                list_hotels.setVisibility(View.GONE);

            }

        });

    }
}

The output for the above is as follows


 




Thanks

Comments

Post a Comment

Popular posts from this blog

Crypto JS Encryption & Decryption in Android

Hi, today I explain how to do encryption in android using java script. Create sample.html file on the assets folder and add the following html code on it. <html> <head> <script language="javascript" src="aes.js"> </script> </head> <body> </body> </html>  Here I add a javascript file , in this file there is a code for encryption and decryption    Create a javascript file from the below code and save it on our assets folder with .js extension and access this one on our activity class.   /* CryptoJS v3.1.2 code.google.com/p/crypto-js (c) 2009-2013 by Jeff Mott. All rights reserved. code.google.com/p/crypto-js/wiki/License */ var CryptoJS=CryptoJS||function(u,p){var d={},l=d.lib={},s=function(){},t=l.Base={extend:function(a){s.prototype=this;var c=new s;a&&c.mixIn(a);c.hasOwnProperty("init")||(c.init=function(){c.$super.init.apply(this,argumen
Read more

Android Interview Material

Image
Q1] What is Retrofit? Ans:- Retrofit is a REST client for Android, through which you can make easy to use interfaces which can turn any Android app into a powerful one. Retrofit is developed by Square Inc. Retrofit turns your REST API into a Java interface. Retrofit can perform Async and sync requests with automatic JSON parsing without any effort. Q2] What is Volley? Ans:- Volley is a networking library it offers great features like synchronous requests, asynchronous requests, prioritization, making multiple requests at the same time, ordered requests, and of course caching. Q3] Difference between retrofit and volley? Retrofit Volley Retrofit can parse many other types of responses automatically like: Boolean – Web API response needs to be a boolean. Integer – Web API response needs to be an integer. Date– Web API response should be a Long format date. String – Web API response needs to be in String format. Object – Web API response needs
Read more