如何在 android 中应用 Material 设计 Facebook 按钮

Question

我正在使用 compile 'com.facebook.android:facebook-android-sdk:4.7.0' 和：

<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"
      />

但是这个按钮看起来很丑：

有没有办法让它看起来实体化或更酷？

Answer 1

我最终设置了填充。

<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"
      />

Answer 2

我试图模仿 Google's Material Design specifications 中描述的 Material 凸起按钮 ，这是我可以做的：

为了涵盖 pre-lollipop 版本，我使用了 CardView 支持库的属性：

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

我将 LoginButton 放在 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>

为了从原始登录按钮中删除小 f 图标，我将其添加到 java LoginButton 实例中：

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

如何在 android 中应用 Material 设计 Facebook 按钮

How to apply Material Design Facebook button in android

android

facebook-android-sdk