Android Developer Beginner. FAQ #1 — Margin vs Padding

In this short article I’ll try to explain what is the difference between a margin and a padding. I believe that the best way is to show that difference by examples.

Figure 1. TextView without any margin or padding

As you can see we created a layout with one TextView. Note that selected frame on the Preview panel — the whole TextView is selected. Keep an eye on the frame to see what’s changing.

Now we’ll set some margin.

Setting a margin

Figure 2. TextView with some margin

Ok, so our TextView has some margin on the left side. That means that it needs 32dp space between itself and another view.

So basically margin means (from the View point of view — ha, good one) how much space from other views I need outside myself.

What will happen if we set also a padding on the left side of it?

Setting a padding

Figure 3. TextView with margin and padding

Padding on the other hand is telling us how to separate views but from the inside. Let’s think about the TextView as that blue frame (you can even remove the text attribute) and we’ll see that the relation between the FrameLayout and the TextView hasn’t changed — there is still 32dp space on the left side between these two.

What was changed is the “Example text” inside the TextView. It was moved to the right by 16dp but not from the FrameLayout’s border — it was moved from the inside left border of the TextView.

Cool, so margin means the space outside the view, however padding means the space inside the view.

So why we need these two? Can’t we use just a margin? Let’s take a look on the examples below.

Which one to choose?

Figure 4. Margin between two buttons

Figure 5. A LinearLayout with paddings and a TextView with a margin

In the first one (Figure 4) we set the margin between two buttons because button with a padding in this case would look a bit weird (try that). So we can use margin in general if we want to separate some views without giving them more space inside them.

The second one (Figure 5) is showing us the way that we can design i.e. a list element. Setting the padding here is a good idea because this list element will be used inside some scrolling list like RecyclerView. Padding is clickable so the whole list element will be clickable as well. If the list view has a margin set and we set a margin also on the list element, the clickable area of the list element wouldn’t be that big as a user can expect. Moreover the ripple effect would look like it’s ending prematurely.

At the end I want to show you how to check a layout bounds on the installed app on your device.

Checking the layout bounds

Let’s go to the Android Developer Options (if you’ve never been there before, you can find more about it here). Then enable “Show layout bounds”.

Figure 6. Enabling the “Show layout bounds” setting

Then our list element example will look like this one below.

Figure 7. Layout bounds

Padding is transparent, however margin is shown as a rose rectangle. Cool, isn’t it?

That’s it! Hope you liked it.