There are two layout options that could lead to similar effects, but generally have different application: margins and paddings. Both define free space, but margins work outside an element boundaries and paddings inside an element.
Step 1. Create a gap between layout elements.
In LinearLayout that we created in the previous lesson TextViews were touching each other. Let’s move them away a bit. To achieve this in horizontal layout we could add right margin to first and second element or left margin to second and third element. Margin sizes are defined as other dimensions, preferably in density-independent points (dp).
This is a sample code with right margins (android:layout_marginRight):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<TextView
android:id="text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="@string/my_best_text"
android:background="#FF0000"
/>
<TextView
android:id="text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="@string/my_best_text"
android:background="#00FF00"
/>
|
Right margin reserve a space on the right side of an element, so the next element would be move more to right (Android Studio)
If we switch our LinearLayout to vertical instead of right or left margins we would need top or bottom ones. Top margins we have to add to second and third TextView, bottom to first or second.
This is a sample code with top margins (android:layout_marginTop):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<TextView
android:id="text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="@string/my_best_text"
android:background="#00FF00"
/>
<TextView
android:id="text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="@string/my_best_text"
android:background="#0000FF"
/>
|
Similar effect as with left and right margins. Due to layout_marginTop elements aren’t so close to each other (Android Studio)
This is not of big use, but margin dimensions don’t have to be integer values – they are float. You could define a margin like 20.5dp or 19.99dp.
Step 2. Double margins
If we have two layout elements next to each other and they have margins “towards” themselves (one left another right or one bottom another top) the gap between would be a sum of both margin values.
For instance the gap between following elements would equal 40dp.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<TextView
android:id="text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="@string/my_best_text"
android:background="#FF0000"
/>
<TextView
android:id="text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="@string/my_best_text"
android:background="#00FF00"
/>
|
Step 3. Move element from the edge of the screen
In the previous steps we were using margins to move away elements from each other. But if the element is next to screen borders, you could use margins to move it away from them too.
Let’s define marginTop and marginLeft for the first TextView. Now you can see that it’s not anymore touching screen edges.
Margins help us to move elements from the screen edges (Android Studio)
Step 4. Same margin everywhere
If we want to have the same margin for left, right, top and bottom we could use general attribute: android:layout_margin instead of for separated ones.
|
|
<TextView
android:id="text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:text="@string/my_best_text"
android:background="#FF0000"
/>
|
But if we want to differentiate just one margin, we have to specify all of them.
|
|
<TextView
android:id="text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="10dp"
android:text="@string/my_best_text"
android:background="#00FF00"
/>
|
Step 4. Margins below 0 – weird, but possible
What happen when we define margins below zero? Element would shift from its standard position exactly in the same manner as with positive margin, but in opposite direction.
In our example we have red, green and finally blue colored TextViews. If we set negative margin for the last element, we could shift it over previous TextViews or put it between or before them.
|
|
<TextView
android:id="text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-35dp"
android:text="@string/my_best_text"
android:background="#00FF00"
/>
|
The last layout element is not last anymore due to negative margin value (Android Studio)
This allows us to do some layout tricks, but also could leads to problems – some elements could unintentionally cover others.
Step 5. Paddings = internal margins
All what we have learn about margins is true for paddings. So they could be left, right, top, bottom, general, positive, negative and not only integer. But they work not outside element, but inside it. They move away content by defined value from edges of its container.
If we define paddings for the first TextView as 10dp, it would be much bigger as the text inside is moved by 10dp from each border.
Paddings define space between content inside layout element and edges of that element (Android Studio)
If we want to move all element from the left edge of screen instead of defining left margin for all of them we could define left padding for the root layout element, so in our case LinearLayout tag.
This is sample code for android:paddingLeft:
|
|
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="20dp"
tools:context=".MainActivity"
android:orientation="vertical">
|
In TextView padding is shifting a text inside it, but in LinearLayout padding is shifting all layout elements (Android Studio)
If we define paddings below zero, layout element would become smaller as part of its content would be hidden, so it’s not very useful.
Step 6. Only for Right-to-Left languages: marginStart, marginEnd, paddingStart and paddingEnd
If we write and read from left side, before the text we have left margin or left padding. But if we read and write from right side (like in Arabic or Hebrew), we have right margin or right padding before text. And how to deal with it when our app is universal and support LTR and RTL languages? We could use marginStart and marginEnd as well as paddingStart and paddingEnd attributes. They work exactly in the same way as other margins and paddings, but set the space before or after the text .Be aware that those attributes were added in Android 4.2.
Summary: Margins and paddings help to arrange layout elements. Using them you could easily set gaps between elements, shift some elements and make more space around elements content.
