Search code examples
androidandroid-fragmentsflipview

Changing data dynamically on flip card Fragments using Android


I am trying to use flip animations in Android for practising vocabulary. I have made a container for my Fragments:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:onClick="flipCard"
 />

and two Fragments: fragment_card_flip.xml and fragment_card_back.xml. One is for showing the word and the other, the meaning on the back of the card.

I am getting a word from database randomly and want to change the text in both Fragments i.e., put the word on the front Fragment and the meaning on the back Fragment. In the onClick() in the Fragment I am calling a flipcard() function:

public void flipCard(View view) {
    if (mShowingBack) {
        getFragmentManager().popBackStack();
        mShowingBack=false;
    f = (Fragment) getFragmentManager().findFragmentById(R.id.container);
    if(f!=null)
        ((TextView) f.getView().findViewById(R.id.text)).setText(w);
        return;
    }

    // Flip to the back.

    mShowingBack = true;

    getFragmentManager().beginTransaction().setCustomAnimations(
                    R.animator.card_flip_right_in,
                    R.animator.card_flip_right_out,
                    R.animator.card_flip_left_in,
                    R.animator.card_flip_left_out)

            .replace(R.id.container, new CardBackFragment())
            .addToBackStack(null)
            .commit();
}

This is my attempt to change the word only, not the definition. But I can't change the text data of the Fragment dynamically. Please help me to update both my Fragments dynamically with a new word/meaning from the database.


Solution

  • I think the first step is to change your Fragments so that they take the word they will display as an argument:

    public class CardFlip extends Fragment {
    
        public static String ARGUMENT_WORD = "ARGUMENT_WORD"
    
        public static CardFlip instantiate(String text) {
            CardFlip cardFlip = new CardFlip();
            Bundle argsBundle = new Bundle();
            argsBundle.putString(ARGUMENT_WORD, text);
            cardFlip.setArguments(argsBundle);
            return cardFlip;
        }
    
        @Override
        public void onActivityCreated(Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);
            String text = getArguments().getString(ARGUMENT_WORD);
            ((TextView) findViewById(R.id.text)).setText(text);
        }
    }
    

    Do this for both Fragments. Now you can make fragments dynamically with the words you want.

    Now all you need to do is refactor your flipcard() method so that it uses the static instantiate method rather than the new CardFlip() constructor. Since you always want your Fragments to be up-to-date with the latest words, don't use popBackStack() use FragmentManager.beginTransaction().replace(). Something like this:

    public void flipCard(View view) {
        Fragment frag;
        if (mShowingBack) {
            frag = CardFlip.instantiate(currentWord);
        }
        else {
            frag = CardBack.instantiate(currentWord);
        }
        getFragmentManager().beginTransaction()
               .replace(R.id.fragment_container, frag)
               .commit();
    }
    

    Then all you need is some logic for when to change the word randomly.

    These are all concepts from the official developer's guide so you study this very carefully: consider reading the guide there multiple times and taking notes.