Develop Reference

How to create a ViewPager with 3 Fragments inside a Fragment on the same page?

I want to create an application to display 3 different fragments inside a fragment using ViewPager. The fragments will look like in the picture shown down below:
Click here to see the picture
And later on, when user clicks on one of these fragments, another fragment will be opened to display only that specific fragment.
Is this possible? Any recommendations would be appreciated! Thanks!

It really takes 3 minutes.
You have to give each container/view/widget a 0dp which means "match_constrains", in other words: your size will be determined by the constrains you have (after they have been ran by the algorithm).
In the following Layout there are three widgets (I used the "new" FragmentContainerView but they can be FrameLayout instances as well.
Notice in all three:
width/height is set to 0dp (aka: match_constrains)
Fragment one:
Top to Top of Parent (top of the screen)
Start to Start of Parent (left/start of the screen)
End(right) to Start(left) of Fragment Two.
Bottom to Top of Fragment Three.
Fragment Two:
Top to Top of Parent (top of the screen)
Start(left) to End(right) of Parent
End(right) to End of Parent (right/end of the screen)
Bottom to Top of Fragment Three.
Fragment Three:
Top to bottom of Fragment One (here I chose Fragment One, but could have used "two" or even a guideline set at 50%, this is fine)
Start and End both pointing to the respective parent (since we want FR3 to use all the available width)
Bottom to Bottom of Parent (fragment three goes all the way down).
The result looks like this:
And here's the Layout.
Now go and spend some time learning Constraint Layout. :)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_blue_bright"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/fragment_two"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/fragment_three" />
<androidx.fragment.app.FragmentContainerView
android:id="#id/fragment_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_blue_dark"
app:layout_constraintStart_toEndOf="#id/fragment_one"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/fragment_three" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment_three"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_purple"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/fragment_one"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Switch between multiple views in Android Studio design

I have an activity that presents a list and some icons. My activity design contains a ConstraintLayout at the top level with the list and the icons as children.
Now there can be a situation where we don't have any data. In that case I would like the activity to show neither list nor icons but instead show an image and some error text.
How would I go about implementing this in a way that I can still edit the layout in the Android Studio design view? In other words, not just add the image and the error text overlapping my normal activity elements and toggle their visibility programmatically. Are there layers or something? Or switchable fragments?
Or like this: How can I group view elements in a way that I can show and hide the whole group in the designer?

Yes, in android are Fragments (Android docs) and You can create two fragments, one for a situation when data is loaded successfully and second if data isn't loaded. You can start with the first fragment and when You get information about failed loading data You can switch fragments to second with information about fail.
But I think You can do this in one ConstraintLayout layout. In Your main layout add on top image as You would like to display it and set visibility parameter android:visibility="gone". Now You see everything and can create UI in design mode. And when You get information about failed with loading data just change image parameter to visible.
To do it programmatically:
ImageView imageView = findViewById(R.id.imageDataFailed);
imageView.setVisibility(View.VISIBLE);
How it looks with two containers:
<androidx.constraintlayout.widget.ConstraintLayout 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">
<!-- Here is container for success data load. When You failed load data set visibility="gone"-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button Success"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- Here is container for failed data load. If You want to change design just set `visible`-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button Failed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Fragment Button is found by Activity's findViewById instead of Fragment's inflated view.findViewById

I'm seeing this strange behavior and couldn't find anything similar to this.
So I have a parent Activity and inside is a Fragment, which I'm including in parent via include element and then in parent's onCreate, create Fragment and replace it with this include layout (Tell me if this is a right way? I was using FrameLayout but then switched to include and defined an id to it).
Activity
<androidx.constraintlayout.widget.ConstraintLayout
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.sourcey.materiallogindemo.CustomerDetailActivity"
tools:ignore="MergeRootFrame">
<com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.appbar.MaterialToolbar />
</com.google.android.material.appbar.AppBarLayout>
<include
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/app_bar"
app:layout_constraintBottom_toTopOf="#id/layout_bottom_bar"
layout="#layout/fragment_customer_detail" />
<androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomappbar.BottomAppBar>
</com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Fragment
<androidx.constraintlayout.widget.ConstraintLayout
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"
tools:context="com.sourcey.materiallogindemo.CustomerDetailFragment"
android:layout_height="match_parent"
android:layout_width="match_parent">
<!-- THIS IS THE CULPRIT -->
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_update_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<com.google.android.material.button.MaterialButton />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/sku_list"
app:layoutManager="LinearLayoutManager"
tools:context="com.sourcey.materiallogindemo.CustomerDetailFragment"
tools:listitem="#layout/fragment_s_k_u_item" />
</androidx.constraintlayout.widget.ConstraintLayout>
Fragment is inflated correctly but when I do this inside onCreateView
rootView.btn_update_position.setOnClickListener {
// ... log something
}
and press the Button, it doesn't do anything? Even though most findings were led to this suggestion that I should inflate the view and then set onClickListener.
I also tried doing these
rootView.findViewById<MaterialButton>(R.id.btn_update_position).setOnClickListener {
// ... log something
}
and
val button = rootView.findViewById<MaterialButton>(R.id.btn_update_position)
button.setOnClickListener {
// ... log something
}
but none of them works.
I also tried above approaches in onViewCreated to see if maybe I was not getting the reference but no errors were thrown and no reaction was coming.
Only thing that works is this
activity?.findViewById<MaterialButton>(R.id.btn_update_position)
?.setOnClickListener {
// ... log something
}
I'm trying to understand why this happens? Could this be the issue of using include the Fragment?
NOTE I'm not a pro in android just do hobby work in it so don't know very deeply about it.
EDIT As you can see I have a RecyclerView in Fragment layout, I'm inflating the layout and then setting its adapter items which seems to work fine opposed to button.
rootView.sku_list.adapter = Adapter()

