Add rounded corners to the Facebook button

Question

I am trying to customize the button that comes with the facebook sdk in Android. I want it to have rounded corners instead of normal corners and to achieve that I tried the answer from here and what I did was basically I added a style in the styles.xml for my facebook button:

   <style name="FacebookLoginButton">
    <item name="android:background">@drawable/fbshapebtn</item>
    <item name="android:textSize">18sp</item>
    <item name="android:gravity">center</item>
</style>

and as a background I refernced an xml from my drawable in which I defined my corners like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">
    <corners
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>
</shape>

and here is my main layout with the button in which I reference my styles xml.

  <com.facebook.login.widget.LoginButton
        android:id="@+id/login_button"
        style="@style/FacebookLoginButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView"
        android:layout_alignLeft="@+id/button2"
        android:layout_alignStart="@+id/button2"
        android:layout_marginBottom="11dp"
        android:layout_alignRight="@+id/button2"
        android:layout_alignEnd="@+id/button2" />

The button doesn't appear to have corners, but it is strange because the textSize that I defined seems to be applied, so I do not know what is wrong exactly.

devcodes · Answer 1 · 2020-06-23T08:44:17.110

7

For folks who don't want to create another custom button , I've used CardView as a parent for the button and worked on the padding for button to get the desired look :

 <android.support.v7.widget.CardView
        android:layout_width="240dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        app:cardCornerRadius="18dp">

        <com.facebook.login.widget.LoginButton
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="25dp"
            android:paddingLeft="30dp"
            android:layout_gravity="center"
            android:paddingTop="25dp" />

    </android.support.v7.widget.CardView>

edited Jun 23 '20 at 08:44

answered Aug 26 '17 at 16:06

devcodes

1,038
19
38

the problem in this is that if you try to click on this it will be clicked only the button and not the corners. Do you have any solution for this? By wrapping the content of the login button the icon will be displayed in the extreme left of the view, which is not pretty – Thecave3 Jan 07 '18 at 20:27
1

i'm sorry but the click behavior is happening fine for me , and we need click on button only right ? what corners are you talking about , can you elaborate ? , btw the orange/cream is my bg layout here :) – devcodes Jan 08 '18 at 05:58
Do not support Android below SDK 21 – Duy Phan Sep 11 '18 at 04:15

Sunisha Guptan · Answer 2 · 2017-05-17T09:41:50.243

Hi in my point of view we cannot edit their Facebook login button,So for that we can do like this,in your layout file,please do the following code,

        <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:gravity="center"
        android:orientation="vertical">

        <FrameLayout
            android:id="@+id/FrameLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.facebook.login.widget.LoginButton
                android:id="@+id/login_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Log In With FaceBook"
                android:textAllCaps="true"
                android:visibility="gone" />


            <LinearLayout
                android:id="@+id/linearButton"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/login_bg"
                android:gravity="center"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/com_facebook_button_icon" />

                <TextView
                    android:id="@+id/fb"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:layout_marginLeft="10dp"
                    android:gravity="center"
                    android:singleLine="true"
                    android:text="Log In With FaceBook"
                    android:textAllCaps="true"
                    android:textColor="@color/colorAccent"
                    android:textStyle="bold"
                    android:visibility="visible" />
            </LinearLayout>

        </FrameLayout>
    </LinearLayout>

In your drawable create an xml file with login_bg.xml,Change color according to you,

    <?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorPrimary" />
    <corners

        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />
    <padding android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"/>
</shape>

And in your activity do the following code,

LoginButton loginButton;
TextView fb;

private void facebookLogin() {
loginButton = (LoginButton) findViewById(R.id.login_button);
fb = (TextView) findViewById(R.id.fb);
loginButton.setReadPermissions("email");
callbackManager = CallbackManager.Factory.create();
fb.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (v == fb) {
            LoginManager.getInstance().logOut();
            loginButton.performClick();
        }
    }
});
    }

Here we are setting visibility as "GONE" the original facebook sdk button,Rest you can understand from my code.Please try with this.

score 3 · Accepted Answer · answered May 17 '17 at 09:47

3

You can make the login button invisible, then put your own custom button and set onClickListener like this:

myCustomButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    myFacebookLoginButton.performClick();
                }
            });

answered May 17 '17 at 09:47

Hayk Abelyan

326
2
3
19

This answer is not related to the question. Please read carefully . – Amit Sharma Jun 08 '19 at 13:45

score 0 · Answer 4 · answered May 17 '17 at 09:08

You can add a background at run time to Facebook Button or You can use Android View to use as Facebook Login button and design it according to your own. Here is link to use custom button for Facebook login.

https://androidammy.blogspot.in/2015/09/facebook-login-with-custom-button.html

score 0 · Answer 5 · answered Sep 11 '18 at 04:19

0

Do not use style and remove it and use android:background = "@drawable/yourdrawable". I tried

answered Sep 11 '18 at 04:19

Duy Phan

783
6
5

Add rounded corners to the Facebook button

5 Answers5