android - studio - personalizar el botón de inicio de sesión de Facebook

login con facebook android studio

Question

Quiero personalizar el aspecto del botón de inicio de sesión de Facebook que obtenemos junto con el sdk de Facebook para Android (facebook-android-sdk-3.0.1). Quiero un botón simple de Android que tenga el título "Login via Facebook". No pude encontrar ninguna documentación sobre eso.

Entonces, si alguien sabe cómo hacerlo de una manera simple, por favor dígame o dígame cómo hacerlo.

Answer 1

Es un truco, no es un método apropiado.

• Crear un diseño relativo.
• Defina su facebook_botton.
• También defina su botón de diseño personalizado.
• Superponerlos.

<RelativeLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dp">
    <com.facebook.login.widget.LoginButton
    xmlns:facebook="http://schemas.android.com/apk/res-auto"
    android:id="@+id/login_button"
    android:layout_width="300dp"
    android:layout_height="100dp"
    android:paddingTop="15dp"
    android:paddingBottom="15dp" />
    <LinearLayout
    android:id="@+id/llfbSignup"
    android:layout_width="300dp"
    android:layout_height="50dp"
    android:background="@drawable/facebook"
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal">
    <ImageView
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:src="@drawable/facbk"
    android:layout_gravity="center_vertical"
    android:layout_marginLeft="10dp" />
    <View
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:background="@color/fullGray"
    android:layout_marginLeft="10dp"/>
    <com.yadav.bookedup.fonts.GoutamBold
    android:layout_width="240dp"
    android:layout_height="50dp"
    android:text="Sign Up via Facebook"
    android:gravity="center"
    android:textColor="@color/white"
    android:textSize="18dp"
    android:layout_gravity="center_vertical"
    android:layout_marginLeft="10dp"/>
    </LinearLayout>
</RelativeLayout>

Answer 2

1. Crea un botón de Facebook personalizado y cambia la visabilidad en el botón de Facebook nativo:

   <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. Agregue listener a su botón falso y simule clic:

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

Answer 3

En el SDK de Facebook más reciente, el nombre de inicio de sesión y de salida de sesión es:

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

Answer 4

Esto es muy simple. Agregue un botón en el archivo de diseño como

<Button
   android:layout_width="200dp"
   android:layout_height="wrap_content"
   android:text="Login with facebook"
   android:textColor="#ffff"
   android:layout_gravity="center"
   android:textStyle="bold"
   android:onClick="fbLogin"
   android:background="@color/colorPrimary"/>

Y en onClick coloque el método registercallback () de LoginManager, porque este método se ejecuta automáticamente.

  public void fbLogin(View view)
{
    LoginManager.getInstance().logInWithReadPermissions(this, Arrays.asList("user_photos", "email", "public_profile", "user_posts" , "AccessToken"));
    LoginManager.getInstance().logInWithPublishPermissions(this, Arrays.asList("publish_actions"));
    LoginManager.getInstance().registerCallback(callbackManager,
            new FacebookCallback<LoginResult>()
            {
                @Override
                public void onSuccess(LoginResult loginResult)
                {
                    // App code
                }

                @Override
                public void onCancel()
                {
                    // App code
                }

                @Override
                public void onError(FacebookException exception)
                {
                    // App code
                }
            });
}

Answer 5

La mejor manera que he encontrado para hacer esto, si desea personalizar completamente el botón es crear un botón, o cualquier Vista que desee (en mi caso fue un LinearLayout ) y establecer un OnClickListener a esa vista, y llamar a la siguiente en el evento onClick:

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

Answer 6

Para tener un botón de inicio de sesión completamente personalizado en Facebook sin usar com.facebook.widget.LoginButton .

De acuerdo con facebook sdk 4.x,

Existe un nuevo concepto de inicio de sesión desde Facebook

LoginManager y AccessToken : estas nuevas clases realizan Facebook Login

Entonces, ahora puede acceder a la autenticación de Facebook sin el botón de inicio de sesión de Facebook como

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 7

Personalizar com.facebook.widget.LoginButton

paso: 1 Creando un Framelayout.

paso: 2 Para establecer com.facebook.widget.LoginButton

paso: 3 Para configurar Textview con personalizable.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <com.facebook.widget.LoginButton
        android:id="@+id/fbLogin"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:contentDescription="@string/app_name"
        facebook:confirm_logout="false"
        facebook:fetch_user_info="true"
        facebook:login_text=""
        facebook:logout_text="" />

    <TextView
        android:id="@+id/tv_radio_setting_login"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:background="@drawable/drawable_radio_setting_loginbtn"
        android:gravity="center"
        android:padding="10dp"
        android:textColor="@android:color/white"
        android:textSize="18sp" />
</FrameLayout>

DEBE RECORDAR

1> com.facebook.widget.LoginButton & TextView Height / Width Mismo

2> 1st declate com.facebook.widget.LoginButton luego TextView

3> Para iniciar sesión / cerrar sesión usando Click-Listener de TextView

Answer 8

Puede modificar el botón de inicio de sesión como este

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

Y en el código I definí el recurso de fondo:

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

Answer 9

Puede usar estilos para modificar el botón de inicio de sesión como este

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

y en el diseño

<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 10

Manera correcta y más limpia

Después de revisar las respuestas a continuación, parece que son una especie de hacks que se basan en la edición de la vista del botón de inicio de sesión para que sea más adecuado para su necesidad.

Al estar en la misma posición, he logrado personalizar el botón de inicio de sesión de Facebook de manera eficiente.

<mehdi.sakout.fancybuttons.FancyButton
   android:id="@+id/facebook_login"
   android:layout_width="wrap_content"
   android:layout_height="45dp"
   android:paddingLeft="10dp"
   android:paddingRight="10dp"
   app:fb_radius="2dp"
   app:fb_iconPosition="left"
   app:fb_fontIconSize="20sp"
   app:fb_iconPaddingRight="10dp"
   app:fb_textSize="16sp"
   app:fb_text="Facebook Connect"
   app:fb_textColor="#ffffff"
   app:fb_defaultColor="#39579B"
   app:fb_focusColor="#6183d2"
   app:fb_fontIconResource="&#xf230;"
   android:layout_centerVertical="true"
   android:layout_centerHorizontal="true" />

e implementar onClickListener como tal

FacebookLogin.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
      if (AccessToken.getCurrentAccessToken() != null){
         mLoginManager.logOut();
      } else {
         mAccessTokenTracker.startTracking();
         mLoginManager.logInWithReadPermissions(MainActivity.this,              Arrays.asList("public_profile"));
      }
   }
});

Puede encontrar el código fuente completo en: http://medyo.github.io/customize-the-android-facebook-login-on-android

Answer 11

 <com.facebook.widget.LoginButton
            android:id="@+id/login_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            facebook:confirm_logout="false"
            facebook:fetch_user_info="true"
            android:text="testing 123"
            facebook:login_text=""
            facebook:logout_text=""
            />

Esto funcionó para mí. Para cambiar el texto del botón de inicio de sesión de Facebook.

Answer 12

//call Facebook onclick on your customized button on click by the following

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 mycustomizeedbutton=(Button)findViewById(R.id.mycustomizeedbutton);

        mycustomizeedbutton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                  LoginManager.getInstance().logInWithReadPermissions(this, Arrays.asList("public_profile", "user_friends"));
            }
        });

    }