Path like scrollbar with clock widget

Here is our library which you can use to add Path app like little clock that slides up and down the right-hand side of the screen as you scroll down the timeline. You can also add little data in the scroll panel along with fully customizable clock.

You can download library from github page.

Wthout second hand

Without second hand


With second hand Overview

With second hand Overview

We have used an open source library Android-ScrollBarPanel to show a scrollbar-panel. So here we go …

we have a clock class which is used to show clock  on a list view panel,

by using clock class methods you can easily customize the clock widget .

*Steps for usage.

1] Use ExtendedListView view instead of normal listview.

The ExtendedListView replaces a standard ListView widget and provides the ScrollBarPanel capability.

Here’s the xml file snippet










clock:scrollBarPanelOutAnimation="@anim/out" />

As you can see we have added some custom attributes for clock widget (more information about custom attributes at bottom ).

2] You can use/edit the clock widget the following way, this should be done in the layout for scrollbar panel:

Here’s the xml file snippet:










You can also set drawables  for second, minute and hour hand programmatically using setImages(..) method. Also you can set drawables individually for each needle as well as clock dial.

3] Implement onPositionChangeListner this listener will  be called every time you scroll listview.

Here’s the snippet.

ExtendedListView mListView = (ExtendedListView) findViewById(;


Every time you scroll the list, this onPositionChanged listener get’s called in  onPositionChanged()

Then you create a clock class instance to update clock widgets value

Here is the code snippet for onPositionChanged.

public void onPositionChanged(ExtendedListView listView, int position, View scrollBarPanel) {

Clock analogClockObj = (Clock) scrollBarPanel.findViewById(;

// this textview you can use to some data on list scroll panel.
TextView tv = (TextView) scrollBarPanel.findViewById(;


//this is set visibility of second hand.

// to visible clock widget

// here set Time class object with value. this time will be set as time on clock.
Time timeObj = new Time();

timeObj.set(position + 3, position, 5, 0, 0, 0);



Done with clock widget:)))

** little more about clock class :

You can customize clock widget through this class .

This is fully customizable clock widget you can alter its resource through methods or  xml file.

We have exposed some basic methods which are useful to customize your clock widget

like setSecondHandVisibility(boolean) method which is used to make second hand gone or visible.

Its an Apache License, Version 2.0 library so you can use it in your apps the way you want. Let us know in case of any issues. Download this library from  github.

Happy Coding Happy Learning 🙂


17 thoughts on “Path like scrollbar with clock widget

  1. I do not even know how I ended up here, but I thought this post was great. I don’t know who you are but definitely you are going to a famous blogger if you are not already 😉 Cheers!


  2. Hi my loved one! I want to say that this article is awesome, nice written and include approximately all significant infos.
    I would like to see extra posts like this .


  3. The look for your web site is a little bit off in Epiphany. Even So I like your website. I may have to use a normal web browser just to enjoy it.


  4. Thank you, I’ve recently been looking for info about this topic for ages and yours is the greatest I’ve discovered so far. But, what about the conclusion? Are you sure about the source?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s