问题
I want to customize the look of the Facebook login button which we get along with the Facebook sdk for android (facebook-android-sdk-3.0.1). I want a simple android button which has title \"Login via Facebook\". I could not find any documentation regarding that.
So if any one knows on how to do it in a simple way, please tell me or direct me on how to do it.
回答1:
You can use styles for modifiy the login button like this
<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> and in layout
<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"/> 回答2:
In order to have completely custom facebook login button without using com.facebook.widget.LoginButton.
According to facebook sdk 4.x,
There new concept of login as from facebook
LoginManager and AccessToken - These new classes perform Facebook Login
So, Now you can access Facebook authentication without Facebook login button as
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); } 回答3:
The best way I have found to do this, if you want to fully customize the button is to create a button, or any View you want (in my case it was a LinearLayout) and set an OnClickListener to that view, and call the following in the onClick event:
com.facebook.login.widget.LoginButton btn = new LoginButton(this); btn.performClick(); 回答4:
You can modifiy the login button like this
<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="" /> And in code I defined the background resource :
final LoginButton button = (LoginButton) findViewById(R.id.login_button); button.setBackgroundResource(R.drawable.facebook); 回答5:
Create custom facebook button and change visability on native facebook button:
<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>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(); } }
回答6:
In newer Facebook SDK, the login and logout text name is :
<com.facebook.login.widget.LoginButton xmlns:facebook="http://schemas.android.com/apk/res-auto" facebook:com_facebook_login_text="" facebook:com_facebook_logout_text=""/> 回答7:
//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")); } }); } 回答8:
<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="" /> This worked for me. To change the facebook login button text.
回答9:
Customize com.facebook.widget.LoginButton
step:1 Creating a Framelayout.
step:2 To set com.facebook.widget.LoginButton
step:3 To set Textview with customizable.
<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> MUST REMEMBER
1> com.facebook.widget.LoginButton & TextView Height/Width Same
2> 1st declate com.facebook.widget.LoginButton then TextView
3> To perform login/logout using TextView's Click-Listener
回答10:
Its a trick not a proper method.
- Create a Relative layout.
- Define your facebook_botton.
- Also define your custom design button.
- Overlap them.
<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> 回答11:
This is very simple. Add a button in the layout file like
<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"/> And in the onClick place the LoginManager's registercallback() method Becuse the this method automatically executes.
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 } }); } 回答12:
Proper and Cleanest way
After checking the answers below, it seems that they're kind of hacks that rely on editing the login button view to make it more suitable for your need.
Being in the same position, I've succeeded to customize the facebook login button efficiently.
<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" /> and implement the onClickListener like so
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")); } } }); You could find the whole source code on: http://medyo.github.io/customize-the-android-facebook-login-on-android
回答13:
<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>**strong text** The easiest way to customize the integrated facebook button for both java and kotlin
来源：https://stackoverflow.com/questions/16314651/customize-android-facebook-login-button