Monday, March 23, 2015

How to use Relative Layout in Android

In Android a layout define the visual structure for a user interface. Android developers can declare a layout in two ways, those are declare user interface elements in XML and instantiate layout elements at run time.

Android RelativeLayout view group displays its child views in relative position. Each view position can be specified as relative to sibling elements or in position to the relative to parent RelativeLayout area. Using RelativeLayout in an Android application improve the app performance. So, Android developer should use RelativeLayout instead LinearLayout.

The following Android examples code demonstrate us how can we use RelativeLayout to properly positioning elements in an Android app. RelativeLayout provide best service to specify child views position relative to the parent view or to each other. By default, a RelativeLayout put all child views at the top left of the layout. We can define each view position by using the various layout properties from RelativeLayout.LayoutParams.

1. Layout Parameters

android:layout_above
This layout property allow us to place a view above to another specified view. We can specify the view by its ID. Such as, if we want to place button1 to above button2 then we can set the button1 android:layout_above attribute value as android:layout_above="@id/button2".

android:layout_below
This layout property drawn a view at the below of another specified view.

android:layout_toLeftOf
android:layout_toStartOf
Those properties allow us to place a view at the left of another specified view. android:layout_toLeftOf attribute is used for support older API Version and android:layout_toStartOf using for newer API version.

android:layout_toRightOf
android:layout_toEndOf
Both properties used to drawn a view at the right of another specified view. android:layout_toRightOf attribute used for support older API version.

android:layout_centerInParent
This layout property accept a Boolean value. If we set this attribute value to true then it drawn the view at the exact center of parent layout. It places the view at the center of parent layout both horizontally and vertically.



android:layout_centerHorizontal
This layout property place the specified view at the center of parent layout only horizontally.

android:layout_centerVertical
This layout property place the specified view at the center of parent layout only vertically.

android:layout_alignTop
This layout property drwan the view in user interface by matching this view's top edge with the top edge of another specified view.

android:layout_alignBottom
This layout property drawn the view in user interface by matching this view's bottom edge with the bottom edge of another specified view.

android:layout_alignLeft
android:layout_alignStart
Both layout properties drawn the view in user interface by matching this view's left/start edge with the left/start edge of another specified view. android:layout_alignLeft attribute used to support old API Version.

android:layout_alignRight
android:layout_alignEnd
Both layout properties drawn the view in user interface by matching this view's right/end edge with the right/end edge of another specified view. android:layout_alignRight attribute used to support old API Version.

android:layout_alignBaseline
This layout property allow us to positions the baseline of this view on the baseline of the specified view. This layout property draw a view related to another view position.

android:layout_alignParentTop
This layout parameter draw the view related to parent layout position. The view match its top edge with parent layout's top edge. Accommodates top margin. This layout property accept a Boolean value.

android:layout_alignParentBottom
This layout parameter match the view's bottom edge with parent bottom edge.

android:layout_alignParentStart
android:layout_alignParentLeft
Both layout parameters draw a view in user interface by matching view's left/start edge with parent layout's left/start edge. android:layout_alignParentLeft support the older API Version.

android:layout_alignParentEnd
android:layout_alignParentRight
Both layout parameters draw a view in user interface by matching view's right/end edge with parent layout's right/end edge. android:layout_alignParentRight support the older API Version and android:layout_alignParentEnd used for newer API Version.

2. ViewGroup.MarginLayoutParams

The following section describe the ViewGroup Margin Layout Attributes.

android:layout_height
android:layout_width
This two properties allow us to specify the basic height and width of a view. We can assign the height and width as a fixed dimension by specifying width/height in dp. We also can set the width/height to match the parent layout or as big as the content by using match_parent and wrap_content value.

android:layout_margin
This layout property specify the extra spaces on the view. This property set extra spaces on view's all sides left, top, right and bottom.

android:layout_marginLeft / android:layout_marginStart
Both layout parameters specify the extra space on the left/start side of the view. android:layout_marginLeft used to support older API Version.

android:layout_marginRight / android:layout_marginEnd
Both layout parameters specify the extra space on the right/end side of the view. android:layout_marginEnd used for newer API Version.

android:layout_marginTop
android:layout_marginBottom
This two layout parameters used to specify extra space on the top and bottom side of the view as respected the attributes name.

3. Padding

android:padding
android:paddingLeft / android:paddingStart
android:paddingTop
android:paddingRight / android:paddingEnd
android:paddingBottom
Padding is used to offset the content of the view by a specific amount of pixels. android:padding attribute offset the content of a view for all sides left, top, right and bottom. Others padding attributes offset a view's content as the attribute name describe such as android:paddingRight attribute offset the view's content to the right side of view.

4. Specify view position relative to parent

