Fancy SrollBar in ANDROID…

By | June 27, 2011

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.

Fancy ScrollBar Demo

Fancy ScrollBar Demo

12 thoughts on “Fancy SrollBar in ANDROID…

  1. ishan

    i have problem…………….
    when i create .apk file for my project on my home desktop i can install that on my phone.. but when i created .apk file for the same project on my office desktop icant install than …
    . when installing it gives the message >

    whats that problem .. please 🙂

    Reply
        1. James Post author

          Sorry No idea what you are talking about. Check the settings on your phone or eclipse in your home and eclipse or try to run on another device in your office.

          Reply
  2. ishan

    i wanto to know hoe to send email with multiple attachments(images)
    when i attach images using arraylist.. it only add the final attachemnt,,,
    my code is
    ————

    try {
    Intent sendIntent = new Intent(Intent.ACTION_SEND);
    sendIntent.putExtra(Intent.EXTRA_EMAIL,
    new String[] { “ishanssi@gmail.com” });
    sendIntent.putExtra(Intent.EXTRA_SUBJECT, “Subject”);
    sendIntent.putExtra(Intent.EXTRA_TEXT,”message”);

    for (int i = 0; i < imagefilepathsarray.size(); i++) {
    sendIntent.putExtra(Intent.EXTRA_STREAM, Uri
    .parse("file://" + imagefilepathsarray.get(i)));
    }

    Log.i("parsing of URI", "stop");
    sendIntent.setType("image/jpeg");

    startActivity(Intent
    .createChooser(sendIntent, "MySendMail"));
    } catch (Exception e) {
    e.printStackTrace();
    // TODO: handle exception
    }

    Reply
  3. jettimadhu Chowdary

    Hi James,
    I want to show the scrollbar with RED color when It reaches to the end of the list.Is it possible to do? Please give some suggestions..

    Reply
  4. Iara F. Lindback

    Thank you for your workable examples. It is for me a big help as a newcomer in Android world.

    Reply

Leave a Reply to ishan Cancel reply

Your email address will not be published. Required fields are marked *