Layer List in Android is a very useful tool to create flexible drawables for your Android app. As the name suggests, simply put a layer lists is a list of layers. To give you an example, here’s a layer-list drawable:
 |
| Layer-List Drawable |
If we break it down, we can divide the drawable into 3 components:
- A big green circle at the bottom.
- A smaller red circle on top of it.
- And an even smaller circle on top of it.
We also have a video, if you prefer videos more:
So, as you can see clearly now, this comprises of three layers on top of each other. So now that you understand the concept, let’s look at how we can create a layer-list. This can be very helpful for you in a lot of situations. So let’s get started and first, let see what we will be creating:
 |
| Button Create using Layer-List |
So this is the final drawable that we will be created using layer-list. To break this down further, this also has some layers:
- An orange background
- Dragon Ball Z logo 😁
- And there a ripple layer, that will show the ripple effect on click
Now that you have a basic idea of what a layer-list is, and what we are going to create, let’s quickly go over the structure of this tutorial, you’ll learn:
- Adding an Item to the layer-list.
- How to add a bitmap to layer-list.
- How to add margin to the layer-list item.
- How to add ripple to the layer-list.
- How to programmatically add or remove item from the layer list.
Ok so let’s get started:
Creating a Layer-List in Android
1. Adding item for the background color
So let’s get started with the background, first of all we need to create a background with rounded corners with the color of you choice, for the sake of this tutorial, we’ll use color: #ffa900. That is the color that you’ll see in the button image shown above. Ok, now you can right click on your drawable, and click add a new drawable resource, we’ll name it awesome_button.xml, set layer-list as the root and hit create, so now you should have something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
</layer-list>
Ok, so now that we have our container ready, it’s time to move on to create individual items. First of which come the background, on top of which we will add other items.
We need to add an item inside the layer-list, the item will be a rectangle shape with a solid color and a corner radius. Here’s what the item looks like:
 |
| Layer-List Background |
Here’s what the code for the background looks like:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#ffa900" />
<corners android:radius="82dp" />
</shape>
</item>
</layer-list>
The code is pretty self explanatory, but to go over the things we’ve done: First we added an item, the item added is a shape. The shape is a rectangle with parameters solid for color and corners for radius. Now that we have our background item ready, it’s time to move on the adding our bitmap to the layer-list finally!
2. Adding the Bitmap
Now finally to the good part, adding the dragon ball z logo to the image! 😄, this is the logo that we are adding to our layer-list, download is from here if you want:
 |
| Bitmap for Layer List |
Ok, now that we have what we want to add above our background item in the layer-list, we can add it to the layer-list in the following way:
<item
android:drawable="@drawable/dbz" />
<item>
Add this code below the background item as we want this above the background color and not vice versa. Now your button should be looking something like this:
 |
| Layer-List Button |
This is ok, but we do not settle for okay, now do we? We need to make it even better, and to make it better we’ll add some margin to the bitmap (the dragonball z logo) so that it is inside the background. Let’s see how we can add margin to the bitmap in a layer-list next.
3. Adding the Margin
To add margin to a bitmap or any item for that matter, we have something called android:top|bottom|start|end in layer-list. We can use is like this:
<item
android:drawable="@drawable/dbz"
android:bottom="56dp"
android:left="56dp"
android:right="56dp"
android:top="56dp" />
<item>
 |
| Layer-List after adding Margin to Bitmap |
This adds 56dp margin to the bitmap on all sides and as you can see, it already looks a lot better! But all is not done, since this is an Android app, we have the trend of showing ripple on button click and even if we weren’t on Android, it’s always a good practice to show some feedback for user interaction, now we’ll see just how we can add a ripple to our button.
4. Adding the Ripple Effect
To add a ripple to the button, we just need to add another item in our layer-list. And that item will have our ripple over the bottom two layers that we created above. So add a new item to the layer-list like this:
<item>
<ripple android:color="@color/rippleColor" />
</item>
Now whenever the button is clicked, we will also have a ripple. Now our layer-list drawable is complete, we have seen how we can add an item to a layer-list, add a bitmap to the layer-list and add an item for ripple effect on click. So the overall XML code looks like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#ffa900" />
<corners android:radius="82dp" />
</shape>
</item>
<item
android:drawable="@drawable/dbz"
android:bottom="56dp"
android:left="56dp"
android:right="56dp"
android:top="56dp" />
<item>
<ripple android:color="@color/rippleColor" />
</item>
</layer-list>
Now we’ve learn how we can create an awesome drawable using layer-list and XML, but what if you want to change the bitmap in the layer-list dynamically? How can you change the bitmap in the layer-list dynamically? Worry not! in the next section we’ll see how exactly can we do that
5. Programmatically Changing the Item
There might be various reasons why you might what to change the bitmap of your layer-list programmatically. No matter the reason, the code below show how you can do that programmatically. We’ll do the following things:
a. Change the background color of layer-listprogrammatically
b. Change the bitmap of layer-list programmatically
So, to change the background color, we first need to get a reference to it, it order to get the reference, we need to have an ID set the the background item, but we hadn’t done that, so go back to our awesome_button.xml and add the id to background item and the item that has the bitmap as drawable as we’ll change them both.
We can add id to the individual items like this: <item android:id=”@+id/item_id”>, so let’s say our background layer is:
<item android:id="@+id/bg_layer">
and our item with the dragonball logo is:
<item android:id="@+id/">
Now that we’ve added ids to our layers or items, we can start referencing them in our Java Code
First off all, let’s the the reference to the complete drawable like this:
LayerDrawable buttonLayers = (LayerDrawable) getResources().getDrawable(R.drawable.awesome_button);
Now we know that our background item is a shapeDrawable with a color, so we get a reference to that item so we can change color programmatically like this:
ShapeDrawable bg_layer = (ShapeDrawable)bgDrawable.findDrawableByLayerId (R.id.bg_layer);/*Find Background Layer by Id*/
And to change the color of the item in layer-list, we can do this:
bg_layer.setColor(Color.RED);/*Set Color to a Layer*/
Awesome! now the part you’ve all been waiting for 😂. To change the bitmap in the layer-list, we can just to the following, it’s pretty easy actually:
buttonLayers.setDrawableByLayerId(R.id.dbz_layer,getResources().getDrawable(R.drawable.dbz_new));/*Set New Drawable as the Layer*/
Finally! we are done, congratulation, you’ve learn a lot today. This was just a basic intro to get you started with layer-list in Android, there’s a different types of items that you can add and do amazing stuff with it! If you have any questions, just drop em below. Happy Coding!