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