Skip to main content

Map Tutorial

Enter the following code in AndroidManifest.xml. Be sure to take note of the package name of your project as well as put it the Maps API key that you have obtained in the previous step:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="net.learn2develop.googlemaps"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="16" />
 
    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />
 
    <permission
        android:name="net.learn2develop.googlemaps.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />
 
    <uses-permission 
      android:name="net.learn2develop.googlemaps.permission.MAPS_RECEIVE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission 
      android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission
        android:name=
            "com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <uses-permission 
        android:name=
            "android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission 
        android:name="android.permission.ACCESS_FINE_LOCATION" />
 
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="net.learn2develop.googlemaps.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
 
        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="<Your_MAPS_API_KEY>" />
 
    </application>
 
</manifest>
  1. In the activity_main.xml file, replace the content of the file with the following statements:
    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.MapFragment" />
  2. Deploy the application onto a real Android device. At the moment, the Android emulator does not support Google Maps v2 for Android as it needs access to Google Play on the emulator.
  3. You should see the map as shown below (see Figure 14):Google Maps displayed in Android app
    Figure 14 - The Google Maps displaying in your Android application

Using the Android Support Package for Google Maps

To ensure that your application is able to run on older Android devices, it is necessary to change the MapFragment class in your activity_main.xml file to use the SupportMapFragment class from the Android Support Package.
  1. Update activity_main.xml to look like:
    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.SupportMapFragment" />
  2. Add the following statements to the MainActivity.java file:
    import android.support.v4.app.FragmentActivity;
    ...
    public class MainActivity extends FragmentActivity {
Your Google Maps will now be able to run on older versions of Android.

Programmatically Manipulating the Map

In the following sections, I will show you some of the common operations that you can perform with Google Maps.
  1. Add the following statements in the main.xml file located in the res/menu folder:
    <menu xmlns:android="http://schemas.android.com/apk/res/android" >
     
        <item
            android:id="@+id/menu_sethybrid"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Hybrid Mode"/>
        <item
            android:id="@+id/menu_showtraffic"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Show Traffic"/>
        <item
            android:id="@+id/menu_zoomin"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Zoom In"/>
        <item
            android:id="@+id/menu_zoomout"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Zoom Out"/>
        <item
            android:id="@+id/menu_gotolocation"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Go to a location"/>
        <item
            android:id="@+id/menu_addmarker"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Add a marker"/>
        <item
            android:id="@+id/menu_getcurrentlocation"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Get Current Location"/>
        <item
            android:id="@+id/menu_showcurrentlocation"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Show Current Location"/>
        <item
            android:id="@+id/menu_lineconnecttwopoints"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="Line connecting 2 points"/>
        <item
            android:id="@+id/menu_settings"
            android:orderInCategory="100"
            android:showAsAction="never"
            android:title="@string/menu_settings"/>
     
    </menu>
  2. Update MainActivity.java with the following code:
    package net.learn2develop.googlemaps;
     
    import android.os.Bundle;
    import android.support.v4.app.FragmentActivity;
    import android.view.Menu;
    import android.widget.Toast;
     
    import com.google.android.gms.maps.GoogleMap;
    import com.google.android.gms.maps.SupportMapFragment;
     
    public class MainActivity extends FragmentActivity {
        GoogleMap map;
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
     
            map = ((SupportMapFragment) getSupportFragmentManager()
                    .findFragmentById(R.id.map)).getMap();
            if (map == null) {
                Toast.makeText(this, "Google Maps not available", 
                    Toast.LENGTH_LONG).show();
            }
        }
     
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is
            // present.
            getMenuInflater().inflate(R.menu.activity_main, menu);
            return true;
        }
    }
The above code creates a set of option menu items in your application. In addition, it also programmatically checks to see if Google Maps is able to load in your application.

Changing Map Mode

This section shows how to change the Google Maps to display the map in different view modes.
  1. Update MainActivity.java with the following code:
    package net.learn2develop.googlemaps;
     
    import android.os.Bundle;
    import android.support.v4.app.FragmentActivity;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.Toast;
     
    import com.google.android.gms.maps.GoogleMap;
    import com.google.android.gms.maps.SupportMapFragment;
     
    public class MainActivity extends FragmentActivity {
        GoogleMap map;
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
     
            map = ((SupportMapFragment) getSupportFragmentManager()
                    .findFragmentById(R.id.map)).getMap();
            if (map == null) {
                Toast.makeText(this, "Google Maps not available", 
                    Toast.LENGTH_LONG).show();
            }
        }
     
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is 
            // present.
            getMenuInflater().inflate(R.menu.activity_main, menu);
            return true;
        }
     
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
     
            switch (item.getItemId()) {
     
            case R.id.menu_sethybrid:
                map.setMapType(GoogleMap.MAP_TYPE_HYBRID);
                break;
            }
            return true;
        }
    }
  2. Deploy the application onto a real Android device. Select the Hybrid Mode menu item and observe the map (see Figure 15):Hybrid Google Map displayed in Android app
    Figure 15 - Displaying the map in hybrid mode

