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 3347 times – 1 MB
Resources
strings.xml
Open res/values/strings.xml and edit to have the content as shown below.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?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> |
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.
1 2 3 4 5 6 7 8 9 10 11 | <?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> |
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.
1 2 3 4 5 6 7 8 9 10 11 | <?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> |
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?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
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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.
1 2 3 4 5 6 7 8 9 | <?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> |
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.
1 2 3 4 | <?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.
1 2 3 4 5 6 7 8 9 10 11 | <?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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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
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 32 | <?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> |
- http://www.samundra.com.np Samundra Shrestha
- Android Developer
- Half Moon