Develop Reference

fragments overlap in one screen

I am now practicing on ViewPager and Fragments but I am facing an issue with replacing fragment to one another.
It is working well with swiping screen to move to another fragment, but I also wanted to try out if I can do this with a button too.
So I added a button, and tried to use FragmentManager's replace() method.
But what it actually does is not replacing the fragment but adding the fragment on the current fragment.
In a simple word, it overlaps.
Could not really find anything helpful for hours now, can anyone please help me with it?
Here is my code of the fragment that has the button:
public class MainActivity extends Fragment {
Fragment fragment;
FragmentManager fragmentManager;
FragmentTransaction fragmentTransaction;
Button buildButton;
private ViewPager viewPager;
public static Fragment newInstance(Context context) {
MainActivity mainActivity = new MainActivity();
return mainActivity;
}
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, Bundle savedInstanceState) {
ViewGroup root = (ViewGroup) inflater.inflate(R.layout.main, null);
return root;
}
#Override
public void onActivityCreated(#Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
buildButton = (Button) getView().findViewById(R.id.buildButton);
buildButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
fragment = new SecondActivity();
fragmentManager = getActivity().getSupportFragmentManager();
fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.calendarActivity, fragment);
fragmentTransaction.addToBackStack(null);
fragmentTransaction.commit();
}
});
}
}
And this is the xml file of the fragment:
<?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"
tools:context=".MainActivity">
<fragment class="com.example.auclo.calendarpractice5.MainActivity"
android:id="#+id/calendarActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button
android:id="#+id/buildButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="100dp"
android:layout_marginEnd="148dp"
android:layout_marginStart="148dp"
android:layout_marginTop="16dp"
android:text="Track"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/calendarView" />
</android.support.constraint.ConstraintLayout>
And this is the fragment that I want to replace to:
public class SecondActivity extends Fragment {
TextView textView;
public static Fragment newInstance(Context context) {
SecondActivity secondActivity = new SecondActivity();
return secondActivity;
}
#Nullable
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
ViewGroup root = (ViewGroup) inflater.inflate(R.layout.activity_second, null);
return root;
}
#Override
public void onActivityCreated(#Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
textView = getView().findViewById(R.id.textView);
}
}
And xml of the second fragment:
<?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=".SecondActivity">
<fragment class="com.example.auclo.calendarpractice5.SecondActivity"
android:id="#+id/secondActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pikachu"
android:textSize="18sp" />
</RelativeLayout>
I will really appreciate to any kind of help.
Thank you!

The issue is that you're replacing the element with ID calendarActivity with your new fragment. This element is inside the XML for your first fragment (I think, based on your post). So it's putting this fragment in your old fragment.
You'll need to instead use the id in R.layout.main that represents your first fragment. I usually use a framelayout for this. Then I have the activity replace that framelayout with a fragment in its onCreate().

To add the same visual effects, you have to add a animation to your fragmentTransaction
Exemple:
fragmentTransaction.setCuston(
R.anim.enter_from_right,
R.anim.exit_to_left);
See this answer for explanation on fragments animations

having a condition to fragment adding

