Android Fragment Example

15-Sep-2024

Learn how to create and manage fragments in Android Studio using Java to build dynamic user interfaces

1/ Create A New Project and Create FirstFragment.class.


package com.example.fragmenttest.fragment;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import com.example.fragmenttest.R;

public class FirstFragment  extends Fragment {

    TextView textView;
    @SuppressLint("MissingInflatedId")
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.first_fragment, container, false);
        textView = view.findViewById(R.id.text);
        textView.setText("First Fragment");
        return view;
    }
}

2/ Create a layout first_fragment.xml




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id = "@+id/text"
        android:textSize = "30sp"
        android:layout_marginTop="70dp"
        android:text="@string/app_name"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content" />

</RelativeLayout>

3/ Create Second Fragment SecondFragment.class


package com.example.fragmenttest.fragment;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import com.example.fragmenttest.R;

public class SecondFragment extends Fragment {
    TextView textView;
    @SuppressLint("MissingInflatedId")
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.second_fragment, container, false);
        textView = view.findViewById(R.id.text2);
        textView.setText("Second Fragment");
        return view;
    }
}

4/ Create a layout second_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"

    android:layout_height="match_parent">
    <TextView
        android:id = "@+id/text2"
        android:textSize = "30sp"
        android:text="second"
        android:layout_marginTop="70dp"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content" />

</RelativeLayout>

5/ set 2 button and layout in activity_main.xml

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">



        <LinearLayout
            android:id="@+id/layout"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">

        </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:gravity="center"

        android:layout_marginBottom="50dp"
        android:layout_alignParentBottom="true"
        android:orientation="vertical">

        <Button
            android:id="@+id/buttonFirst"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="First" />

        <Button
            android:id="@+id/buttonSecond"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Second" />
    </LinearLayout>

</RelativeLayout>

6/ Then in MainActivity.





package com.example.fragmenttest;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import com.example.fragmenttest.fragment.FirstFragment;
import com.example.fragmenttest.fragment.SecondFragment;

public class MainActivity extends AppCompatActivity {

    @SuppressLint("MissingInflatedId")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);

        Fragment first = new FirstFragment();
        Fragment second = new SecondFragment();


        Button buttonFirst=findViewById(R.id.buttonFirst);
        Button buttonSecond=findViewById(R.id.buttonSecond);

        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fm.beginTransaction();
        fragmentTransaction.replace(R.id.layout, first);
        fragmentTransaction.commit();
        buttonFirst.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                FragmentManager fm = getSupportFragmentManager();
                FragmentTransaction fragmentTransaction = fm.beginTransaction();
                fragmentTransaction.replace(R.id.layout, first);
                fragmentTransaction.commit();
            }
        });


        buttonSecond.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                FragmentManager fm = getSupportFragmentManager();
                FragmentTransaction fragmentTransaction = fm.beginTransaction();
                fragmentTransaction.replace(R.id.layout, second);
                fragmentTransaction.commit();
            }
        });
    }
}