1

I've been seeing this UI technique quite often at Dribbble, mostly demonstrated on iPhone as timeline, and I am really wondering if it's possible to do so on Android. The idea is to exploit scrollbar, make it activate each row it is passing.

Consider these schematics of a list of contact. Scrollbar UX

The first one is the list (photos on the left side, names on the right) split roughly in the middle with scroll track. The scrollbar cannot expand and has to be smaller than the smallest row. I believe it is possible to produce this kind of arrangement by combining two listviews and make them roll together.

The second one shows the screen when scrolled and when the scrollbar moves to the second row. After it stops, the second row will expand its height. All hidden elements there like address, phone, etc will show up. Also, the moment the scrollbar leaves the first row / hits the second, the first row will toggle off. It will shrink and remove all elements except name.

I have been thinking about this scenario and one key question in this technique is whether the scrollbar has the ability to activate the row it hits. The only tool I know in regard to scrolling is onScrollListener but I wonder if it's sufficient. Does anyone have any insight into such scenario ?

Thank you in advance.

inmyth
  • 8,880
  • 4
  • 47
  • 52

1 Answers1

0

I've been seen something similar to this in lots of applications. Some of them are just using ListView with design tricks to look like that, others with custom views or something else. The idea which I have in my about this implementation is using two Fragments: left and right which are placed in one FragmentActivity. Left Fragment will be your image holder, where for example you will have a ListView or some other view depending on your choice which will communicate with the Right Fragment and when LeftFragment's ListView stop scrolling, fire an event to RightFragment's ListView to scroll to position 5 for example and expand that item. Not really sure if it's the best option and if it will work properly as you want, but that's the first idea which I can think of to do some implementation like this.

Hope this help you find the right answer.

hardartcore
  • 16,886
  • 12
  • 75
  • 101