Using Fragments to display two images generated by two different fragments.

In this example, we will be see how to use fragments to generate UI at runtime. We will be using two fragments to generate views to be displayed on a frame layout.

Steps to develop this can be summarized below -

• Make a new project with Empty Activity
• Prepare a layout for the launcher activity with two buttons and a frame layout
• Write the calling methods for both the buttons
• Prepare two fragment classes to generate views during runtime
• Prepare layouts for two fragments to have different UIs for the two views

Used Concepts & Used Version:

• compileSdkVersion 24
• buildToolsVersion "25.0.0"

Now, let’s begin the development...

We will be developing the app shown in the below screenshot.

1.MainActivity.class (Launcher Activity)

Below is the MainActivity(Launcher Activity).

FragmentManager is a class that helps in Managing the fragments. We get an instance of this class from the method getFragment Manager().
Then we use FragmentTransaction object to start doing transactions with fragment manager. By transactions, we mean putting a view of fragment on a frame layout. In the next step you can see that tx.replace(R.id.fragment_place,new FragmentOne()) is doing the replacement. Finally we call commit() method to execute the transaction.

selecFrag() method is used to handle the clicks on the buttons at the top. Depending upon the button clicked, we create a new fragment of the respective button and display it on the frame layout.

package sisoft.in.implicit; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.view.View; import android.app.Fragment; import android.app.FragmentManager; import android.app.FragmentTransaction; public class MainActivity extends FragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); FragmentManager fm = getFragmentManager(); FragmentTransaction tx = fm.beginTransaction(); tx.replace(R.id.fragment_place,new FragmentOne()); tx.commit(); } public void selectFrag(View view) { Fragment fr; if(view == findViewById(R.id.button1)) { fr = new FragmentOne(); }else { fr = new FragmentTwo(); } FragmentManager fm = getFragmentManager(); FragmentTransaction tx = fm.beginTransaction(); tx.replace(R.id.fragment_place, fr); tx.commit(); } }

2. Layout for MainActivity.class

Below is the layout for the MainActivity.class
We are using a LinearLayout with vertical orientation to host another Linear Layout with horizontal orientation. Apart from the two buttons, we also have a FrameLayout which will be hosting the Fragment Views.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:id="@+id/button1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Fragment No.1" android:onClick="selectFrag" android:layout_weight="1"/> <Button android:id="@+id/button2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:onClick="selectFrag" android:text="Fragment No.2" android:layout_weight="1"/> </LinearLayout> <FrameLayout android:id="@+id/fragment_place" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>

3. FragmentOne.class (Fragment 1 class)

Below is the class for first fragment which provides the view when the user clicks on the first button. We are overriding onCreateView() method in this class to inflate the view to be hosted inside the frame layout in the MainActivity.class
A Layout named as fragment_one.xml is being used to inflate the view.

package sisoft.in.implicit; 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) { View v = inflater.inflate(R.layout.fragment_one, container,false); return v; } }

4. fragment_one.xml (Layout for Fragment 1 class)

Below is the layout for the fragment which is shown on the frame layout. It simply has one LinearLayout conatining an ImageView which holds an image.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="10dp" android:id="@+id/frag1" > <ImageView android:id="@+id/iv1" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:src="@drawable/brad1"/> </LinearLayout>

5. FragmentTwo.class(Fragment 2 class)

Below is the class- FragmentTwo.class
This class serves the same purpose as the previous fragment class. Infact, there is no different between the two classes except for the different layouts which we need to show in the frame layout.

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) { return inflater.inflate( R.layout.fragment_two, container, false); } }

6. fragment_two.xml(Layout for Fragment 2 class)

Below is the layout for fragment_two.class.It simply has one LinearLayout conatining an ImageView which holds an image.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="10dp" android:id="@+id/frag2"> <ImageView android:id="@+id/iv2" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:src="@drawable/angela"/> </LinearLayout>

Summary -

1. 1. MainActivity uses FragmentManager and FragmentTransaction classes to place fragments during runtime.
2. 2. selectFrag() method does the same task of placing fragments during runtime.
3. 3. Fragment classes use onCreateView() method that return the views to be placed in frame layout of MainActivity
4. 4. This kind of fragment usage is referred to as dynamic fragment.

Below are the Screenshots for the output.

1. When the App launches. The default fragment is displayed. Same Fragment is displayed when the user clicks on the button Fragment1

2. User clicking on second button - Fragment 2. This button displays the second fragment on the frame layout.