android - 非 Lollipop Material 平面按钮

Question

我想做material style flat buttons对于 Lollipop 之前的系统。我使用的是 Android 4.4.4，我的 Play 商店如下所示:

按钮和图标排列整齐，就像在 APPS、GAMES、BOOKS 中一样。

更多按钮显示按钮没有图标的按钮。

那么我该如何制作像这样可爱的按钮，点击时会发光，图标整齐地排列在那里，并且有小圆角。使用 drawableLeft 不起作用，因为图标变得太大。

我猜想有一种方法可以将其放入样式表中，因为 Google 似乎在其其他应用中始终如一地这样做。

Answer 1

没有图标的按钮

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sign_up"
android:background="@drawable/action_button"
android:textColor="@color/primary_text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginRight="5dp"
android:id="@+id/fl_btn_signup" />

在 Drawable 中你可以使用这个 action_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false">
        <shape android:dither="true" android:shape="rectangle">
            <corners android:bottomLeftRadius="3dp" android:bottomRightRadius="3dp" android:topLeftRadius="3dp" android:topRightRadius="3dp" />

            <solid android:color="#689F38" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:dither="true" android:shape="rectangle">
            <corners android:bottomLeftRadius="3dp" android:bottomRightRadius="3dp" android:topLeftRadius="3dp" android:topRightRadius="3dp" />

            <solid android:color="#80689F38" />
        </shape>
    </item>

</selector>

如果你想在这个按钮上使用图标，那么在你的 Button xml 中使用 android:drawableLeft 或者你可以使用水平方向和 ImageView 的 LinearLayout & TextView

<LinearLayout
                android:orientation="horizontal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:gravity="center_vertical"
                android:background="@drawable/action_button"> //Same xml

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_apps_icon" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="APPS"
                    android:gravity="center"
                    android:padding="5dp"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#FFFFFF" />

            </LinearLayout>