Facebook Integration in Android Application

Sep 06, 2016

Objective :

This tutorial is all about facebook integration of an android application using Android Studio and how we can login into an application using Facebook credentials. I have describe the process of integration in details step by step.

Final Output:

STEP 1: Create new project in Android Studio.

If you are new to Android Studio and don’t know how to create a new project then you should checkout our blog.

Create new project in Android Studio

STEP 2: Steps of Facebook Integration with Android Application

2.1 Open Facebook Developer Panel

 <span style="color: #ffffff;"><span style="background-color: #0000cd;"><a title="developers.facebook.com" href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer">developers.facebook.com</a></span></span>

1	<span style="color: #ffffff;"><span style="background-color: #0000cd;"><a title="developers.facebook.com" href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer">developers.facebook.com</a></span></span>

2.2 Choose the MyApps tab and click on the “Add a New App”.

2.3 select a platform to get started from dashboard of project

2.4 Create a new facebook App.

2.5 Set Package Name And Main Activity Name Into Facebook Developer Panel

2.6 Generate Android Key Hash for Facebook

If you are new and don’t know how to create a KEY HASH then you should checkout our blog.

How To Create Key Hash in Android.

2.6.1 Add Android Key Hash into Facebook Developer Panel and copy App ID.

2.7 Add Repositories

Open your android project. Add the given below line to Module-level /app/build.gradle before dependencies.

repositories {
mavenCentral()
}

2.7.1 Add compile dependency

Add the compile dependency with the latest version of the Facebook SDK in the /app/build.gradle file.

compile ‘com.facebook.android:facebook-android-sdk:4.7.0’

2.7.2 Add Facebook App Id

Add Facebook App Id in your project’s strings file and update your Android manifest file.

<img class="wp-image-7864 size-full aligncenter" src="http://vrinfosystem.com/wp-content/uploads/2017/05/10.png" alt="" width="628" height="233" />

1	<img class="wp-image-7864 size-full aligncenter" src="http://vrinfosystem.com/wp-content/uploads/2017/05/10.png" alt="" width="628" height="233" />

<string name="facebook_app_id">Enter Your facebook app key</string>

1	<string name="facebook_app_id">Enter Your facebook app key</string>

2.7.3 Add Internet Permission

Open your project’s AndroidManifest.xml file add the following.
Add internet permission by adding uses-permission element to the manifest file.

<uses-permission android:name="android.permission.INTERNET"/>

1	<uses-permission android:name="android.permission.INTERNET"/>

2.8.4 Add Facebook Activity In Manifest File and meta-data with Android ID.

Step: 3 Facebook Login

3.1 xml file

3.1.1 Facebook Login Button

<com.facebook.login.widget.LoginButton
    android:id="@+id/login_button"
    android:layout_width="200sp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginTop="20dp"
    android:layout_marginBottom="20dp" />

<com.facebook.login.widget.LoginButton

android:id="@+id/login_button"

android:layout_width="200sp"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="20dp"

android:layout_marginBottom="20dp" />

3.1.2 Facebook profile picture

<com.facebook.login.widget.ProfilePictureView
    android:id="@+id/picture"
    android:layout_gravity="center"
    android:layout_marginTop="20dp"
    android:layout_width="200sp"
    android:visibility="gone"
    android:layout_height="200sp"/>

<com.facebook.login.widget.ProfilePictureView

android:id="@+id/picture"

android:layout_gravity="center"

android:layout_marginTop="20dp"

android:layout_width="200sp"

android:visibility="gone"

android:layout_height="200sp"/>

3.1.3 Facebook show detail button for show details

<Button
    android:id="@+id/details"
    android:text="Show details"
    android:layout_gravity="center"
    android:layout_width="200sp"
    android:layout_marginBottom="20dp"
    android:layout_height="wrap_content" />

<Button

android:id="@+id/details"

android:text="Show details"

android:layout_gravity="center"

android:layout_width="200sp"

android:layout_marginBottom="20dp"