Displaying Traffic

This section shows how to make Google Maps display traffic conditions.
  1. Add the following statements to the MainActivity.java file:
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
     
            switch (item.getItemId()) {
     
            case R.id.menu_sethybrid:
                map.setMapType(GoogleMap.MAP_TYPE_HYBRID);
                break;
     
            case R.id.menu_showtraffic:
                map.setTrafficEnabled(true);
                break;
            }
     
            return true;
        }
  2. Deploy the application onto a real Android device. Select the Show Traffic menu item and observe the map (see Figure 16):Map with traffic information displayed in Android app
    Figure 16 - Displaying traffic on the map

Zooming In and Out

This section shows how to programmatically zoom in or out of Google Maps.
  1. Add the following statements to the MainActivity.java file:
            case R.id.menu_zoomin:
                map.animateCamera(CameraUpdateFactory.zoomIn());
                break;
     
            case R.id.menu_zoomout:
                map.animateCamera(CameraUpdateFactory.zoomOut());
                break;
    So that the full file listing is:
    package net.learn2develop.googlemaps;
     
    import android.os.Bundle;
    import android.support.v4.app.FragmentActivity;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.Toast;
     
    import com.google.android.gms.maps.CameraUpdateFactory;
    import com.google.android.gms.maps.GoogleMap;
    import com.google.android.gms.maps.SupportMapFragment;
     
    public class MainActivity extends FragmentActivity {
        GoogleMap map;
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
     
            map = ((SupportMapFragment) getSupportFragmentManager()
                    .findFragmentById(R.id.map)).getMap();
            if (map == null) {
                Toast.makeText(this, "Google Maps not available", 
                    Toast.LENGTH_LONG).show();
            }
        }
     
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is 
            // present.
            getMenuInflater().inflate(R.menu.activity_main, menu);
            return true;
        }
     
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
     
            switch (item.getItemId()) {
     
            case R.id.menu_sethybrid:
                map.setMapType(GoogleMap.MAP_TYPE_HYBRID);
                break;
     
            case R.id.menu_showtraffic:
                map.setTrafficEnabled(true);
                break;
     
            case R.id.menu_zoomin:
                map.animateCamera(CameraUpdateFactory.zoomIn());
                break;
     
            case R.id.menu_zoomout:
                map.animateCamera(CameraUpdateFactory.zoomOut());
                break;
            }
     
            return true;
        } 
    }
  2. Deploy the application onto a real Android device. Select the Zoom In and Zoom Out menu items and observe the map

Navigating to a Location

This section shows how to make Google Maps display a particular geographical location.
  1. Add the following statements to the MainActivity.java file:
    package net.learn2develop.googlemaps;
     
    import android.os.Bundle;
    import android.support.v4.app.FragmentActivity;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.Toast;
     
    import com.google.android.gms.maps.CameraUpdateFactory;
    import com.google.android.gms.maps.GoogleMap;
    import com.google.android.gms.maps.SupportMapFragment;
    import com.google.android.gms.maps.model.CameraPosition;
    import com.google.android.gms.maps.model.LatLng;
     
    public class MainActivity extends FragmentActivity {
        GoogleMap map;
     
        private static final LatLng GOLDEN_GATE_BRIDGE = 
            new LatLng(37.828891,-122.485884);
     
    ...
     
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
     
            switch (item.getItemId()) {
     
            case R.id.menu_sethybrid:
                map.setMapType(GoogleMap.MAP_TYPE_HYBRID);
                break;
     
            case R.id.menu_showtraffic:
                map.setTrafficEnabled(true);
                break;
     
            case R.id.menu_zoomin:
                map.animateCamera(CameraUpdateFactory.zoomIn());
                break;
     
            case R.id.menu_zoomout:
                map.animateCamera(CameraUpdateFactory.zoomOut());
                break;
     
            case R.id.menu_gotolocation:
                CameraPosition cameraPosition = new CameraPosition.Builder()
                    .target(GOLDEN_GATE_BRIDGE) // Sets the center of the map to
                                                // Golden Gate Bridge
                    .zoom(17)                   // Sets the zoom
                    .bearing(90) // Sets the orientation of the camera to east
                    .tilt(30)    // Sets the tilt of the camera to 30 degrees
                    .build();    // Creates a CameraPosition from the builder
                map.animateCamera(CameraUpdateFactory.newCameraPosition(
                    cameraPosition));
                break;
            }
            return true;
        }
    }
  2. Deploy the application onto a real Android device. Select the Go to a location menu item and observe the map (see Figure 17):Map at specific location in Android app
    Figure 17 - Displaying the map of a specific location

