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.

Answer 1

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>

Answer 2

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();
                }
            });