Android Vertical ScrollBar Styling | Android Open Tutorials

This Android tutorial explains how to customize the style of Vertical Scrollbar in ScrollView as shown below.

Scrollbar style includes changing the size, style, fade duration, track and thumb of scroll bar, etc.

We can customize the track and thumb of scrollbar using either BitmapDrawable or ShapeDrawable.

Shape Drawable.
- An XML file that defines a geometric shape, including colors and gradients. Create a ShapeDrawable using <shape> element.
A XML Bitmap File.
- An XML bitmap is a resource defined in XML that points to a bitmap file. Creates a BitmapDrawable.

We will see how to customize the scrollbar by both of the above mentioned methods.

Android Project

Create a new Android project and name it as CustomScrollBar.

Download “Android Vertical ScrollBar Styling” CustomScrollBar.zip – Downloaded 3546 times – 1 MB

Resources

strings.xml

Open res/values/strings.xml and edit to have the content as shown below.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">CustomScrollBar</string>
    <string name="second_name">Second Activity</string>
    <string name="action_settings">Settings</string>
    <string name="scrollbar_text">Android Open Tutorials. Android Programming. Android Tutorials.
        Android Examples. Android SQLite. Android Layouts, Menus, Action Bar, ViewPager. Image Gallery. 
        Data Storage. SharedPreferences, Internal and External Storage. ListView, GridView, RelativeLayout,
        LinearLayout, Scrollbar, Spinner, Dialog, CAB, Styling, ImageView blink, TextSwitcher, Library Projects, 
        How to import Android Library Projects, Progress Bar, Animation, Android Tools and many more.</string>

</resources>

<?xml version="1.0" encoding="utf-8"?>

<string name="app_name">CustomScrollBar</string>

<string name="second_name">Second Activity</string>

<string name="action_settings">Settings</string>

<string name="scrollbar_text">Android Open Tutorials. Android Programming. Android Tutorials.

Android Examples. Android SQLite. Android Layouts, Menus, Action Bar, ViewPager. Image Gallery.

Data Storage. SharedPreferences, Internal and External Storage. ListView, GridView, RelativeLayout,

LinearLayout, Scrollbar, Spinner, Dialog, CAB, Styling, ImageView blink, TextSwitcher, Library Projects,

How to import Android Library Projects, Progress Bar, Animation, Android Tools and many more.</string>

</resources>

Shape Drawable for ScrollBar

This method explains how to change the color and gradient of track and thumb of scroll bar using <shape> element.

Drawable files

Vertical ScrollBar Track Drawable

Create a new file res/drawable/scrollbar_vertical_track.xml and copy paste the following content. This file defines shape for scrollbar track.

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

    <gradient
        android:angle="0"
        android:endColor="#9BA3C5"
        android:startColor="#8388A4" />

    <corners android:radius="6dp" />

</shape>

<?xml version="1.0" encoding="utf-8"?>

<gradient

android:angle="0"

android:endColor="#9BA3C5"

android:startColor="#8388A4" />

</shape>

Vertical ScrollBar Thumb Drawable

Create a new file res/drawable/scrollbar_vertical_thumb.xml and copy paste the following content. This file defines shape for scrollbar thumb.

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

    <gradient
        android:angle="0"
        android:endColor="#005A87"
        android:startColor="#007AB8" />

    <corners android:radius="6dp" />

</shape>

<?xml version="1.0" encoding="utf-8"?>

<gradient

android:angle="0"

android:endColor="#005A87"

android:startColor="#007AB8" />

</shape>

These drawable allows to set the shape, color of track and thumb of scrollbar respectively.
Here, we create a rounded track and thumb of scroll bar by providing radius atribute for <corners>.

styles.xml

Create the following style and apply it to the ScrollView.
Open res/values/styles.xml and edit to have the content as shown below.

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="scrollbar_shape_style">
        <item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
        <item name="android:scrollbarStyle">outsideOverlay</item>
        <item name="android:scrollbars">vertical</item>
        <item name="android:fadeScrollbars">true</item>
        <item name="android:scrollbarThumbVertical">@drawable/scrollbar_vertical_thumb</item>
        <item name="android:scrollbarTrackVertical">@drawable/scrollbar_vertical_track</item>
        <item name="android:scrollbarSize">12dp</item>
        <item name="android:scrollbarFadeDuration">2000</item>
        <item name="android:scrollbarDefaultDelayBeforeFade">1000</item>
    </style>