for the last 4 hours ive been trying to understand how to do it.
to be clear, i need to add a fragment under a certain condition and for my purpose the condition can be either:
a. if the parent's id matches to what i seek.
b. if the fragment's id matches to what i seek.
i tried to put the condition inside the fragment itself:
public class BlockFrag extends Fragment{
SharedPreferences sp;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
sp = getActivity().getSharedPreferences("myOptions", Context.MODE_PRIVATE);
int id = container.getId();//didn't work(i think the container is null for some reason
switch (id)
{
default: return inflater.inflate(R.layout.nothing, container, false);
case (R.id.redFrame): {
if (sp.getBoolean("redBlock", true)) {
return inflater.inflate(R.layout.block_frag, container, false);
}
}
case (R.id.greenFrame): {
if (sp.getBoolean("greenBlock", true)) {
return inflater.inflate(R.layout.block_frag, container, false);
}
i also tried to get the condition programatically but i cant understand how to prevent the fragment to automatically generate when i call the layout it's placed.
this is the layout it's placed for example
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/redFrame"
android:layout_weight="0.33333">
<fragment
android:name="com.example.dor.myapplication.BlockFrag"
android:id="#+id/blockRed"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="#layout/block_frag"/>
this is the fragment's layout if it matters...
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<ImageView
android:layout_width="118dp"
android:layout_height="match_parent"
android:id="#+id/blockFrag"
android:src="#drawable/block"
android:layout_weight="0.33333"
android:layout_above="#+id/linearLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_gravity="left"
android:scaleType="fitXY"/>
thank you for helping, any kind of way to do this will help me.

I did something similar earlier, I had to decide based on a value from PickHeaderFragment which Fragment to show inside my root_frame_body, here's how I achieved it:
My Parent or Host Fragment:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#000"
android:layout_height="wrap_content"
android:id="#+id/root_frame_header" />
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#000"
android:layout_weight="1"
android:layout_height="match_parent"
android:id="#+id/root_frame_body" />
</LinearLayout>
Inside my Host Fragment:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
View rootView = inflater.inflate(R.layout.fragment_pick, container, false);
headerFragment = PickHeaderFragment.newInstance("");
getChildFragmentManager().beginTransaction().replace(R.id.root_frame_header, headerFragment).commit();
}
My PickHeaderFragment has an OnPickHeaderFragmentInteractionListener Interface implemented which looks like this:
public interface OnPickHeaderFragmentInteractionListener {
public void onFragmentInteraction(int res);
}
I ensure my Host Fragment will implement this interface by adding it during onAttach (inside PickHeaderFragment) like so:
#Override
public void onAttach(Activity activity) {
super.onAttach(activity);
try {
Fragment f = getParentFragment();
mListener = (OnPickHeaderFragmentInteractionListener) getParentFragment();
} catch (ClassCastException e) {
throw new ClassCastException(activity.toString() + " must implement OnFragmentInteractionListener");
}
}
Now, when the enter Button inside my PickHeaderFragment is clicked I call this event to let my Host Fragment know to change the root_frame_body:
Inside my Host Fragment I have:
#Override
public void onFragmentInteraction(int res) {
if (res == R.id.btnEnter) {
getChildFragmentManager().beginTransaction().replace(R.id.root_frame_body, new PickByItemBodyFragment()).commit();;
}
}
I am now able to change the layout (or which Fragment is displayed) in my Host Fragment after an event occurs inside a child Fragment.
Note: In my example I have nested Fragments, but you could just as easily have several Fragments within an Activity.
In summary I would recommend you follow a similar pattern of having a host Activity or Fragment and ensuring you have a FrameLayout added to your view to allow you to inflate whatever Fragment you need.
An added benefit to doing it this way is that you can segregate your code into separate Fragments also.

Leigh thank you for your answer but i don't know if you didn't understand my question or i didn't understand your answer...
anyway, i solved my problem through programatically adding the fragment in r=the onCreate of the activity and inserting the adding to an "if"
BlockFrag rb = new BlockFrag();
FragmentManager fragmentManager = getFragmentManager ();//declaring Fragment Manager
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction ();// declaring Fragment Transaction
if(condition)
{
editor.putBoolean("redBlock", true);
fragmentTransaction.add(R.id.redFrame, rb);//adding the fragment
}
needless to say i didn't declare the fragment in my activity layout and didn't perform any changes in the fragment class or fragment xml layout.

fragments: onCreateView is not called after fragment was added

I have simple app with fragments.
At the beginning list of fragments is empty.
And there are 2 buttons:
ADD FRAGMENT
REMOVE FRAGMENT
And following use-case:
Add fragment
Add fragment
Remove first fragment
Add fragment
As result onCreateView() on 4th step is not executed.
If I add fragment again on 5th step - onCreateView is executed again.
Why is it so? I didn't find right answer in google.
Source code:
public class MyActivity extends FragmentActivity {
private ViewPager pager;
private FragmentAdapter adapter;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
pager = (ViewPager) findViewById(R.id.pager);
final Button addButton = (Button) findViewById(R.id.add_button);
addButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
adapter.addFragment(new MyFragment());
adapter.notifyDataSetChanged();
}
});
final Button removeButton = (Button) findViewById(R.id.remove_button);
removeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
adapter.removeFragment(0);
adapter.notifyDataSetChanged();
}
});
adapter = new FragmentAdapter(getSupportFragmentManager());
pager.setAdapter(adapter);
pager.setOffscreenPageLimit(10);
}
private class FragmentAdapter extends FragmentStatePagerAdapter {
final List<MyFragment> fragments = new ArrayList<MyFragment>();
public FragmentAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int i) {
return fragments.get(i);
}
#Override
public int getCount() {
return fragments.size();
}
public void addFragment(MyFragment fragment) {
fragments.add(fragment);
}
public void removeFragment(int index) {
fragments.remove(index);
}
}
private class MyFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment, container, false);
}
}
}
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add"
android:id="#+id/add_button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Remove first"
android:id="#+id/remove_button"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
fragment.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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"/>
</LinearLayout>

