Quiero personalizar el aspecto 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 de Android simple que tenga el título "Iniciar sesión a través de Facebook". No pude encontrar ninguna documentación al respecto.
Entonces, si alguien sabe cómo hacerlo de una manera simple, por favor dígame o dígame cómo hacerlo.
Respuestas:
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 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 de Facebook completamente personalizado sin usar com.facebook.widget.LoginButton.
Según Facebook SDK 4.x,
Hay nuevo concepto de inicio de sesión a partir de facebook.
LoginManager y AccessToken : estas nuevas clases realizan el inicio de sesión de Facebook
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);
}
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 a LinearLayout) y establecer una OnClickListeneren esa vista, y llamar a lo 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 así
<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 definí el recurso de fondo:
final LoginButton button = (LoginButton) findViewById(R.id.login_button);
button.setBackgroundResource(R.drawable.facebook);
fb:login_texty fb:logout_textarroja un error al intentar ejecutar. Aquí está el error: Error parsing XML: unbound prefix. ¿Estás seguro de que esa es la sintaxis adecuada?
Cree un botón de Facebook personalizado 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>
Agregue oyente a su botón falso y simule el clic:
facebookView.setOnClickListener(this);
@Override
public void onClick(View v) {
if (v.getId() == R.id.facebookView){
facebookButton.performClick();
}
}
En el SDK de Facebook más reciente, el nombre del texto de inicio y 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=""/>
//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"));
}
});
}
<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 diseño de fotogramas.
paso: 2 Para configurar 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 Alto / Ancho Igual
2> 1st declate com.facebook.widget.LoginButton y luego TextView
3> Para iniciar / cerrar sesión usando el escucha de clics de TextView
<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>
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 el 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
}
});
}
<FrameLayout
android:id="@+id/FrameLayout1"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginStart="132dp"
android:layout_marginTop="12dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/logbu">
<ImageView
android:id="@+id/fb"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/fb"
android:onClick="onClickFacebookButton"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="22sp" />
<com.facebook.login.widget.LoginButton
android:alpha="0" <!--***SOLUTION***-->
android:id="@+id/buttonFacebookLogin"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="45sp"
android:visibility="visible"
app:com_facebook_login_text="Log in with Facebook" />
</FrameLayout>
La forma más sencilla de personalizar el botón de Facebook integrado para Java y Kotlin
Forma más adecuada y limpia
Después de verificar las respuestas a continuación, parece que son una especie de trucos que se basan en editar la vista del botón de inicio de sesión para que sea más adecuada para sus necesidades.
Al estar en la misma posición, logré 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=""
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
e implementar el onClickListener así
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