</resources>

<item name="android:scrollbarStyle">outsideOverlay</item>

<item name="android:scrollbars">vertical</item>

<item name="android:scrollbarThumbVertical">@drawable/scrollbar_vertical_thumb</item>

<item name="android:scrollbarTrackVertical">@drawable/scrollbar_vertical_track</item>

</style>

</resources>

Custom Attributes for ScrollBar

This tutorials uses the following attributes for ScrollBar.

Attribute	Description
android:scrollbarTrackVertical	Defines the vertical scrollbar track drawable. Added in API Level 1. Must reference to drawable resource. In this example, we refer to shape and bitmap drawables.
android:scrollbarThumbVertical	Defines the vertical scrollbar thumb drawable. Added in API Level 1. Must reference to drawable resource. In this example, we refer to shape and bitmap drawables.
android:scrollbarStyle	Controls the scrollbar style and position. Must be one of the following – insideOverlay, insideInset, outsideOverlay, outsideInset.
android:scrollbars	Defines which scrollbars should be displayed on scrolling or not. Must be one or more (separated by ‘\|’) of the following constant values – none, horizontal, vertical.
android:fadeScrollbars	Defines whether to fade out scrollbars when they are not in use. [boolean]. If set to false makes the thumb stay permanently as defined in scrollbar_bitmap_style.
android:scrollbarSize	Sets the width of vertical scrollbars and height of horizontal scrollbars. A floating point dimension value appended with a unit such as “14.5sp”, px (pixels), dp (density-independent pixels), sp (scaled pixels based on preferred font size), in (inches), mm (millimeters).
android:scrollbarFadeDuration	Defines the delay in milliseconds that a scrollbar takes to fade out. Must be an integer value.
android:scrollbarDefaultDelayBeforeFade	Defines the delay in milliseconds that a scrollbar waits before fade out. Must be an integer value.
android:scrollbarAlwaysDrawVerticalTrack	Defines whether the vertical scrollbar track should always be drawn. [boolean]

Other attributes include,

Attribute	Description
android:scrollbarAlwaysDrawHorizontalTrack	Defines whether the horizontal scrollbar track should always be drawn. [boolean]
android:scrollbarThumbHorizontal	Defines the horizontal scrollbar thumb drawable. [reference]
android:scrollbarTrackHorizontal	Defines the horizontal scrollbar track drawable. [reference]

activity_main.xml

This is the main activity layout file. It defines a TextView inside a ScrollView. We apply the style scrollbar_shape_style to the ScrollView which uses shape drawable.
Open res/layout/activity_main.xml and edit to have the content as shown below.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/scrollbar_shape_style"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/scrollbar_text"
            android:textSize="25sp" />
    </LinearLayout>

</ScrollView>

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

style="@style/scrollbar_shape_style"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:padding="10dp" >

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/scrollbar_text"

android:textSize="25sp" />

</LinearLayout>

</ScrollView>

MainActivity class

package com.androidopentutorials.customsb;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}

package com.androidopentutorials.customsb;

import android.app.Activity;

import android.os.Bundle;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

Output

Bitmap Drawable for ScrollBar

This method explains how to create a custom XML bitmap drawable for track and thumb of scroll bar using <bitmap> element.

Drawable files

Vertical ScrollBar Track Drawable

Create a new file res/drawable/scrollbar_vertical_track_2.xml and copy paste the following content. This file defines shape for scrollbar track.

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

    <gradient
        android:angle="0"
        android:endColor="#b5669d"
        android:startColor="#fad5ef" />

</shape>

<?xml version="1.0" encoding="utf-8"?>

<gradient

android:angle="0"

android:endColor="#b5669d"

android:startColor="#fad5ef" />

</shape>

Vertical ScrollBar Thumb Drawable

Create a new file res/drawable/scrollbar_vertical_thumb_2.xml and copy paste the following content. This file defines bitmap for scrollbar thumb.

You can reference a bitmap file directly for android:scrollbarThumbVertical attribute or create an alias resource ID in XML.
An XML bitmap is a resource defined in XML that points to a bitmap file using <bitmap> element. Android supports bitmap files in a three formats: .png (preferred), .jpg (acceptable), .gif (discouraged). Advantage of using XML bitmap is that you can specify additional properties for the bitmap such as dithering and tiling.

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/square"
    android:tileMode="repeat" />

