0

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>
C. Skjerdal
  • 2,750
  • 3
  • 25
  • 50
  • The "second" color just appears to be a black `textview`, with a low opacity level, making it translucent. There doesn't seem to be anything special going on. – CaptJak Nov 03 '17 at 23:25
  • I figured textview cause issues with clicking in some way. I cant remember what exactly but I remember reading that so I figured I should avoid using that method. I believe it had to do with either responding to button clicks or being clickable along with the button. – C. Skjerdal Nov 03 '17 at 23:29

1 Answers1

1

You can use RecyclerView and StaggeredGrid

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

Celt K. B.
  • 779
  • 6
  • 18
  • That actually achieves my effect exactly. Plus it is much easier to make layouts for Recycler View, than it is to try and build these custom buttons I was looking at. – C. Skjerdal Nov 03 '17 at 23:37