Develop Reference

ViewPager vanishes after getting back to the containing fragment

I have an activity which have a complex structure of Fragments. The Activity have two containers, each for a NavigationDrawerFragment and a Main Content Fragment(HomeTabFragment). The Main Content Fragment has TabLayout+ViewPager structure containing two child Fragments(Search and News). This has been working well, untill I need to replace Main Content Fragment with another Fragment (Settings). This also worked well, but when I want to get back to the same Main Content Fragment, the ViewPager, along with the child fragments vanishes.
This is structure. HomeTabFragment is replaced by SettingsFragment via a button (In LeftDrawerFragment) and SettingsFragment is again replaced by HomeTabFragment via a button (In LeftDrawerFragment or a hardware back key)
HomeActivity
|-LeftDrawerFragment
|-HomeTabFragment
| |-ViewPager
| |-HomeSearchFragment
| |-HomeNewsFragment
|-SettingsFragment
Here's the HomeActivity layout -
<?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">
<!--<include layout="#layout/content_home"/>-->
<android.support.v4.widget.DrawerLayout android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Toolbar-->
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<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:layout_gravity="center_horizontal"
android:background="?attr/colorPrimary"
android:gravity="center_horizontal"
app:layout_scrollFlags="enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:subtitle="Your Medi-buddy"
app:title="#string/app_name">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#null"
android:onClick="onHomeMenuClick"
android:padding="5dp"
android:src="#drawable/ic_menu_white" />
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/app_name"
android:textAppearance="#android:style/TextAppearance.Holo.Large" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!-- The main content view -->
<FrameLayout
android:id="#+id/tab_frag_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- The navigation drawer -->
<FrameLayout
android:id="#+id/left_drawer_container"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111" />
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
Following is the layout of my HomeTabFragment
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="#android:color/white"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorPrimaryDark"
app:tabTextColor="#color/colorPrimary" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_search_white" />
</android.support.design.widget.CoordinatorLayout>
This is how I am changing back and forth between HomeTabFragment and SettingsFragment
public void onLeftDrawerSettingsClick(View view) {
mDrawerLayout.closeDrawer(Gravity.LEFT);
getSupportFragmentManager().beginTransaction().replace(R.id.tab_frag_container, mApp.getFragmentController().getSettingsFragment()).addToBackStack("Drawer").commit();
}
public void onLeftDrawerHomeClick(View view) {
mDrawerLayout.closeDrawer(Gravity.LEFT);
getSupportFragmentManager().beginTransaction().replace(R.id.tab_frag_container, mApp.getFragmentController().getHomeTabFragment()).commit();
}
I am unable to understand why the ViewPager is getting affected by the replace transaction. I found out that it has something to do with not allowing Child fragments in API Level 15 or lower, however this has been fixed in the latest support library and I don't think it can be an issue.
Is there any way I can replace the HomeTabFragment with SettingsFragment and vice-versa, without affecting the other functionalities? Or is it something I am doing wrong?

A quick solution was to not create the complete view of the fragment when it loads the second time. For that I put following code in the onCreateView() of HomeTabFragment
if (mParent != null)
return mParent;
// Inflate the layout for this fragment
mParent = inflater.inflate(R.layout.fragment_home_tab, container, false);
Though the solution works, but I am still unable to explain why is it happening? Posting it as an answer, in case someone is looking for a solution. Please provide a better solution with explanation, if you can.

Fragment's content above Tab's text in TabLayout

I'm using TabLayout and I attach two tabs.
tabLayout.addTab(tabLayout.newTab().setText("Featured"));
tabLayout.addTab(tabLayout.newTab().setText("Filter"));
Then onTabSelected() I display the fragment I want according to which tab user selected.
The layout of my Activity is :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/ll_container"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
<FrameLayout
android:id="#+id/fl_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
and the layout of the fragments is just a TextView in a LinearLayout :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Projects List Fragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
But the result I get is the following :
as you can see the content of the fragment overlaps Tab's text when it should appear underneath.
Thanks

