如何在android中应用Material Design 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

我试图模仿Google的Material Design规范中描述 的Material raise按钮,这就是我能做的:

为了涵盖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 instannce:

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