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.
This question is related to
android
android-facebook
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);
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
<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>
<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>
The easiest way to customize the integrated facebook button for both java and kotlin
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
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=""/>
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();
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
}
});
}
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);
}
<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.
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();
}
}
//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: Stackoverflow.com