Wednesday, February 13, 2013

Fragments Simple Example - Version 1


We will make an Activity that will display 2 fragments in its layout.
One fragment will be above the other just like the screen. Both fragments will be of the TextView type and will display text.

So here is what we 're going to have:



Where in the above image is shown the TextView that we are going to define in the layout for Fragment A and respectively down the TextView in layout for Fragment B.




public class Fragment_A extends Fragment {

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

          return inflater.inflate(R.layout.fragment_a_layout, container, false);

     }
}
and the fragment_a_layout as we said is a TextView :
<linearlayout 
    android:layout_height="match_parent" 
    android:layout_width="match_parent" 
    android:orientation="vertical" 
    xmlns:android="http://schemas.android.com/apk/res/android">
    
<textview 
    android:id="@+id/tv" 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" 
    android:text="Fragment A">
</linearlayout>
Respectively we make up the class for the Fragment B and layout as fragment_a_layout. Now what's left is to bind the 2 fragments on Activity's layout.

main_layout:
<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=".MainLayoutActivity" >

    
      <fragment 
          android:name="org.example.fragmentsapp.Fragment_A"
          android:id="@+id/id_frag_A"
          android:layout_width="100dp"
          android:layout_height="50dp"
          android:layout_marginBottom="20dp" />

      <fragment
          android:id="@+id/id_frag_B"
          android:name="org.example.fragmentsapp.Fragment_B"
          android:layout_width="100dp"
          android:layout_height="50dp"
          android:layout_below="@id/id_frag_A" />

</RelativeLayout>


What you must take care is that we use RelativeLayout because its much more dynamic and flexible than LinearLayout and thats something we are going to need for the next Fragment Tutorials.
Also every <fragment> element has its own name, ie for Fragment A we call it as android:name="org.example.fragmentsapp.Fragment_A" and the same for B. Later when we are going to use them inside the Activity scope that will be based on the id we have define.

So our Activity is :
package org.example.fragmentsapp;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class MainLayoutActivity extends FragmentActivity {

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


Keep in mind that we refer also to APIs lower than API 11 so we extend FragmentActivity and not Activity.
If you target device with android 3.0 or later then you can change FragmentActivity with Activity.


FragmentActivity is something that we can use because of the  Support library

No comments:

Post a Comment