Android Adventures - Managing Fragments
Written by Mike James   
Thursday, 22 May 2014
Article Index
Android Adventures - Managing Fragments
Layout
Large Display
The Normal Screen
The BackStack

 

We need to give the Fragments just enough UI for us to see what is happening. Go each Fragment's layout and add a single TextView used to label the Fragment and a single EditText so we have some unique data for each Fragment.

 

frag1

 

The layout for Fragment1 is:

<LinearLayout
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 xmlns:android="http://schemas.android.com/apk/
                 res/android">
 <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textAppearance="?    
  android:attr/textAppearanceLarge"
  android:text="FRAGMENT 1"
  android:id="@+id/textView"
  android:layout_gravity="center_horizontal" /> 
 <EditText
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:id="@+id/editText"
  android:layout_gravity="center_horizontal"
  android:text="Fragment 1 Data" />
</LinearLayout>

And the layout for Fragment2 is identical apart from changing the 1 to a 2 and yes you can do this using copy and paste into the XML file. 

Now the final step. 

Move back to the main layout and use the editor to drop a Fragment into the first container. Select the container and then select the <fragment> item in the toolbox.  

When you select <fragment> from the Custom section of the toolbox you  are offered a choice of Fragments to insert - select BlankFragment1.

 

fragmentlayout

 

 

When Android studio asks what it should use for the layout of the Fragment select the fragment_blank_fragment1.

 

 

fraglay2

 

 

If by any chance you have created the Fragment outside of the container simply drag it into the container. 

Repeat the task with Fragment2 and play around with the layout until you are happy.

 

fragmains

 

The layout file can be seen below but yours could be slightly different - all that matters is that we have the two Fragments on display within their containers:

<LinearLayout  
 xmlns:tools="http://schemas.android.com/tools"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 xmlns:android="http://schemas.android.com/
                   apk/res/android">
 <FrameLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:id="@+id/Container1">
<fragment
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:name="com.example.fragman.
                          app.BlankFragment1"
  android:id="@+id/fragment"
  android:layout_gravity="center"
  android:layout_weight="1"
  tools:layout="@layout/fragment_blank_fragment1"

 />
 </FrameLayout>
 <FrameLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:id="@+id/Container2">
<fragment
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:name="com.example.fragman.
                           app.BlankFragment2"
  android:id="@+id/fragment2"
  android:layout_gravity="center"
  tools:layout="@layout/fragment_blank_fragment2"

 />
 </FrameLayout>
 <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="New Button"
  android:id="@+id/button"
  android:layout_gravity="center_horizontal" />
</LinearLayout>

That's all we have to do to get the app working - apart from one code change. 

The project generator currently assume that you want to use the support library even though we opted not to use it. To allow the Fragments to work correctly you have to edit the MainActivity file imports to change:

import android.support.v7.app.ActionBarActivity;

to read:

import android.app.Activity;

and change

extends ActionBarActivity

to 

extends Activity

Now you can run your project and you should select a Nexus 4 to run it on because this has a normal size screen.

 

nexus4

 

At this point you can see that there is plenty of room for both Fragments even on a normal screen but for the sake of a simple example let's suppose that this layout is unacceptable because both Fragments really need the entire screen to display. 

If you experiment a little you will also discover that the data in the Fragments is persisted - try rotating the device after putting something into one of the input fields. 



Last Updated ( Saturday, 25 July 2015 )