OnCreateView() is only called when the actual Fragment is being drawn on the screen. Since you have removed a fragment at the beginning the pager no longer looks at the same fragment.
To better understand what is going on put a visible number on each of the fragments and then try adding and removing the fragments.

The issue is 'FragmentStatePagerAdapter' and the way it's implemented. The way to fix it is this:
Go to googlesource and grab the source for 'FragmentStatePagerAdapter'.
refactor (name, package,etc) to make it your own implementation.
Extend from your NEW version of 'FragmentStatePagerAdapter'
Modify your NEW version of 'FragmentStatePagerAdapter' using these steps below:
a) Change the mFragments.set(index, object) command to mFragments.add(index, object), in the the 'instantiateItem()' function.
b) Change the mFragments.set(index, object) command to mFragments.remove(index), in the 'destroyItem' function.
All of this assumes that you are using an ArrayList to hold fragments in your 'extends' class and that they are synced to match the ViewPager.
You will need to add a 'pageIndex' to each fragment, so that you can tell ViewPager when your item has 'moved' (due to deleting an item, that is NOT the LAST item).
This took several days to run down...hope it helps someone :-)

Null Object that is a child of a Fragment

I have a Fragment that is part of a ViewPager. In this Fragment I have a ViewGroup child. Now, why in my MainActivity's onCreate() after having instantiated my ViewPager and adapter, my Container is getting null?
Here is my onCreate():
private MyAdapter mAdapter;
private ViewPager mPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAdapter = new MyAdapter(getSupportFragmentManager());
mPager = (ViewPager) findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
mContainerView = (ViewGroup) findViewById(R.id.container);
//Here mContainerView is already null
...
}
Here is the Fragment that is part of a ViewPager that contains mContainerView
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This is my ViewGroup -->
<LinearLayout android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:showDividers="middle"
android:divider="?android:dividerHorizontal"
android:animateLayoutChanges="true"
android:paddingLeft="16dp"
android:paddingRight="16dp" />
</ScrollView>
<TextView android:id="#android:id/empty"
style="?android:textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="32dp"
android:text="#string/message_empty_layout_changes"
android:textColor="?android:textColorSecondary" />
</FrameLayout>

