[Android / Java] Screen transition and return processing in fragments

Introduction

I'm learning to develop mobile apps using Java in Android Studio. I haven't put much effort into the layout file (roughly). I didn't use the string file because I focused on the screen switching operation.

What I learned

--Switching display fragments using FragmentManager```` FragmentTransaction (screen transition) --`ʻaddToBackStackAction bar using popBackStack`` Back button Click back action

Overview of the sample app created for learning

A simple app that allows you to prepare the main fragment for one activity and switch between the two fragments by pressing a button from there. Activity: 1 Fragment: 3 (1 main, 2 sub)

Click these ① and ② buttons to transition to subfragment 1 and subfragment 2, respectively.

Main screen (MainFragment)

Sub1 screen (SubFragment1)

Sub2 screen (SubFragment2)

Directory structure

Processing contents of each java file

• MainActivity.java --Display of Main Fragment --Define a method to display the button "←" that returns to the action bar of SubFragment.

• MainFragment.java --Define a method to switch the display of Fragment --Click of the installed button Call the method to switch between listener and Fragment

• SubFragment(1, 2).java --Display button to return to action bar --Describe the process to return when the back button is clicked

File code and description

Describe the code of each file

layout file

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activityMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

</FrameLayout>

fragment_main.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fragmentMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="25dp"
        android:text="It's the main fragment"/>

    <Button
        android:id="@+id/bt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="250dp"
        android:layout_marginLeft="70dp"
        android:textSize="25dp"
        android:text="①"/>

    <Button
        android:id="@+id/bt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="250dp"
        android:layout_marginLeft="250dp"
        android:textSize="25dp"
        android:text="②"/>

</FrameLayout>

fragment_sub1.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/SubFragment1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SubFragment1">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="25dp"
        android:text="It's subfragment 1"/>

</FrameLayout>

fragment_sub2.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/SubFragment2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SubFragment2">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="25dp"
        android:text="Subfragment 2" />

</FrameLayout>

java file

• Package and import statements are not described.

MainActivity.java

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Call method and display MainFragment by default
        addFragment(new MainFragment());
    }

    //Define a method to display Fragment (pass the Fragment you want to display as an argument)
    private void addFragment(Fragment fragment) {
        //Get Fragment Manager
        FragmentManager manager = getSupportFragmentManager();
        //Start of fragment transaction
        FragmentTransaction transaction = manager.beginTransaction();
        //Added Main Fragment
        transaction.add(R.id.activityMain, fragment);
        //Fragment transaction commit. The state of Fragment is reflected by committing
        transaction.commit();
    }

    //Define a method to set the back button "←" to the action bar (upper bar)
    public void setupBackButton(boolean enableBackButton) {
        //Get action bar
        ActionBar actionBar = getSupportActionBar();
        //Set the button "←" to return to the action bar (argument is true):Display, false:Hidden)
        actionBar.setDisplayHomeAsUpEnabled(enableBackButton);
    }
}

I want to display the specified fragment on the screen display, so do transaction.add

Enter such a value as an argument

transaction.add (R value of the layout screen part to be added, Fragment object to be added (want to display));

MainFragment.java

MainFragment.java

public class MainFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        //Inflate the screen displayed as a fragment from the layout file
        View view = inflater.inflate(R.layout.fragment_main, container, false);

        //Get the parent activity to which you belong
        MainActivity activity = (MainActivity) getActivity();
        //Set the title on the action bar
        activity.setTitle("Main fragment");
        //Hide the back button (Main Fragment does not require a back button)
        //If you do not set this to false, the back button will remain displayed when returning from the subfragment.
        activity.setupBackButton(false);

        //Get button element
        Button bt1 = view.findViewById(R.id.bt1);
        Button bt2 = view.findViewById(R.id.bt2);

        //① Processing when the button is clicked
        bt1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Transition to SubFragment1
                replaceFragment(new SubFragment1());
            }
        });

        //② Processing when the button is clicked
        bt2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Transition to SubFragment2
                replaceFragment(new SubFragment2());
            }
        });

        return view;
    }

    //Define a method to switch the Fragment to be displayed (pass the Fragment you want to display as an argument)
    private void replaceFragment(Fragment fragment) {
        //Get Fragment Manager
        FragmentManager manager = getFragmentManager(); //GetSupportFragmentManager in activity()?
        //Start of fragment transaction
        FragmentTransaction transaction = manager.beginTransaction();
        //Replaced layout with fragment (added)
        transaction.replace(R.id.activityMain, fragment);
        //Save the replacement transaction on the back stack
        transaction.addToBackStack(null);
        //Commit fragment transaction
        transaction.commit();
    }
}

I have already displayed the main fragment and want to switch the display with the click of a button, so use transaction.replace The argument is the same image as the processing of `ʻadd transaction.replace (R value of the layout screen part to be displayed, Fragment object to be replaced (want to display)); ``

For subfragments that have transitioned from the main fragment, we want to be able to return to the main fragment with the back button "←" on the action bar. transaction.addToBackStack(null); By describing, the fragment displayed before the transition is saved. With this description, in the transition destination fragment getFragmentManager().popBackStack(); By calling, you will be able to return when you click the back button "←"

SubFragment1.java / SubFragment2.java

SubFragment1.java

public class SubFragment1 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        //Inflate the screen displayed as a fragment from the layout file
        View view = inflater.inflate(R.layout.fragment_sub1, container, false);

        //Get Affiliated Parent Activity
        MainActivity activity = (MainActivity) getActivity();
        //Set the title on the action bar
        activity.setTitle("Subfragment 1");
        //Show back button
        activity.setupBackButton(true);

        //With this description, the action bar menu can be used in the fragment.
        setHasOptionsMenu(true);

        return view;
    }

    //Processing when the action bar button is pressed
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()) {
            // android.R.id.Detects the operation when the back button "←" is pressed at home
            case android.R.id.home:
                //Executes the process to return to the Fragment displayed before the transition
                getFragmentManager().popBackStack();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}

SubFragment2.java

public class SubFragment2 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        //Inflate the screen displayed as a fragment from the layout file
        View view = inflater.inflate(R.layout.fragment_sub2, container, false);

        //Get Affiliated Parent Activity
        MainActivity activity = (MainActivity) getActivity();
        //Set the title on the action bar
        activity.setTitle("Subfragment 2");
        //Show back button
        activity.setupBackButton(true);

        //With this description, the action bar menu can be used in the fragment.
        setHasOptionsMenu(true);

        //View view is good?
        return view;
    }

    //Processing when the button on the action bar is pressed
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()) {
            //When the back button "←" is pressed android.R.id.The value is entered in home
            case android.R.id.home:
                //Executes the process to return to the Fragment displayed before the transition
                getFragmentManager().popBackStack();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}

getFragmentManager (). PopBackStack (); This description returns to the previous fragment.

Finally

I did not include it in the content this time, but I hope I can write about the transfer of data between fragments in the future.

I'm a beginner for less than a month after learning Java / Android. If you have any suggestions, please comment.

Materials that I used as a reference

• https://developer.android.com/training/basics/fragments/fragment-ui?hl=ja
• https://qiita.com/tagfa/items/a1e2b7302ad36aa99dab
• https://akira-watson.com/android/fragment-code.html

It was very easy to understand and was helpful! Thank you very much!