Is it possible to change Facebook login button image in Facebook Android SDK3?

Question

Facebook Android sdk has a com.facebook.widget.LoginButton

I want to put my own image for the Login button. Is it possible ?

So far i\'ve tried

Answer 1

yes if you want to change text and image both then write the below code.

authButton = (LoginButton) view.findViewById(R.id.authButton);
authButton.setBackgroundResource(R.drawable.icon);
authButton.setText("Login");
authButton.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);`

Answer 2

I ended up overriding the text to be empty string and then defining the setBackgroundResource of the button to my image (didn't need the dynamic login/logout text functionality)

<com.facebook.widget.LoginButton
        xmlns:fb="http://schemas.android.com/apk/res-auto"
        android:id="@+id/login_button"
        android:layout_width="249dp"
        android:layout_height="45dp"
        android:layout_above="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="30dp"
        android:layout_marginTop="30dp"
        android:contentDescription="@string/login_desc"
        android:scaleType="centerInside"
        fb:login_text=""
        fb:logout_text="" />

And in code I defined the background resource :

final LoginButton button = (LoginButton) findViewById(R.id.login_button);
button.setBackgroundResource(R.drawable.facebook);

Kind of a workaround, but I preferred this over changing Facebook SDK code (although it's very straight forward as well) and worry about updating each time I update the their version.

Answer 3

Create a drawable with name com_facebook_button_icon.xml add anything inside it FB login button will override as it uses as drawableleft.

For example:

<vector
android:height="25dp"
android:viewportHeight="1365.3333"
android:viewportWidth="1365.3333"
android:width="25dp"
xmlns:android="http://schemas.android.com/apk/res/android"
android:tintMode="multiply"
android:tint="@color/com_facebook_button_text_color"
>
<path
    android:fillAlpha="1"
    android:fillColor="#FFFFFF"
    android:fillType="nonZero"
    android:pathData="m1365.33,682.67c0,-377.03 -305.64,-682.67 -682.67,-682.67C305.64,-0 0,
        305.64 0,682.67 0,1023.41 249.64,1305.83 576,1357.04L576,880L402.67,880l0,
        -197.33l173.33,-0l0,-150.4c0,-171.09 101.92,-265.6 257.85,-265.6 74.69,-0 152.81,
        13.33 152.81,13.33L986.67,448L900.58,448C815.78,448 789.33,500.62 789.33,
        554.61L789.33,682.67L978.67,682.67L948.4,880L789.33,880L789.33,1357.04C1115.69,
        1305.83 1365.33,1023.41 1365.33,682.67"
    android:strokeColor="#00000000"
    />

Answer 4

An other way

loginButton = (LoginButton) findViewById(R.id.fb_login_button);
loginButton.setVisibility(View.GONE);




ImageView ivFbCustomButton = (ImageView) findViewById(R.id.iv_fb_custom_button);
ivFbCustomButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        com.facebook.login.widget.LoginButton btn = new com.facebook.login.widget.LoginButton(FacebookActivity.this);
        btn.performClick();
    }
});

Note:

You have to write the code for two buttons in XML file. One is for default facebook button (We are hiding it at initial step). Second one is for custom button