Change Facebook login background

Question

I have the following code used as a facebook login. I followed their tutorial and implemented Facebook login into my android app. Now I want to change the login button background. How can I do that?

XML file:

<com.facebook.login.widget.LoginButton
    android:id="@+id/facebook_login_button"
    android:layout_width="320dp"
    android:layout_height="64dp"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/google_button" />

in MainActivity:

    facebook_login_button.setReadPermissions("email", "public_profile")
    facebook_login_button.registerCallback(callbackManager, object : FacebookCallback<LoginResult> {

Answer 1

You can make a custom button for facebook login. For that you will need to make your existing facebook button visibility gone and make a custom button with your desired background and on click of your custom buttom call yourFacebookButton().performClick().

Modify your xml with this :

<com.facebook.login.widget.LoginButton
                android:id="@+id/facebook_login_button"
                android:layout_width="320dp"
                android:visibility="gone"
                android:layout_height="64dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="30dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/google_button" />

            <Button
                android:id="@+id/my_custom_back_ground_button"
                android:layout_width="320dp"
                android:layout_height="64dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="30dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/google_button" />

On click of your button with id=my_custom_back_ground_button call your facebook button click as yourFacebookButton.performClick()