Add fixed tab bar pinned to top with scrolled content?

Question

I tried this answer, but I could not achieve the same look & behavior as my current main activity.

What changes should I make to my existing main activity to add a fixed tab bar pinned to top with scrolled content like in the image below?

Here's a .GIF of my current main activity: i.stack.imgur.com/Yj0cv.gif

Here's a link to the full project called android: https://github.com/firebase/friendlychat/tree/master/android

Here's styles.xml:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="android:colorButtonNormal">@drawable/button_selector</item>
        <item name="colorButtonNormal">@drawable/button_selector</item>
        <item name="android:buttonStyle">@style/FriendlyButtonStyle</item>
    </style>

    <style name="FriendlyButtonStyle" parent="Widget.AppCompat.Button">
        <item name="android:textColor">@color/colorTitle</item>

    </style>
</resources>

Here's activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.google.firebase.codelab.friendlychat.MainActivity">

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        ads:adSize="BANNER"
        ads:adUnitId="@string/banner_ad_unit_id">
    </com.google.android.gms.ads.AdView>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/messageRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/linearLayout"
        android:layout_below="@+id/adView"/>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/linearLayout">

        <ImageView
            android:id="@+id/addMessageImageView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/ic_add_black_24dp"/>

        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/messageEditText"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SEND"
            android:enabled="false"
            android:id="@+id/sendButton"
            android:layout_gravity="bottom"/>

    </LinearLayout>

    <ProgressBar
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/progressBar"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>

The link you provided seems to be a complete answer for what it looks like you are trying to do. Could you tell us why that answer does not work for you? Is it just the parts of your layout they are not using (ProgressBar, MyOwnView, etc.)? — Gary99, Jul 08 '17 at 18:52
@Gary99 It doesn't look the same. Everything's out of place, out of order etc. — Jonathan Doe, Jul 08 '17 at 18:55

SiSa · Answer 1 · 2017-07-14T15:45:14.860

Put your fixed view's in RelativeLayout and move scrolling content inside CoordinatorLayout. Like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutDirection="ltr"
    tools:context=".MainActivity">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/linearLayout">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/AppTheme.PopupOverlay"
                app:tabMode="fixed" />

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.google.android.gms.ads.AdView
                    android:id="@+id/adView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_alignParentTop="true"
                    ads:adSize="BANNER"
                    ads:adUnitId="@string/banner_ad_unit_id">
                </com.google.android.gms.ads.AdView>

                <android.support.v7.widget.RecyclerView
                    android:id="@+id/messageRecyclerView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:nestedScrollingEnabled="false"
                    android:layout_below="@+id/adView" />
            </RelativeLayout>
        </android.support.v4.widget.NestedScrollView>

    </android.support.design.widget.CoordinatorLayout>

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/addMessageImageView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/ic_add_black_24dp" />

        <EditText
            android:id="@+id/messageEditText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1" />

        <Button
            android:id="@+id/sendButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:enabled="false"
            android:text="SEND" />
    </LinearLayout>

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />
</RelativeLayout>

Mohammad Zarei · Answer 2 · 2017-07-09T07:18:07.243

Google has Design support library and with it you can implement Collapsing Toolbar and you do not need any 3rd party libraries!!

In addition to pinning a view, you can use app:layout_collapseMode="parallax" (and optionally app:layout_collapseParallaxMultiplier="0.7" to set the parallax multiplier) to implement parallax scrolling (say of a sibling ImageView within the CollapsingToolbarLayout)

And as example you can use this:

<android.support.design.widget.AppBarLayout
    android:layout_height="186dp"
    android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
    <android.support.v7.widget.Toolbar
            android:layout_height="?attr/actionBarSize"
            android:layout_width="match_parent"
            app:layout_collapseMode="pin"/>
    </android.support.design.widget.CollapsingToolbarLayout>

And do not forget to add compile "com.android.support:design:25.3.1" in your module build.gradle

UPDATE 1: First of all, you need to create a CoordinatorLayout.

All the new components use a new concept called Behavior that is used by the Coordinator Layout to take some actions based on different interactions.

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

</android.support.design.widget.CoordinatorLayout>

You can use fitsSystemWindows on any item you want to be painted below the status bar.

Then you need to add an AppBarLayout:

<android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

</android.support.design.widget.AppBarLayout>

And then inside that, you can add something like:

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        android:fitsSystemWindows="true">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

    </android.support.design.widget.CollapsingToolbarLayout>

Thanks for your reply. But, please give a full working answer implementing my question's code :) It's a bit confusing like this. — Jonathan Doe, Jul 08 '17 at 13:44
I think there's a misunderstanding. I'd like to point out that I need a custom solution for my project. I will update the question with a link to the full project in a few moments. The activity to modify is called `MainActivity`. — Jonathan Doe, Jul 09 '17 at 15:25
I will immediately award the bounty and accept the answer that solves my problem. — Jonathan Doe, Jul 10 '17 at 16:19
@JonathanDoe Correct me if I'm wrong but you want to have a `recyclerView` in the middle, an `Edittext` and a send `button` on bottom. And what for top ? — Mohammad Zarei, Jul 12 '17 at 08:55

