Question

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

Play Store

按钮和图标整齐排列，如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，或者您可以使用水平方向的LinearLayout＆amp;与ImageView＆amp; 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>

Answer 2

您可以考虑使用LinearLayout包含图标和文本，而不是按钮。
然后你可以应用圆角可绘制资源作为这个布局的背景（每个州都有自己的圆形绘图）。

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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/white" />

 </LinearLayout>

按下时可以使用差异圆形状态，焦点（每个状态有不同的颜色）

<强> round_states.xml

   <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_pressed="true"
      android:drawable="@drawable/round_bg_pressed" /> <!-- pressed -->
   <item android:state_focused="true"
      android:drawable="@drawable/round_bg_focused" /> <!-- focused -->
   <item android:drawable="@drawable/round_bg" /> <!-- default -->
  </selector>

<强> round_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dip" android:color="#B1BCBE" />
    <corners android:radius="10dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

<强> round_bg_focused.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dip" android:color="#B8B8FF" />
    <corners android:radius="10dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

P / s ：有些图书馆支持涟漪效果按下你可能想尝试的棒棒糖前视图：
https://github.com/traex/RippleEffect
https://github.com/balysv/material-ripple