Implementing StickyBar in Android

StickyBar is an Android project which demonstrates the creation of Sticky Bar.
So the very first question here would be, What is StickyBar?
Fundamentally, it’s a view (I am calling it the bar here) which can be scrolled throughout the page vertically or horizontally & it can be sticked at any point.
StickyBar is similar to Quick Return if you are aware of it.
But if you are not aware of Quick Return, then you can check it in the very popular ‘Google Now app’ (& many others as well). In the Google Now app, whenever you scroll the page, the top search bar (view) scrolls with it. On scrolling to the top of the page, the search bar remains constant at its position, but the moment you start scrolling down it comes back & starts scrolling down with the page and at a certain point it stops (or sticks). It doesn’t scroll down anymore after that.
For Quick Return example just check the following image
This is a kind of example for Quick Return.
Now if in the example above, instead of letting the search bar go away on scrolling up if we stick it to the very top (or bottom or left or right), it becomes a StickyBar.
For StickyBar example, check image
In the following example, I have used the vertical scrollable layout which uses the sticky bar. So, on scrolling towards the top the sticky bar will scroll with the layout & on reaching the top the sticky bar will stick there, while the layout keeps scrolling.
The logic behind this is very simple, create two identical views & place one inside the scrollable layout & other at the top of it. Just observe the scroll position & at a certain point switch the visibility of both views.
Hence, we will need the following views as a prerequisite to implementing the StickyBar
A view that can be scrolled & it’s scroll position can be monitored.
1. For this, I have created a custom view named ObservableScrollView which extends the default ScrollView.
2. For monitoring the scroll position, we have added an interface named ScrollViewListener which has a method onScrollChanged which gives you the old (x,y) & current (x,y) positions for the ScrollView.
Following are the classes used.
Now the layout.
You can create any type of layout, that will require StickyBar kind of feature. In the current example, following is the layout which is very easy to understand. It can be modified for complex stuff too.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" > <com.ab1209.stickybar.ObservableScrollView android:id="@+id/activity_sticky_bar_scroll_view" android:layout_width="match_parent" android:layout_height="match_parent" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <RelativeLayout android:id="@+id/activity_sticky_bar_relative_top_layout" android:layout_width="match_parent" android:layout_height="200dip" android:background="@android:color/holo_orange_dark" android:paddingBottom="20dip" > <LinearLayout android:id="@+id/activity_sticky_bar_layout_sticky_view" android:layout_width="match_parent" android:layout_height="40dip" android:layout_alignParentBottom="true" android:background="@android:color/holo_blue_dark" android:orientation="horizontal" /> </RelativeLayout> <RelativeLayout android:id="@+id/activity_sticky_bar_relative_bottom_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/activity_sticky_bar_relative_top_layout" android:background="@android:color/holo_red_light" > <TextView android:id="@+id/activity_sticky_bar_tv_test" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="@android:color/white" android:textSize="25dip" /> </RelativeLayout> </RelativeLayout> </com.ab1209.stickybar.ObservableScrollView> <LinearLayout android:id="@+id/activity_sticky_bar_layout_sticky_view_2" android:layout_width="match_parent" android:layout_height="40dip" android:background="@android:color/holo_blue_dark" android:orientation="horizontal" /> </RelativeLayout>
Now comes the Activity: StickyBarActivity.
For making it more dynamic, we have used two parameter ‘height & barPosition’. ‘height’ is the actual height of the container layout which contains the sticky view & barPosition is the position where the sticky view must be sticked.
To calculate these values dynamically, we have used ’onWindowFocusChanged’ method where we can calculate the height, width & other properties of the view.
These values are used in the onScrollChanged method which actually hides or shows the sticky view.
This is the real simple way of achieving the StickyBar feature & can be modified for any direction: down, right or left.

 

Showing 3 comments
  • Vidyanand
    Vidyanand

    Very good article to learn about Stickybar with clear understanding.

  • Prakhar Mohan Srivastava

    I wanted to know how to call the setScrollViewListener() inside a fragment. In the activity it is done using setScrollViewListener(this) but how do I do the same thing in the activity?

    • Mindbowser
      Mindbowser

      Hi Prakhar,

      This is the context of the Activity, so for Fragment as well you will need the context, you can get it by calling getActivity() method. like setScrollViewListener(getActivity())

Leave a Comment