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="http://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="http://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="http://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="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
>
<LinearLayout xmlns:android="http://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="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
>
<LinearLayout xmlns:android="http://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.


13 Responses to “Android App Development – Layouts Part Three: Frame Layout and Scroll View”

  1. toni_wolfdale 02. Dec, 2010 at 1:39 am #

    wow, nice tutorial. I’m using android phone find it helpful with your tutorial, nice :)

  2. Mina Samy 03. Dec, 2010 at 4:30 am #

    Thanks, I’m glad it’s Helpful

  3. GeorgeV 09. Feb, 2011 at 11:53 pm #

    Just came across your tutorials. Great stuff! Thanks, Mina!

  4. Anonymous 28. Jun, 2011 at 7:54 pm #

    very hepful…

  5. Raghuveer 16. Feb, 2012 at 6:42 am #

    Good

  6. Pkmmte Xeleon 11. Mar, 2012 at 5:18 pm #

    Very helpful!
    I was searching for something like this and found another article which claims to do the same but it messed up my app instead. This tutorial is so much better.

  7. David Vineyard 19. Jun, 2012 at 3:39 pm #

    Nice clean approach to a horizontal scroll.

  8. Aman yadav 30. Jun, 2012 at 3:57 am #

    perfect description :))

  9. Domingo 12. Sep, 2012 at 3:11 am #

    This ScrollView thingy just solved my life!!
    I was starting to believe my phone was somehow broken!

  10. pavan 26. May, 2013 at 11:47 pm #

    very nice tutorial you can also check this onehttp://www.pavanh.com/2013/04/android-alertdialog-example.htm

  11. M J 19. Jun, 2013 at 1:38 am #

    Thanks added Dekicious favorites

Trackbacks/Pingbacks

  1. Android App Development – Layouts Part Three: Frame Layout and Scroll View | WebDevKungfu - 02. Dec, 2010

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

  2. Fixing imagebuttons over a background image - Android Forums - 20. Mar, 2012

    [...] LinearLayout does not allow you to specify absolute or relative positions for its child elements; it will only display them in a single row or column. Most likely what you will need to use is either a RelativeLayout or a FrameLayout. I'm leaning more towards FrameLayout as it will allow you to position items on top of other items. FrameLayout: FrameLayout | Android Developers RelativeLayout: RelativeLayout | Android Developers I skimmed this tutorial and it seems to do a pretty decent job of explaining FrameLayout: Android App Development ? Layouts Part Three: Frame Layout and Scroll View | Mobile Orchard [...]

Leave a Reply

© 2008-2051 • Mobile Orchard and the Bar-Tree Logo are service marks. ContactAdvertise