Teachers: Android beginner tutorial Part 6 FrameLayout containers

Wednesday, February 4, 2015

Android beginner tutorial Part 6 FrameLayout containers

Today well learn more about the FrameLayout layout type.

Open up our existing Android project in Eclispse and open the activity_main.xml file in res/layout/ directory in xml mode.

Right now we have a RelativeLayout container with a TextView inside. Rename the RelativeLayout to FrameLayout, and change the attributes to the values as in the example below. Instead of the TextView, add a Button, with the attribute values as shown below:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <Button 
        android:text="Test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</FrameLayout>

If you take a look at the application layout using the Graphical Layout mode now, youll see this:

Now Ill explain the code. The first two attributes in the root tags, prefixed with xmlns, are namespaces. They are included in the code by default and we should leave those as they are. The next two are layout_width and layout_height. The match_parent in layout_width basically tells the component to stretch in width to match the width of its parent, which is in this case the available device screen. The tools:context attribute is also added automatically, it specifies which Activity this layout is representing (based on this value, the UI editor will know which theme to use to display your content).

The height of the FrameLayout is set to wrap_content, which makes the component only take as much space as is needed.

In this case, the required height is defined by the height of the single child of the container, which is the button. The height and width of the button are both set to wrap_content. This means the button will stretch just enough to fit the text inside it, which in this case is "Test".

Note that in this example I am strictly applying the string value to the android:text attribute of the Button. It works in this example, but normally it is recommended to store all string values in a separate xml file and refer to those values using ids. This is done to be able to support different languages, and do other manipulations with string values.

So, the frame layout container contains a single button, which is spawned in the top left corner. Any new children will also be spawned there, and put on top of the previous children. Lets add one more button, set its width and height to match_parent, and also set the FrameLayouts height to match_parent:

<FrameLayout 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="Test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Test 2" />
    
</FrameLayout>

Results:

The second button takes up all of the screen space. It is also spawned on top of the first button, making it impossible to use the first button.

FrameLayouts are not used very often, because the content is not flexible this way, and such layouts are mostly used to create overlays.

Thats all for today.

Well take a closer look at the LinearLayout container next time.

Thanks for reading!

Teachers

Wednesday, February 4, 2015

Android beginner tutorial Part 6 FrameLayout containers

No comments:

Post a Comment