Fragment shows up, doesn't disappear

Question

I am writing an App that requires a layout to appear over another layout when the user presses a certain dropdown-menu style button. I am using Fragments and FragmentTransactions to do this. The Fragment does appear when I click the button (as it should) however when I click the button again, the fragment doesn't disappear.

Here is all relevant code:

MainActivity.java:

package com.example.tipquiz;

import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.ImageView;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.R.anim;

public class MainActivity extends Activity implements OnRatingBarChangeListener {

// Testing Stuff to show the rating value, will need to use later for maths
RatingBar rb;
TextView tv;
// The Image used as the DropDown button, Rotate code below
ImageView dropDownButton;

RelativeLayout dropDownLayout;
Boolean hasRotated = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    dropDownLayout = (RelativeLayout) findViewById(R.id.dropDownLayout);
    dropDownButton = (ImageView) findViewById(R.id.dropDownButton);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}
public void dropDown(View view){
    FragmentManager fm = getFragmentManager();
    FragmentTransaction ft = fm.beginTransaction();
    QuizFragment qf = new QuizFragment();
    ft.setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out);
    if(hasRotated == false){
        dropDownButton.setRotation(90);
        dropDownLayout.setVisibility(View.VISIBLE);
        ft.add(R.id.quizFragment, qf);
        ft.show(qf);
        ft.commit();
        //qf.tv.setVisibility(View.VISIBLE);
        hasRotated = true;
    }else if(hasRotated == true){
        dropDownButton.setRotation(0);
        dropDownLayout.setVisibility(View.GONE);
        //qf.tv.setVisibility(View.GONE);
        hasRotated = false;
        ft.hide(qf);
        ft.remove(qf);
    }
}

@Override
public void onRatingChanged(RatingBar ratingBar, float rating,
        boolean fromTouch) {
    // final int numStars = ratingBar.getNumStars();
    tv.setText(rating + "/5.0");
}
// http://www.compiletimeerror.com/2013/08/android-rating-bar-example.html#.U7SZ5fldXm4
// http://custom-android-dn.blogspot.ca/2013/01/how-to-use-and-custom-ratingbar-in.html
}

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#bbcde3"
android:orientation="vertical" >

<GridLayout
    android:id="@+id/gridLayout1"
    android:layout_width="fill_parent"
    android:layout_height="35dip"
    android:background="#e3e3e3"
    android:columnCount="2"
    android:gravity="right"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/button1"
        android:layout_width="108dp"
        android:layout_height="match_parent"
        android:layout_column="1"
        android:layout_gravity="right|top"
        android:layout_row="0"
        android:background="#3fa9f5"
        android:fontFamily="helvetica"
        android:text="@string/settings_button"
        android:textColor="#ffffff"
        android:textSize="14sp"
        android:textStyle="bold" />
</GridLayout>

<Space
    android:layout_width="match_parent"
    android:layout_height="12sp" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/textView2"
    android:layout_below="@+id/gridLayout1"
    android:layout_marginTop="24dp"
    android:text="@string/rys"
    android:textColor="#888888"
    android:textSize="19sp" />

<RatingBar
    android:id="@+id/ratingBar1"
    style="@style/circleRatingBar"
    android:layout_width="wrap_content"
    android:layout_height="47dp"
    android:layout_alignLeft="@+id/textView1"
    android:layout_below="@+id/textView1"
    android:numStars="5"
    android:rating="3.0"
    android:stepSize="1.0" />

<ImageView
    android:id="@+id/dropDownButton"
    android:layout_width="48dip"
    android:layout_height="48dip"
    android:layout_alignBottom="@+id/ratingBar1"
    android:layout_toRightOf="@+id/ratingBar1"
    android:onClick="dropDown"
    android:src="@drawable/ddb" />

<RelativeLayout
    android:id="@+id/dropDownLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignTop="@+id/textView2"
    android:visibility="gone" >

    <TextView
        android:id="@+id/testTV"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Testing dropdown" />
</RelativeLayout>

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/ratingBar1"
    android:layout_marginLeft="14dp"
    android:layout_marginTop="16dp"
    android:text="@string/tipTitle"
    android:textColor="#888888"
    android:textSize="19sp" />

<FrameLayout
    android:id="@+id/quizFragment"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/dropDownButton" />


</RelativeLayout>

Thanks in advance.

Answer 1

You're adding a new fragment everytime i.e Just write the below statement outside the function.

QuizFragment qf = new QuizFragment();

and also you missed

   ft.commit();

in the second case(hasRotated=true).

What your code is essentially doing is ,creating a new fragment and then adding it in the first case( hasRotated=false) and in the second case(hasRotated=true) its creating a new one and trying to remove this new fragment(which has not been added to the view) instead of trying to remove the previously created fragment.

Answer 2

You forgot to .commit() your transaction when hasRotated is true.

Also, you're attempting to remove a newly created instance of QuizFragment -- not the existing one. Use FragmentManager.findFragmentById() to get a reference to the existing Fragment, then call remove() with that reference.

Fragment quizFragment = fm.findFragmentById(R.id.quizFragment);
if (quizFragment != null) {
    ft.remove(quizFragment);
    ft.commit();
}

Also, it's preferable to just use if (!hasRotated) rather than if (hasRotated == false).