Customize facebook login button

Question

I am using a facebook login button to let users log in to my service through facebook. but the default facebook login button is not according to my app design as expected. I want the facebook login button to be like the email button; round and "f" in the center (see attached picture). I tried to set a background of the button to a custom background.

Here's the code for custom button:

  <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#E1C8FF"
        />
</shape>

and here's the button XML :

<com.facebook.login.widget.LoginButton
            android:id="@+id/btn_facebook_signup"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_margin="8dp"
            android:src="@drawable/ic_fb_login"
            facebook:com_facebook_login_text=""
            android:background="@drawable/round_button"/>

and is there any way to remove that white facebook icon from the button ??

Answer 1

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.