イメージ、テキスト、および2色のボタンを作成するにはどうすればよいですか？

Question

ここに私が心に留めているものへのリンクがあります。

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

誰もがそれがこれを管理することができます知っている人気のライブラリは、そうでない場合は、私がカスタマイズルートを行くと大丈夫だ、あります。

私の9個のボタンは自分のXMLで問題なく定義されています。

次は、 "button_shape.xml"のようなdrawableフォルダに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