How to create an Button with an image, text, and two colours?

Issue

Here is the link to what I have in mind.

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

Is there a popular library anyone knows that can manage this, otherwise I am alright with going the customizing route.

I have my 9 buttons defined in my XML no problem.

Next I know I have to create a xml file in the drawable folder like "button_shape.xml". Then I add this to my code:

android:background="@drawable/button_shape"

I make my button have an image, I assume with:

android:drawableTop="@drawable/buttonImage"

I guess lastly is how do I create a shape that keeps the bottom colour a consistent size with the text. While allowing different button sizes. Also can I easily alternate the colours by setting the style on each button and defining them as so:

  <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>

My custom shape so far is this, which is close; but how can I make the darker color keep a consistent size while the other moves according to size of button?

<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>

Solution

You can use RecyclerView and StaggeredGrid

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

Answered By - Celt K. B.