自定义 Android Facebook 登录按钮

我想自定义的外观 Facebook 登录按钮，我们得到随着 Facebook sdk 的安卓(Facebook-android-sdk-3.0.1)。我想要一个简单的安卓按钮，其标题为“通过 Facebook 登录”。我找不到任何相关文件。

因此，如果有人知道如何用一种简单的方法来做，请告诉我或指导我如何做。

132140 次浏览
小开

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

<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);
小开
最佳答案

您可以使用样式来修改登录按钮，如下所示

<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"/>
小开 
 <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 的登录按钮文本。

小开

我发现最好的方法是这样做，如果你想完全自定义按钮是创建一个按钮，或任何你想要的视图(在我的情况下是一个 LinearLayout) ，并设置一个 OnClickListener的视图，并调用以下在 onClick 事件:

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

为了有完全自定义的 facebook 登录按钮而不使用 com.facebook.widget.LoginButton。

根据 facebook sdk 4.x,

有新的概念登录，因为从脸谱网

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

因此，现在你可以访问 Facebook 认证，不需要 Facebook 登录按钮

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);
}
小开

定制 < em > com.facebook.widget. LoginButton

步骤: 1 创建一个 < strong > 框架布局。

步骤: 2 设置 < strong > Widget 登录按钮

步骤: 3 使用可定制的方式设置 文本视图。

<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 < em > 身高/宽度相同

2 > 第一声明 com.facebook.widget. LoginButton < strong > < em > then 文本视图

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

小开

这是一个把戏，不是一个正确的方法。

  • 创建相对布局。
  • 定义你的 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>
小开 
//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"));
}
});


}
小开

正确而干净的方式

在检查了下面的答案之后，似乎他们是一种依赖于编辑登录按钮视图使其更适合您的需要的技巧。

Demo image

在同样的位置，我已经成功地自定义 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上找到整个源代码

小开

在较新的 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=""/>
小开

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

<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 中放置 LoginManager 的 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
}
});
}
小开

  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. Add listener to your fake button and simulate click:

    facebookView.setOnClickListener(this);
@Override
public void onClick(View v) {
if (v.getId() == R.id.facebookView){
facebookButton.performClick();
}
}
小开 
<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 按钮的最简单方法


提交答案