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.

Fancy ScrollBar Demo

12 thoughts on “Fancy SrollBar in ANDROID…”

ishan June 29, 2011

how to convert image to string in android
??

Reply ↓
1. James Post authorJune 29, 2011
  
  @Ishan : check this post http://coderzheaven.com/2011/04/25/android-upload-an-image-to-a-server/ this is converting an image to string using Base64 and sending to server.
  
  Reply ↓
  1. Tory September 4, 2011
    
    This arlitce achieved exactly what I wanted it to achieve.
    
    Reply ↓
ishan June 30, 2011

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 authorJune 30, 2011
  
  Ishan : I can’t see the problem.
  
  Reply ↓
  1. ishan July 1, 2011
    
    xxx application cant install on this phone 🙁
    
    Reply ↓
    1. James Post authorJuly 2, 2011
      
      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 ↓
ishan June 30, 2011

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 ↓
jettimadhu Chowdary July 12, 2011

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 ↓
Anuja August 30, 2011

Very nice project …like it

Reply ↓
Iara F. Lindback October 2, 2011

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

Reply ↓
rohit November 8, 2012

thanks . this helped 🙂

Reply ↓

12 thoughts on “Fancy SrollBar in ANDROID…”

Leave a Reply Cancel reply