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.

Without second hand

      

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

<com.learnNcode.android.ExtendedListView

xmlns:clock="http://schemas.android.com/apk/res-auto"

android:id="@android:id/list"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:choiceMode="singleChoice"

clock:hand_second="@drawable/ic_timer_clock_minute_hand"

clock:scrollBarPanel="@layout/scrollbarpanel"

clock:scrollBarPanelInAnimation="@anim/in"

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:

<com.learnNcode.android.Clock

xmlns:clock="http://schemas.android.com/apk/res-auto"

android:id="@+id/analogClockScroller"

android:layout_width="25dp"

android:layout_height="25dp"

clock:hand_second="@drawable/ic_timer_clock_minute_hand"

clock:hand_minute="@drawable/ic_timer_clock_minute_hand"

clock:hand_hour="@drawable/ic_timer_clock_hour_hand"

clock:hand_dial="@drawable/ic_timer_clock_dialer"/>

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(android.R.id.list);

mListView.setOnPositionChangedListener(this);

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.

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

Clock analogClockObj = (Clock) scrollBarPanel.findViewById(R.id.analogClockScroller);

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

tv.setText(""+position);

//this is set visibility of second hand.
analogClockObj.setSecondHandVisibility(false);

// to visible clock widget
analogClockObj.setVisibility(View.VISIBLE);

// 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);

analogClockObj.onTimeChanged(timeObj);

}

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 🙂

• android
• clock dial
• path
• pathlikeclock
• widget