Finally, I found alternative solution for this problem.
You can give top padding on your each Tab fragment's layout.
Eg,
android:paddingTop="?attr/actionBarSize"
For instance, my first tab xml looks like below:
<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="wrap_content"
android:paddingTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.upgautam.uddhav.productassignment.uicontrollers.ProductListFragment">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/product_list_string" />
</android.support.design.widget.CoordinatorLayout>
Now, the screen looks like below:

Android: How to display two fragments with RecyclerView in one screen

I have two fragments, each with its own respective RecyclerView list.
The RecyclerView from each of the fragments may contain many items. So, scrolling will mostly be necessary.
My problem is, how do I combine and display these two fragments into one screen using ScrollView, but at the same time, making the scrolling of the RecyclerViews behave as normally (non-sticky, follows the entire screen's scroll).
Thanks.
EDIT:
My layout file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.easyuni.courserecommender.ResultsActivity">
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="#+id/toolbar">
<FrameLayout
android:id="#+id/fragment_container_results_career"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View
android:id="#+id/divider"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_below="#+id/fragment_container_results_career"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#color/divider" />
<FrameLayout
android:id="#+id/fragment_container_results_courses"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:itemIconTint="#333"
app:itemTextColor="#333" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
Screenshot:
(Notice the RecyclerView at the top and bottom scrolls individually)
https://drive.google.com/file/d/0B-glHmJbVcwiVU41WVRHU3g2bkE/view

You can do like this one -
In your activity's layout file, you should have two framelayout for containing your two fragment.
<?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">
<FrameLayout
android:id="#+id/first_fragment_container"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
</FrameLayout>
<FrameLayout
android:id="#+id/second_fragment_container"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
</FrameLayout>
</LinearLayout>
Then in your Activity's onCreate() method, you can use FragmentManager class to add Fragment to the FrameLayout.
getSupportFragmentManager().beginTransaction().add(R.id.first_fragment_container, new YourFirstFragment()).commit();
getSupportFragmentManager().beginTransaction().add(R.id.second_fragment_container, new YourSecondFragment()).commit();

How to use fragments of ViewPager?

I have one MainActivity and ViewPagerAdapter and 3 Tab fragments which I am displaying in my MainActivity with ViewPager in it.(Im using navigation drawer also but its ok.)
As a beginner in android fragments I do not understand how to send data from MainActivity to Tab1,Tab2,Tab3 of ViewPager.
I tried to use this Send data from activity to fragment in android method to send data from MainActivity to Tab1 but application crashes with NullPointerException.
So how can I use fragments such that I can send data from MainActivity to Tab1 (Which is fragment.) and setText and Image in it and update that fragment in Viewpager?
MainActivity.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.thewelp.materialtoolbartest1.MainActivity">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar">
</include>
<org.technoarena.tabs.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:layout_below="#+id/app_bar"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_below="#+id/tabs"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1"
>
</android.support.v4.view.ViewPager>
</RelativeLayout>
<fragment
android:layout_width="#dimen/drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/fragment_drawer"
app:layout="#layout/fragment_navigation_drawer"
android:name="org.technoarena.technoarena2015.NavigationDrawer"
tools:layout="#layout/fragment_navigation_drawer">
</fragment>
</android.support.v4.widget.DrawerLayout>
Tab1.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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="You Are In Tab 1"
android:id="#+id/textView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>

You can have a List for data and pass the data to viewpager adapter in constructor and in view pager you can pass the data to fragment in getItem() function.

Android ViewPager, content between tabs and fragments

Hi i have a main_activity.xml like this
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
/>
I've created a tab-application with the eclipse wizard, which works fine.
But now i want to add a progressbar between the tabs and the content (fragments) which should always be visible. Is this possible?

You have to add the progressbar above the viewpager in the activities xml.

i got it, my solution:
<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:orientation="vertical"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="huhu" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
the TextView is now displayed between tabs and fragments