Facebook Login button: apply custom style

Question

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:

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?

Answer 1

In the latest Facebook v4 API this is the correct answer:

<com.facebook.login.widget.LoginButton
    xmlns:facebook="http://schemas.android.com/apk/res-auto"
    facebook:com_facebook_login_text="LOGIN"
    facebook:com_facebook_logout_text="LOGOUT"/>

Answer 2

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.