GensaGames · Answer 3 · 2017-07-10T19:55:12.763

Just created behavior, what you want. Shouldn't be so complicated. So here is main XML for all Views. But I also have already created project for this sample, please write here, if I need to share full project.

SCREENS

MAIN XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:elevation="0dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/toolbar"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:scrollbars="none"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_collapseMode="pin"
            app:tabMode="fixed" />


    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

TO YOUR EXAMPLE

I share here another example, which should suite your code. I attached all view Ids for your examples. Check it.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:elevation="0dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


        <com.google.android.gms.ads.AdView
            android:id="@+id/adView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_below="@+id/toolbar"
            android:layout_centerHorizontal="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            ads:adSize="BANNER"
            ads:adUnitId="@string/banner_ad_unit_id"
            app:layout_collapseMode="pin"></com.google.android.gms.ads.AdView>


    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/messageRecyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom |center_horizontal"
            android:layout_marginBottom="100dp"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/addMessageImageView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@android:drawable/ic_dialog_alert" />

            <EditText
                android:id="@+id/messageEditText"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1" />

            <Button
                android:id="@+id/sendButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:enabled="false"
                android:text="SEND" />

        </LinearLayout>

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="100dp"
            android:layout_centerVertical="true" />

    </FrameLayout>


</android.support.design.widget.CoordinatorLayout>

Thanks for your answer! I'd like to point out that I need a custom solution for my project. I will update the question with a link to the full project in a few moments. The activity to modify on is called `MainActivity`. — Jonathan Doe, Jul 09 '17 at 15:24
@JonathanDoe Cannot understand issue. So you just used this example, but it doesn't work for you? — GensaGames, Jul 10 '17 at 12:30
@JonathanDoe You should use this my example above, to get expected result. You cannot done it, with simple Views. — GensaGames, Jul 10 '17 at 12:31
I mean what modifications should I do to my **existing** project (link in the question) to add a fixed tab bar to my main activity? Do you understand? :) — Jonathan Doe, Jul 10 '17 at 14:30
I will immediately award the bounty and accept the answer that solves my problem. — Jonathan Doe, Jul 10 '17 at 16:14
Thanks. But, the `EditText` and the `Send` button aren't behaving correctly. Look: http://i.imgur.com/ayZ7sKc.gif — Jonathan Doe, Jul 10 '17 at 21:56
`EditText` and `SEND` should be like this instead: http://i.stack.imgur.com/Yj0cv.gif — Jonathan Doe, Jul 10 '17 at 21:57
@JonathanDoe I suppose it's enough, for this example. Just configure bottom layout as you want. — GensaGames, Jul 13 '17 at 16:58
I tried but I'm unable to do that with your `FrameLayout`. As I said, I'll immediately award the +100 bounty when the problem us solved. — Jonathan Doe, Jul 13 '17 at 18:27

score 1 · Answer 4 · answered Jul 15 '17 at 06:53

try above code

Style.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <item name="android:colorButtonNormal">@drawable/button_selector</item>
    <item name="colorButtonNormal">@drawable/button_selector</item>
    <item name="android:buttonStyle">@style/FriendlyButtonStyle</item>
</style>

<style name="FriendlyButtonStyle" parent="Widget.AppCompat.Button">
    <item name="android:textColor">@color/colorTitle</item>

</style>

here if you don't want to change property to 'NoActionBar' then alternatively set it in AndroidManifest.xml file like above

<activity android:name=".MainActivity"
        android:theme="@style/Theme.AppCompat.NoActionBar"/>

activity_main.xml

   <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.google.firebase.codelab.friendlychat.MainActivity"
    android:id="@+id/coordinatorLayout">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable"
            app:tabGravity="center"
            app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@android:color/white"
            app:tabIndicatorHeight="2dp"
            app:tabIndicatorColor="@android:color/white"/>

    </android.support.design.widget.AppBarLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context="com.google.firebase.codelab.friendlychat.MainActivity">

        <com.google.android.gms.ads.AdView
            android:id="@+id/adView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            app:adSize="BANNER"
            app:adUnitId="@string/banner_ad_unit_id">
        </com.google.android.gms.ads.AdView>

        <include
            layout="@layout/maincontent"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/adView"/>


        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:orientation="horizontal"
            android:layout_marginBottom="50dp">

            <ImageView
                android:id="@+id/addMessageImageView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/ic_add_black_24dp"/>

            <EditText
                android:id="@+id/messageEditText"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"/>

            <Button
                android:id="@+id/sendButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:enabled="false"
                android:text="SEND"/>

        </LinearLayout>

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"/>
    </RelativeLayout>

</android.support.design.widget.CoordinatorLayout>

maincontent.xml

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/messageRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />

</LinearLayout>

Add fixed tab bar pinned to top with scrolled content?

4 Answers4