Android App Development – Layouts Part Three: Frame Layout and Scroll View

In part 3 of my tutorials on layouts for Android app development I am going to cover frame layout and scroll view.

Frame Layout:

Frame layout is used to display a single view at a time. The view can contain many widgets but only one will appear at a time.

for example we have two images that are same size:

and

In this example the activity has two image views but only one of them is displayed at a time which is the last view defined in the file. The frame layout displays views as if they are in a stack.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="@+id/mainlayout" android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="https://schemas.android.com/apk/res/android">
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:padding="5px" android:src="@drawable/image1"/>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:padding="5px" android:src="@drawable/image2"/>
</FrameLayout>

If we have two image views, one displays a blue box and the other displays a red box, the blue is bigger than the red one, it would be like this:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="@+id/mainlayout" android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="https://schemas.android.com/apk/res/android">
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:padding="5px" android:src="@drawable/blue"/>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:padding="5px" android:src="@drawable/red"/>
</FrameLayout>

Scroll View:

Suppose that our activity displays a large number of controls or content like this layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/txt"
    />

    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 1"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 2"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 3"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 4"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 5"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 6"
    />
</LinearLayout>

This is a linear layout that displays a TextView with  large text and some Buttons. As we can see, not all the buttons are displayed and that the layout does not fit in the device screen.

The solution to this problem is to use ScrollView as a container for the controls and a scroll bar to make the layout fit in the screen.

We will now change the layout with this code:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="https://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/txt"
    />

    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 1"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 2"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 3"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 4"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 5"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 6"
    />
</LinearLayout>
</ScrollView>

As you can see the result is a scroll bar that we can use to see all the controls within the layout like this:

Remember, the ScrollView can have only one child control, so we can make a container (Linear, relative, Table Layouts) the child of the ScrollView and put all the controls inside this child.

So what do we do if we want to display this layout Horizontally ? In this case we’re going to use another container which is HorizontalScrollView. This container acts the same as the ScrollView except that it scrolls child controls horizontally.

Now our layout will be like this:

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="https://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/txt"
    />

    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 1"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 2"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 3"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 4"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 5"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 6"
    />
</LinearLayout>
</HorizontalScrollView>

In order to achive the Horizontal scrolling, we had to change the Orientation of the child LinearLayout to Horizontal.

You may have noticed that the scroll bar disappears (fades out) after scrolling, you can set the time interval in which the scroll bar fades out by setting this time interval (in milli-seconds) through the android:scrollbarFadeDuration property. To make the scroll bar always visible we set the time interval to zero: android:scrollbarFadeDuration=”0″.

That is it for this week. After finishing this tutorial you should under stand how to create different views using Frame Layout and Scroll View. If you have any questions please post them in the comments.

We will continue the Android App Development tutorial series next week.