<?xml version="1.0" encoding="utf-8"?>

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"

android:src="@drawable/square"

android:tileMode="repeat" />

You can also use a <bitmap> element as a child of an <item> element. For example, when creating a state list or layer list, you can exclude the android:drawable attribute from an <item> element and nest a <bitmap> inside it that defines the drawable item as shown below.

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

    <item>
        <bitmap
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:src="@drawable/square"
            android:tileMode="repeat" />
    </item>

</layer-list>

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>

<bitmap

xmlns:android="http://schemas.android.com/apk/res/android"

android:src="@drawable/square"

android:tileMode="repeat" />

</item>

</layer-list>

This is the sample square.png file.

styles.xml

Create the following style and apply it to the ScrollView.
Open res/values/styles.xml and edit to have the content as shown below.

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="scrollbar_bitmap_style">
        <item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
        <item name="android:scrollbarStyle">outsideOverlay</item>
        <item name="android:scrollbars">vertical</item>
        <item name="android:fadeScrollbars">false</item>
        <item name="android:scrollbarThumbVertical">@drawable/scrollbar_vertical_thumb_2</item>
        <item name="android:scrollbarTrackVertical">@drawable/scrollbar_vertical_track_2</item>
        <item name="android:scrollbarSize">12dp</item>
    </style>

</resources>

<item name="android:scrollbarStyle">outsideOverlay</item>

<item name="android:scrollbars">vertical</item>

<item name="android:fadeScrollbars">false</item>

<item name="android:scrollbarThumbVertical">@drawable/scrollbar_vertical_thumb_2</item>

<item name="android:scrollbarTrackVertical">@drawable/scrollbar_vertical_track_2</item>

</style>

</resources>

activity_second.xml

This is the activity layout file. It defines a TextView inside a ScrollView. We apply the style scrollbar_bitmap_style to the ScrollView which uses XML bitmap drawable.
Create a new res/layout/activity_second.xml file and edit to have the content as shown below.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scroll_view"
    style="@style/scrollbar_bitmap_style"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/scrollbar_text"
            android:textSize="25sp" />
    </LinearLayout>

</ScrollView>

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/scroll_view"

style="@style/scrollbar_bitmap_style"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:padding="10dp" >

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/scrollbar_text"

android:textSize="25sp" />

</LinearLayout>

</ScrollView>

SecondActivity class

package com.androidopentutorials.customsb;

import android.app.Activity;
import android.os.Bundle;

public class SecondActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_second);

	}

}

package com.androidopentutorials.customsb;

import android.app.Activity;

import android.os.Bundle;

public class SecondActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_second);

}

Output

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidopentutorials.customsb"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.androidopentutorials.customsb.MainActivity"
            android:label="@string/app_name" >
           
        </activity>
         <activity
            android:name="com.androidopentutorials.customsb.SecondActivity"
            android:label="@string/second_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.androidopentutorials.customsb"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="19" />

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="com.androidopentutorials.customsb.MainActivity"

android:label="@string/app_name" >

</activity>

<activity

android:name="com.androidopentutorials.customsb.SecondActivity"

android:label="@string/second_name" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

Tags:Android Examples, Android Scrollbar, Android Scrollbar styling, Android ScrollView, Android Vertical ScrollBar Styling, Scrollbar, ScrollView, styling

About The Author

nithya

http://www.samundra.com.np Samundra Shrestha
I have pushed codes into github so its easier for others to follow. https://github.com/samundra/AndroidCustomScrollbar is the link to github.
- Android Developer
  Do you know perhaps how to make it look like Lollipop’s 5.1 scroller, including the bubble?
Half Moon
Visit viralandroid.com for android tips and tricks, tutorials,…
Pingback: How do I make scrollbar semi-transparent? - Tutorial Guruji

M	T	W	T	F	S	S
« Mar
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Android Project

Resources

strings.xml

Shape Drawable for ScrollBar

Drawable files

Vertical ScrollBar Track Drawable

Vertical ScrollBar Thumb Drawable

styles.xml

Custom Attributes for ScrollBar

activity_main.xml

MainActivity class

Output

Bitmap Drawable for ScrollBar

Drawable files

Vertical ScrollBar Track Drawable

Vertical ScrollBar Thumb Drawable

styles.xml

activity_second.xml

SecondActivity class

Output

AndroidManifest.xml

About The Author

nithya

Related Posts