Android Development #2: Implementing Socialize SDK

First posted on 23/11/2013

Socialize is a tool which we can use to make social sharing platform possible in every app that we have developed. With Socialize, it is possible to track who have viewed our app, commented, liked and shared to social networks. How is this possible? Socialize needs to be integrated with a social networking site for the authentication (such as Facebook), thus making user management much easier to handle.

This note will guide us on the basic process on implementing Socialize to our app.
Setting up the app

  1. Create new Android project

  2. Download and import Socialize SDK into Eclipse

  3. Go to Project Properties > Android > Library: Add socialize-sdk only.

  4. In activity_main.xml, create two buttons:

    <?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" >
     
        <Button
            android:id="@+id/firstview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="View 1" />
     
        <Button
            android:id="@+id/secondview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/firstview"
            android:layout_centerInParent="true"
            android:text="View 2" />
     
    </RelativeLayout>
    
  5. In MainActivity.java, create a listener to those buttons:

    package com.aiman.salamdunia;
    
    import android.os.Bundle;
    import android.app.Activity;
    import android.content.Intent;
    import android.view.Menu;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.widget.Button;
    
    public class SalamDuniaActivity extends Activity {
    
        // Declare variables
        private Button fvbutton;
        private Button svbutton;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            // Get the view from activity_main.xml
            setContentView(R.layout.activity_salam_dunia);
     
            // Locate buttons in activity_main.xml
            fvbutton = (Button)findViewById(R.id.firstview);
            svbutton = (Button)findViewById(R.id.secondview);
     
            // Listen for first view button click
            fvbutton.setOnClickListener(new OnClickListener() {
     
                public void onClick(View arg0) {
                    // Open FirstView.class
                    Intent myIntent = new Intent(SalamDuniaActivity.this, FirstView.class);
                    SalamDuniaActivity.this.startActivity(myIntent);
                    // TODO Auto-generated method stub
                }
            });
     
            // Listen for second view button click
            svbutton.setOnClickListener(new OnClickListener() {
     
                public void onClick(View arg0) {
                    // Open SecondView.class
                    Intent myIntent = new Intent(SalamDuniaActivity.this, SecondView.class);
                    SalamDuniaActivity.this.startActivity(myIntent);
                    // TODO Auto-generated method stub
                }
            });
        }
     
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.salam_dunia, menu);
            return true;
        }
    
    }
    
  6. Create a new Activity, FirstViewActivity.java

  7. For its correspondent layout file, activity_firstview.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" >
     
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="This is first view" />
     
    </RelativeLayout>
    
  8. And then its controller, FirstViewActivity.java

    package com.aiman.salamdunia;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.os.Bundle;
    
    import com.socialize.ActionBarUtils;
    import com.socialize.Socialize;
    import com.socialize.entity.Entity;
    import com.socialize.ui.actionbar.ActionBarOptions;
    
    public class FirstView extends Activity{
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            // Call Socialize in onCreate
            Socialize.onCreate(this, savedInstanceState);
     
            // Your entity key. May be passed as a Bundle parameter to your activity
            String entityKey = "FirstView";
     
            // Create an entity object including a name
            // The Entity object is Serializable, so you could also store the whole
            // object in the Intent
            Entity entity = Entity.newInstance(entityKey, "Socialize");
            // Create an options instance to specify your theme
            ActionBarOptions options = new ActionBarOptions();
            // Set the colors for the Action Bar
            options.setStrokeColor(Color.parseColor("#591100")); // The line between the buttons
            options.setAccentColor(Color.parseColor("#ffa229")); // The accent line below the buttons
            options.setFillColor(Color.parseColor("#831400")); // The main color of the buttons
            options.setBackgroundColor(Color.parseColor("#591100")); // The background color seen on the left
            options.setHighlightColor(Color.parseColor("#b05e08")); // The thin highlight line above the buttons
            options.setTextColor(Color.parseColor("#ffba00")); // The text color for all buttons
     
            // Wrap your existing view with the action bar.
            // your_layout refers to the resource ID of your current layout.
            android.view.View actionBarWrapped = ActionBarUtils.showActionBar(this,
                    R.layout.firstview, entity, options);
     
            // Now set the view for your activity to be the wrapped view.
            setContentView(actionBarWrapped);
        }
     
        @Override
        protected void onPause() {
            super.onPause();
     
            // Call Socialize in onPause
            Socialize.onPause(this);
        }
     
        @Override
        protected void onResume() {
            super.onResume();
     
            // Call Socialize in onResume
            Socialize.onResume(this);
        }
     
        @Override
        protected void onDestroy() {
            // Call Socialize in onDestroy before the activity is destroyed
            Socialize.onDestroy(this);
     
            super.onDestroy();
        }
    }
    
  9. Create another Activity, SecondViewActivity.java

  10. For its correspondent layout file, activity_secondview.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" >
     
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="This is second view" />
     
    </RelativeLayout>
    
  11. And its controller, SecondViewActivity.java

    package com.aiman.salamdunia;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.os.Bundle;
    
    import com.socialize.ActionBarUtils;
    import com.socialize.Socialize;
    import com.socialize.entity.Entity;
    import com.socialize.ui.actionbar.ActionBarOptions;
    
    public class SecondView extends Activity{
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            // Call Socialize in onCreate
            Socialize.onCreate(this, savedInstanceState);
     
            // Your entity key. May be passed as a Bundle parameter to your activity
            String entityKey = "SecondView";
     
            // Create an entity object including a name
            // The Entity object is Serializable, so you could also store the whole
            // object in the Intent
            Entity entity = Entity.newInstance(entityKey, "Socialize");
            // Create an options instance to specify your theme
            ActionBarOptions options = new ActionBarOptions();
            // Set the colors for the Action Bar
            options.setStrokeColor(Color.parseColor("#591100")); // The line between the buttons
            options.setAccentColor(Color.parseColor("#ffa229")); // The accent line below the buttons
            options.setFillColor(Color.parseColor("#831400")); // The main color of the buttons
            options.setBackgroundColor(Color.parseColor("#591100")); // The background color seen on the left
            options.setHighlightColor(Color.parseColor("#b05e08")); // The thin highlight line above the buttons
            options.setTextColor(Color.parseColor("#ffba00")); // The text color for all buttons
     
            // Optionally alter the images
            options.setLikeIconResourceId(R.drawable.autumn_like);
            options.setLikeIconActiveResourceId(R.drawable.autumn_like_hi);
            options.setCommentIconResourceId(R.drawable.autumn_comment);
            options.setShareIconResourceId(R.drawable.autumn_share);
            options.setViewIconResourceId(R.drawable.autumn_view);
     
            // Wrap your existing view with the action bar.
            // your_layout refers to the resource ID of your current layout.
            android.view.View actionBarWrapped = ActionBarUtils.showActionBar(this,
                    R.layout.secondview, entity, options);
     
            // Now set the view for your activity to be the wrapped view.
            setContentView(actionBarWrapped);    }
     
        @Override
        protected void onPause() {
            super.onPause();
     
            // Call Socialize in onPause
            Socialize.onPause(this);
        }
     
        @Override
        protected void onResume() {
            super.onResume();
     
            // Call Socialize in onResume
            Socialize.onResume(this);
        }
     
        @Override
        protected void onDestroy() {
            // Call Socialize in onDestroy before the activity is destroyed
            Socialize.onDestroy(this);
     
            super.onDestroy();
        }
    }
    

