Fragment overlapping one on another in android

Question

I am fetching data in list view using fragment from MySql and here is a button on the upper side when I used to click on the button it doesn't replace the fragment it overlaps in one to another Before and After clicking on button.

Here is the code where I am fetching data in list view format and on the click button i would like to open a new fragment but its overelapping.

public class PlayQuiz extends Fragment{

public String subject;

String myJSON;
private static final String TAG_RESULTS = "result";  
private static final String TAG_NAME = "subname";

String selcsub;
Button b1;

JSONArray peoples = null;
ArrayList<HashMap<String, String>> personList;

ListView list;
TextView ss,name;

InputStream is = null;
String res = null;
String line = null;

@Override
public View onCreateView(LayoutInflater inflater,
        @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    View rootView = inflater.inflate(R.layout.play_quiz, container, false);

    list = (ListView) rootView.findViewById(R.id.listView);
    ss = (TextView) rootView.findViewById(R.id.textView1);
    b1 = (Button) rootView.findViewById(R.id.button1);

    b1.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub
                PlayQuizSubjectWise fragmentManager = new PlayQuizSubjectWise();//.beginTransaction();
                FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();
                fragmentTransaction.replace(R.id.playsubjectwise, fragmentManager);
                fragmentTransaction.addToBackStack(null);
                fragmentTransaction.commit();
        }
    });
}

Main List xml file

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.sarvashikshan.PlayQuiz" 
android:background="#DCDCDC"
android:id="@+id/playsubjectwise">

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Select Subject"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<ListView
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/textView1"
    android:layout_below="@+id/textView1"
    android:layout_marginTop="16dp" >
</ListView>

<Button
    android:id="@+id/button1"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_alignRight="@+id/listView"
    android:layout_marginRight="44dp"
    android:text="Button" />
</RelativeLayout>

Here is the list xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" 
android:background="#DCDCDC"
>

<TextView
    android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Large Text"
    android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

PlayQuizSubjectWise XML

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="31dp"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/textView1"
    android:layout_alignBottom="@+id/textView1"
    android:layout_marginLeft="35dp"
    android:layout_toRightOf="@+id/textView1"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<RadioGroup
    android:id="@+id/radioGroup1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/textView1"
    android:layout_below="@+id/textView1"
    android:layout_marginTop="45dp" >

    <RadioButton
        android:id="@+id/radio0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true" />

    <RadioButton
        android:id="@+id/radio1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <RadioButton
        android:id="@+id/radio2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <RadioButton
        android:id="@+id/radio3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RadioGroup>

<Button
    android:id="@+id/button1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/radioGroup1"
    android:layout_marginTop="78dp"
    android:text="Next" />

<Button
    android:id="@+id/button2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/button1"
    android:layout_below="@+id/button1"
    android:text="Finish" />

</RelativeLayout>

please post your fragment – jigar savaliya Jul 28 '17 at 07:01 — jigar savaliya, Jul 28 '17 at 07:01
where is the code of `PlayQuizSubjectWise` – jigar savaliya Jul 28 '17 at 07:28 — jigar savaliya, Jul 28 '17 at 07:28

score 6 · Accepted Answer · answered Jul 28 '17 at 08:13

Your second fragment's parent layout must have a background.

PlayQuizSubjectWise XML

<RelativeLayout 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="#FFF"                                        //Here
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >

score 2 · Answer 2 · answered Jul 28 '17 at 06:46

Instead of add use replace

Replace

fragmentTransaction.add(R.id.playsubjectwise, fragmentManager);

with

fragmentTransaction.replace(R.id.playsubjectwise, fragmentManager);

Try this

PlayQuizSubjectWise fragmentManager = new PlayQuizSubjectWise();
FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.playsubjectwise, fragmentManager);
fragmentTransaction.addToBackStack(null);
fragmentTransaction.commit();

can u post yout main fragment where u added – Anil Jul 28 '17 at 06:53 — Anil, Jul 28 '17 at 06:53

score 2 · Answer 3 · answered Jul 28 '17 at 06:46

2

It overlaps because you are calling fragmentTransaction.add which just adds the fragment to the container whilst keeping all old fragments visible.

Instead, use fragmentTransaction.replace which will replace all existing fragments with the new one.

answered Jul 28 '17 at 06:46

Kuffs

35,581
10
79
92

The answer is correct according to the first (unedited) question you asked. If it is not helping something else is the matter. You should provide a reproducible code sample. https://stackoverflow.com/help/mcve – Kuffs Jul 28 '17 at 06:54

Sunil P · Answer 4 · 2017-07-28T07:19:11.873

1

Add background color to your fragment and make fragment clickable

android:background="fff"
android:clickable="true"

edited Jul 28 '17 at 07:19

answered Jul 28 '17 at 06:49

Sunil P

3,698
3
13
20

`R.id.playsubjectwise` check what is playsubjectwise it should be framelayout – Sunil P Jul 28 '17 at 06:53
please check it above i have added all the xml file – Badman Jul 28 '17 at 07:03
which is your fragment xml out of those two – Sunil P Jul 28 '17 at 07:11
The first XML i posted initials are **Main List xml file** – Badman Jul 28 '17 at 07:15
check my updated answer this will solve your problem – Sunil P Jul 28 '17 at 07:19
add this two lines in fragment xml – Sunil P Jul 28 '17 at 07:20
Sorry brother..it's not working same problem :( or I guess there is something silly I am doing – Badman Jul 28 '17 at 07:26
no it should work. make sure that you added this lines in fragment check this meanwhile https://stackoverflow.com/questions/10389620/fragment-over-another-fragment-issue – Sunil P Jul 28 '17 at 07:28

周恩旭 · Answer 5 · 2017-07-28T07:29:38.660

If you want to use replace for fragment, your layout playsubjectwise shouldn't include any view.

You should pick up the TextView, ListView and Button to a new fragment, then you can use replace to toggle two fragment.

MainList xml, just a layout, dont include any view

<RelativeLayout 
    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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.sarvashikshan.PlayQuiz" 
    android:background="#DCDCDC"
    android:id="@+id/playsubjectwise">

</RelativeLayout>

then put those view to a new fragment as TempFragment.

for the start, you execute fragmentTransaction.add(R.id.playsubjectwise, TempFragment);

if you want replace to fragmentManager, execute fragmentTransaction.replace(R.id.playsubjectwise, fragmentManager);

it's fake code, hope you can understand.

didn't understand properly..because if I use same thing in another then whats the meaning i want some another data another view — Badman, Jul 28 '17 at 07:17

score -1 · Answer 6 · answered Jul 28 '17 at 06:54

I have also faced this problem of overlapping of fragments.

For the solution:

Just give the Background Color to the parent layout in all fragments using XML.

For eg.

this is onefragment.xml file

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    **android:background="#fff"**
    android:orientation="vertical">
       <!-- Fragments UI Components-->
</LinearLayout>

So here i have given background color #fff(White color). so like this you should give background color in all fragments

I Hope it will help you :)

this is a band aid. it will just hide the existing fragments and does nothing to explain why they are there in the first place. Much better to fix a problem than hide it. — Kuffs, Jul 28 '17 at 06:55

Fragment overlapping one on another in android

6 Answers6