11

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:

enter image description here enter image description here

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; } }
Improve this question

1 Answer 1

Reset to default
4

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) { } });
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thank you for your answer Shashidhar. Would I have to add my gallery_fragment.xml to tab layout as well? Also does this mean I would have to change my Fragments and add this layout to all of them them? Is there a cleaner solution for this?
@Kemo, Just remove linear layout from all fragment as we have added to tab xml file.
Tried it and it works beautifully. One question - what should I do with my fragment - how should I implement it, because I would have to edit that as well. When I enter the message and click enter, how would I display it, in my fragment or activity? Do I need to combine it with MainActivity that has these fragments. I am using this tutoiral.
Also, how would I display listview from posts_fragment.xml above the footer?
@Kemo, Happy coding!
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.