Semi Transparent color for FillColor in Google Maps Android API V2

April 12, 2013
By

In this article, we will develop a Google Map Android API V2 application with a circle at the touched position where the circle is filled with a semi transparent color.



This application is developed in Eclipse (4.2.1) with ADT plugin (21.1.0) and Android SDK (21.1.0) and tested in a real Android device (Android 2.3.6  -  GingerBread).


1. Create a new Android application project namely “SemiTransparentDemo”

Create new Android application project namely "SemiTransparentDemo"

Figure 1 : Create new Android application project namely "SemiTransparentDemo"


2. Configure the project

Configure the application project

Figure 2 : Configure the application project


3. Design application launcher icon

Design application launcher icon

Figure 3 : Design application launcher icon


4. Create a blank activity

Create a blank activity

Figure 4 : Create a blank activity


5. Enter MainActivity details

Enter MainActivity details

Figure 5 : Enter MainActivity details


6. Download and configure Google Play Services Library in Eclipse

Google Map for Android is now integrated with Google Play Services. So we need to set up Google Play Service Library for developing Google Map application in Android.

Please follow the given below link to setup Google Play Service library in Eclipse.

http://developer.android.com/google/play-services/setup.html


7. Add Google Play Services Library to this project

Link Google Play Services Library to this project

Figure 6 : Link Google Play Services Library to this project


8. Get the API key for Google Maps Android API V2

We need to get an API key from Google to use Google Maps in Android application.

Please follow the given below link to get the API key for Google Maps Android API v2.

https://developers.google.com/maps/documentation/android/start


9. Add Android Support library to this project

By default, Android support library (android-support-v4.jar ) is added to this project by Eclipse IDE to the directory libs. If it is not added, we can do it manually by doing the following steps :

  • Open Project Explorer by Clicking “Window -> Show View -> Project Explorer”
  • Right click this project
  • Then from popup menu, Click “Android Tools -> Add Support Library “

10. Update the layout file res/layout/activity_main.xml


<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"
    tools:context=".MainActivity" >

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

</RelativeLayout>


11. Update the class “MainActivity” in the file src/in/wptrafficanalyzer/semitransparentdemo/MainActivity.java


package in.wptrafficanalyzer.semitransparentdemo;

import android.app.Dialog;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.Menu;

import com.google.android.gms.common.ConnectionResult;
import com.google.android.gms.common.GooglePlayServicesUtil;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.OnMapClickListener;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.CircleOptions;
import com.google.android.gms.maps.model.LatLng;

public class MainActivity extends FragmentActivity {

    GoogleMap googleMap;

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

        // Getting Google Play availability status
        int status = GooglePlayServicesUtil.isGooglePlayServicesAvailable(getBaseContext());

        // Showing status
        if(status!=ConnectionResult.SUCCESS){ // Google Play Services are not available

            int requestCode = 10;
            Dialog dialog = GooglePlayServicesUtil.getErrorDialog(status, this, requestCode);
            dialog.show();

        }else { // Google Play Services are available

            // Getting reference to the SupportMapFragment of activity_main.xml
            SupportMapFragment fm = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);

            // Getting GoogleMap object from the fragment
            googleMap = fm.getMap();

            // Enabling MyLocation button for the Google Map
            googleMap.setMyLocationEnabled(true);

            googleMap.setOnMapClickListener(new OnMapClickListener() {

                @Override
                public void onMapClick(LatLng point) {

                    // Removes the existing marker from the Google Map
                    googleMap.clear();

                    // Instantiating CircleOptions to draw a circle around the marker
                    CircleOptions circleOptions = new CircleOptions();

                    // Specifying the center of the circle
                    circleOptions.center(point);

                    // Radius of the circle
                    circleOptions.radius(50);

                    // Border color of the circle
                    circleOptions.strokeColor(Color.BLACK);

                    // Fill color of the circle
                    // 0x represents, this is an hexadecimal code
                    // 55 represents percentage of transparency. For 100% transparency, specify 00.
                    // For 0% transparency ( ie, opaque ) , specify ff
                    // The remaining 6 characters(00ff00) specify the fill color
                    circleOptions.fillColor(0x5500ff00);

                    // Border width of the circle
                    circleOptions.strokeWidth(2);

                    // Adding the circle to the GoogleMap
                    googleMap.addCircle(circleOptions);
                }
            });
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}


12. Update the file AndroidManifest.xml


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="in.wptrafficanalyzer.semitransparentdemo"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <permission
        android:name="in.wptrafficanalyzer.semitransparentdemo.permission.MAPS_RECEIVE"
        android:protectionLevel="signature"/>

    <uses-permission android:name="in.wptrafficanalyzer.semitransparentdemo.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"/>

    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true"/>

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="in.wptrafficanalyzer.semitransparentdemo.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_ANDROID_API_KEY"/>

    </application>
</manifest>


13. Screenshot of the application

Showing Semi Transparent Circle in Google Map Android API V2

Figure 7 : Showing Semi Transparent Circle in Google Map Android API V2


14. Download the source code


How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , , , , , , ,

10 Responses to Semi Transparent color for FillColor in Google Maps Android API V2

  1. imam nur on April 12, 2013 at 8:33 pm

    Nice tutorial sir,, I am always waiting your tutorial everytime..
    Sir, I want to ask you to give a tutorial on “sending data between activity but by using a spinner”. I’m very curious about it. :-p

    Thanks before..

    • dinhdatle on April 12, 2013 at 8:40 pm

      It’s so wonderful. Thanks for your shared! Hope that you share more document like that.

    • george on April 13, 2013 at 5:40 am

      Hi,
      Thank you for the suggestion

  2. Mirco Babini on April 19, 2013 at 5:51 pm

    I’m having some issues (With debug signing, i think).

    I exported the Apk building a new Keystore called debug.keystore in /a/personal/directory, following the instructions of developer.android.com/[..]/app-signing.html.

    So i got a new APIKEY pushing on Google Console (Maps V2, sure) the SHA1 from: keytool -list -v -keystore /a/personal/directory/debug.keystore -alias androiddebugkey -storepass android -keypass android

    Adding ‘;my.awesome.package’.

    I placed the APIKEY and run the app on my smartphone (Android 2.3.7) and.. snap, this error: “Failed to load map. Could not contact Google servers.”

    Any suggests?

    • george on April 20, 2013 at 9:46 am

      This error may be because of the following reasons :

      => Incorrect API key in AndroidManifest.xml

      => No internet connection in the device

  3. Sneha Shetty on June 3, 2015 at 1:28 pm

    I want the circle to be draggable ,how to do it?

  4. Sneha Shetty on June 3, 2015 at 2:40 pm

    In this code circle is not draggable,to achieve it which method should b used

  5. Sneha Shetty on June 3, 2015 at 3:26 pm

    Yes i got that right,

    1 more thing when i try to zoom the circle to include more locations,the map also gets zoomed but i want only the circle should be zoomed.

    Thanks

  6. Luqman Al Hakim on December 11, 2015 at 8:48 am

    Thanks for the tutorial much appreciated

  7. ferhat on April 21, 2016 at 4:56 am

    svp tu peut me l’aide pour creer une application android pour éviter la congestion routière

Leave a Reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner