All spaced out!

Gravity and layout_gravity

The layout_gravity attribute

You’ll use the layout_gravity attribute in a child view to position itself along the x, y axis inside one of the View group containers, such as:

• LinearLayout
• GridLayout
• FrameLayout

Here are some of the common constant values that you can use to set the layout_gravity attribute:

• top – positions the object at the top of the container
• bottom - positions the object at the bottom of the container
• left - positions the object on the left of the container
• right - positions the object on the right of the container
• center_vertical - positions the object in the vertical center of the container
• center_horizontal - positions the object in the horizontal center of the container
• center - positions the object in both the vertical  and horizontal center of the container

You can also use the (|) character to combine one or more of the constants, like this:

The gravity attribute

Use the gravity attribute to position objects within a larger container. This will only work if the container is larger than the object it contains.

Our example shows you how to position:

• the buttons within the LinearLayout
• the button’s text label within the button

Use the android:gravity attribute to position the buttons within the LinearLayout as well as the button’s text label within the button

The LinearLayout and Button One

We set the gravity attribute within the LinearLayout container to center. This pushes all its child views into the vertical and horizontal center of the screen.

We then override the parent’s gravity by setting Button One’s layout_gravity attribute to left. This pushes the button to the left side of the parent container.

We also set Button One’s gravity attribute to top. This pushes the button’s text label to the button’s top boundary.

Button Two

Here we set Button Two’s gravity attribute to left. Strangely it pushes the button’s text label to the top. This is because the default left position is in the top-left corner.

As the button’s width is set to wrap_content, there is no room to slide the label to left so it appears as if the label has erroneously moved to the top.

Button Three

Here we set Button Three’s gravity attribute to right|bottom. This places the button’s text label in the bottom-right corner of the button.

We can easily see this as the button is quite large, with ample room for the text label to be moved around.

Button Four

Here we set Button Four’s gravity attribute to left|center_vertical.

Nothing happens as the label is centred by default. Also the button’s width attribute is set to wrap_content, making it just big enough to contain the label. There is no room for the label to move on the x axis.

Padding

Padding is the extra space inside a view; between the views contents and its boundary. In our examples, it’s the extra space between the button’s text label and outside boundary.

The size of a view includes the padding:

• for an exact size view, increasing the padding won’t affect the size of the view
• using wrap_content will increase the size of the view if you increase the size of the padding
• using match_parent the view will be as big as its parent, minus the padding

You can use padding to offset the view’s contents.

Padding is the extra space inside a view. We use the padding attribute here to offset the button’s text label

Button One

Here we’ve set the padding attribute to 15dp. This will put 15 pixels of extra space around the button’s text label (left, top, right and bottom).

Button Two

Here we’ve set the paddingLeft attribute to 15dp which adds 15 pixels of extra space on the left side of the button’s text label.

Button Three

Here we’ve set the paddingRight attribute to 25dp which adds 25 pixels of extra space on the right side of the button’s text label.

Button Four

Here we’ve set the paddingTop attribute to 35dp which adds 35 pixels of extra space on top of the button’s text label.

You can also set a view’s padding in code, like this:

A quick explanation

We first get a reference to the button, button. Then we set the padding by calling setPadding(), passing the left, top, right and bottom int values for the padding in pixels.

The layout_margin attribute

Margins are the extra space surrounding the outside of a view, sort of like an invisible barrier around the view.

Views don’t support margins. View groups do. It’s the ViewGroup that interprets the margin that you specify and then positions the view accordingly.

Here are those buttons again. This time we’ve included margins:

Margins are like an invisible barrier around the view. Here we use the layout_margin attribute to put space between the buttons

Button One

We’ve included the layout_margin attribute to set a margin of 15dp around Button One.

The margin is applied to all sides of the button. You can use an int value to set the margins individually using these attributes:

• android:layout_marginBottom – sets a margin below the view
• android:layout_marginEnd – set the margin either to the left or to the right of the view depending on the whether the text is read from left-to-right or vice versa
• android:layout_marginLeft– sets a margin to the left of the view
• android:layout_marginRight– sets a margin to the right of the view
• android:layout_marginStart– set the margin either to the left or to the right of the view depending on the whether the text is read from left-to-right or vice versa
• android:layout_marginTop– sets a margin above the view

See the documentation

You can also set the margins in your code, like this:

A quick explanation

Get a reference to the button, button and then call getLayoutParams() to get an instance of the button’s current layout parameters.

We’re using a LinearLayout so we use the LinearLayout.LayoutParams class.

We now pass the margin values as parameters to the setMargins() method. The order of the parameters is important as they refer to the left, top, right and bottom sides of the button.

Finally, call setLayoutParams() to set the button’s layout parameters, including its margins.

You may be interested in reading Android: Programmatically adding layouts for more on layout parameters.

Button Two

Here we set the layout_marginTop attribute to 15dp. This will place a 15 pixels margin above Button Two.

Button Three

Here we use the layout_marginBottom and layout_marginTop attributes to set the top and bottom margins to 15 pixels.

Button Four

We don’t set Button Four’s margins.

I hope that you have found this tutorial helpful.