android:layout_height="wrap_content" />

After addition, your activity_main.xml file should look like this :-

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.facebook.login.widget.ProfilePictureView
        android:id="@+id/picture"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:layout_width="200sp"
        android:visibility="gone"
        android:layout_height="200sp"/>

    <com.facebook.login.widget.LoginButton
        android:id="@+id/login_button"
        android:layout_width="200sp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp" />
    <Button
        android:id="@+id/details"
        android:text="Show details"
        android:layout_gravity="center"
        android:layout_width="200sp"
        android:layout_marginBottom="20dp"
        android:layout_height="wrap_content" />

</LinearLayout>

<LinearLayout 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"

android:orientation="vertical"

tools:context=".MainActivity">

<com.facebook.login.widget.ProfilePictureView

android:id="@+id/picture"

android:layout_gravity="center"

android:layout_marginTop="20dp"

android:layout_width="200sp"

android:visibility="gone"

android:layout_height="200sp"/>

<com.facebook.login.widget.LoginButton

android:id="@+id/login_button"

android:layout_width="200sp"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="20dp"

android:layout_marginBottom="20dp" />

<Button

android:id="@+id/details"

android:text="Show details"

android:layout_gravity="center"

android:layout_width="200sp"

android:layout_marginBottom="20dp"

android:layout_height="wrap_content" />

</LinearLayout>

3.1.3 dialog_details.xml for show pop up when click on details button

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="300sp"
    android:layout_gravity="center"
    android:layout_height="match_parent">
    <TextView
        android:layout_marginTop="20sp"
        android:layout_marginBottom="20sp"
        android:layout_marginLeft="20sp"
        android:layout_marginRight="20sp"
        android:layout_width="300sp"
        android:textSize="15sp"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:id="@+id/details"
        android:autoLink="web|email"
        android:layout_gravity="center" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="300sp"

android:layout_gravity="center"

android:layout_height="match_parent">

<TextView

android:layout_marginTop="20sp"

android:layout_marginBottom="20sp"

android:layout_marginLeft="20sp"

android:layout_marginRight="20sp"

android:layout_width="300sp"

android:textSize="15sp"

android:layout_height="wrap_content"

android:textAlignment="center"

android:id="@+id/details"

android:autoLink="web|email"

android:layout_gravity="center" />

</LinearLayout>

3.2 Java Class File

3.2.1 Initialize Facebook SDK

FacebookSdk.sdkInitialize(getApplicationContext());

1	FacebookSdk.sdkInitialize(getApplicationContext());

3.2.2 Register Callback With LoginButton

