Most of the time, we don’t spend time to develop our Android app’s UI, we just drag and drop views and start writing our app. I have observed that most of us don’t care that much about the user interface. And I believe that it’s wrong. Mobile developers should care about UI/UX too. I am not saying “Be an expert on mobile UI” but we should understand design language and it’s concept.

Previously I wrote something about material design shadows and I got lots of good feedback. I would like to thank all of you. “Mastering Shadows in Android” explains elevation and shadows in android. And also I applied these changes to my open source UI library. (Scaling Layout).

In this post, I also want to polish my library with StateListAnimator and show you step by step how I achieved that.

Contents

This blog post covers following topics.

Drawable States

StateListDrawable

Property Animation

StateListAnimator

ScalingLayout with StateListAnimator

Drawable States

In Android, there are 17 different states for the Drawable.

Maybe we don’t even know some of them. I am not going to deep dive into every state. Most of the time, we use pressed, enabled, windows focused, checked etc. If we don’t declare any state for a drawable, this means default state in Android.

We need to understand these states to write our custom StateListDrawable.

StateListDrawable

This is basically a list of drawable items and every item has it’s own state. We create an XML file under res/drawable folder to create StateListDrawable.

<item android:drawable="@drawable/i" android:state_pressed="true"/>

This is an item. It has two property. Drawable and State.

<selector>

<item

android:drawable="@drawable/p"

android:state_pressed="true"/>

<item

android:drawable="@drawable/default"/>

</selector>

This is a StateListDrawable. If we don’t declare any state for an item, as I said before, this means that default state.

Can I use ShapeDrawable?

Yes. Instead of using android:drawable, you can add a custom shape to your item. Here is the item with ShapeDrawable.