• Facebook
  • Twitter
  • YouTube
  • LinkedIn
Tutorials Cache
  • Home
  • Android
  • IOS
  • Freelancing
  • Business
  • Web Development
  • Hire Us
  • Other Pages
    • About Us
    • Contact US
    • Privacy Policy
    • Disclaimer
Android

Android Facebook Login Tutorial – Custom Button

By Tausif Ul Rahman July 23, 2019
facebook integration android

Social logins in mobile applications are the quickest way to log in/signup. In this tutorial, we will learn how to implement Facebook login inside an android application using a custom login button. Facebook provides its own login button using Facebook SDK but we need to do that using a custom button so we can use any fancy style button on the login/signup pages of the application.

In order to complete this task first, we need to create our app in the Facebook developers section. Facebook will provide us with tokens and secrets which we will integrate into the application. Here are the steps to follow for the creation of an App under Facebook Developers.

Content Details Hide
1 1. Create Facebook App ID
2 2. Key Hash
3 3. strings.xml
4 4. AndroidManifest.xml
5 5. activity_main.xml
6 6. MainActivity.java

1. Create Facebook App ID

Open https://developers.facebook.com/ click on My Apps > Create App. Enter the App display name and email and press on Create AppID button.

create app ID facebook
create app ID facebook

The next step is to choose Integrate Facebook Login option from the dashboard and click confirm.

Integrate Facebook Login
Integrate Facebook Login

In the following step now we need to choose Android.

Android Platform
Android Platform

Add mavenCenteral() into build.gradle (Project).

MavenCentral
Maven Central

Similar way add implementation compile statement in build.gradle (Module: app).

implementation 'com.facebook.android:facebook-android-sdk:[5,6)'
implementation 'com.squareup.picasso:picasso:2.5.2'

The package name is the application id from the manifest file which we need to put inside Facebook. Also need to add MainActivity full path for deep linking.

Package Name and MainActivity
Package Name and MainActivity

2. Key Hash

Mac OS

      
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Windows

      
keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64

Generating a Release Key Hash

      
keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64


3. strings.xml

As moving forward we need to have facebook_app_id and fb_login_protocol_scheme under the quick start of Facebook Login.

<string name="facebook_app_id">APP_ID</string>
<string name="fb_login_protocol_scheme">fb_login_protocol_id</string>

Colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#d11617</color>
    <color name="colorPrimaryDark">#B31718</color>
    <color name="colorAccent">#FF4081</color>
</resources>

4. AndroidManifest.xml

Internet permissions are necessary to avoid network exceptions.

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

Facebook meta-data application under application as well.

<meta-data android:name="com.facebook.sdk.ApplicationId" 
        android:value="@string/facebook_app_id"/>
    
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges=
                "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />
    <activity
        android:name="com.facebook.CustomTabActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="@string/fb_login_protocol_scheme" />
        </intent-filter>
    </activity>

5. activity_main.xml

In activity_main.xml we are adding the login button ImageView and a few TextViews to show facebook returned users data like name, email, etc.

Download Login Button


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tutorialscache.facebookintegrationandroid.MainActivity">
    <ImageView
        android:id="@+id/fbIv"
        android:layout_width="140dp"
        android:layout_height="55dp"
        android:elevation="3dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="80dp"
        android:layout_marginBottom="15dp"
        android:padding="3dp"
        android:scaleType="fitXY"
        android:src="@drawable/fb" />
    <ImageView
        android:id="@+id/userIv"
        android:padding="10dp"
        android:src="@mipmap/ic_launcher"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/fbIv"
        android:layout_width="100dp"
        android:layout_height="100dp" />
    <TextView
        android:text="Email:"
        android:layout_below="@id/userIv"
        android:id="@+id/emailLabelTv"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/emailTv"
        android:textColor="@color/colorPrimary"
        android:layout_below="@+id/emailLabelTv"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:textSize="20dp"
        android:text=""
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Name:"
        android:layout_below="@id/emailTv"
        android:id="@+id/nameLabelTv"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/nameTv"
        android:textColor="@color/colorPrimary"
        android:layout_below="@+id/nameLabelTv"
        android:layout_centerHorizontal="true"
        android:textSize="20dp"
        android:text=""
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ProgressBar
        android:id="@+id/mPb"
        android:visibility="gone"
        android:layout_below="@id/nameTv"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="25dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

6. MainActivity.java

MainActivity is the most important part of this tutorial. In this Activity, we will implement all code regarding interaction with the custom Facebook login button and as a result of this handle callback with the result.

FacebookSdk Initialisation, LoginManager, CallbackManager, GraphRequest, and onActivityResult are key components of this login implementation.

FacebookSdk.sdkInitialize is used to start facebook SDK so requests can be triggered.

