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.
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"/> 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); } 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(); 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); 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(); } }
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=""/> //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="" /> This worked for me. To change the facebook login button text.
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
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> 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 } }); } 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
来源：https://stackoverflow.com/questions/16314651/customize-android-facebook-login-button