Teachers: Android beginner tutorial Part 9 RelativeLayout container

Wednesday, February 4, 2015

Android beginner tutorial Part 9 RelativeLayout container

Today well learn about the fourth layout type - RelativeLayout.

This layout type is the most flexible, because it allows the developer to position the children of this container relatively to the container itself or relatively to its neighbour children.

In RelativeLayout, children are positioned in such a way, that if you align the first child to the center of the screen, the other children (which are aligned to this child) are also aligned to the center. Therefore, to properly display elements on the screen, you need to first declare the object, relative to which other objects will be positioned.

It is not necessary to add ids to all elements in your application, but defining them for children of a RelativeLayout is important, because this way we can refer to these elements to position other children relative to the said element.

An id value of an object is set this way:

android:id="@+id/myElement"

The + symbol is used only when declaring the id for the first time. When you later refer to this object, simply use @id/myElement.

To create a RelativeLayout simply rename the TableLayout from the previous tutorial to RelativeLayout. All the attributes remain the same:

<RelativeLayout 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"
    tools:context=".MainActivity" >

Now lets add a button and lets center it. Well specify its id, set it to btn_center. To align it to the center of the parent, set its layout_centerInParent value to true.

You can type "android:" and then pause for a second if youre using Eclipse IDE, then after a moment youll see a drop down tip menu which displays all the possible attribute names and their description. This is a very useful feature, because it basically shows you the documentation quickly and when you need it. You can then add "l" or "layout" to narrow the menu down to the layout attributes.

Anyway, this is the button weve created:

<Button 
        android:text="Center"
        android:id="@+id/btn_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

Now lets add another button, which will be positioned relative to our first button. Set its toRightOf and alignTop values to @id/btn_center:

<Button 
        android:text="Rel right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/btn_center"
        android:layout_alignTop="@id/btn_center"/>

Full code:

<RelativeLayout 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"
    tools:context=".MainActivity" >
    
    <Button 
        android:text="Center"
        android:id="@+id/btn_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <Button 
        android:text="Rel right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/btn_center"
        android:layout_alignTop="@id/btn_center"/>
    
    
</RelativeLayout>

The results:

You can see that the Center button is centered, and the second button is aligned to its right edge.

You can play around with all the possible attributes. Here is another example:

<RelativeLayout 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"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/btn_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Center" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/btn_center"
        android:layout_toRightOf="@id/btn_center"
        android:text="Rel right" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/btn_center"
        android:layout_toLeftOf="@id/btn_center"
        android:text="Rel left" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_center"
        android:layout_centerHorizontal="true"
        android:text="Rel bottom" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btn_center"
        android:layout_centerHorizontal="true"
        android:text="Rel top" />

</RelativeLayout>

The results:

The RelativeLayout container is not used very often, because the layout looks different on each screen size and if you use it, you should always test your application on many different screen sizes, since problems such as element overlapping might arise.

Thats all for today.

Thanks for reading!

Teachers

Wednesday, February 4, 2015

Android beginner tutorial Part 9 RelativeLayout container

No comments:

Post a Comment