Search code examples
androidfacebookfacebook-android-sdk

Facebook Login button: apply custom style


i'm facing a strange problem by using new Facebook android sdk 4. With older sdk version i was using:

 <com.facebook.login.widget.LoginButton
    xmlns:fb="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fb_button"
    style="@style/FacebookLoginButton"
    android:layout_width="485dp"
    android:layout_height="64dp"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="-17dp"
    fb:login_text="@string/login_with_facebook"
    fb:logout_text="Logout" />

FacebookLoginButton section of style.xml looks like

<style name="FacebookLoginButton">
    <item name="android:background">@drawable/button_facebook</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textSize">21sp</item>
    <item name="android:gravity">center</item>
</style>

drawable/button_facebook contains png of a custom button shape. Now whit old version of sdk everithing works well, but with new sdk something gone wrong. i obtain this:

enter image description here

as you can see, theres two facebook icon: the circled one is of facebook button, the second one (the big one) belongs to button_facebook drawable). There's a way to hide the circled icon?


Solution

  • Even i faced the same issue while i was working with fb login.... I fixed the issue by adding the following code....

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

    and here is my xml layout:

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

    Hope it helps you.

    EDIT 1:
    Facebook might change the location of LoginButton class which is present inside its SDK so u might need to change the XML tag accordingly. In my case it was inside com.facebook.widget.LoginButton double check it.