Android Vertical ScrollBar Styling

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

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 1941 times – 1 MB

Resources

strings.xml

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

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.

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.

  • 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.

Custom Attributes for ScrollBar

This tutorials uses the following attributes for ScrollBar.

AttributeDescription
android:scrollbarTrackVerticalDefines 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:scrollbarThumbVerticalDefines 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:scrollbarStyleControls the scrollbar style and position. Must be one of the following – insideOverlay, insideInset, outsideOverlay, outsideInset.
android:scrollbarsDefines 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:fadeScrollbarsDefines 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:scrollbarSizeSets 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:scrollbarFadeDurationDefines the delay in milliseconds that a scrollbar takes to fade out. Must be an integer value.
android:scrollbarDefaultDelayBeforeFadeDefines the delay in milliseconds that a scrollbar waits before fade out. Must be an integer value.
android:scrollbarAlwaysDrawVerticalTrackDefines whether the vertical scrollbar track should always be drawn. [boolean]

Other attributes include,

AttributeDescription
android:scrollbarAlwaysDrawHorizontalTrackDefines whether the horizontal scrollbar track should always be drawn. [boolean]
android:scrollbarThumbHorizontalDefines the horizontal scrollbar thumb drawable. [reference]
android:scrollbarTrackHorizontalDefines 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.

MainActivity class

Output

android-custom-scrollbar-shape

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.

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.

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.

This is the sample square.png file.
square

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.

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.

SecondActivity class

Output

android-custom-track-thumb-scroll-bitmap

AndroidManifest.xml

  • 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,…