package com.tutorialscache.facebookintegrationandroid;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;
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.LoggingBehavior;
import com.facebook.appevents.AppEventsLogger;
import com.facebook.login.LoginManager;
import com.facebook.login.LoginResult;
import com.squareup.picasso.Picasso;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.Arrays;
public class MainActivity extends AppCompatActivity {
    ProgressBar mPb;
    ImageView fbIv,userIv;
    TextView emailTv,nameTv;
    Context context;
    CallbackManager callbackManager;
    AccessToken access_token;
    GraphRequest request;
    private String email,facebook_uid,first_name,last_name,social_id,name,picture;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        context = this;
        setContentView(R.layout.activity_main);
        getViews();
    }
    private void getViews() {
        mPb = findViewById(R.id.mPb);
        fbIv = findViewById(R.id.fbIv);
        nameTv = findViewById(R.id.nameTv);
        emailTv = findViewById(R.id.emailTv);
        userIv = findViewById(R.id.userIv);
        fbIv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                facebookLoginSignup();
                mPb.setVisibility(View.VISIBLE);
            }
        });
    }
    private void facebookLoginSignup() {
        FacebookSdk.sdkInitialize(this.getApplicationContext());
        if (BuildConfig.DEBUG) {
            FacebookSdk.setIsDebugEnabled(true);
            FacebookSdk.addLoggingBehavior(LoggingBehavior.INCLUDE_ACCESS_TOKENS);
        }
        LoginManager.getInstance().logInWithReadPermissions((Activity) context, Arrays.asList("email", "public_profile"));
        callbackManager = CallbackManager.Factory.create();
        LoginManager.getInstance().registerCallback(callbackManager,
                new FacebookCallback<LoginResult>() {
                    @Override
                    public void onSuccess(LoginResult loginResult) {
                        Log.d("response Success", "Login");
                        access_token = loginResult.getAccessToken();
                        Log.d("response access_token", access_token.toString());
                        request = GraphRequest.newMeRequest(AccessToken.getCurrentAccessToken(), new GraphRequest.GraphJSONObjectCallback() {
                            @Override
                            public void onCompleted(JSONObject object, GraphResponse response) {
                                JSONObject json = response.getJSONObject();
                                try {
                                    if (json != null) {
                                        Log.d("response", json.toString());
                                        try {
                                            email = json.getString("email");
                                            emailTv.setText(email+"");
                                        } catch (Exception e) {
                                            Toast.makeText(context, "Sorry!!! Your email is not verified on facebook.", Toast.LENGTH_LONG).show();
                                            return;
                                        }
                                        facebook_uid = json.getString("id");
                                        social_id = json.getString("id");
                                        first_name = json.getString("first_name");
                                        last_name = json.getString("last_name");
                                        name = json.getString("name");
                                        nameTv.setText(name+"");
                                        picture = "https://graph.facebook.com/" + facebook_uid + "/picture?type=large";
                                        Log.d("response",  " picture"+picture);
                                        Picasso.with(context).load(picture).placeholder(R.mipmap.ic_launcher).into(userIv);
                                        mPb.setVisibility(View.GONE);
                                    }
                                } catch (JSONException e) {
                                    e.printStackTrace();
                                    Log.d("response problem", "problem" + e.getMessage());
                                }
                            }
                        });
                        Bundle parameters = new Bundle();
                        parameters.putString("fields", "id,name,first_name,last_name,link,email,picture");
                        request.setParameters(parameters);
                        request.executeAsync();
                    }
                    @Override
                    public void onCancel() {
                        Toast.makeText(context, "Login Cancel", Toast.LENGTH_LONG).show();
                    }
                    @Override
                    public void onError(FacebookException exception) {
                        Toast.makeText(context, exception.getMessage(), Toast.LENGTH_LONG).show();
                    }
                });
    }
    //region onResult
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
            callbackManager.onActivityResult(requestCode, resultCode, data);
    }
}
Download source code
androidlogin

Related Posts

google play store

Are Google Play Store Services Going to be Banned in Pakistan?

November 27, 2022
MVP Design Pattern

MVP Design Pattern Android Tutorial

January 20, 2020
MVVM Tutorial

MVVM Design Pattern in Android

January 15, 2020

Comments are closed.

  • search here
  • Categories
    • Android (16)
    • Business (7)
    • Freelancing (14)
    • IOS (4)
    • Technology (6)
    • Uncategorized (1)
    • Web development (7)
  • we are social
    Tutorialscache
  • Popular tutorials
    • gender gap in tech
      Women in Tech: How to Remove the Gender Gap
      February 25, 2023
    • freelancer
      How to Start Freelancing Even When Working Full-Time
      February 19, 2023
    • make money on tiktok
      How to Make Money on TikTok
      February 13, 2023
    • workers
      Why Coding is an Essential Skill For an IT Job
      February 8, 2023
    • programmer
      The Best Online Coding Courses in 2023
      February 2, 2023
    • freelancer is working
      Who Is a Freelancer and How Do You Become?
      January 26, 2023
    • technology company
      Tech Layoff 2023- Google is Cutting 12,000 Jobs
      January 21, 2023
    • demanding freelance skills
      Top 9 Most Demanding Freelance Skills in 2023
      January 14, 2023
    • twitter
      How to Download Tweets From Twitter
      January 9, 2023
    • Text messages on iphone
      How to Recover Deleted Text Messages On iPhone
      January 3, 2023
  • copyright © 2019 TutorialCache Pvt Ltd
  • Facebook
  • Twitter
  • YouTube
  • LinkedIn
  • Home
  • Android
  • IOS
  • Freelancing
  • Business
  • Web Development
  • Hire Us
  • Other Pages
    • About Us
    • Contact US
    • Privacy Policy
    • Disclaimer