Download Fragment Example

Fragment Example
Create the following files and test the application on emulator or device.
File: AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.atijaffna.fragmentex" >
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme" >
<activity android:name=".FragmentActivity" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
File: FragmentActivity.java
package com.atijaffna.fragmentex;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class FragmentActivity extends AppCompatActivity {
Button b1,b2;
@Override
protected void onCreate(Bundle savedInstanceState) {
Mobile Application Development – Tutorial 06-07
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment);
b1=(Button)findViewById(R.id.button);
b2=(Button)findViewById(R.id.button2);
View.OnClickListener listener = new View.OnClickListener() {
@Override
public void onClick(View v) {
Fragment fr;
if (v==b1)
fr=new FragmentA();
else
fr=new FragmentB();
FragmentManager fm=getFragmentManager();
FragmentTransaction ft=fm.beginTransaction();
ft.replace(R.id.fragmentplace,fr);
ft.commit();
}
};
b1.setOnClickListener(listener);
b2.setOnClickListener(listener);
}
}
File: FragmentA.java
package com.atijaffna.fragmentex;
import android.os.Bundle;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class FragmentA extends Fragment {
Mobile Application Development – Tutorial 06-07
public FragmentA() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_a, container, false);
}
}
File: FragmentB.java
package com.atijaffna.fragmentex;
import android.os.Bundle;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class FragmentB extends Fragment {
public FragmentB() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_b, container, false);
}
}
Mobile Application Development – Tutorial 06-07
File: activity_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".FragmentActivity">
<TextView android:text="Hello World!" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"
android:layout_alignTop="@+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button2"
android:layout_below="@+id/button"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
Mobile Application Development – Tutorial 06-07
android:layout_alignRight="@+id/button"
android:layout_alignEnd="@+id/button" />
<fragment
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="android.preference.PreferenceFragment"
android:id="@+id/fragmentplace"
android:layout_below="@+id/button2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_alignRight="@+id/button2"
android:layout_alignEnd="@+id/button2" />
</RelativeLayout>
File: fragment_a.xml
<FrameLayout 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="com.atijaffna.fragmentex.FragmentA">
<!-- TODO: Update blank fragment layout -->
<TextView android:layout_width="match_parent" android:layout_height="match_parent"
android:text="@string/hello_blank_fragment"
android:background="#fbef6e" />
</FrameLayout>
Mobile Application Development – Tutorial 06-07
File: fragment_b.xml
<FrameLayout 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="com.atijaffna.fragmentex.FragmentB">
<!-- TODO: Update blank fragment layout -->
<TextView android:layout_width="match_parent" android:layout_height="match_parent"
android:text="@string/hello_blank_fragment" />
</FrameLayout>
Try it yourself: Creating Project
Create a new Android Application project in Android Studio with package as com.example.fragments.
Create the main layout as activity_main and main Activity as MainActivity.
Creating Fragment Layouts
We are going to use two fragments with our main layout. The first fragment consists of a ListView. It is
defined in list_fragment.xml.
list_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@android:id/list" />
</LinearLayout>
Mobile Application Development – Tutorial 06-07
The second fragment consists of two TextView to display Android OS name and Android version
number.
text_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:gravity="center"
android:background="#5ba4e5"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40px"
android:textColor="#ffffff"
android:layout_gravity="center"
android:id="@+id/AndroidOs"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#ffffff"
android:textSize="30px"
android:id="@+id/Version"/>
</LinearLayout>
Mobile Application Development – Tutorial 06-07
Creating Fragment Classes
Our first class is TextFragment which extends to Fragment. We use LayoutInflator to display the
layout for our Fragment. It consists of two Textviews. A function change is used to change the text in
the TextView.
TextFragment.java
package com.amal.fragments;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class TextFragment extends Fragment {
TextView text,vers;
@Override
public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanc
{
View view = inflater.inflate(R.layout.text_fragment, container, false);
text= (TextView) view.findViewById(R.id.AndroidOs);
vers= (TextView)view.findViewById(R.id.Version);
return view;
}
public void change(String txt, String txt1){
text.setText(txt);
vers.setText(txt1);
}
}
Mobile Application Development – Tutorial 06-07
Our second class is MenuFragment which extends to ListFragment. A array of strings AndroidOS and
Version is defined which contains Android version names and number. When a list item is clicked the
TextView on the TextFragment is updated with the Android version name and number.
MenuFragment.java
package com.amal.fragments;
import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class MenuFragment extends ListFragment {
String[] AndroidOS = new String[] { "Cupcake","Donut","Eclair","Froyo",
"Gingerbread","Honeycomb","Ice Cream SandWich","Jelly Bean","KitKat" };
String[] Version = new String[]{"1.5","1.6","2.0-2.1","2.2","2.3","3.0-3.2",
"4.0","4.1-4.3","4.4"};
@Override
public View onCreateView(LayoutInflater inflater,ViewGroup container,
Bundle savedInstanceState) {
View view =inflater.inflate(R.layout.list_fragment, container, false);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),
android.R.layout.simple_list_item_1, AndroidOS);
setListAdapter(adapter);
return view;
}
@Override
public void onListItemClick(ListView l, View v, int position, long id) {
Mobile Application Development – Tutorial 06-07
TextFragment txt = (TextFragment)getFragmentManager()
.findFragmentById(R.id.fragment2);
txt.change(AndroidOS[position],"Version : "+Version[position]);
getListView().setSelector(android.R.color.holo_blue_dark);
}
}
Creating Main layout
Our main layout consists of two fragments which are displayed horizontally side by side. Each fragment
should link to the fragment class which is defined.
activity_main.xml
<LinearLayout 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:orientation="horizontal"
tools:context="com.amal.fragments.MainActivity">
<fragment
android:layout_height="match_parent"
android:layout_width="240px"
class="com.amal.fragments.MenuFragment"
android:id="@+id/fragment"/>
<fragment
android:layout_width="240px"
android:layout_height="match_parent"
class="com.amal.fragments.TextFragment"
android:id="@+id/fragment2"/>
</LinearLayout>
Mobile Application Development – Tutorial 06-07
Creating Activity
Our MainActivity just extends to the FragmentActivity.
MainActivity.java
package com.amal.fragments;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
public class MainActivity extends FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Creating Manifest
We do not need any special permissions for our Project.
Mobile Application Development – Tutorial 06-07
Screenshots
Mobile Application Development – Tutorial 06-07