Layout Google Maps Android Studio

Layout Google Maps...

Halo teman2 semua yang berbahagia, sudah cuku lama tidak update artikel. Kali ini kita akan belajar membuat layout google maps pada android studio seperti ini gambar diatas.Sebelum masuk ke pebahasan layout google maps, kalian harus wajib membaca tutorial Cara Menampilkan Google Maps di Project Android Studio, bagi yang belum membaca silahkan klik disini.

Oke lanjut saja tutorialnya.

Yang petama buka dulu project Cara Menampilkan Google Maps di Project Android Studio yang sudah kita buat sebelumnya. Selanjutnya kita tambahkan

Compile ‘com.android.support:design:24.2.1’ 

dibagian dependence pada gradle.

Untuk floatingbutton-nya menggunakan design berikut ini, caranya dengan membuat file xml di folder res/draweble/oval.xml. Dan buat seperti dibawah ini:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <solid android:color="#0e4ca1"></solid>
</shape>

Kemudiah ubah dibagian layout, di activity_maps.xml. Kita buat layoutnya menjadi seperti dibawah ini:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/linearLayout">

    <LinearLayout
        android:id="@+id/layout_first"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.1"
        android:background="#00ffffff"
        android:orientation="horizontal">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <fragment xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:map="http://schemas.android.com/apk/res-auto"
                xmlns:tools="http://schemas.android.com/tools"
                android:id="@+id/map"
                android:name="com.google.android.gms.maps.SupportMapFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context="sg.emobile.gisapplication.MapsActivity" />
            <ImageButton
                android:id="@+id/button_filter"
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:layout_margin="20dp"
                android:layout_alignBottom="@id/map"
                android:layout_alignParentRight="true"
                android:background="@drawable/oval"
                android:elevation="10dp"
                android:src="@drawable/ic_filter" />

            <ImageButton
                android:id="@+id/button_mylocation"
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:layout_marginRight="20dp"
                android:layout_above="@id/button_filter"
                android:layout_alignParentRight="true"
                android:background="@drawable/oval"
                android:elevation="10dp"
                android:src="@drawable/ic_my_location_black_24dp" />

        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_second"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.45"
        android:visibility="gone"
        android:background="#0e4ca1"
        android:orientation="horizontal">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_centerInParent="true"
                android:paddingLeft="15dp"
                android:paddingRight="15dp">
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>

</LinearLayout>
<!--app:layout_anchorGravity="right|right|end"-->
</android.support.design.widget.CoordinatorLayout>

Setelah layout dibuat, selanjutnya adalah dengan nambahkan codingan berikut di bagian MapsActivity.java:

private GoogleMap mMap;
    ImageButton buttonMyLocation, buttonFilter;
    LinearLayout linearSecond;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Manager.initDatabase(this);
        setContentView(R.layout.activity_maps);

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

        buttonMyLocation = (ImageButton) findViewById(R.id.button_mylocation);
        buttonFilter= (ImageButton) findViewById(R.id.button_filter);

        linearSecond=(LinearLayout) findViewById(R.id.layout_second);

        buttonFilter.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (linearSecond.getVisibility()==View.GONE){
                    linearSecond.setVisibility(View.VISIBLE);
                }else{
                    linearSecond.setVisibility(View.GONE);
                }
            }
        });
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
        BitmapDescriptor icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN);
        LatLng monas = new LatLng(-6.175140, 106.827145);
        mMap.addMarker(new MarkerOptions()
                .position(monas)
                .title("Monas")
                .snippet("Tempat wisata tugu monas")
                .icon(icon));
        mMap.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null);
        mMap.moveCamera(CameraUpdateFactory.newLatLng(monas));
        mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(monas, 15));
    }

Selesai sudah membuat layout Google maps, supaya lebih menarik. Jika sudah, silahkan di run dan liahat hasilnya seperti dibawah ini: