Fragments Example in Android

Fragments example in Android

In this tutorial we will learn to implement the Fragments with a simple example in Android Studio.

Fragment is a known as a sub activity which we can reuse in different activities as well. Fragments are also a smart way of developing in Android because of its very fast and flexible way of interaction.

Example:

• Create a new project as Fragments in Android Studio.
• Create two fragment layout's and two fragment Classes in the project.

File: fragment_one.xml:

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

    <TextView
        android:text="Fragment One"
        android:gravity="center"
        android:textSize="28sp"
        android:textStyle="bold"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

File: fragment_two.xml:

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

    <TextView
        android:text="Fragment Two"
        android:gravity="center"
        android:textSize="28sp"
        android:textStyle="bold"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

When we create the fragment class we have to extend the Fragment in it and we have to inflate the layout of the fragment.

File: FragmentOne.java:

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class FragmentOne extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
//        inflate fragment layout
        return inflater.inflate(R.layout.fragment_one,container,false);
    }
}

File: FragmentTwo.java:
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class FragmentTwo extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        //        inflate fragment layout
        return inflater.inflate(R.layout.fragment_two,container,false);
    }
}


Design a main layout with two buttons as fragment one and fragment two.
Give the main layout id as replace_fragment to its main layout.

File: activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fragment_replace"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    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.hss_24.fragments.MainActivity">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="fragment one" />

        <Button
            android:id="@+id/btn_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="fragment two" />

    </LinearLayout>


</LinearLayout>



Do the following code in main java file as follows.
Here if we click button_one fragment_one gets replaced and if we click button_two fragment_two gets replaced.

File: MainActivity.java:
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

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

        Button btn_one = (Button) findViewById(R.id.btn_one);

        btn_one.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //   replace fragment_one
                Fragment fragment_one = new FragmentOne();
                FragmentManager fragmentManager = getFragmentManager();
                FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragment_replace, fragment_one);
                fragmentTransaction.commit();
            }
        });

        Button btn_two = (Button) findViewById(R.id.btn_two);

        btn_two.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //   replace fragment_two
                Fragment fragment_two = new FragmentTwo();
                FragmentManager fragmentManager = getFragmentManager();
                FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragment_replace, fragment_two);
                fragmentTransaction.commit();
            }
        });

    }

}



Run the Application.

Output:













Download project here







Thank You!!!

please like and share...