How to create a scrollbar in Android

It is possible to make a TextView scrollable without putting it in a ScrollView . We could accomplish this but we need to make some changes in the layout XML as well as in the Java code in order to have a scrollable TextBar with a ScrollBar.

Layout container for a view hierarchy that can be scrolled by the user allows it to be larger than the physical display. A Scroll View is a FrameLayout, meaning we should place one child in it containing the entire contents to scroll; this child may itself be a layout manager with a complex hierarchy of objects. A child that is often used is a LinearLayout in a vertical orientation, presenting a vertical array of top-level items that the user can scroll through.

We should never use a ScrollView with a ListView, because ListView takes care of its own vertical scrolling. Most importantly, doing this defeats all of the important optimizations in ListView for dealing with large lists, since it effectively forces the ListView to display its entire list of items to fill up the infinite container supplied by ScrollView.

The TextView class also takes care of its own scrolling, so does not require a ScrollView. But using the two together is possible to achieve the effect of a text view within a larger container.

ScrollView only supports vertical scrolling. For horizontal scrolling, use HorizontalScrollView.

As we know, in order to make a TextView Scrollable the setMovementMethod() has to be called like below in the Java code:

Listing 1: Making the Textview scrollable

. . .
mTxtOutput = (TextView)findViewById(R.id.txtOutput);
mTxtOutput.setMovementMethod(ScrollingMovementMethod.getInstance());
. . .

So, it is easy. However, there will be no scroll bar displayed. To add a scroll bar, the android:scrollbars attribute has to be set in the layout file like this:

Listing 2: Adding a scroll bar

. . .
<textview android:id="@+id/txtOutput" android:scrollbars="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"></textview>
. . .

Now, this TextView is scrollable and has a (vertical) scroll bar. It must be lighter than using a ScrollView. What is irritating about this trick is that two different kinds of files must be touched. We cannot make a TextView scrollable in the layout and we cannot enable scroll bars in the java code.

Another point to note is that with this trick there will be no fading edge effect which is given when ScrollView is used.

As an appendix, here is a very simple layout code for a scrollable TextView with a vertical scroll bar (using a ScrollView):

Listing 3: Simple layout code

. . .
<scrollview android:layout_width="fill_parent" android:layout_height="fill_parent">
  <textview android:layout_height="wrap_content" android:layout_width="fill_parent"></textview>
</scrollview>
. . .

If we design a menu for android phones we will probably reach the end of the screen before we have placed all web elements. The solution is very easy: just use a scrollbar to enable the user to scroll up and down to see everything.

To do so we have to wrap web linear layout with a ScrollView and wrap the scroll view again with a LinearLayout. Set the height to whatever we want but keep in mind that we should not use px (pixel) for that since it is an absolute value.

Listing 4: Designing a scrollbar

<linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">  
  
<scrollview android:id="@+id/ScrollView01" android:layout_height="420dp" android:layout_width="fill_parent">  
  
<linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">  
  
</linearlayout>  
</scrollview>  
</linearlayout>  

We used dp (Density-independent Pixels) which is an abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi screen. So one dp is one pixel on a 160 dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion. Note: The compiler accepts both "dpi" and "dp", though "dp" is more consistent with "sp".

Sp is like the dp unit, but it is also scaled by the user's font size preference. It is recommend we use this unit when specifying font sizes, so they will be adjusted for both the screen density and user's preference.

By default android comes with a scroll bar for scrolling across up and down . But in some specific applications we may need to hide the scroll bar and still be able to scroll down. So for that kind of application here is the trick to hide the seek bar.

Listing 5: xml file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/LinearLayout01"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <ScrollView android:id="@+id/ScrollView01"
                android:layout_width="wrap_content" android:layout_height="100px">
                <LinearLayout android:id="@+id/LinearLayout02"
                        android:layout_width="wrap_content" android:layout_height="wrap_content"
                        android:orientation="vertical">
                        <Button android:id="@+id/Button01" android:layout_width="wrap_content"
                                android:layout_height="wrap_content" android:text="But1"></Button>
                        <Button android:id="@+id/Button02" android:layout_width="wrap_content"
                                android:layout_height="wrap_content" android:text="But2"></Button>
                        <Button android:id="@+id/Button03" android:layout_width="wrap_content"
                                android:layout_height="wrap_content" android:text="But3"></Button>
                </LinearLayout>
        </ScrollView>
</LinearLayout>

Listing 6: Java file

public class HideScrollBarExample extends Activity {

        @Override
        public void onCreate(Bundle icicle) {
                super.onCreate(icicle);
                setContentView(R.layout.main);

                ScrollView sView = (ScrollView)findViewById(R.id.ScrollView01);
//              Hide the Scollbar
                sView.setVerticalScrollBarEnabled(false);
                sView.setHorizontalScrollBarEnabled(false);
        }
}

The output will looks like:

1st image is before scrollbar hide & 2nd image is after scrollbar hide:

Figure 1: Before the hide of scroll bar

Figure 2: After scrollbar hide

Creation of a vertical scroll bar in Android

Listing 7: The code below displays how we can create a vertical scrollbar in Android devices

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="hxxp://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<EditText
android:id="@+id/path"
android:layout_width="fill_parent"
 android:layout_height="wrap_content" />
 <org.apache.android.media.CustomVideoView
 android:id="@+id/custom_videoview"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
android:layout_weight="3.33" />
<EditText
android:id="@+id/MessageText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textMultiLine" android:layout_marginTop="100dp" android:scrollbars="vertical" android:fadeScrollbars="false" android:gravity="top" android:maxHeight="100dp" android:textSize="10sp">
 <requestFocus />
</EditText>
</LinearLayout>

Creation of a Horizontal Scroll bar in Android devices

Listing 8: The code below displays how we can create a horizontal scrollbar in Android devices

<HorizontalScrollView 
            android:id="@+id/scrollview"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" 
            android:scrollbars="none">

                <LinearLayout android:id="@+id/layout"
                        android:layout_width="wrap_content"
                        android:layout_height="fill_parent"
                        android:orientation="horizontal">

                        <ListView android:id="@+id/list"
                            android:layout_width="fill_parent"
                            android:layout_height="fill_parent" />
            </LinearLayout>
    </HorizontalScrollView>

How to change colour of a scrollbar

We need to create/modify our image to replace the default one, and use that as the background of web EditText.

Listing 9: Changing the colour of the scrollbar

<?xml version="1.0" encoding="utf-8"?>
<selector 
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <item 
        android:state_pressed="true"
        android:drawable="@android:drawable/edittext_pressed" 
        /> <!-- pressed -->    
    <item 
        android:state_focused="true"
        android:drawable="@drawable/edittext_focused_blue" 
        /> <!-- focused -->    
    <item 
        android:drawable="@android:drawable/edittext_normal" 
        /> <!-- default -->
</selector>

We can then set this StateListDrawable as the background for web TextView, like so:

<TextView
    android:background="@drawable/edittext_modified_states"

On some OS versions, we might also have to copy the normal unmodified state pictures into the applications drawable folder to get this to work. So in web application's drawable folders we have the modified focus state picture and the unmodified original other state pictures as well.

Conclusion

In this article, we have created a scrollbar with both vertical as well as horizontal positions. We also learnt how to change the colour of the scrollbars. See you next time.

More posts about Android:

• How to Create a Calculator (GUI) for Android using XML
• How to work with Android listener application
• How to use Fragments in Android Applications