Adding a Marker

This section shows how to add a marker (commonly known as a push pin) to Google Maps.
  1. Add the following statements to the MainActivity.java file:
    package net.learn2develop.googlemaps;
     
    import android.os.Bundle;
    import android.support.v4.app.FragmentActivity;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.Toast;
     
    import com.google.android.gms.maps.CameraUpdateFactory;
    import com.google.android.gms.maps.GoogleMap;
    import com.google.android.gms.maps.SupportMapFragment;
    import com.google.android.gms.maps.model.BitmapDescriptorFactory;
     
    import com.google.android.gms.maps.model.CameraPosition;
    import com.google.android.gms.maps.model.LatLng;
    import com.google.android.gms.maps.model.MarkerOptions;
     
    public class MainActivity extends FragmentActivity {
        GoogleMap map;
     
        private static final LatLng GOLDEN_GATE_BRIDGE = 
            new LatLng(37.828891,-122.485884);
     
        ...
     
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
     
            switch (item.getItemId()) {
     
            case R.id.menu_sethybrid:
                map.setMapType(GoogleMap.MAP_TYPE_HYBRID);
                break;
     
            case R.id.menu_showtraffic:
                map.setTrafficEnabled(true);
                break;
     
            case R.id.menu_zoomin:
                map.animateCamera(CameraUpdateFactory.zoomIn());
                break;
     
            case R.id.menu_zoomout:
                map.animateCamera(CameraUpdateFactory.zoomOut());
                break;
     
            case R.id.menu_gotolocation:
                CameraPosition cameraPosition = new CameraPosition.Builder()
                    .target(GOLDEN_GATE_BRIDGE) // Sets the center of the map to
                                                // Golden Gate Bridge
                    .zoom(17)                   // Sets the zoom
                    .bearing(90) // Sets the orientation of the camera to east
                    .tilt(30)    // Sets the tilt of the camera to 30 degrees
                    .build();    // Creates a CameraPosition from the builder
                map.animateCamera(CameraUpdateFactory.newCameraPosition(
                    cameraPosition));
                break;
     
            case R.id.menu_addmarker:
     
                // ---using the default marker---
                /*
                map.addMarker(new MarkerOptions() 
                    .position(GOLDEN_GATE_BRIDGE)
                    .title("Golden Gate Bridge") .snippet("San Francisco")
                    .icon(BitmapDescriptorFactory
                    .defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));
                */
     
                map.addMarker(new MarkerOptions()
                    .position(GOLDEN_GATE_BRIDGE)
                    .title("Golden Gate Bridge")
                    .snippet("San Francisco")
                    .icon(BitmapDescriptorFactory
                    .fromResource(R.drawable.ic_launcher)));
                break;
            }
            return true;
        }
    }
  2. Deploy the application onto a real Android device. Select the Add a Marker menu item and observe the map (see Figure 18):Map with marker
    Figure 18 - Displaying a marker

Getting Your Current Location

