Home > DeveloperSection > Articles > Multiple fragment in Android

Multiple fragment in Android


Android Android  Android Fragment 
Ratings:
0 Comment(s)
 1036  View(s)
Rate this:

Multi-pane development in Android with Fragments

In my last article, we learn about Sorting list with side bar in Android(Sorting list with side bar).  Now we see how use multiple fragment according to available space in device

A fragment is an independent Android component which can be used by an activity. A fragment encapsulates functionality so that it is easier to reuse within activities and layouts.

Android Fragments are the user Interface which represents a part of an activity, in other words you can also say fragments are the sub-part of an activity.

A Fragment is a piece of an application's user interface or behaviour that can be placed in an Activity.

Developer can show multiple fragment in a single activity. You can manage your fragment according to your available space in screen.

If you have limited space like phone or handset device.

   

And if you have extra space then you can show multiple fragment like this

1.      Create an Android project

2.     Minimum SDK must be greater than 12

3.     Add three layout xml file to show views in fragment -i. detail_activity

ii. detail_fragment and iii. my_view.

detail_activity.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" >

 

    <fragment

        android:id="@+id/detailFragment"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        class="com.example.samplefraagment.DetailFragment" />

 

</LinearLayout>

 detail_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:background="#FFFF99"

    android:orientation="vertical"

    android:padding="3dp" >

 

    <TextView

        android:id="@+id/display_tv"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text=""

        android:textSize="30sp" />

 

</LinearLayout>

myview.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:layout_marginTop="10sp"

        android:id="@+id/myTextview"

        android:layout_width="wrap_content"

        android:text="Third Fragement"

        android:layout_height="wrap_content" />

 

</LinearLayout>

 

Create Detail_Fragment class

package com.example.samplefraagment;

 

import android.annotation.SuppressLint;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

 

@SuppressLint("NewApi")

public class DetailFragment extends Fragment {

 @Override

 public View onCreateView(LayoutInflater inflater, ViewGroup container,

   Bundle savedInstanceState) {

  View view = inflater.inflate(R.layout.detail_fragment, container, false);

  return view;

 }

 

 // we call this method when button from listfragment is clicked

 public void setText(String item) {

  TextView view = (TextView) getView().findViewById(R.id.display_tv);

  view.setText(item);

 }

}

 

Add another class myFragmentView class

package com.example.samplefraagment;

 

 

 

import android.annotation.SuppressLint;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

 

@SuppressLint("NewApi")

public class myFragmentView extends Fragment {

            @Override

            public View onCreateView(LayoutInflater inflater, ViewGroup container,

                                    Bundle savedInstanceState) {

                        View view = inflater.inflate(R.layout.myview, container, false);

                        return view;

            }

 

}

 

Add fragment item in activity_main layout

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="horizontal" >

 

    <fragment

        android:id="@+id/list_Fragment"

        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:layout_weight=".32"

        class="com.example.samplefraagment.MyListFragment" >

    </fragment>

 

    <fragment

        android:id="@+id/detail_Fragment"

        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:layout_weight=".38"

        class="com.example.samplefraagment.DetailFragment" >

    </fragment>

  

</LinearLayout>

 

Create an xml file name, list_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:background="#CCFF99"

    android:orientation="vertical"

    android:padding="5dp" >

 

    <Button

        android:id="@+id/android_btn_id"

        android:layout_width="105sp"

        android:layout_height="wrap_content"

        android:text="Android" />

 

    <Button

        android:id="@+id/ios_btn_id"

        android:layout_width="105sp"

        android:layout_height="wrap_content"

        android:text="IOS" />

 

    <Button

        android:id="@+id/windows_btn_id"

        android:layout_width="105sp"

        android:layout_height="wrap_content"

        android:text="Windows" />

 

</LinearLayout>

 

Paste following code in MainActivity.class

package com.example.samplefraagment;

 

import android.annotation.SuppressLint;

import android.app.Activity;

import android.os.Bundle;

 

public class MainActivity extends Activity implements

                        MyListFragment.Communicator {

 

            @Override

            protected void onCreate(Bundle savedInstanceState) {

                        super.onCreate(savedInstanceState);

                        setContentView(R.layout.activity_main);

            }

 

            @SuppressLint("NewApi")

            @Override

            public void Message(String OS_Name) {

                        DetailFragment detailfragment = (DetailFragment) getFragmentManager()

                                                .findFragmentById(R.id.detail_Fragment);

                        if (detailfragment != null && detailfragment.isInLayout()) {

                                    detailfragment.setText(OS_Name);

                        }

 

            }

 

}

 

