Android Fragment Example

Fragment

1. A fragment is an independent Android component which can be used by an activity. A fragment encapsulates functionality so that it is easier to reuse within activities and layouts.
2. A fragment runs in the context of an activity, but has its own life cycle and typically its own user interface.
3. Android devices exists in a variety of screen sizes and densities. Fragments simplify the reuse of components in different layouts and their logic.
4. You can build single-pane layouts for handsets (phones) and multi-pane layouts for tablets. You can also use fragments  supports different layout for landscape and portrait orientation on a smartphone.
5. As it is possible to dynamically add and remove fragments from an activity. The usage of fragments allows to design very flexible user interfaces.

Get GITHUB code from Here.

 

Let’s have a look at the simple example of Fragment in Android.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.lenovo.fragmentapp.MainActivity">

    <Button
        android:id="@+id/btn_frag1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@android:color/holo_red_light"
        android:onClick="getFragment"
        android:text="Fragment1" />

    <Button
        android:id="@+id/btn_frag2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_frag1"
        android:layout_margin="5dp"
        android:background="@android:color/holo_green_light"
        android:onClick="getFragment"
        android:text="Fragment2"

        />

    <FrameLayout
        android:id="@+id/fl_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/btn_frag2">

    </FrameLayout>

</RelativeLayout>

fragment1.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="vertical"
    tools:context="com.example.lenovo.fragmentapp.Fragment1">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="This is Fragment1"
        android:textColor="@android:color/holo_red_light"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Fragment1"
        android:textColor="@android:color/holo_red_light"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>

fragment2.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="vertical"
    tools:context="com.example.lenovo.fragmentapp.Fragment2">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="This is Fragment2"
        android:textColor="@android:color/holo_green_light"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Fragment2"
        android:textColor="@android:color/holo_green_light"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>

Fragment1.java

package com.example.lenovo.fragmentapp;

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


public class Fragment1 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment1, container, false);

        return view;
        
    }
}

Fragment2.java

package com.example.lenovo.fragmentapp;


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


public class Fragment2 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment2, container, false);

        return view;


    }
}

MainActivity.java

package com.example.lenovo.fragmentapp;


import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

    }

    public void getFragment(View view) {
        switch (view.getId()) {

            case R.id.btn_frag1: {
                Fragment1 fragment = new Fragment1();
                getSupportFragmentManager().beginTransaction().replace(R.id.fl_fragment, fragment).commit();
                break;
            }
            case R.id.btn_frag2: {
                Fragment2 fragment = new Fragment2();
                getSupportFragmentManager().beginTransaction().replace(R.id.fl_fragment, fragment).commit();
                break;
            }

        }
    }


}

Now when you run the app it will look like this: