Polishing UI in Android: StateListAnimator
We spend most of the development time for our Android application not working on the user interface – we just throw in a view and start writing code. I noticed that most of us don’t really care about the user interface. And I think this is fundamentally wrong. Mobile app developers have to take care of UI / UX as well. I am not saying “be an expert on mobile UI”, but you must understand the design language and its concepts.
I previously wrote an article on shadows in material design and received a lot of good reviews. I want to thank you all. “Mastering Shadows in Android” talks about elevation and shadow in Android. There I also showed how I supplemented my open source UI library with them. (Scaling Layout).
In this article, I want to improve my library with StateListAnimator and show you step by step how I will do it.
Content
This article covers the following topics:
- Drawable states
- StateListDrawable
- Animating properties
- StateListAnimator
- ScalingLayout with StateListAnimator
Drawable states
Android has 17 different states for Drawable.
We may have never even met some of them. I am not going to delve into every state. In most cases, we use pressed
, enabled
, windows focused
, checked
and so on. If we do not declare a state for a drawable, then it is assumed that this is the default state in Android.
We need to understand these states in order to write our own StateListDrawable…
StateListDrawable
It is essentially a list of drawable items, where each item has its own state. To create the StateListDrawable, we need to create an XML file in the folder res/drawable
…
This is an item. It has two properties. Drawable and State…
This is StateListDrawable. If we do not declare a state for an element, as I mentioned earlier, this means that it is default state…
Can I use ShapeDrawable?
Yes. Instead of using android: drawable you can add any shape to your element. Here is an element with ShapeDrawable…
StateListDrawable
You can use StateListDrawable from API level 1. Thus, there is no API level restriction for StateListDrawable.
That’s all. Now our view has a state. When the user clicks on it, its color will be changed. When the user releases it, it will have a default state and color.
But wait a second. Clickable? Why did we add this attribute? Do we also need to add it? Yes. But only for custom views. It takes time to find out. Buttons work fine without adding clickable because they are by default clickable… But if you want to use StateListDrawable for View, ImageView, Custom View, etc., you need to add the attribute clickable…
StateListDrawable
I added StateListDrawable in this commit… It is similar to the example I gave above. When the user clicks on the layout, it is colored. But let’s improve this with StateListAnimator.
StateListAnimator
Remember that when you click the FloatingActionButton, its Z value increases due to animation. This is a StateListAnimator off-screen so to speak. Some material design widgets have their own StateListAnimator inside.
Let’s clear this up with a question on StackOverflow.
(How to remove border / shadow from lollipop buttons).
If Material Design widgets have their own StateListAnimator inside, we can set them to null to remove this function (not recommended, it was designed for a reason.) And now the answer sounds much more logical.
(Lollipop has a little nasty feature called
stateListAnimator
which handles the height of the buttons, producing shadows.Delete
stateListAnimator
to get rid of shadows.You have several options for how to do this:
In code:
button.setStateListAnimator (null);)