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

<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 is the snippet.

ExtendedListView mListView = (ExtendedListView) findViewById(android.R.id.list);
mListView.setOnPositionChangedListener(this);

Every time you scroll the list, onPositionChanged(..) listener gets called.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 🙂

17 comments 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!

    • -

      Thanks for your valuable feedback… Keep checking the blog 😀

      Chreers,

  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 .

    • -

      Thank you so much..
      That’s really encouraging..We will keep posting & keep checking our blog 🙂

      Regards,
      learnNcode

  3. -

    good articles

    • -

      Thanks for appreciation…Spread the word  🙂

      Regards,
      learnNcode

  4. -

    Hey! Do you know if they make any plugins to help with Search

    • -

      Plugin?? or you means widget??

      Regards,
      learnNcode

  5. -

    thank you for share!

    • -

      Thanks for appreciation…Spread the word  🙂

      Regards,
      learnNcode

  6. -

    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.

    • -

      Thanks, We have made some quick fixes.
      Hope now site is working fine at your end.

      Regards,
      learnNcode

  7. -

    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?

    • -

      we used the source as a reference and it works well in our project.

      Regards,
      learnNcode

  8. -

    thank you for share!

Leave a Reply

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