Custom Facebook Login Button - Android

customize Android Facebook Login button

You can use styles for modifiy the login button like this

<style name="FacebookLoginButton">
    <item name="android:textSize">@dimen/smallTxtSize</item>
    <item name="android:background">@drawable/facebook_signin_btn</item>
    <item name="android:layout_marginTop">10dp</item>
    <item name="android:layout_marginBottom">10dp</item>
    <item name="android:layout_gravity">center_horizontal</item>
</style>

and in layout

<com.facebook.widget.LoginButton
        xmlns:fb="http://schemas.android.com/apk/res-auto"
        android:id="@+id/loginFacebookButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        fb:login_text="@string/loginFacebookButton"
        fb:logout_text=""
        style="@style/FacebookLoginButton"/>

Custom Facebook Login Button - Android

Step 1:
First add FrameLayout and make facebook button visibility="gone" and add your custom button.
Don't forgot to put xmlns:facebook="http://schemas.android.com/apk/res-auto" in your main layout.

<FrameLayout
        android:id="@+id/FrameLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <com.facebook.login.widget.LoginButton
            android:id="@+id/login_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone" />

        <Button
            android:id="@+id/fb"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#416BC1"
            android:onClick="onClick"
            android:text="FaceBook"
            android:textColor="#ffffff"
            android:textStyle="bold" />
    </FrameLayout>

Step 2:
Initialize FacebookSdk in onCreate before inflecting layout.

FacebookSdk.sdkInitialize(this.getApplicationContext());

Step 3: add this into your java file.

callbackManager = CallbackManager.Factory.create();

fb = (Button) findViewById(R.id.fb);
loginButton = (LoginButton) findViewById(R.id.login_button);

List < String > permissionNeeds = Arrays.asList("user_photos", "email",
    "user_birthday", "public_profile", "AccessToken");
loginButton.registerCallback(callbackManager,
new FacebookCallback < LoginResult > () {@Override
    public void onSuccess(LoginResult loginResult) {

        System.out.println("onSuccess");

        String accessToken = loginResult.getAccessToken()
            .getToken();
        Log.i("accessToken", accessToken);

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

                Log.i("LoginActivity",
                response.toString());
                try {
                    id = object.getString("id");
                    try {
                        URL profile_pic = new URL(
                            "http://graph.facebook.com/" + id + "/picture?type=large");
                        Log.i("profile_pic",
                        profile_pic + "");

                    } catch (MalformedURLException e) {
                        e.printStackTrace();
                    }
                    name = object.getString("name");
                    email = object.getString("email");
                    gender = object.getString("gender");
                    birthday = object.getString("birthday");
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        });
        Bundle parameters = new Bundle();
        parameters.putString("fields",
            "id,name,email,gender, birthday");
        request.setParameters(parameters);
        request.executeAsync();
    }

    @Override
    public void onCancel() {
        System.out.println("onCancel");
    }

    @Override
    public void onError(FacebookException exception) {
        System.out.println("onError");
        Log.v("LoginActivity", exception.getCause().toString());
    }
});

Step 4:
Don't forget to add following code.

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

Step 5:
Set your custom button click to FacebookLogin button click.

public void onClick(View v) {
    if (v == fb) {
        loginButton.performClick();
    }
 }

Step 6:
For programmatically logout use this.

LoginManager.getInstance().logOut();

Step 7: you can find user logged in or not by profile.

profile = Profile.getCurrentProfile().getCurrentProfile();
if (profile != null) {
    // user has logged in
} else {
    // user has not logged in
}

FACEBOOK Login with Custom Button

to make you code look more smart
you have first Initialize Facebook SDK before set your layout

    FacebookSdk.sdkInitialize(getApplicationContext());

when use click on button or in your case layout call method do whole function

facebookSignUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Fblogin();
            }
        });

here private method handle Facebook login and callback

