非棒棒糖材料平面按钮

Question

我想在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>

如果您想使用带有此按钮的图标,请android:drawableLeft在Button xml中使用,或者您可以LinearLayout使用水平方向和ImageView&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>