login.registerCallback(callbackManager, new FacebookCallback() {
    @Override
    public void onSuccess(LoginResult loginResult) {

        if(AccessToken.getCurrentAccessToken() != null){
            RequestData();
            details.setVisibility(View.VISIBLE);
            profile.setVisibility(View.VISIBLE);
        }
    }

@Override

public void onSuccess(LoginResult loginResult) {

if(AccessToken.getCurrentAccessToken() != null){

RequestData();

details.setVisibility(View.VISIBLE);

profile.setVisibility(View.VISIBLE);

}

3.2.3 Forword Login Result To CallbackManager

protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    callbackManager.onActivityResult(requestCode, resultCode, data);
}

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

super.onActivityResult(requestCode, resultCode, data);

callbackManager.onActivityResult(requestCode, resultCode, data);

}

3.2.4 create RequestData() method for access facebook data

public void RequestData(){
    GraphRequest request = GraphRequest.newMeRequest(AccessToken.getCurrentAccessToken(), new GraphRequest.GraphJSONObjectCallback() {
        @Override
        public void onCompleted(JSONObject object,GraphResponse response) {

            JSONObject json = response.getJSONObject();
            try {
                if(json != null){
                    String text = "Name : "+json.getString("name")+"Email : "+json.getString("email")+"Profile link : "+json.getString("link");
                    details_txt.setText(Html.fromHtml(text));
                    profile.setProfileId(json.getString("id"));
                }

            } catch (JSONException e) {
                e.printStackTrace();
            }
        }
    });
    Bundle parameters = new Bundle();
    parameters.putString("fields", "id,name,link,email,picture");
    request.setParameters(parameters);
    request.executeAsync();
}

public void RequestData(){

GraphRequest request = GraphRequest.newMeRequest(AccessToken.getCurrentAccessToken(), new GraphRequest.GraphJSONObjectCallback() {

@Override

public void onCompleted(JSONObject object,GraphResponse response) {

JSONObject json = response.getJSONObject();

try {

if(json != null){

String text = "Name : "+json.getString("name")+"Email : "+json.getString("email")+"Profile link : "+json.getString("link");

details_txt.setText(Html.fromHtml(text));

profile.setProfileId(json.getString("id"));

}

} catch (JSONException e) {

e.printStackTrace();

}

});

Bundle parameters = new Bundle();

parameters.putString("fields", "id,name,link,email,picture");

request.setParameters(parameters);

request.executeAsync();

}

Final Source code:

Finally your <strong>MainActivity.java</strong> file should look like this:-

1	Finally your <strong>MainActivity.java</strong> file should look like this:-

package com.vrired.facebookintegration;

import android.app.Dialog;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import com.facebook.AccessToken;
import com.facebook.CallbackManager;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.FacebookSdk;
import com.facebook.GraphRequest;
import com.facebook.GraphResponse;
import com.facebook.login.LoginResult;
import com.facebook.login.widget.LoginButton;
import com.facebook.login.widget.ProfilePictureView;
import com.facebook.share.widget.ShareDialog;

import org.json.JSONException;
import org.json.JSONObject;


public class MainActivity extends AppCompatActivity {
    CallbackManager callbackManager;
    Button details;
    ShareDialog shareDialog;
    LoginButton login;
    ProfilePictureView profile;
    Dialog details_dialog;
    TextView details_txt;


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

        callbackManager = CallbackManager.Factory.create();
        login = (LoginButton)findViewById(R.id.login_button);
        profile = (ProfilePictureView)findViewById(R.id.picture);
        shareDialog = new ShareDialog(this);
        details = (Button)findViewById(R.id.details);
        login.setReadPermissions("public_profile email");
        details.setVisibility(View.INVISIBLE);
        profile.setVisibility(View.INVISIBLE);
        details_dialog = new Dialog(this);
        details_dialog.setContentView(R.layout.dialog_details);
        details_dialog.setTitle("Details");
        details_txt = (TextView)details_dialog.findViewById(R.id.details);


        details.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                details_dialog.show();
            }
        });


        if(AccessToken.getCurrentAccessToken() != null){
            RequestData();
            details.setVisibility(View.VISIBLE);
            profile.setVisibility(View.VISIBLE);

        }
        login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(AccessToken.getCurrentAccessToken() != null) {
                   details.setVisibility(View.INVISIBLE);
                    profile.setVisibility(View.INVISIBLE);
                    profile.setProfileId(null);
                }
            }
        });

        login.registerCallback(callbackManager, new FacebookCallback() {
            @Override
            public void onSuccess(LoginResult loginResult) {

                if(AccessToken.getCurrentAccessToken() != null){
                    RequestData();
                    details.setVisibility(View.VISIBLE);
                    profile.setVisibility(View.VISIBLE);
                }
            }

            @Override
            public void onCancel() {

            }

            @Override
            public void onError(FacebookException exception) {
            }
        });

    }
    public void RequestData(){
        GraphRequest request = GraphRequest.newMeRequest(AccessToken.getCurrentAccessToken(), new GraphRequest.GraphJSONObjectCallback() {
            @Override
            public void onCompleted(JSONObject object,GraphResponse response) {

                JSONObject json = response.getJSONObject();
                try {
                    if(json != null){
                        String text = "Name : "+json.getString("name")+"

Email : "+json.getString("email")+"

Profile link : "+json.getString("link");
                        details_txt.setText(Html.fromHtml(text));
                        profile.setProfileId(json.getString("id"));
                    }

                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        });
        Bundle parameters = new Bundle();
        parameters.putString("fields", "id,name,link,email,picture");
        request.setParameters(parameters);
        request.executeAsync();
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        callbackManager.onActivityResult(requestCode, resultCode, data);
    }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

package com.vrired.facebookintegration;

import android.app.Dialog;

import android.content.Intent;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.text.Html;

import android.view.View;

import android.widget.Button;

import android.widget.TextView;

import com.facebook.AccessToken;

import com.facebook.CallbackManager;

import com.facebook.FacebookCallback;

import com.facebook.FacebookException;

import com.facebook.FacebookSdk;

import com.facebook.GraphRequest;

import com.facebook.GraphResponse;

import com.facebook.login.LoginResult;

import com.facebook.login.widget.LoginButton;

import com.facebook.login.widget.ProfilePictureView;

import com.facebook.share.widget.ShareDialog;

import org.json.JSONException;

import org.json.JSONObject;

public class MainActivity extends AppCompatActivity {

CallbackManager callbackManager;

Button details;

ShareDialog shareDialog;

LoginButton login;

ProfilePictureView profile;

Dialog details_dialog;

TextView details_txt;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

FacebookSdk.sdkInitialize(getApplicationContext());

setContentView(R.layout.activity_main);

callbackManager = CallbackManager.Factory.create();

profile = (ProfilePictureView)findViewById(R.id.picture);

shareDialog = new ShareDialog(this);

details = (Button)findViewById(R.id.details);

details.setVisibility(View.INVISIBLE);

profile.setVisibility(View.INVISIBLE);

details_dialog = new Dialog(this);

details_dialog.setContentView(R.layout.dialog_details);

details_dialog.setTitle("Details");

details_txt = (TextView)details_dialog.findViewById(R.id.details);

details.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

details_dialog.show();

}

});

