如何用图像，文本和两种颜色创建按钮？

Question

这里是我想要的链接。

https://dribbble.com/shots/1407665-Categories/attachments/204971

是否有一个通俗图书馆的人都知道，它可以管理它，否则，我没事去用定制的路线。

我有我的9个按钮在我的XML中定义没有问题。

接下来我知道我必须在可绘制文件夹（如“button_shape.xml”）中创建一个xml文件。然后，我将它添加到我的代码：

android:background="@drawable/button_shape"

我让我的按钮有一个形象，我认为：

android:drawableTop="@drawable/buttonImage" 

我想最后是如何创建的形状保持底部使文字颜色保持一致。同时允许不同的按钮尺寸。也可以很容易地我通过设置在每个按钮上的样式，并且限定它们作为这样交替的颜色：

<style name ="ButtonTheme.Custom1" parent="Base.Widget.AppCompat.Button.Colored"> 
     <item name="colorPrimary">@android:color/holo_blue_light</item> 
     <item name="colorPrimaryDark">@android:color/holo_blue_dark</item> 
    </style> 

    <style name ="ButtonTheme.Custom2" parent="Base.Widget.AppCompat.Button.Colored"> 
     <item name="colorPrimary">@android:color/holo_green_light</item> 
     <item name="colorPrimaryDark">@android:color/holo_green_dark</item> 
    </style> 

    <style name ="ButtonTheme.Custom3" parent="Base.Widget.AppCompat.Button.Colored"> 
     <item name="colorPrimary">@android:color/holo_red_light</item> 
     <item name="colorPrimaryDark">@android:color/holo_red_dark</item> 
    </style> 

    <style name ="ButtonTheme.Custom4" parent="Base.Widget.AppCompat.Button.Colored"> 
     <item name="colorPrimary">@android:color/holo_orange_light</item> 
     <item name="colorPrimaryDark">@android:color/holo_orange_dark</item> 
    </style> 

    <style name ="ButtonTheme.Custom5" parent="Base.Widget.AppCompat.Button.Colored"> 
     <item name="colorPrimary">@android:color/holo_blue_bright</item> 
     <item name="colorPrimaryDark">@android:color/holo_blue_light</item> 
    </style> 

我的定制形状到目前为止是这样的，这是接近;但我怎样才能让深色保持一致的大小，而另一个按照按钮的大小移动？

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:bottom="10dp"> 
     <shape android:shape="rectangle" > 
      <size android:height="10dp" /> 
      <solid android:color="@color/colorPrimaryDark" /> 
     </shape> 
    </item> 

    <item android:top="120dp"> 
     <shape android:shape="rectangle" > 
      <size android:height="120dp" /> 
      <solid android:color="@color/colorPrimary" /> 
     </shape> 
    </item> 
</layer-list> 

Answer 1

您可以使用RecyclerView和StaggeredGrid

https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html