Fancy SrollBar in ANDROID…

Hello all..
ScrollBars are our basic needs in a UI if we have to show a content that do not fit fully into our layout.
A normal scrollBar doesn’t look so beautiful, but don’t worry ANDROID is so customizable that you can customize your scrollBar also.
Here is a simple demo to make a custom beautiful scrollBar.
Let’s start

package pack.coderzheaven;

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

public class FancyScrollBarDemo extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fancyscrollbar);
    }
}

Now the layout for the scrollbar “fancyscrollbar.xml”.

<?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"
    android:scrollbarTrackVertical="@drawable/scrollbar_vertical_track"
    android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb"
    android:scrollbarSize="12dip">

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

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="CoderzHeaven Fancy ScrollBar Demo"/>
    </LinearLayout>
</ScrollView>

Now create an xml inside the drawable folder and name it “scrollbar_vertical_thumb.xml” and copyt his code into it.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#3333FF" android:endColor="#8080FF"
            android:angle="0"/>
    <corners android:radius="6dp" />
</shape>

Now create another xml inside the drawable folder and name it “scrollbar_vertical_track.xml” and copyt his code into it.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#505050" android:endColor="#C0C0C0"
            android:angle="0"/>
 </shape>

You are done, Now go on and run it.
Enjoy.
Please leave your valuable comments.

Image may be NSFW.
Clik here to view.

Fancy ScrollBar Demo