Implement a squared, colored and round-edged button in Android?

Question

I am trying to design an Android app with a button driven user interface. This means that there are a few buttons, with different colors and icons, and each one does its task.

I've tried to implement this using standard, and custom styled buttons, but they did not have a nice UI, and they do not support icons inside them.

I tried with fabs but fabs are not meant for this purpose, and I'm looking for something slightly rounded, more like that:

That would be perfect because the buttons are colored, squared with rounded edges, they contain an icon and they have a label underneath them.

Any advice / sample to replicate this same kind of view? For the color, you just have to pick from the palette a light and dark variant. Putting the text label under the button is pretty straightforward, but I have no idea about how to code in XML something like that.

Answer 1

If I were you, I would do it like this

Here is the button layout. ic_baseline_folder_24 is a vector asset generated using Android Studio

<LinearLayout
  android:id="@+id/folder_button"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="vertical">

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/bg_image_button"
    android:padding="12dp"
    android:src="@drawable/ic_baseline_folder_24" />

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Folders"
    android:textColor="#CCC" />

</LinearLayout>

bg_image_button.xml is defined like this. It can be extended to support different states:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape >
      <solid android:color="#7B0800"/>
      <corners android:radius="8dp" />
    </shape>
  </item>
</selector>

Finally, set the click action handler:

val binding = ActivityMainBinding.inflate(layoutInflater)
binding.folderButton.setOnClickListener {
  // do something
}

It results like this: