Android fragments tutorial

A fragment is a part of activity. In android we can add multiple fragments in single activity. In this tutorial we will learn how to implement a simple fragment in android.

This example will contain a simple activity which consist of two fragments and two buttons. Activity will display respective fragments on button click.

Let us start by creating fragments and their layouts.

layout_fragment_one.xml

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


<!--You can place your fragment one layout here-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is Fragment one"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textSize="16sp"/>

</RelativeLayout>

layout_fragment_two.xml

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


<!--You can place your fragment two layout here-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is Fragment two"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textSize="16sp"/>

</RelativeLayout>

FragmentOne.java

public class FragmentOne extends Fragment {

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.layout_fragment_one,container,false);
return view;
}
}

FragmentTwo.java

public class FragmentTwo extends Fragment {

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.layout_fragment_two,container,false);
return view;
}
}

Now we need to have an activity with layout containing two buttons and a fragment container. Lets us create the layout first

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


<Button
android:id="@+id/btn_fragment_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:layout_marginTop="50dp"
android:text="Open Fragment One"
android:textSize="16sp"
android:textColor="#FFFFFF" />


<Button
android:id="@+id/btn_fragment_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="@color/colorPrimary"
android:text="Open Fragment Two"
android:textColor="#FFFFFF" />

<fragment
android:id="@+id/fr_one_two"
android:name="com.codesfor.video.FragmentOne"
android:layout_width="match_parent"
android:layout_height="match_parent">

</fragment>

</LinearLayout>

Now simply use the below code in your activity class file

public class MainActivity extends AppCompatActivity {

Toolbar toolbar;

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

Button btn_fragment_one = (Button) findViewById(R.id.btn_fragment_one);
Button btn_fragment_two = (Button) findViewById(R.id.btn_fragment_two);


btn_fragment_one.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

//initialising fragment one
Fragment fr = new FragmentOne();
//setting fragment one
SetFragment(fr);

}
});

btn_fragment_two.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

//initialising fragment two
Fragment fr = new FragmentTwo();
//setting fragment two
SetFragment(fr);

}
});

}


//method for initialisation

private void init() {

toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Fragments");

}

public void SetFragment(Fragment fr){

FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.fr_one_two, fr);
fragmentTransaction.commit();

}
}