自定义Android Facebook登录按钮

79

我想自定义我们与Android的Facebook sdk（facebook-android-sdk-3.0.1）相处的Facebook登录按钮的外观。我想要一个简单的android按钮，其标题为“通过Facebook登录”。我找不到与此有关的任何文档。

因此，如果有人知道如何以简单的方式进行操作，请告诉我或指导我如何进行操作。

android  android-facebook 
— 多拉
source
1
我从未使用过facebook sdk ...但是，如果它们是与登录按钮相关联的图像文件，则可以对其进行修改...如果不完全忽略我的评论
— brendosthoughts
它只是不是与图像文件相关的按钮。它具有许多与之相关的功能，例如：它会根据用户是否登录来更改其文本
— dora

Answers:

83

您可以像这样使用样式来修改登录按钮

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

和布局

<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"/>
— 菲尔什
source
大家好，@ Filsh，是否有关于这些属性的官方文档？我没有找到它。
— 豪尔赫·埃尔南德斯
16
它不再起作用了。构建时，Gradle因错误而暂停。使用LoginManager和标准按钮。
— Cassio Landim 2015年
这是完美的。很棒
— VVB 2015年
168

为了拥有完全自定义的Facebook登录按钮，而无需使用com.facebook.widget.LoginButton。

根据facebook sdk 4.x，

从facebook开始有新的登录概念

LoginManager和AccessToken-这些新类执行Facebook登录

因此，现在您无需使用Facebook登录按钮即可访问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); 
}
— TejaDroid
source
6
错误：logInWithReadPermissions（this，Arrays.asList（“ public_profile”，“ user_friends”））; 无法解析符号
— Shaktisinh Jadeja
1
TejaDroid很好的答案，恕我直言，您应该添加onActivityResult以获得最佳答案。:)
— Ilario
1
像魅力+1一样工作
— Arpit Patel
3
@ShaktisinhJadeja指的是OnClickListener上下文。logInWithReadPermissions需要一个活动或片段作为第一个参数。因此，请改用YourActivityName.this或YourFragmentName.this。
— crubio
1
这个答案很好用。有人可以在登录后告诉我如何在Android应用程序中从Facebook注销吗？
— BABU K
36

如果要完全自定义按钮，我发现最好的方法是创建一个按钮或要创建的任何视图（在我的情况下为LinearLayout），并将其OnClickListener设置为该视图，然后在onClick事件：

com.facebook.login.widget.LoginButton btn = new LoginButton(this);
btn.performClick();
— 安德拉尼克
source
2
有用。但是没有必要。无需使用Facebook登录按钮即可伪造其点击。请改用LoginManager。
— 维托·雨果·施瓦布
1
Vitor是正确的，更容易自定义您自己的按钮并使用登录管理器
— Jonathan Dunn '18年
16

您可以像这样修改登录按钮

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

在代码中，我定义了后台资源：

final LoginButton button = (LoginButton) findViewById(R.id.login_button);
button.setBackgroundResource(R.drawable.facebook);
— 清洗
source
1
嘿@RINK中，fb:login_text并fb:logout_text试图运行时抛出一个错误。以下是错误：Error parsing XML: unbound prefix。您确定这是正确的语法吗？
— toobsco42
1
显然已经晚了，但是@ toobsco42-确保已在此处显示的按钮中或布局文件的顶层定义了xmlns：fb（到schemas.android.com/apk/res-auto）。
— Eric Brynsvold 2013年
3
facebook SDK 3.0或更高版本及其facebook：login_text =“” facebook：logout_text =“”
— Dhaval Parmar
1
@RINK还写这个，那么你不会得到这个错误的xmlns：FB =“ schemas.android.com/apk/res-auto ”
— 亚瓦尔
Button.setCompoundDrawablesWithIntrinsicBounds（0,0,0,0）; ，也要写这个链接
— Yawar
15

  1. 创建自定义Facebook按钮并更改本机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. 将监听器添加到您的假按钮并模拟单击：

    facebookView.setOnClickListener(this);
@Override
public void onClick(View v) {
    if (v.getId() == R.id.facebookView){
       facebookButton.performClick();
    }
}
— 丹尼斯·费达克（Denis Fedak）
source
这是最好的。一个真实的答案。
— paakjis
9

在较新的Facebook SDK中，登录和注销文本名称为： 

 <com.facebook.login.widget.LoginButton
 xmlns:facebook="http://schemas.android.com/apk/res-auto"
 facebook:com_facebook_login_text=""
 facebook:com_facebook_logout_text=""/>
— 帕斯·梅塔
source
1
它有效，您是如何知道的？深入研究SDK代码？
— Hassan Tareq
5 
//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"));
            }
        });

    }
— 阿蒂什奈克
source
2 
 <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=""
            />

这对我有用。更改facebook登录按钮的文字。

— 坦卡
source
1

自定义com.facebook.widget.LoginButton

步骤：1创建框架布局。

步骤：2 设置com.facebook.widget.LoginButton

步骤：3 设置具有可自定义的Textview。

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

必须记住

1> com.facebook.widget.LoginButton和TextView高度/宽度相同

2>首先声明com.facebook.widget.LoginButton然后选择 TextView

3>使用TextView的Click-Listener执行登录/注销

— 德鲁夫·拉瓦尔（Dhruv Raval）
source
1

这是一个不正确的方法。

  • 创建一个相对布局。
  • 定义您的facebook_botton。
  • 还定义您的自定义设计按钮。
  • 重叠它们。
<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>
— 亚米·亚达夫（AMIT YADAV）
source
1

这很简单。在布局文件中添加一个按钮，例如

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

然后在onClick处，登录管理器的registercallback（）方法，因为此方法自动执行。

  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
                }
            });
}
— 哈普雷特·辛格
source
1 
<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>

为Java和Kotlin定制集成的Facebook按钮的最简单方法

— 尤什·米什拉（Eyush Mishra）
source
巧妙的答案
— Sayok Majumder
-1

正确和最清洁的方式

在检查了以下答案之后，看来它们是一种黑客，它们依赖于编辑登录按钮视图以使其更适合您的需求。

演示图片

在相同的位置上，我成功地自定义了Facebook登录按钮。

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

并像这样实现onClickListener

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

您可以在以下位置找到完整的源代码：http : //medyo.github.io/customize-the-android-facebook-login-on-android

— 梅迪（Mehdi Sakout）
source
需要更改官方按钮，而不是添加自己的按钮
— Shadab K
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.