personnaliser le bouton de connexion Facebook d'Android

Question

Je souhaite personnaliser l'apparence du bouton de connexion Facebook qui est fourni avec le sdk Facebook pour Android (facebook-Android-sdk-3.0.1). Je veux un simple bouton Android qui a pour titre "Login via Facebook". Je n'ai trouvé aucune documentation à ce sujet.

Donc si quelqu'un sait comment le faire de manière simple, merci de me le dire ou de m'indiquer comment le faire.

Answer 1

Afin d'avoir un bouton de connexion facebook complètement personnalisé sans utiliser com.facebook.widget.LoginButton .

Selon facebook sdk 4.x,

Il y a un nouveau concept de login comme sur facebook

LoginManager et AccessToken - Ces nouvelles classes perfo Connexion

Ainsi, vous pouvez maintenant accéder à l'authentification Facebook sans le bouton de connexion Facebook.

layout.xml

    <Button
            android:id="@+id/btn_fb_login"
            .../>

MainActivity.java

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        FacebookSdk.sdkInitialize(this.getApplicationContext());

        callbackManager = CallbackManager.Factory.create();

        LoginManager.getInstance().registerCallback(callbackManager,
                new FacebookCallback<LoginResult>() {
                    @Override
                    public void onSuccess(LoginResult loginResult) {
                        Log.d("Success", "Login");

                    }

                    @Override
                    public void onCancel() {
                        Toast.makeText(MainActivity.this, "Login Cancel", Toast.LENGTH_LONG).show();
                    }

                    @Override
                    public void onError(FacebookException exception) {
                        Toast.makeText(MainActivity.this, exception.getMessage(), Toast.LENGTH_LONG).show();
                    }
                });

        setContentView(R.layout.activity_main);

        Button btn_fb_login = (Button)findViewById(R.id.btn_fb_login);

        btn_fb_login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                  LoginManager.getInstance().logInWithReadPermissions(MainActivity.this, Arrays.asList("public_profile", "user_friends"));
            }
        });

    }

@Override 
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);

    callbackManager.onActivityResult(requestCode, resultCode, data); 
}

Answer 2

Vous pouvez utiliser des styles pour modifier le bouton de connexion comme ceci

<style name="FacebookLoginButton">
    <item name="android:textSize">@dimen/smallTxtSize</item>
    <item name="android:background">@drawable/facebook_signin_btn</item>
    <item name="android:layout_marginTop">10dp</item>
    <item name="android:layout_marginBottom">10dp</item>
    <item name="android:layout_gravity">center_horizontal</item>
</style>

et dans la mise en page

<com.facebook.widget.LoginButton
        xmlns:fb="http://schemas.android.com/apk/res-auto"
        android:id="@+id/loginFacebookButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        fb:login_text="@string/loginFacebookButton"
        fb:logout_text=""
        style="@style/FacebookLoginButton"/>

Answer 3

La meilleure façon de procéder, si vous souhaitez personnaliser entièrement le bouton, est de créer un bouton, ou n'importe quelle vue (dans mon cas, il s'agissait d'un bouton de type LinearLayout ) et de fixer un OnClickListener à cette vue, et appeler ce qui suit dans l'événement onClick :

com.facebook.login.widget.LoginButton btn = new LoginButton(this);
btn.performClick();

Answer 4

1. Créer un bouton facebook personnalisé et modifier la visibilité du bouton facebook natif :

   <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical">
   
       <Button
               android:id="@+id/facebookView"
               android:layout_width="300dp"
               android:layout_height="48dp"
               android:layout_gravity="center_horizontal"
               android:layout_marginBottom="12dp"
               android:background="@drawable/btn_frame"
               android:gravity="center"
               android:text="@string/Sign_in_facebook_button"
               android:textColor="@color/colorAccent" />
   
       <com.facebook.login.widget.LoginButton
               android:id="@+id/facebookButton"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:visibility="invisible"
               android:layout_marginBottom="12dp" />
   
    </LinearLayout>

2. Ajoutez un écouteur à votre faux bouton et simulez un clic :

   facebookView.setOnClickListener(this);
   @Override
   public void onClick(View v) {
       if (v.getId() == R.id.facebookView){
          facebookButton.performClick();
       }
   }

Answer 5

Vous pouvez modifier le bouton de connexion comme suit

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

Dans le code, j'ai défini la ressource d'arrière-plan :

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