if(AccessToken.getCurrentAccessToken() != null){

RequestData();

details.setVisibility(View.VISIBLE);

profile.setVisibility(View.VISIBLE);

}

@Override

public void onClick(View view) {

if(AccessToken.getCurrentAccessToken() != null) {

details.setVisibility(View.INVISIBLE);

profile.setVisibility(View.INVISIBLE);

profile.setProfileId(null);

}

});

@Override

public void onSuccess(LoginResult loginResult) {

if(AccessToken.getCurrentAccessToken() != null){

RequestData();

details.setVisibility(View.VISIBLE);

profile.setVisibility(View.VISIBLE);

}

@Override

public void onCancel() {

}

@Override

public void onError(FacebookException exception) {

}

});

}

public void RequestData(){

GraphRequest request = GraphRequest.newMeRequest(AccessToken.getCurrentAccessToken(), new GraphRequest.GraphJSONObjectCallback() {

@Override

public void onCompleted(JSONObject object,GraphResponse response) {

JSONObject json = response.getJSONObject();

try {

if(json != null){

String text = "Name : "+json.getString("name")+"

Email : "+json.getString("email")+"

Profile link : "+json.getString("link");

details_txt.setText(Html.fromHtml(text));

profile.setProfileId(json.getString("id"));

}

} catch (JSONException e) {

e.printStackTrace();

}

});

Bundle parameters = new Bundle();

parameters.putString("fields", "id,name,link,email,picture");

request.setParameters(parameters);

request.executeAsync();

}

@Override

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

super.onActivityResult(requestCode, resultCode, data);

callbackManager.onActivityResult(requestCode, resultCode, data);

}

If you want facebook integration publically then follow below step

-Select App review

-Make Integration public yes

I hope you will find this blog post helpful while working with Facebook Login in Android Application. Let me know in comment if you have any questions regarding implement Facebook Login in Android Application. Please put a comment here and we will get back to you ASAP.

Got an Idea of Android App Development? Why are you still waiting for? Contact us now and see the Idea live soon.

Facebook Integration in Android Application