private void Fblogin()
{
    callbackmanager = CallbackManager.Factory.create();

    // Set permissions 
    LoginManager.getInstance().logInWithReadPermissions(this, Arrays.asList("email","user_photos","public_profile"));

    LoginManager.getInstance().registerCallback(callbackmanager,
            new FacebookCallback<LoginResult>() {
                @Override
                public void onSuccess(LoginResult loginResult) {

                    System.out.println("Success");
                    GraphRequest.newMeRequest(
                            loginResult.getAccessToken(), new GraphRequest.GraphJSONObjectCallback() {
                                @Override
                                public void onCompleted(JSONObject json, GraphResponse response) {
                                    if (response.getError() != null) {
                                        // handle error
                                        System.out.println("ERROR");
                                    } else {
                                        System.out.println("Success");
                                        try {

                                            String jsonresult = String.valueOf(json);
                                            System.out.println("JSON Result"+jsonresult);

                                            String str_email = json.getString("email");
                                            String str_id = json.getString("id");
                                            String str_firstname = json.getString("first_name");
                                            String str_lastname = json.getString("last_name");

                                        } catch (JSONException e) {
                                            e.printStackTrace();
                                        }
                                    }
                                }

                            }).executeAsync();

                }

                @Override
                public void onCancel() {
                    Log.d(TAG_CANCEL,"On cancel");
                }

                @Override
                public void onError(FacebookException error) { 
                    Log.d(TAG_ERROR,error.toString());
                }
    });
}

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

    callbackmanager.onActivityResult(requestCode, resultCode, data);
}

I provide you whole code to parse your json file

Customize facebook login button

You can achieve this feature in another easy way.
At first, take a relative layout and inside this relative layout place the facebook login button code. But set the visible attribute of this button to invisible.
So you will not see the facebook button as it is not visible. Now put your custom facebook button design inside this relative layout and add a click listener to it.


Suppose you have given a name the second button "customFbBtn". So when user will click on this button your listener callback will trigger and you need to just programmatically click the facebook button. You can do that with below code.

facebookSignInBtn.performClick();

In this way, you can give any custom design to your facebook button.

How to customize Facebook Login Button in Android

you can use this xml for customize. Replace button with your customized button.

<FrameLayout

        android:id="@+id/FrameLayout1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" >


        <com.facebook.login.widget.LoginButton

            android:id="@+id/login_button"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:visibility="gone" />


        <Button

            android:id="@+id/fb"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:background="#416BC1"

            android:onClick="onClick"

            android:text="FaceBook"

            android:textColor="#ffffff"

            android:textStyle="bold" />

    </FrameLayout>

<TextView
            android:id="@+id/btnFb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:background="@null"
            android:gravity="center"
            android:text="Login with Facebook"
            android:textColor="@color/white" />

 compile 'com.sromku:simple-fb:4.1.1'

facebookCallbackManager = CallbackManager.Factory.create();
final MyFacebookButton facebookLoginButton = findViewById(R.id.facebook);
LoginManager.getInstance().registerCallback(facebookCallbackManager,
        new FacebookCallback<LoginResult>() {
            @Override
            public void onSuccess(LoginResult loginResult) {
                ...
            }

            @Override
            public void onCancel() {
            }

            @Override
            public void onError(FacebookException exception) {
            }
        });
facebookLoginButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        LoginManager
                .getInstance()
                .logInWithReadPermissions(
                        LoginActivity.this,
                        Collections.singletonList(EMAIL)
                );
    }
});

    fbLoginButton.setBackgroundResource(R.drawable.facebook);
    fbLoginButton.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
    fbLoginButton.setCompoundDrawablePadding(0);
    fbLoginButton.setPadding(0, 0, 0, 0);
    fbLoginButton.setText("");

<com.facebook.widget.LoginButton
            xmlns:fb="http://schemas.android.com/apk/res-auto"
            android:id="@+id/fbLoginButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            fb:login_text=""
            fb:logout_text=""
            android:scaleType="centerInside" />

<com.facebook.login.widget.LoginButton
        xmlns:fb="http://schemas.android.com/apk/res-auto"
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fb:login_text=""
        fb:logout_text=""
        android:layout_gravity="center"/>