A different raised button behavior

Since Material Design was introduced, Android has 3 main types of buttons:

According to the spec, the raised button definition is:

A typically rectangular material button that lifts and displays ink reactions on press.

But why should it lift? Does your finger work like a magnet? When you press any real button, the force you apply makes the button go down.

Default implementation

To lift the raised button, Android uses this StateListAnimator.

From that file, we can see that:

What I did was creating a similar one, but instead of applying a positive z-translation and 2dp of elevation, I just set both to 0.

Lowering the button

Here’s a StateListAnimator that can lower the button: link.

Now, you could set this to a button using the android:stateListAnimator attribute, but with this approach, you won’t be able to use a different elevation, since the value will be hardcoded.

For this reason, I created a library that creates a custom StateListAnimator programmatically using the elevation passed to the view.

You can get it here: RaiflatButton. (Ugly name, I know, but I couldn’t figure out a better one).

Now, you can just replace your normal buttons with:

<com.github.rubensousa.raiflatbutton.RaiflatButton
    android:id="@+id/normalButton"
    style="@style/Base.Widget.AppCompat.Button.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Colored" />
    
<com.github.rubensousa.raiflatbutton.RaiflatImageButton
    android:id="@+id/imageButton"
    style="@style/Base.Widget.AppCompat.Button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_android" />

Here’s a short preview:

So, what do you think? Doesn’t this feel more natural for a button?