This section shows how to get Google Maps to find your current location and then move the map to your current location.
  1. Add the following statements to the MainActivity.java file:
    package net.learn2develop.googlemaps;
     
    import android.location.Location;
    import android.os.Bundle;
    import android.support.v4.app.FragmentActivity;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.Toast;
     
    import com.google.android.gms.maps.CameraUpdateFactory;
    import com.google.android.gms.maps.GoogleMap;
    import com.google.android.gms.maps.SupportMapFragment;
    import com.google.android.gms.maps.model.BitmapDescriptorFactory;
     
    import com.google.android.gms.maps.model.CameraPosition;
    import com.google.android.gms.maps.model.LatLng;
    import com.google.android.gms.maps.model.MarkerOptions;
     
     
    public class MainActivity extends FragmentActivity {
        GoogleMap map;
     
        private static final LatLng GOLDEN_GATE_BRIDGE = 
            new LatLng(37.828891,-122.485884);
     
        ...
     
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
     
            switch (item.getItemId()) {
     
            case R.id.menu_sethybrid:
                map.setMapType(GoogleMap.MAP_TYPE_HYBRID);
                break;
     
            case R.id.menu_showtraffic:
                map.setTrafficEnabled(true);
                break;
     
            case R.id.menu_zoomin:
                map.animateCamera(CameraUpdateFactory.zoomIn());
                break;
     
            case R.id.menu_zoomout:
                map.animateCamera(CameraUpdateFactory.zoomOut());
                break;
     
            case R.id.menu_gotolocation:
                CameraPosition cameraPosition = new CameraPosition.Builder()
                    .target(GOLDEN_GATE_BRIDGE) // Sets the center of the map to
                                                // Golden Gate Bridge
                    .zoom(17)                   // Sets the zoom
                    .bearing(90) // Sets the orientation of the camera to east
                    .tilt(30)    // Sets the tilt of the camera to 30 degrees
                    .build();    // Creates a CameraPosition from the builder
                map.animateCamera(CameraUpdateFactory.newCameraPosition(
                    cameraPosition));
                break;
     
            case R.id.menu_addmarker:
                // ---using the default marker---
                /*
                map.addMarker(new MarkerOptions() 
                    .position(GOLDEN_GATE_BRIDGE)
                    .title("Golden Gate Bridge") .snippet("San Francisco")
                    .icon(BitmapDescriptorFactory
                    .defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));
                */
     
                map.addMarker(new MarkerOptions()
                    .position(GOLDEN_GATE_BRIDGE)
                    .title("Golden Gate Bridge")
                    .snippet("San Francisco")
                    .icon(BitmapDescriptorFactory
                    .fromResource(R.drawable.ic_launcher)));
                break;
     
            case R.id.menu_getcurrentlocation:
                // ---get your current location and display a blue dot---
                map.setMyLocationEnabled(true);
     
                break;
     
            case R.id.menu_showcurrentlocation:
                Location myLocation = map.getMyLocation();
                LatLng myLatLng = new LatLng(myLocation.getLatitude(),
                        myLocation.getLongitude());
     
                CameraPosition myPosition = new CameraPosition.Builder()
                        .target(myLatLng).zoom(17).bearing(90).tilt(30).build();
                map.animateCamera(
                    CameraUpdateFactory.newCameraPosition(myPosition));
                break;
            }
            return true;
        }
    }
  2. Deploy the application onto a real Android device. Select the Get Current Location menu item and then followed by the Show Current Location menu item. Observe the map.

Drawing Lines on the Map

This section shows how to draw a line on Google Maps connecting two different locations.
  1. Add the following statements to the MainActivity.java file:
    package net.learn2develop.googlemaps;
     
    import android.graphics.Color;
    import android.location.Location;
    import android.os.Bundle;
    import android.support.v4.app.FragmentActivity;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.Toast;
     
    import com.google.android.gms.maps.CameraUpdateFactory;
    import com.google.android.gms.maps.GoogleMap;
    import com.google.android.gms.maps.SupportMapFragment;
    import com.google.android.gms.maps.model.BitmapDescriptorFactory;
     
    import com.google.android.gms.maps.model.CameraPosition;
    import com.google.android.gms.maps.model.LatLng;
    import com.google.android.gms.maps.model.MarkerOptions;
    import com.google.android.gms.maps.model.PolylineOptions;
     
    public class MainActivity extends FragmentActivity {
        GoogleMap map;
     
        private static final LatLng GOLDEN_GATE_BRIDGE = 
            new LatLng(37.828891,-122.485884);
     
        private static final LatLng APPLE = 
            new LatLng(37.3325004578, -122.03099823);
     
        ...
     
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
     
            switch (item.getItemId()) {
     
            case R.id.menu_sethybrid:
                map.setMapType(GoogleMap.MAP_TYPE_HYBRID);
                break;
     
            case R.id.menu_showtraffic:
                map.setTrafficEnabled(true);
                break;
     
            case R.id.menu_zoomin:
                map.animateCamera(CameraUpdateFactory.zoomIn());
                break;
     
            case R.id.menu_zoomout:
                map.animateCamera(CameraUpdateFactory.zoomOut());
                break;
     
            case R.id.menu_gotolocation:
                CameraPosition cameraPosition = new CameraPosition.Builder()
                    .target(GOLDEN_GATE_BRIDGE) // Sets the center of the map to
                                                // Golden Gate Bridge
                    .zoom(17)                   // Sets the zoom
                    .bearing(90) // Sets the orientation of the camera to east
                    .tilt(30)    // Sets the tilt of the camera to 30 degrees
                    .build();    // Creates a CameraPosition from the builder
                map.animateCamera(CameraUpdateFactory.newCameraPosition(
                    cameraPosition));
                break;
     
            case R.id.menu_addmarker:
     
                // ---using the default marker---
                /*
                map.addMarker(new MarkerOptions() 
                    .position(GOLDEN_GATE_BRIDGE)
                    .title("Golden Gate Bridge") .snippet("San Francisco")
                    .icon(BitmapDescriptorFactory
                    .defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));
                */
     
                map.addMarker(new MarkerOptions()
                    .position(GOLDEN_GATE_BRIDGE)
                    .title("Golden Gate Bridge")
                    .snippet("San Francisco")
                    .icon(BitmapDescriptorFactory
                    .fromResource(R.drawable.ic_launcher)));
                break;
     
            case R.id.menu_getcurrentlocation:
                // ---get your current location and display a blue dot---
                map.setMyLocationEnabled(true);
     
                break;
     
            case R.id.menu_showcurrentlocation:
                Location myLocation = map.getMyLocation();
                LatLng myLatLng = new LatLng(myLocation.getLatitude(),
                        myLocation.getLongitude());
     
                CameraPosition myPosition = new CameraPosition.Builder()
                        .target(myLatLng).zoom(17).bearing(90).tilt(30).build();
                map.animateCamera(
                    CameraUpdateFactory.newCameraPosition(myPosition));
                break;
     
            case R.id.menu_lineconnecttwopoints:
                //---add a marker at Apple---
                map.addMarker(new MarkerOptions()
                        .position(APPLE)
                        .title("Apple")
                        .snippet("Cupertino")
                        .icon(BitmapDescriptorFactory.defaultMarker(
                                  BitmapDescriptorFactory.HUE_AZURE)));
     
                //---draw a line connecting Apple and Golden Gate Bridge---
                map.addPolyline(new PolylineOptions()
                    .add(GOLDEN_GATE_BRIDGE, APPLE).width(5).color(Color.RED));
                break;
            }
            return true;
        }
    }
  2. Deploy the application onto a real Android device. Select the Line connecting 2 points menu item and observe the map (see Figure 19):Map with line connecting two points
    Figure 19 - Drawing a line connecting two points

Sources from.... mobiforge.com

Popular posts from this blog

Switch : Material Design Tips

From google material design documentation.
On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.
The on/off slide toggle with the text “on” and “off” included within the asset is deprecated. Use the switch shown here instead. How to add? I. In your build.gradle add latest appcompat library. dependencies { compile 'com.android.support:appcompat-v7:X.X.X'// where X.X.X version} II. Make your activity extend android.support.v7.app.AppCompatActivity. publicclassMainActivityextendsAppCompatActivity{...} III. Declare your SwitchCompat inside any layout.xml file <android.support.v7.widget.SwitchCompatandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="true"/> SwitchCompat is a backward compatible version of the Switc…

Raised Button : Material Design Tips

From google material design documentation.
A typically rectangular material button that lifts and displays ink reactions on press. How to add? I. In your build.gradle add latest appcompat library. dependencies { compile 'com.android.support:appcompat-v7:X.X.X'// where X.X.X version} II. Make your activity extend android.support.v7.app.AppCompatActivity. publicclassMainActivityextendsAppCompatActivity{...} III. Declare your Button inside any layout.xml file <Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"/> How to style?
I. Declare custom style in your styles.xml file.

Floating Labels : Material Design Tips

From google material design documentation. When the user engages with the text input field, the floating inline labels move to float above the field. How to add? I. In your build.gradle add latest appcompat and design libraries. dependencies { compile 'com.android.support:appcompat-v7:X.X.X'// where X.X.X version compile 'com.android.support:design:X.X.X'// where X.X.X version} II. Make your activity extend android.support.v7.app.AppCompatActivity. publicclassMainActivityextendsAppCompatActivity{...} III. Declare your EditText inside any layout.xml file and wrap it with TextInputLayout. <android.support.design.widget.TextInputLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><EditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"android:hint="@string/Title"/></android.support.design.widget.TextInputLayout>