Map Swipe on Android

Start New Project

  1. Open Android Studio and Create new project
  2. Setup project name
  3. Select minimum requirment Android SDK (API 15 : Android 4.0.3)
  4. Select blank activity
  5. Fill name of activity

Getting the Ramani API Framework for Android

The Ramani API Framework for Android is distributed as a zip file containing a static framework.

Give some permissons

In most cases, you will have to set the following authorizations in your AndroidManifest.xml:


<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      
    

Android 6.0+ devices require you have to check for "dangerous" permissions at runtime. Ramani requires the following dangerous permissions: WRITE_EXTERNAL_STORAGE and ACCESS_COARSE_LOCATION/ACCESS_FINE_LOCATION.

Create Map Layout

Create a "src/main/res/layouts/activity_main.xml" layout like this one. With Android Studio, it probably created one already called. The default is "src/main/res/layouts/activity_main.xml":


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="0dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp"
    tools:context="com.ujuizi.ramani.myapplication.MainActivity">

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




    <RelativeLayout
        android:id="@+id/llMap2"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:background="@color/colorPrimary"

        android:layout_alignRight="@+id/map"
        android:layout_alignEnd="@+id/map">

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

    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar"
        android:layout_alignBottom="@+id/map"
        android:layout_alignRight="@+id/map"
        android:layout_alignEnd="@+id/map"


        android:layout_marginEnd="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginLeft="0dp"/>
</RelativeLayout>
          
          

Write view lines of code

To start using Ramani service you need Ramani API and you can create on this page. We now create the main activity (MainActivity.java):


import android.annotation.TargetApi;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.ViewGroup;
import android.view.ViewOverlay;
import android.widget.RelativeLayout;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.model.CameraPosition;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.TileOverlay;
import com.google.android.gms.maps.model.TileOverlayOptions;
import com.google.android.gms.maps.model.TileProvider;
import com.ujuizi.ramaniapi.RSMapServices;

import org.json.JSONObject;


public class MainActivity extends AppCompatActivity implements OnMapReadyCallback, OnSeekBarChangeListener {
    private static final String TAG = MainActivity.class.getSimpleName();
    private GoogleMap map;
    public GoogleMap map2;


    private static final String layerID = "simS3seriesCoverGlobal/coverclass";
    private static final String layerID2 = "ddl.GLOBALTRUECOLOR";
    private TileOverlay mTileOverlay;
    ViewOverlay overlays;
    private MapFragment mapFragment;
    private SeekBar mSeekBar;
    private RelativeLayout llMap2;
    private MapFragment mapFragment2;
    private int llMap2Width;
    public int llMap2Height;

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR2)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RSMapServices.apiKey("11f19402f3310cc1c388d3f7eeb6b487", "ramanicloud", this);

        llMap2 = (RelativeLayout) findViewById(R.id.llMap2);
        llMap2.setAlpha(0.8f);
        mSeekBar = (SeekBar) findViewById(R.id.seekBar);

        mSeekBar.setOnSeekBarChangeListener(this);
        mapFragment = (MapFragment) getFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);


        mapFragment2 = (MapFragment) getFragmentManager()
                .findFragmentById(R.id.map2);

    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        map = googleMap;
        LatLng point = new LatLng(52.3756, 6.4819);
        map.animateCamera(CameraUpdateFactory.newLatLngZoom(point, 8.0f));
        map.setOnCameraChangeListener(new GoogleMap.OnCameraChangeListener() {
            @Override
            public void onCameraChange(CameraPosition cameraPosition) {
                map2.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
            }
        });
        TileProvider tp = RSMapServices.getMap(layerID);

        if (tp!= null){
            mTileOverlay = map.addTileOverlay(new TileOverlayOptions().tileProvider(tp));
        }

        JSONObject metadata = RSMapServices.getMetadata(layerID);
        System.out.println("metadata :"+metadata);
        Log.e("RMSERVICE", "metadata :"+metadata);

        mapFragment2.getMapAsync(new OnMapReadyCallback() {

            @Override
            public void onMapReady(GoogleMap googleMap) {
                map2 = googleMap;
                LatLng point = new LatLng(52.3756, 6.4819);
                map2.animateCamera(CameraUpdateFactory.newLatLngZoom(point, 8.0f));
                map2.setPadding(0,0,0,0);

                TileProvider tp = RSMapServices.getMap(layerID2);

                if (tp!= null){
                    map2.addTileOverlay(new TileOverlayOptions().tileProvider(tp));
                }

                map2.setOnCameraChangeListener(new GoogleMap.OnCameraChangeListener() {
                    @Override
                    public void onCameraChange(CameraPosition cameraPosition) {
                        map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
                    }
                });

            }
        });
    }


    @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR2)
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        int mapWidth = mapFragment.getView().getWidth();

        mSeekBar.setMax(mapWidth);
        RelativeLayout.LayoutParams rel_btn = new RelativeLayout.LayoutParams(
                (mapWidth-progress), ViewGroup.LayoutParams.MATCH_PARENT);
        rel_btn.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);

        llMap2.setLayoutParams(rel_btn);
        llMap2.postInvalidate();

        map2.setPadding(0,0,progress,0);
        map2.animateCamera(CameraUpdateFactory.newCameraPosition(map.getCameraPosition()));

    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {

    }
}
          
          

And that's enough to give it a try, and see this view. to change the map view just drag the slider.
Download full source code here