The following XML layout file demonstrate us how can we define a view's position based on parent layout. Here we drawn few view's at the left, top, right, bottom, center, horizontal center and vertical center of parent.
activity_relative_layout.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <!--RelativeLayout display the elements position relative to the parent view-->
    <!--By default RelativeLayout display element at the top left position of the layout-->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Top Left"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="Top Right"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bottom Left"
        android:layout_alignParentBottom="true"
        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bottom Right"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center"
        android:layout_centerInParent="true"
        />
    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Horizontal Center"
        android:layout_centerHorizontal="true"
        />
    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Vertical Center"
        android:layout_centerVertical="true"
        />
</RelativeLayout>

5. Specify view position relative to another view

The following XML layout file demonstrate us how can we define a view's position based on another view's position. Here we draw some view's at the left, top, right, bottom and baseline position of another specified view.
activity_relative_layout_align.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <!--RelativeLayout display the elements by aligning with another element-->
    <!--Here we aligning elements based on button1-->
    <Button
        android:id="@+id/button1"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:text="Center In Parent"
        android:layout_centerInParent="true"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Align Baseline"
        android:layout_alignBaseline="@id/button1"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Align Bottom"
        android:layout_alignBottom="@id/button1"
        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Align Top"
        android:layout_alignTop="@id/button1"
        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Align Right"
        android:layout_alignRight="@id/button1"
        android:layout_alignEnd="@id/button1"
        />
    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Align Left"
        android:layout_alignLeft="@id/button1"
        android:layout_alignStart="@id/button1"
        />
</RelativeLayout>

6. Specify view position at another view's above and below

The following XML layout file demonstrate us how can we define a view's position based on another view's position. We draw some view's at the above and below of another specified view. We also draw a view at the exact below of another specified view.
activity_relative_layout_position_each_other.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <!--RelativeLayout display the elements position relative to each other-->
    <!--Here we positioning elements based on button1 position-->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center In Parent (Button 1)"
        android:layout_centerInParent="true"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Below Button1"
        android:layout_below="@id/button1"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Above Button1"
        android:layout_above="@id/button1"
        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 4"
        android:layout_centerHorizontal="true"
        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Exact Below Button 4"
        android:layout_below="@id/button4"
        android:layout_alignLeft="@id/button4"
        />
</RelativeLayout>

7. Specify view position at another view's left and right

The following XML layout file demonstrate us how can we define a view's position based on another view's position. We draw some view's at the left and right of another specified view. We also draw two views at the exact left and right of another specified view.
activity_relative_layout_to_left_right.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <!--RelativeLayout display the elements at other element's left right position-->
    <!--Here we positioning elements based on button1 position-->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center (Button 1)"
        android:layout_centerInParent="true"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Right Of Button 1"
        android:layout_toEndOf="@id/button1"
        android:layout_toRightOf="@id/button1"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left Of Button 1"
        android:layout_toStartOf="@id/button1"
        android:layout_toLeftOf="@id/button1"
        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Exact Right"
        android:layout_centerInParent="true"
        android:layout_toEndOf="@id/button1"
        android:layout_toRightOf="@id/button1"
        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Exact Left"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_toStartOf="@id/button1"
        android:layout_toLeftOf="@id/button1"
        />
</RelativeLayout>

8. Margin of a view

The following XML layout file demonstrate us how can we define a view's margin. We draw some view's with different margin values. Here we set view's margin all sides or only left, top, right, bottom side.
activity_relative_layout_margin.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <!--RelativeLayout display the elements related other element's position + margin-->
    <!--Here we positioning elements and applying margin-->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Top Left(Button 1)"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Below Button 1"
        android:layout_below="@id/button1"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Below Button 2 + Margin 25dp"
        android:layout_below="@id/button2"
        android:layout_margin="25dp"
        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 4"
        android:layout_centerVertical="true"
        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Below Button 4 + Margin Left 50dp"
        android:layout_below="@id/button4"
        android:layout_marginLeft="50dp"
        />
</RelativeLayout>

9. Padding of a view

The following XML layout file demonstrate us how can we define a view's padding. We draw some view's with different padding settings. Here we set view's padding all sides or only left, top, right, bottom side. Padding offset the content of a view at the specified side and and specified pixels.
activity_relative_layout_padding.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <!--RelativeLayout display the elements related other element's position + padding-->
    <!--Here we positioning elements and applying padding-->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Top Left(Button 1)"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Below Button 1 + Padding 25dp"
        android:layout_below="@id/button1"
        android:padding="25dp"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Below Button 2 + Padding Left 50dp"
        android:layout_below="@id/button2"
        android:paddingLeft="50dp"
        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Below Button 3 + Padding Right 50dp"
        android:layout_below="@id/button3"
        android:paddingRight="50dp"
        android:paddingEnd="50dp"
        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Below Button 4 + Padding Top 50dp"
        android:layout_below="@id/button4"
        android:paddingTop="50dp"
        />
    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Below Button 5 + Padding Bottom 50dp"
        android:layout_below="@id/button5"
        android:paddingBottom="50dp"
        />
</RelativeLayout>
More android examples