Personalizar el botón de inicio de sesión de Android Facebook

Quiero personalizar la apariencia del botón de inicio de sesión de Facebook que nos llevamos junto con el sdk de Facebook para android (facebook-android-sdk-3.0.1). Quiero un botón androide simple que tiene el título "Login via Facebook". No pude encontrar ninguna documentación con respecto a eso.

Así que si alguien sabe sobre cómo hacerlo de una manera sencilla, por favor, dígame o diríjame sobre cómo hacerlo.

Puede utilizar estilos para modificar el botón de inicio de sesión de este modo

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

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

De acuerdo con Facebook sdk 4.x,

Hay un nuevo concepto de inicio de sesión desde facebook

LoginManager y AccessToken – Estas nuevas clases realizan Facebook Login

Por lo tanto, 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(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); } 

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 llame a la siguiente En el evento onClick:

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

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

 <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 código definí el recurso de fondo:

 final LoginButton button = (LoginButton) findViewById(R.id.login_button); button.setBackgroundResource(R.drawable.facebook); 
  1. Cree el botón personalizado de facebook y cambie la visibilidad en el botón nativo de facebook:

     <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. Añada el oyente a su botón falso y simule el tecleo:

     facebookView.setOnClickListener(this); @Override public void onClick(View v) { if (v.getId() == R.id.facebookView){ facebookButton.performClick(); } } 
 //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")); } }); } 

En el nuevo SDK de Facebook, el nombre de inicio de sesión y de cierre 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=""/> 
  <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.

Personalizar com.facebook.widget.LoginButton

Paso: 1 Creación de un Framelayout.

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

Paso: 3 Para establecer 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 Altura / Anchura Igual

2> Primero declare com.facebook.widget.LoginButton luego TextView

3> Para realizar el inicio de sesión / cierre de sesión usando el ListView de Click de TextView

Es un truco no un método apropiado.

  • Cree un diseño relativo.
  • Defina su facebook_botton.
  • También defina su botón de diseño personalizado.
  • Se superponen.
 <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> 

Manera correcta y más limpia

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

Imagen de demostración

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 el onClickListener como si

 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")); } } }); 

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

Esto es muy simple. Añadir 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 el lugar de onClick, el método registercallback () de LoginManager 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 } }); } 
FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.