13

I want to show and hide the action bar /toolbar as the Google Play store app. I am using sliding tabs on top and view pager to show the content of each tab. Here is the screenshot of Google play store app for the reference:

enter image description here enter image description here

My layout XML :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <LinearLayout style="@style/HeaderBar"
        android:id="@+id/headerbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <include layout="@layout/toolbar_no_bg"
            android:id="@+id/toolbar_actionbar"/>

        <com.fauzie.sample.tabsspinner.widget.SlidingTabLayout
            android:background="@color/tab_background"
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/headerbar">

    </android.support.v4.view.ViewPager>

</RelativeLayout>

Thanks in advance.

mudit
  • 25,306
  • 32
  • 90
  • 132

3 Answers3

5

Have a look at this:

https://github.com/flavienlaurent/NotBoringActionBar

There's a trick involved here. You'll need to:

  1. Wrap your layout in a list view
  2. Add a fake header with the same height as your action bar large header
  3. set your action bar overlay to true
  4. Translate the real header when the list moves (i.e. when the fake header is scrolled).

It's a little bit complicated at first but once you understand it, you see how smart and obvious it all is. The link will give you all you need I hope.

I myself used that link to implement it in my own app and it works great.

kha
  • 19,123
  • 9
  • 34
  • 67
  • I tried with a scroll view first but it was really difficult to make it work. The problem with scroll view is that you'll have to make sure the "fake header" translates correctly yourself. With listview, the framework (i.e. the listview layout renderer) does that automatically but give it a go anyway and if it still doesn't work, there's always the listview option :). – kha Nov 06 '14 at 08:59
  • @kha how can i change color of actionbar color when scrolled much? – Devendra Singh Aug 18 '16 at 10:19
  • @DevendraSingh You shouldn't use this solution anymore. Nowadays, it's officially and natively supported in Android. Have a look at Coordinator Layout (good examples here: https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout) – kha Aug 18 '16 at 12:44
  • @kha i want to get the logo slide up and slide down while scrolling too – Devendra Singh Aug 19 '16 at 04:57
  • @DevendraSingh I suggest you raise a separate SO question with your requirements and what you've done so far and where you're having problems and I'm sure people will help you. This solution was posted nearly 2 years ago and is no longer the recommended approach so you shouldn't use it anymore and should use the new layouts instead. – kha Aug 19 '16 at 07:10
  • ok,Thank you for that i will post a question about `CordinatorLayout` but please if you can help me to get the actionbar's color dark when scrolled enough? @kha – Devendra Singh Aug 19 '16 at 07:31
  • @Kha http://stackoverflow.com/questions/39073051/android-coordinator-layout-custom-behaviour – Devendra Singh Aug 22 '16 at 08:26
5

Checkout this library: https://github.com/ksoichiro/Android-ObservableScrollView

this will definitely help you

yshrsmz
  • 1,179
  • 2
  • 15
  • 33
3

Check this example to implement this with the new official Android Design Support Library:

https://github.com/chrisbanes/cheesesquare

Roel
  • 3,089
  • 2
  • 30
  • 34