I'm bit confused about what you want to do here
First,<include> doesn't create new view, it just include the xml into the parent xml file so basically it still on activity and you need activity to findViewById
Second, about your question what different between FrameLayout and <include>.
With <include> like i said above, it just add xml file to the parent file, the main usage is for re-use layout (you can include it anywhere) .
With FrameLayout, from official doc : "FrameLayout is designed to block out an area on the screen to display a single item". E.g : you want your layout have a header and footer for all screen, only the middle part change so place a frame layout at middle then load different view for each screen, because that flexibility frame layout usually use for display fragment (you can google how to use frame layout for more details)

How to handle multiple NavHosts/NavControllers?

I'm having a problem when dealing with multiple NavHosts. This issue is very similar to the one asked here. I think the solution for this question would help me as well, but it's a post from 2017 and it still has no answer. Android Developers Documentation doesn't help and searching through the web shows absolutely nothing that could possibly help.
So basically I have one Activity and two Fragments. Let's call them
FruitsActivity, FruitListFragment, FruitDetailFragment, where FruitsActivity has no relevant code and its xml layout is composed by a <fragment> tag, serving as NavHost, like that:
<fragment
android:id="#+id/fragmentContainer"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="#navigation/fruits_nav_graph"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
The FruitListFragment is the startDestination of my NavGraph, it handles a list of fruits that will come from the server.
The FruitDetailFragment shows details about the Fruit selected in the list displayed by FruitListFragment.
So far we have Activity -> ListFragment -> DetailFragment.
Now I need to add one more Fragment, called GalleryFragment. It's a simple fragment that displays many pictures of the Fruit selected and it's called by FruitDetailFragment when clicking a button.
The problem here is: In Portrait mode I simply use findNavController().navigate(...) and I navigate through the Fragments like I want. but when I'm using a Tablet in Landscape mode, I'm using that Master Detail Flow to display List and Details on the same screen. There is an example of how it works here, and I want the GalleryFragment to replace the FruitDetailFragment, sharing the screen with the list of fruits, but so far I could only manage to make it replace the "main navigation" flow, occupying the entire screen and sending the FruitListFragment to the Back Stack.
I already tried to play around with findNavController() method, but no matter from where I call it I can only get the same NavController all the time, and it always navigates in the same linear way.
I tried to implement my own NavHost, but I get and error "class file for androidx.navigation.NavHost not found".
This is the xml of my FruitsActivity:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/fragmentContainer"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="#navigation/listing_nav_graph"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</layout>
This is the xml of the FruitListActivity in Landscape mode (in portrait mode there is just the RecyclerView):
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvFruits"
android:layout_weight="3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"/>
<FrameLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/sideFragmentContainer"
android:name="fruits.example.FruitDetailFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</LinearLayout>
</RelativeLayout>
</layout>
And now I want to call the GalleryFragment and make it replace just the <fragment> of id 'sideFragmentContainer' instead of the whole screen (instead of replacing the <fragment> of id fragmentContainer in the Activity's xml).
I didn't find any explanations of how to handle multiple NavHosts or <fragment> inside <fragment>.
So based on that, is it possible to use Navigation Architecture and display a Fragment inside another Fragment? Do I need multiple NavHosts for that, or is there another way?

As suggested by jsmyth886, this blog post pointed me to the right direction.
The trick was to findFragmentById() to get the NavHost directly from the fragment container (in this case, the one sharing the screen with the rest of the Master Detail screen). This allowed me to access the correct NavController and navigate as expected.
It's important to create a second NavGraph too.
So a quick step-by-step:
Create the main NavGraph to make all the usual navigation (how it would work without the Master Detail Flow);
Create a secondary NavGraph containing only the possible Destinations that the Master Detail fragment will access. No Actions connecting then, just the Destinations.
In the main <fragment> container, set the attributes like that:
<fragment
android:id="#+id/fragmentContainer"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="#navigation/main_nav_graph"
app:defaultNavHost="true"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
The app:defaultNavHost="true" is important. Then the Master Detail layout will look like that:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvFruits"
android:layout_weight="3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"/>
<FrameLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/sideFragmentContainer"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="#navigation/secondary_nav_graph"
app:defaultNavHost="false"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</LinearLayout>
</RelativeLayout>
</layout>
Again, the attribute app:defaultNavGraph is important, set it to false here.
In the code part, you should have a boolean flag to verify if your app is running on a Tablet or not (the link provided in the beginning of the answer explains how to do it). In my case, I have it as a MutableLiveData inside my ViewModel, like that I can observe it and change layouts accordingly.
If is not tablet (i.e. follows the normal navigation flow), simply call findNavController().navigate(R.id.your_action_id_from_detail_to_some_other_fragment). The main navigation will happen using the main NavController;
If is tablet using the Master Detail Flow, you must find the correct NavHost and NavController by finding the <fragment> that contains it, like that:
val navHostFragment = childFragmentManager.findFragmentById(R.id. sideFragmentContainer) as NavHostFragment
And finally you can navigate to the Fragment that you want to appear dividing the screen with the rest of the Master Detail screen by calling navHostFragment.navController.navigate(R.id.id_of_the_destination). Notice that here we don't call Actions, we call the Destination directly.
That's it, simpler than what I thought. Thank you Lara Martín for the blog post and jsmyth886 for pointing me to the right direction!

Android - Recycler view resizes when app is on background

I have this very weird bug on my app. Every time I open my app my view works perfectly, but when I try to put my app in background and open my app again, my recycler view resizes.
Here's an image to describe it properly:
This is the correct image:
This is the image that messes up my recyclerview when the app is on background, then I open it again.
There are also times that all images in my recyclerview are gone. Here's a screenshot:
This is my onResume() code:
public void onResume()
{
Fragment fragment = getSupportFragmentManager().findFragmentById(R.id.fragment_container);
if (fragment instanceof MenuFragment)
{
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.remove(fragment);
transaction.commit();
transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.fragment_container, fragment);
transaction.addToBackStack(null);
transaction.commit();
}
}
This is my view pager layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:background="#drawable/app_background">
<android.support.constraint.ConstraintLayout
android:id="#+id/action_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<include
android:id="#+id/nav_bar"
layout="#layout/home_screen_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<com.yotadevices.widget.RtlViewPager
android:id="#+id/menuFragment_viewPager"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toTopOf="#+id/buttons"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nav_bar"/>
<include
android:id="#+id/buttons"
layout="#layout/navigation_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/menuFragment_viewPager" />
</android.support.constraint.ConstraintLayout>
Here's my list layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
What do you think is the problem here?
PS: The bug occurs only on selected phones. Not all. We've tested this on Samsung Galaxy s8+ and it works well.