We are half way done for the first part which is setting up the app. Now let's move on to setting up Socialize account.

Socialize Setup

  1. Sign Up to Socialize website
  2. Create a new app
  3. Enter Twitter consumer and secret key if necessary. Sign Up for Twitter Dev to acquire these keys.
  4. Acquire Socialize consumer and secret key upon creating New App in Socialize account.

Facebook Integration

  1. Login as Facebook Developer
  2. Create a New App. Enter any necessary information.
  3. Generate SSH key via command prompt. Install OpenSSL if any error occurs:
    keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
    
  4. Enter the key into Native Android App section
  5. Acquire Facebook App ID
  6. Disable Sandbox Mode

With those keys acquired, we need to tell the app to use it as an identifiers.

  1. Create a new file called socialize.properties in project's /assets folder
  2. Put these into the file:
    # Socialize App Key and Secret
    socialize.consumer.key=0000000-0000-0000-0000000-000000
    socialize.consumer.secret=00000-0000-00000-0000-0000000
    
    # Facebook App ID
    facebook.app.id=123456789034
    

You should now be able to use your app together with Socialize. Here is a screenshot I made to give you a closer look on how Socialize works.

I forgot to mention that we are able to analyze our app's social performance via Socialize account Dashboard. This is so neat!

Show Comments

Get the latest posts delivered right to your inbox.