+1 Button with Google Play Services 7.3.0

Here we’ll look at adding Google’s +1 button in your app. Yep, its that tiny little g +1 button that turns red when you click it. You might have noticed it on the Play Store. Using the latest libraries, I’ll show you how to include one real quick in your apps. So people can +1 directly from your app!

Why do you need it?

If you’re wondering why should you care about it? Here’s Mashable’s take on it. While it says it affects SEO of websites, the same is true for apps too. The more people +1 it, the more frequently its going to appear on other’s Play Store home screens.

While the Play Store allows you to +1, its better if people can do that comfortably from within your app!

Pre 7.3.0

The earlier versions needed us to use the PlusClient class from Google Play Services library. Too bad that its now deprecated. In fact, that class isn’t even available for use anymore. So how do you go about it then?

The GoogleApiClient

This class was introduced with the Google Play Services 7.3.0 update. After this you have to use this class mandatory. Using the PlusClient will give you an error. The good news is that its relatively simple with the GoogleApiClient class.

We’ll start off by adding the gradle dependency for it first. Add this to your app’s build.gradle file.

dependencies {
    compile 'com.google.android.gms:play-services:7.3.0'
}

The main entry point for Google Play services integration.

GoogleApiClient is used with a variety of static methods. Some of these methods require that GoogleApiClient be connected, some will queue up calls before GoogleApiClient is connected; check the specific API documentation to determine whether you need to be connected. – developer.android.com

Create the +1 button

We need to place the button in our layout first, before we do anything else.

<com.google.android.gms.plus.PlusOneButton
 xmlns:plus="http://schemas.android.com/apk/lib/com.google.android.gms.plus"
        android:id="@+id/plus_one_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        plus:size="standard"
        plus:annotation="none" />

Note the plus namespace used. At the minimum, the PlusOneButton widget needs two XML attributes defined. That being its size and the annotation. There are different sizes and annotations that you could use for your button. More on that here.

PlusOneButton mPlusOneButton = (PlusOneButton) findViewById(R.id.plus_one_button);

@Override
protected void onResume() {
    super.onResume();
    mPlusOneButton.initialize("YourAppUrlOnPlayStore", PLUS_ONE_REQUEST_CODE);
}

After hooking up our PlusOneButton to its XML widget, we just need to initialize it. It takes 2 parameters:

• The URL you want (usually your app url on the Play Store) Goes like “http://market.android.com/details?id=com.yourpackage.name”
• Plus one request code private static final int PLUS_ONE_REQUEST_CODE = 0;

GoogleApiClient Builder

Using the GoogleApiClient.Builder we can quickly initialize whatever is needed for setup. The developer docs say that we need to call the connect() and disconnect() method in our onStart() and onStop() methods of our activities respectively, regardless of the state.

Firstly, let’s initialize the client.

GoogleApiClient mGoogleApiClient = new GoogleApiClient.Builder(this)
        .addApi(Plus.API)
        .addScope(Plus.SCOPE_PLUS_LOGIN)
        .useDefaultAccount()
        .build()

The GoogleApiClient class allows us to use various Google services APIs. We need that of Google+ so we add its API here .addApi(Plus.API). Suppose you want to use Google Drive, then the parameter would be Drive.API.

Next we need to add the scope. This is the OAuth 2.0 scopes for use with Google Play services. It entails what part of the services you require. You can even use multiple APIs with each of their respective scopes together.

Thirdly, we need to set the user account. the userDefaultAccount() lets the user pick his Google account (if he has multiple). Otherwise you could explicitly specify it using .setAccountName("accountname@gmail.com"). However this is not recommended. 

@Override
protected void onStart() {
    super.onStart();
    mGoogleApiClient.connect();
  }

 @Override
    protected void onStop() {
        super.onStop();
        mGoogleApiClient.disconnect();
    }

Finally to handle the GoogleApiClient connection in the onStart() and onStop() methods respectively.

That’s it! You can now try hitting the +1 button in your app, and it will turn red!

You can take this further with connection callbacks or click listeners informing the users with a Toast like “You +1’d this!“. Completely up to you!

Suleiman

Product Designer who occasionally writes code.

iamsuleiman.com