I have solved the problem by breaking part the included layouts. So instead of adding an included layout, I just transferred all the included in to the main XML layout.
Even though this fixed the problem, i still do not know why the bug occurred in the first place.

If you are using only single child view, it's better to use FrameLayout. Then in RecyclerView use match_parent parameters in layout attribute, so your code should look like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
By the way my best method to debug scenarios like this is to write android:background="#0000FF" in every view, to see how it inflates.

You don't need to first remove the old fragment if you are going to call replace(R.id.container_id, newFragment);
You don't need to call commit after every change (remove(), replace(), etc.), call all your changes then end it with a commit()
If your activity did not lose/change its state (e.g. rotate), then you are just removing and adding the same fragment for no reason
You are checking if it is a MenuFragment in the if statement, then, oddly enough, if the condition holds, you go and re-add the MenuFragment, when you should probably replace it if it's not a MenuFragment
if (!(fragment instanceof MenuFragment)) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
Fragment menuFragment = new MenuFragment();
// pass any data...
transaction.replace(R.id.fragment_container, menuFragment);
transaction.addToBackStack(null);
transaction.commit();
}
Adding Log.d(TAG, "method name") in your onResume(), onPause() might help you know what's happening.
Also, checking the view hierarchy in Tools > Layout Inspector might also help.
Enabling Settings > Developer Options > Show Layout Bounds on your emulator might also help.
Let me know if I had anything wrong. Also let me know if any of this works for you.

To start off, declare your layouts in a more specific way rather than using root elements that are certainly not used.
Here's the list layout:
<android.support.v7.widget.RecyclerView
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:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Second, the onPause is mainly responsible for saving the app state automatically if you don't have much to implement. It is best to remove the onResume and let it take care of itself.

keep width of recyclerview as match_parent and height as wrap_content,
after that ,for your item layout,put height and width as a fixed value,such as 50dp or 70dp, which can keep the item's height and width same in any mode u want.
i hope this helps,if this answer is not helpful,please ignore this answer.

You must use a subclass of android.support.v4.app.FragmentStatePagerAdapter to load Fragments rather then putting code in on resume.
public class PagerAdapter extends FragmentStatePagerAdapter {
private static final int ITEMS = 4;
PagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int i) {
switch (i) {
case 0:
return Fragment1.newInstance();
case 1:
return Fragment2.newInstance();
case 2:
return Fragment3.newInstance();
case 3:
return Fragment4.newInstance();
}
return null;
}
#Override
public int getCount() {
return ITEMS;
}
}
The new instance method of each fragment must be:
public static Fragment1 newInstance() {
return new Fragment1 ();
}
In your activity write following in onCreate method:
PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager());
//rtlViewPager -- object of RtlViewPager
rtlViewPager.setAdapter(pagerAdapter);
rtlViewPager.setOffscreenPageLimit(4);