---
title: "Fragment Implementation in Android"  
description: "Hi everyone, lets learn some Fragment basics in android here!!"  
author: "Anonymous User"  
published: 2015-02-13  
updated: 2019-11-25  
canonical: https://www.mindstick.com/articles/1579/fragment-implementation-in-android  
category: "android"  
tags: ["android", "android fragment"]  
reading_time: 10 minutes  

---

# Fragment Implementation in Android

Previously, we see how to implement an endless list view adapter in Endless List view Adapter in Android. Here we are going to discuss Fragment implementation.\

The Fragment represents a behavior or a portion of a [user interface](https://www.mindstick.com/blog/302016/what-is-user-interface-and-what-are-its-benefits) in an Activity. We can combine more than one fragments in a single activity to build a multi-pane UI and reuse a fragment in multiple activities. We can think of a fragment as a modular section of an activity, which has its own lifecycle, receives its own input events, and which you can add or remove while the activity is running (sort of like a "sub-activity" that you can reuse in different activities).- Referred from [Google Docs](https://www.mindstick.com/blog/246065/office-365-vs-google-docs-features-comparison)

##### Pre-Requisites:

##### \
1. Ellipse SDK

##### \
2. Android SDK

##### \
3. ADT plugin

##### \

Or Android Studio and a compatible version of JAVA SDK

\
Install and configure the above utilities.

\
Now create a new Android project namely “FragmentExample”.

##### Implementation objective:

An application consists of activity and two fragments. There are two fragments will be embedded within the main activity of the application and communication implemented such that when the button in the first fragment is pressed, the text entered into the Edit [Text view](https://www.mindstick.com/forum/33384/detail-text-view-of-cell-not-showing) will appear on the text view of the second fragment using a font size ducted by the position of the seek bar in the first fragment

##### Creation GUI – Activity Layouts and Fragment Views:

We need

- A Relative Layout (main GUI) consists of two fragment views in it.
- A Fragment GUI (toobar_fragment) consists of Button, EditText and Seekbar in it.
- Another Fragment GUI (text_fragment) consists of TextView in it.

So, first we need to create our fragments:

For this, navigate to res/Layout/ from package explorer. And create a one layout XML

file named as toolbar_fragment.xml. And add the following code into it.

```
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#82cafa" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/seekBar1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="17dp"
        android:text="ChangeMessage" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:ems="10"
        android:inputType="text" >
        <requestFocus />
    </EditText>

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/editText1"
        android:layout_marginTop="14dp" />

</RelativeLayout>
```

Similarly, create the second fragment named text_fragment.xml. Add following

code into it:

```
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" > 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="TextFragment"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout> 
```

Now we create our main activity UI in which we embed these two fragments.

For this, navigate to res/Layout/activity_main.xml from package explorer. Open

activity_main.xml

Add the following code into it:

```
<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=".FragmentExampleActivity" > 
    <fragment
        android:id="@+id/toolbar_fragment"
        android:name="com.example.msclient010.fragmentexample.ToolbarFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        tools:layout="@layout/toolbar_fragment" /> 
    <fragment
        android:id="@+id/text_fragment"
        android:name="com.example.msclient010.fragmentexample.TextFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        tools:layout="@layout/text_fragment" />
 
</RelativeLayout> 
```

##### Creating fragment classes and Implementing Communication between fragments

- Having done so it’s time to implement the fragments and bind them to our main activity So create a Java class “ToolbarFragment” and extend the Fragment class.
- The only changes to this class are to override the onCreateView() method to make sure the layout file is inflated and displayed when the fragment is used within an activity.
- When the user touches the button in the toolbar fragment, the fragment class is going to need to get the text from the EditText view and the current value of the SeekBar and send them to the text fragment
- The first step in this process is to make sure that the toolbar fragment responds to the button being clicked. We also need to implement some code to keep track of the value of the SeekBar view.
- This is because the user interface contains a SeekBar instance and the fragment needs to receive notifications when the user slides the bar to change the font size.
- Implementation of the OnSeekBarChangeListener interface requires that the onProgressChanged(), onStartTrackingTouch() and onStopTrackingTouch() methods be implemented.
- These methods have been implemented but only the onProgressChanged() method is actually required to perform a task, \ in this case, storing the new value in a variable named seek_value which has been declared at the start of the class.
- Also declared is a variable in which to store a reference to the EditText object.
- A method named on_Button_Click() belonging to the activity class being called when the [button is clicked](https://answers.mindstick.com/qa/94813/why-does-my-app-terminate-when-the-button-is-clicked-on-android-studio) by the user

```
package com.example.msclient010.fragmentexample; 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.Button;import android.widget.EditText;import android.widget.SeekBar; 
public class ToolbarFragment extends Fragment implements SeekBar.OnSeekBarChangeListener {
    //tell us seek bar progress    private static int seekvalue = 10;    //Text field    private static EditText edittext;    //Tool bar listener    ToolbarListener activityCallback;
    public interface ToolbarListener{
        public void onButtonClick(int position, String text);
    }
    @Override    public  void onAttach(Activity activity){
        super.onAttach(activity);
        try{
            //setting instance for tool bar listener
            activityCallback = (ToolbarListener)activity;
        }catch(ClassCastException e){
           throw new ClassCastException(activity.toString() + "must implement ToolbarListener");
        }
    } 
    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.toolbar_fragment,container,false);
       // getting reference of text field        edittext = (EditText) view.findViewById(R.id.editText1);        //getting reference of seek bar        final SeekBar seekBar = (SeekBar)view.findViewById(R.id.seekBar1);        //setting onSeekBarChangeListener to seek bar        seekBar.setOnSeekBarChangeListener(this);            //getting reference of button        final Button button = (Button) view.findViewById(R.id.button1);        //setting onClickListener to button        button.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                buttonClicked(v);
            }
        });
        return view;
    }    private void buttonClicked(View view) {        //sending value for seekbar and editText to main activity on button click        activityCallback.onButtonClick(seekvalue, edittext.getText().toString());
     }
    @Override    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {        //setting values for seek bar progress        seekvalue = progress;
    }
    @Override    public void onStartTrackingTouch(SeekBar seekBar) { 
    }    @Override    public void onStopTrackingTouch(SeekBar seekBar) { 
    }
}
```

Similarly, create another java class called TextFragment and extend Fragments in it. \
An activity can communicate with a fragment by obtaining a reference to the fragment class instance and then calling public methods on the object.\
As such, within the TextFragment class, we will now implement a public method named changeTextProperties() which takes as arguments an integer for the font size and a string for the new text to be displayed. \
The method will then use these values to modify the TextView object.

```
package com.example.msclient010.fragmentexample; 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 TextFragment extends Fragment {
    private  static  TextView textView ;
    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.text_fragment,container, false);
        //getting reference of textview        textView  = (TextView)view.findViewById(R.id.textView1);
        return view;
    }
    public void changeTextProperties (int fontsize, String text)    {        //setting  font size for text view        textView.setTextSize(fontsize);
        //setting text in textField        textView.setText(text);
    }
}
```

Now we need to implement our main activity class and bind the fragments to communicate with each other When the TextFragment fragment was placed in the layout of the activity, it was given an ID of text_fragment.

Using this ID, it is now possible for the activity to obtain a reference to the fragment instance and call the changeTextProperties() method on the object.\
Edit the MainActivity.java file and modify the onButtonClick() method as follows:

```
package com.example.msclient010.fragmentexample;import android.os.Bundle;import android.support.v7.app.ActionBarActivity;import android.view.Menu;import android.view.MenuItem; 
public class MainActivity extends ActionBarActivity implements ToolbarFragment.ToolbarListener {
    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main); 
    } 
    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
    @Override    public boolean onOptionsItemSelected(MenuItem item) {        // Handle action bar item clicks here. The action bar will        // automatically handle clicks on the Home/Up button, so long        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId(); 
        //noinspection SimplifiableIfStatement        if (id == R.id.action_settings) {
            return true;
        } 
        return super.onOptionsItemSelected(item);
    } 
    @Override    public void onButtonClick(int fontsize, String text) { 
        //getting TextFragment reference        TextFragment textFragment = (TextFragment)getSupportFragmentManager().findFragmentById(R.id.text_fragment);
        //setting text and size in textFragment
        textFragment.changeTextProperties(fontsize,text);
    }
}                   
```

Running the application:

Hit on the Run button, you see two fragments on the screen:

The first fragment is in blue color because of background-color property which is set to light blue in its Layout XML:

![Fragment Implementation in Android](https://www.mindstick.com/mindstickarticle/755d7081-d222-4ce5-b88d-aae9c1b4a7c8/images/7af40d22-53be-4b27-95e3-c236819d53bc.png)

Next, type your message in the [Text field](https://www.mindstick.com/forum/33753/how-to-get-value-from-text-field-on-button-click-in-ios) of the first fragment and click on “ChangeMessage” button, we see the message in the second fragment.

![Fragment Implementation in Android](https://www.mindstick.com/mindstickarticle/755d7081-d222-4ce5-b88d-aae9c1b4a7c8/images/f2606c0c-f2d6-472e-b9c9-fdb2e0d4a727.png)

![Fragment Implementation in Android](https://www.mindstick.com/mindstickarticle/755d7081-d222-4ce5-b88d-aae9c1b4a7c8/images/c3e50445-6571-41e5-ac71-2ce2e1c6c21e.png)

Our message’s font size is very small because of the seekbar progress. \
Just slide the seek bar in the forward direction this results from the increase in the font-size value of the [text message](https://answers.mindstick.com/qa/50389/what-to-do-when-your-iphone-6s-keeps-saying-that-your-sim-sent-a-text-message) in the second fragment.

![Fragment Implementation in Android](https://www.mindstick.com/mindstickarticle/755d7081-d222-4ce5-b88d-aae9c1b4a7c8/images/7fd90037-203e-427f-8b20-b4784a901e1e.png)

Thanks for reading this post.

Happy Coding!! J

---

Original Source: https://www.mindstick.com/articles/1579/fragment-implementation-in-android

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.