Change Facebook & Google's Login Buttons Shape & Style

Question

I'm working on a project where I'm using rounded buttons, EditText fields, etc. However, when I attempt to change the shape of Facebook and Google's buttons from their stock rectangular design, nothing happens. I'm using an XML script to use on buttons and edittext fields to change their design, but that doesn't seem to follow on the social login buttons... The desired design is taken from AirBnB's app, which as I am aware has been implemented using JavaScript's React framework, but I'm assuming there must be a way to achieve the same result using XML / Java...?

Any help will be much appreciated and if anything else required uploading, ask away!

Answer 1

Facebook

First add FrameLayout and make facebook button visibility="gone" and create button like that..

<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="match_parent"
                android:layout_height="wrap_content"
                android:background="#3B5991"
                android:drawableLeft="@drawable/facebook_logo_white_24dp"
                android:drawableStart="@drawable/facebook_logo_white_24dp"
                android:paddingEnd="20dp"
                android:paddingStart="20dp"
                android:onClick="onClick"
                android:text="Facebook"
                android:textAllCaps="false"
                android:textColor="#ffffff"
                android:textSize="14sp"
                android:textStyle="bold" 
               />
</FrameLayout>

2: Initialize FacebookSdk in onCreate before inflecting layout.

   FacebookSdk.sdkInitialize(this.getApplicationContext());

3: 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);
}

4: Set your custom button click to FacebookLogin button click.

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

5: For programmatically logout use this.

LoginManager.getInstance().logOut();

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

profile = Profile.getCurrentProfile().getCurrentProfile();
if (profile != null) {
    enter code here`// user has logenter code hereged in
} else {
    // user has not logged in
}

Google

For the google login create button in your style. My button is something like that you need to modify according to your need..

<Button
    android:id="@+id/google_login"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="#dd4b39"
    android:drawableStart="@drawable/google_plus_white_24dp"
    android:paddingEnd="20dp"
    android:paddingStart="20dp"
    android:text="Google+"
    android:textAllCaps="false"
    android:textColor="#FFFFFF"
    android:textSize="14sp"
    android:textStyle="bold" />

And use this code in your Activty..

private GoogleApiClient mGoogleApiClient;
private Button googleLogin;
private static final int RC_SIGN_IN = 1;

googleLogin = (Button) findViewById(R.id.google_login);
googleLogin.setOnClickListener(this);

GoogleSignInOptions gso = new 
GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
            .requestEmail()
            .build();
mGoogleApiClient = new GoogleApiClient.Builder(this)
            .enableAutoManage(this,GOOGLE_API_CLIENT_ID, this)
            .addApi(Auth.GOOGLE_SIGN_IN_API, gso)
            .build();

@Override
public void onClick(View v) {
    if (v.getId()==R.id.google_login) {
        if (mGoogleApiClient.isConnected()) {
            mGoogleApiClient.disconnect();
            mGoogleApiClient.connect();
        }
        googleSignIn();
    }
}
private void googleSignIn() {
    Intent signInIntent = Auth.GoogleSignInApi.getSignInIntent(mGoogleApiClient);
    startActivityForResult(signInIntent, RC_SIGN_IN);
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    callbackManager.onActivityResult(requestCode, resultCode, data);
    // Result returned from launching the Intent from GoogleSignInApi.getSignInIntent(...);
    if (requestCode == RC_SIGN_IN) {
        GoogleSignInResult result = Auth.GoogleSignInApi.getSignInResultFromIntent(data);
        handleSignInResult(result);
    }
}

private void handleSignInResult(GoogleSignInResult result) {
    Log.d("Spalsh Activity", "handleSignInResult:" + result.isSuccess());
    if (result.isSuccess()) {
        // Signed in successfully, show authenticated UI.
        GoogleSignInAccount acct = result.getSignInAccount();
        SharedPref.write(SharedPref.NAME, acct.getDisplayName());
    }
}

And override onstart()

@Override
protected void onStart() {
    OptionalPendingResult<GoogleSignInResult> pendingResult =
            Auth.GoogleSignInApi.silentSignIn(mGoogleApiClient);
    if (pendingResult.isDone()) {
        // There's immediate result available.
        handleSignInResult(pendingResult.get());
    } else {
        // There's no immediate result ready, displays some progress indicator and waits for the
        // async callback.
        //showProgressIndicator();
        pendingResult.setResultCallback(new ResultCallback<GoogleSignInResult>() {
            @Override
            public void onResult(@NonNull GoogleSignInResult result) {
                handleSignInResult(result);
                //hideProgressIndicator();
            }
        });
    }
    super.onStart();
}

For Logout from google...

Auth.GoogleSignInApi.signOut(mGoogleApiClient).setResultCallback(
                new ResultCallback<Status>() {
                    @Override
                    public void onResult(Status status) {

                    }
                });