Collapsible Toolbar - Make Fragment Footer Always Visible in Android

Question

I am making an app that has a ProfilePage with three fragments - About | Posts | Gallery, and I am using a collapsible toolbar with user's image. My second and third fragment will have a footer that should always be visible, but this is what I get:

When my image is expanded the footer disappears. What I want is for my two fragments to have these footers always visible and not depending on toolbar being collapsed or not. My gallery footer should be similar to post footer.

profile_layout.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.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="256dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

        <ImageView
            android:id="@+id/profile_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:contentDescription="@string/profile_photo"
            app:layout_collapseMode="none"/>

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

            <ImageView
                android:id="@+id/toolbarEdit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:contentDescription="@string/block"
                android:paddingEnd="20dp"
                android:paddingStart="5dp"
                app:srcCompat="@drawable/ic_icon_edit" />
        </android.support.v7.widget.Toolbar>

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.design.widget.TabLayout
        android:id="@+id/myProfileTabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        app:tabContentStart="72dp"
        app:tabGravity="fill"
        app:tabMode="scrollable" />

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

posts_fragment.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/tile_bg"
android:orientation="vertical" >

<ListView
    android:id="@+id/list_view_messages"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@null"
    android:divider="@null"
    android:transcriptMode="alwaysScroll"
    android:stackFromBottom="true">
</ListView>

<LinearLayout
    android:id="@+id/llMsgCompose"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:orientation="horizontal"
    android:weightSum="4" >

    <EditText
        android:id="@+id/inputMsg"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="3"
        android:background="@color/bg_msg_input"
        android:textColor="@color/text_msg_input"
        android:paddingLeft="6dp"
        android:paddingRight="6dp"/>

    <Button
        android:id="@+id/btnSend"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/ppdColorOrange"
        android:textColor="@color/white"
        android:text="@string/send" />
</LinearLayout>

My PostsFragment (not yet implemented):

public class MyProfilePostsFragment extends Fragment {     
    @Override     
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {          
        View view = inflater.inflate(R.layout.navdrawer_my_profile_fragment_posts, container, false);         
        return view;
    } 
}

Answer 1

I had the same requirement for my one of apps. I just did workaround.
Add your required layout in tab layout:

<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.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

            <ImageView
                android:id="@+id/profile_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:contentDescription="@string/profile_photo"
                app:layout_collapseMode="none"/>

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

                <ImageView
                    android:id="@+id/toolbarEdit"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end"
                    android:contentDescription="@string/block"
                    android:paddingEnd="20dp"
                    android:paddingStart="5dp"
                    app:srcCompat="@drawable/ic_icon_edit" />
            </android.support.v7.widget.Toolbar>

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.TabLayout
            android:id="@+id/myProfileTabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            app:tabContentStart="72dp"
            app:tabGravity="fill"
            app:tabMode="scrollable" />

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

    <-- Your required layout -->
    <LinearLayout
        android:id="@+id/tab123"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:gravity="bottom"
        android:orientation="horizontal"
        android:visibility="gone"
        android:weightSum="4">

        <EditText
            android:id="@+id/inputMsg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:paddingLeft="6dp"
            android:paddingRight="6dp" />

        <Button
            android:id="@+id/btnSend"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="send" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Add following code in your Tab activity:

TabLayout tabLayout;    
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);//add your viewpager to TabLayout 

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        viewPager.setCurrentItem(tab.getPosition());
        LinearLayout l=(LinearLayout) findViewById(R.id.tab123);
        final EditText text=(EditText) findViewById(R.id.inputMsg);
        Button send=(Button) findViewById(R.id.btnSend);

        if (tab.getPosition() == 0) {
            l.setVisibility(View.GONE);
            System.out.println("About tab");
        } else if (tab.getPosition() == 1) {
            l.setVisibility(View.VISIBLE);
            System.out.println("Posts tab");

            send.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    String msg = null;
                    msg = text.getText().toString(); //get input
                    // Perform your desired task.
                }
            });
        } else if (tab.getPosition() == 2) {
            l.setVisibility(View.VISIBLE);
            System.out.println("Gallery tab");

            send.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    String msg = null;
                    msg = text.getText().toString(); //get input
                    //Perform your desired task.
                }
            });
        }
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});