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 Comments

  1. ishan June 29, 2011 at 5:42 pm

    how to convert image to string in android
    ??

     
  2. ishan June 30, 2011 at 9:29 pm

    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 🙂

     
    • James June 30, 2011 at 10:03 pm

      Ishan : I can’t see the problem.

       
      • ishan July 1, 2011 at 2:37 pm

        xxx application cant install on this phone 🙁

         
        • James July 2, 2011 at 1:22 pm

          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.

           
  3. ishan June 30, 2011 at 9:35 pm

    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
    }

     
  4. jettimadhu Chowdary July 12, 2011 at 2:20 pm

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

     
  5. Anuja August 30, 2011 at 6:13 pm

    Very nice project …like it

     
  6. Iara F. Lindback October 2, 2011 at 12:18 pm

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

     
  7. rohit November 8, 2012 at 6:36 am

    thanks . this helped 🙂

     

Leave a Reply

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

 

 

 

Theme by HermesThemes

Copyright © 2018 CoderzHeaven. All Rights Reserved

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.