Create DetialActivity class and paste following code

package com.example.samplefraagment;

 

import android.annotation.SuppressLint;

import android.app.Activity;

import android.content.res.Configuration;

import android.os.Bundle;

 

public class DetailActivity extends Activity {

 

            public static String os_name = "";

 

            @SuppressLint("NewApi")

            @Override

            protected void onCreate(Bundle savedInstanceState) {

                        super.onCreate(savedInstanceState);

                        // check Configuration of device

                        if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {

                                    finish();

                                    return;

                        }

                        setContentView(R.layout.detail_activity);

                        Bundle extras = getIntent().getExtras();

                        if (extras != null) {

                                    String name = extras.getString(os_name);

                                    DetailFragment detailFragment = (DetailFragment) getFragmentManager()

                                                            .findFragmentById(R.id.detailFragment);

                                    detailFragment.setText(name);

                        }

 

            }

 

}

 

Create a class MyListFragment. And follow this code

package com.example.samplefraagment;

 

import android.annotation.SuppressLint;

import android.app.Activity;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.widget.Button;

 

@SuppressLint("NewApi")

public class MyListFragment extends Fragment implements OnClickListener {

 

            private Communicator communicator;

 

            Button android_btn, ios_btn, windows_btn;

 

            @Override

            public void onAttach(Activity activity) {

                        super.onAttach(activity);

                        if (activity instanceof Communicator) {

                                    communicator = (Communicator) activity;

                        } else {

                                    throw new ClassCastException(activity.toString()

                                                            + " must implemenet MyListFragment.Communicator");

                        }

            }

 

            @Override

            public View onCreateView(LayoutInflater inflater, ViewGroup container,

                                    Bundle savedInstanceState) {

                        View view = inflater.inflate(R.layout.list_fragment, container, false);

 

                        // Initialize Views

                        android_btn = (Button) view.findViewById(R.id.android_btn_id);

                        ios_btn = (Button) view.findViewById(R.id.ios_btn_id);

                        windows_btn = (Button) view.findViewById(R.id.windows_btn_id);

 

                        // set on click Listeners for buttons

                        android_btn.setOnClickListener(this);

                        ios_btn.setOnClickListener(this);

                        windows_btn.setOnClickListener(this);

 

                        return view;

            }

 

            // Create Interface

            public interface Communicator {

                        public void Message(String OS_Name);

            }

 

            @Override

            public void onClick(View v) {

                        switch (v.getId()) {

                        case R.id.android_btn_id:

                                    updateFragment("Android");

                                    break;

 

                        case R.id.ios_btn_id:

                                    updateFragment("IOS");

                                    break;

 

                        case R.id.windows_btn_id:

                                    updateFragment("Windows");

                                    break;

                        }

 

            }

 

            private void updateFragment(String OS_Name) {

                        communicator.Message(OS_Name);

            }

 

}

 

Now create a folder in res layout-large-land. And create an activity_main.xml file and now paste following code. This layout will show on tablet or large screen

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="horizontal" >

 

    <fragment

        android:id="@+id/list_Fragment"

        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:layout_weight=".32"

        class="com.example.samplefraagment.MyListFragment" >

    </fragment>

 

    <fragment

        android:id="@+id/detail_Fragment"

        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:layout_weight=".38"

        class="com.example.samplefraagment.DetailFragment" >

    </fragment>

 

    <fragment

        android:id="@+id/detail_Fragment2"

        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:layout_weight=".30"

        class="com.example.samplefraagment.myFragmentView" >

    </fragment>

 

</LinearLayout>

Now create a folder in res layout-large-port. And create an activity_main.xml file and now paste following code

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="horizontal" >

 

    <fragment

        android:id="@+id/list_Fragment"

        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:layout_weight=".32"

        class="com.example.samplefraagment.MyListFragment" >

    </fragment>

 

    <fragment

        android:id="@+id/detail_Fragment"

        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:layout_weight=".38"

        class="com.example.samplefraagment.DetailFragment" >

    </fragment>

 

 

 

</LinearLayout>

 

Again create a folder in res layout-port. And create an activity_main.xml file and now paste following code

<?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" >

 

    <fragment

        android:id="@+id/list_Fragment"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_weight="1"

        class="com.example.samplefraagment.MyListFragment" >

    </fragment>

 

</LinearLayout>

 

Now run your application

 Phone or handset with portrait mode and landscape mode

    

Tablet with portrait and landscape mode

   

In landscape mode showing three fragment


Don't want to miss updates? Please click the below button!

Follow MindStick