How to apply Material Design Facebook button in android

Question

I'm using compile 'com.facebook.android:facebook-android-sdk:4.7.0' and:

<com.facebook.login.widget.LoginButton
      android:id="@+id/tutorial_button_login"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_centerHorizontal="true"
      android:layout_marginBottom="16dp"
      />

But the button looks so ugly:

Is there any way to make it look materialized or more cooler?

Answer 1

I tried to mimic the Material raised button described in Google's Material Design specifications, this is what I could do :

To cover pre-lollipop versions, I used the properties of the CardView support library :

 compile 'com.android.support:cardview-v7:23.1.0'

I put the LoginButton inside the CardView :

<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="6dp"
    card_view:cardBackgroundColor="#ffd9d9d9"
    card_view:cardCornerRadius="2dp"
    card_view:cardElevation="6dp">

    <com.facebook.login.widget.LoginButton xmlns:fb="http://schemas.android.com/apk/res-auto"
        android:id="@+id/login_button"
        android:layout_width="190dp"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-medium"
        android:paddingBottom="12dp"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:paddingTop="12dp"
        android:textAllCaps="true"
        android:textColor="@android:color/white"
        fb:com_facebook_login_text="log in with facebook"
        fb:com_facebook_logout_text="log out from facebook" />

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

To remove the little f icon from the original login button, I added this to the java LoginButton instannce :

mButtonLogin.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);

Answer 2

I ended up setting paddings.

<com.facebook.login.widget.LoginButton
      android:id="@+id/tutorial_button_login"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_centerHorizontal="true"
      android:paddingBottom="16dp"
      android:paddingTop="16dp"
      android:paddingRight="16dp"
      android:paddingLeft="16dp"
      android:layout_marginBottom="@dimen/activity_vertical"
      />