If I'm reading your question correctly, you're trying to access the Fragment's View (and children) using the Activity's findViewById() method. That shouldn't work since the Fragment inflates its own layout and Fragments are not traditional Views.
If you know the Fragment is instantiated and you can retrieve it, you can get an instance of the ViewGroup using
yourFragment#getView().findViewById()
If not, you can make an interface that your Activity implements with a method that accepts a ViewGroup as the argument. Then in the Fragment's onCreateView(), have the Fragment pass the ViewGroup off to the interface. You can cast directly to your Activity, but an interface is cleaner.
Eg
public class Fragment {
public interface ViewGroupCreateListener{
public void onViewGroupCreated (ViewGroup v);
}
private ViewGroupCreateListener listener;
public void onAttach (Activity a){
super.onAttach (a);
listener = (ViewGroupCreateListener) a;
}
public View onCreateView (/*all its arguments here*/){
View v = inflater.inflate (R.layout.your_layout);
ViewGroup group = v.findViewById (R.id.container);
listener.onViewGroupCreated(group);
return v;
}
}
Your Activity would look something like:
public class MainActivity extends Activity implements ViewGroupCreateListener, OtherInterface1, OtherInterface2{
private ViewGroup mViewGroup;
public void onViewGroupCreated (ViewGroup v){
mViewGroup = v;
}
}
This is nice since if the pager re-instantiates the Fragment, the Activity still gets a valid instance of the ViewGroup.
Or, if depending on what you're actually trying to achieve with this ViewGroup, you may be able to do this processing inside the Fragment itself.

Activity with fragments crashes like if it were nested fragments

I guess everybody knows the project that is created when you choose "master detail flow" when creating your project in eclipse.
Theres layouts for the left side, for the right side and a two_pane layout with a fragment and a Framelayout as a fragment container. This works fine.
Now I have a 'main' activity A with a viewpager, fragments etc., and i call the activity from a fragment with the Callback. From that activity A I start a new activity B. That activity B is set up exactly like that example activity from eclipse that I just talked about.
Now I have the problem that the app crashes with
ERROR/AndroidRuntime(8105): Caused by: java.lang.IllegalArgumentException: Binary XML file line #57: Duplicate id 0x7f080024, tag null, or parent id 0x0 with another fragment for FragmentNumber3
When I replace the fragment in the two_pane layout with another framelayout, it doesn't crash.
This problem is typical for nested fragments, but I don't have nested fragments here, right? I have an activity B that, at that point, doesn't have anything to do with my activity A.
What's the problem here?
Edit: This is my Activity B:
public class SucheActivity extends FragmentActivity implements
SearchboxFragment.SearchboxListener {
private boolean mTwoPane;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.searchbox);
getActionBar().setDisplayHomeAsUpEnabled(true);
if (findViewById(R.id.searchresult_container) != null) {
mTwoPane = true;
}
}
}
And thats the two_pane layout for the activity, the searchbox should be left, the searchresults right:
<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:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:baselineAligned="false"
android:divider="?android:attr/dividerHorizontal"
android:orientation="horizontal"
android:showDividers="middle" >
<fragment
android:id="#+id/searchbox_fragment"
android:name="com.example.layouttest.SearchboxFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<FrameLayout
android:id="#+id/searchresult_container"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3" />
</LinearLayout>
Heres the SearchboxFragment class:
public class SearchboxFragment extends Fragment {
SearchboxListener mCallback;
View v;
public interface SearchboxListener {
public void onSearchStarted();
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
v = inflater.inflate(R.layout.searchbox, container, false);
return v;
}
}
The searchresultfragment:
public class SearchResultFragment extends Fragment {
public SearchResultFragment() {
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.searchresult, container, false);
}
#Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
}
}
And the refs.xml in res/values-large:
<resources>
<item name="searchbox" type="layout">#layout/haussuche_twopane</item>
</resources>

Okay, so this is what I found out:
I cant set the layout of my Activity to searchbox.xml (and have it alias'd in refs.xml with two_pane.xml) AND set the Layout of SearchboxFragment to searchbox.xml.
I thought that searchbox.xml was never shown by the Activity in two-pane-mode, I could safely set it elsewhere, but that's wrong.
What I did was copy that layout and use a searchbox_onepane.xml and searchbox_twopane.xml.