Android fragment

In Android, Fragment is used to create dynamic user interface and multi-pane applications. It allows you to use interface components and activities� behaviors in different modules. The modules can be swapped in and out.

In this Android tip, I am going to show you how to use the Fragment to create a simple dynamic UI application that has two fragments or modules. The first module contains a TextView to display text and the second module contains an ImageView to display an image. You can navigate between the modules by clicking the Next/Previous button. Now create a new Android project. Then modify the activity_main.xml to add a FrameLayout and one Button as shown below.


activity_main.xml

<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"
     android:paddingBottom="@dimen/activity_vertical_margin"
     android:paddingLeft="@dimen/activity_horizontal_margin"
     android:paddingRight="@dimen/activity_horizontal_margin"
     android:paddingTop="@dimen/activity_vertical_margin"
     tools:context=".MainActivity" >
  
     <FrameLayout
  		android:id="@+id/fragment_container1"
  		android:layout_width="match_parent"
  		android:layout_height="match_parent" 
  		android:layout_above="@+id/bt_next"
  			
  	/>
     
     <Button 
        android:id="@+id/bt_next"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Next"
        
        />
  
  </RelativeLayout>


Then create two classes: FirstFragment and SecondFragment. These classes extends the Fragment class. Each fragment has its own layout file that defines its UI components. The layout file for the first fragment is first_fragment.xml. There is one TextView in the first_fragment.xml file. Another layout file is called second_fragment.xml that contains one ImageView. The second_fragment.xml is for the second fragment.

FirstFragment.java 

  package com.example.androidproject;
  
  import android.app.Activity;
  import android.os.Bundle;
  import android.support.v4.app.Fragment;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  import android.widget.TextView;
  
  public class FirstFragment extends Fragment {
  	Activity context;
  	public View onCreateView(LayoutInflater inflater, ViewGroup container,
  	Bundle savedInstanceState) {
  	
  context=getActivity();	
  	//Inflate the layout for this fragment
  	return inflater.inflate(R.layout.first_fragment, container, false);
  	}
  	
  	public void onStart(){
  		super.onStart();
  		TextView tv=(TextView)context.findViewById(R.id.txtview);
  		tv.setText("This is the TextView in the first fragment or module.");
  	}
  	
  }
first_fragment.xml

<?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" >
     
     
     <TextView
        android:id="@+id/txtview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
      	android:textSize="20sp" 
      	android:gravity="center"
      	
        />
  
  </LinearLayout>


SecondFragment.java

  package com.example.androidproject;
  
  import android.app.Activity;
  import android.os.Bundle;
  import android.support.v4.app.Fragment;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  import android.widget.ImageView;
  
  
  public class SecondFragment extends Fragment {
  	Activity context;
  	public View onCreateView(LayoutInflater inflater, ViewGroup container,
  	Bundle savedInstanceState) {
  	context=getActivity();	
  	//Inflate the layout for this fragment	
  	return inflater.inflate(R.layout.second_fragment, container, false);
  	}
  	
  	public void onStart(){
  		super.onStart();
  		ImageView iv=(ImageView)context.findViewById(R.id.imgview);
  		iv.setImageResource(R.drawable.ic_launcher);
  	}
  	
  }
second_fragment.xml

<?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" >
     
     
     <ImageView
        android:id="@+id/imgview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       	android:gravity="center"
      	
        />
  
  </LinearLayout>


Here is the content of the MainActivity activity that hosts the two fragments or modules. MainActivity class must extend the FragmentActivity class. The showFirstFragment and showSecondFragment methods are invoked to switch to first fragment and second fragment respectively. The add(int container, Fragment fr, String tag) of the FragmentTransaction is used to add a fragment to the container. If you want to replace an existing fragment in the container with another fragment, use (int container, Fragment fr, String tag) instead of the add method. 


  package com.example.androidproject;
  
  import java.util.Calendar;
  
  import android.os.Bundle;
  import android.content.Context;
  import android.support.v4.app.FragmentActivity;
  import android.support.v4.app.FragmentTransaction;
  import android.view.Menu;
  import android.view.View;
  import android.view.View.OnClickListener;
  import android.widget.Button;
  
  public class MainActivity extends FragmentActivity {
  
  	FirstFragment ffr;
  	SecondFragment sfr;
  	protected void onCreate(Bundle savedInstanceState) {
  		super.onCreate(savedInstanceState);
  		setContentView(R.layout.activity_main);
  		ffr=new FirstFragment();
  		sfr=new SecondFragment();
  		//add the first fragment to the container
  		FragmentTransaction transact=getSupportFragmentManager().beginTransaction();		
  		transact.add(R.id.fragment_container1,ffr,"first_fragment");
  		transact.commit();
  
  	}
  	@Override
  	public boolean onCreateOptionsMenu(Menu menu) {
  		// Inflate the menu; this adds items to the action bar if it is present.
  		getMenuInflater().inflate(R.menu.main, menu);
  		scheduleAlarm();
  		return true;
  	}
  	
  	public void onStart(){
  		super.onStart();
  		Button bt=(Button)findViewById(R.id.bt_next);
  		bt.setOnClickListener(new OnClickListener(){
  			
  			public void onClick(View view){
  				Button button=(Button)view;
  				String button_text=button.getText().toString();
  				if(button_text.equals("Next")){
  					showSecondFragment();
  					button.setText("Previous");
  				}
  				else{
  					showFirstFragment();
  					button.setText("Next");
  				}
  			}
  		});
  				
  	}
  	
  	public void showFirstFragment(){
  	  	
  		FragmentTransaction transact=getSupportFragmentManager().beginTransaction();		
  		transact.replace(R.id.fragment_container1, ffr,"first_fragment");		
  		transact.addToBackStack(null);
  		transact.commit(); 
  	}
  	
  	public void showSecondFragment(){
  	
    		FragmentTransaction transact=getSupportFragmentManager().beginTransaction();		
  		transact.replace(R.id.fragment_container1, sfr,"second_fragment");		
  		transact.addToBackStack(null);
  		transact.commit(); 
  	}
  	
  
  }

Android-fragment

Posted by: Dara | post date: 07-20-2014 | Subject: Android Apps Development

write programming tip

This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.