Fragment and It uses In Android

Hello Guys, Hopes You are Doing Well.
Today  I am going to discuss Fragment and it use in Android. Fragment introduced in Android Version 3.0 (HoneyComb). To use the larger screen size device(Tablet). But now it is  used actively in  responsive design and reuse-ability of code. Before proceeding in depth the first basic question?
What is Fragment? and what is  the benefit to use it?
 A fragment is simply a block of UI, with its own life cycle, that can be reused within different activities. Fragments allow developers to create highly modular user interface components that can change dramatically based on screen sizes, orientation, and other aspects of the display that might be relevant to the design.
What is the inter-dependency between Activity and Fragment ?
A fragment must always be embedded in an activity and the fragment's life cycle is directly affected by the host activity's lifecycle. For example, when the activity is paused, so are all fragments in it, and when the activity is destroyed, so are all fragments. However, while an activity is running, you can manipulate each fragment independently, such as add or remove them.
When you perform such a fragment transaction, you can also add it to a back stack that's managed by the activity—each back stack entry in the activity is a record of the fragment transaction that occurred. The back stack allows the user to reverse a fragment transaction (navigate backwards), by pressing the Back button.
How  We can add fragment and what is the process?
When you add a fragment as a part of your activity layout, it lives in a ViewGroup inside the activity's view hierarchy and the fragment defines its own view layout. You can insert a fragment into your activity layout by declaring the fragment in the activity's layout file, as a <fragment> element, or from your application code by adding it to an existing ViewGroup.
However, a fragment is not required to be a part of the activity layout; you may also use a fragment without its own UI as an invisible worker for the activity.
     
To define a new fragment you extend either the android.app.Fragment class or one of its subclasses, for example ListFragment, DialogFragment, PreferenceFragment or WebViewFragment. The following code shows an example implementation.

In that code I am showing two pan layout for tablet and single pan layout for device(Just like above given Images).  There are 4 java class file and two xml file under layout folder and one xml file under layout-large.
Here is following java and xml file name:-
/src folder
1. HomeActivity .java
2. HeaderFragment.java
3. ArticleFragment.java
4. DataCenter.java
/layout folder
1. activity_home.xml
2. article_view.xml
/layout-large folder
1. news_articles.xml
I have putted the detailed description of individual function in comment. So please going through this code have a look on that comments. It help you to understand this code thoroughly.

package com.sks.fragment;

import android.os.Bundle;

import android.app.Activity;

import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentTransaction;

import android.view.Menu;

public class HomeActivity extends FragmentActivity

implements HeadlineFragment.OnHeadlineSelectedListener {

       @Override

       protected void onCreate(Bundle savedInstanceState) {

              super.onCreate(savedInstanceState);

              setContentView(R.layout.activity_home);

        // Check whether the activity is using the layout version with

        // the fragment_container FrameLayout. If so, we must add the first fragment

        if (findViewById(R.id.fragment_container) != null) {

            // However, if we're being restored from a previous state,

            // then we don't need to do anything and should return or else

            // we could end up with overlapping fragments.

            if (savedInstanceState != null) {

                return;

            }

            // Create an instance of ExampleFragment

            HeadlineFragment firstFragment = new HeadlineFragment();

            // In case this activity was started with special instructions from an Intent,

            // pass the Intent's extras to the fragment as arguments

            firstFragment.setArguments(getIntent().getExtras());

            // Add the fragment to the 'fragment_container' FrameLayout

            getSupportFragmentManager().beginTransaction()

                    .add(R.id.fragment_container, firstFragment).commit();

        }

             

       }

    public void onArticleSelected(int position) {

        // The user selected the headline of an article from the HeadlinesFragment

        // Capture the article fragment from the activity layout

        ArticleFragment articleFrag = (ArticleFragment)

                getSupportFragmentManager().findFragmentById(R.id.article_fragment);

        if (articleFrag != null) {

            // If article frag is available, we're in two-pane layout...

            // Call a method in the ArticleFragment to update its content

            articleFrag.updateArticleView(position);

        } else {

            // If the frag is not available, we're in the one-pane layout and must swap frags...

            // Create fragment and give it an argument for the selected article

            ArticleFragment newFragment = new ArticleFragment();

            Bundle args = new Bundle();

            args.putInt(ArticleFragment.ARG_POSITION, position);

            newFragment.setArguments(args);

            FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

            // Replace whatever is in the fragment_container view with this fragment,

            // and add the transaction to the back stack so the user can navigate back

            transaction.replace(R.id.fragment_container, newFragment);

            transaction.addToBackStack(null);

            // Commit the transaction

            transaction.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.home, menu);

              return true;

       }

}

 2. HeadlineFragment

package com.sks.fragment;

import android.app.Activity;

import android.support.v4.app.ListFragment;

import android.os.Build;

import android.os.Bundle;

import android.view.View;

import android.widget.ArrayAdapter;

import android.widget.ListView;

public class HeadlineFragment extends ListFragment {

    OnHeadlineSelectedListener mCallback;

    // The container Activity must implement this interface so the frag can deliver messages

    public interface OnHeadlineSelectedListener {

        /** Called by HeadlinesFragment when a list item is selected */

        public void onArticleSelected(int position);

    }

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        // We need to use a different list item layout for devices older than Honeycomb

        int layout = Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB ?

                android.R.layout.simple_list_item_activated_1 : android.R.layout.simple_list_item_1;

        // Create an array adapter for the list view, using the Ipsum headlines array

        setListAdapter(new ArrayAdapter<String>(getActivity(), layout, DataContainer.Headlines));

    }

    @Override

    public void onStart() {

        super.onStart();

        // When in two-pane layout, set the listview to highlight the selected list item

        // (We do this during onStart because at the point the listview is available.)

        if (getFragmentManager().findFragmentById(R.id.article_fragment) != null) {

            getListView().setChoiceMode(ListView.CHOICE_MODE_SINGLE);

        }

    }

    @Override

    public void onAttach(Activity activity) {

        super.onAttach(activity);

        // This makes sure that the container activity has implemented

        // the callback interface. If not, it throws an exception.

        try {

            mCallback = (OnHeadlineSelectedListener) activity;

        } catch (ClassCastException e) {

            throw new ClassCastException(activity.toString()

                    + " must implement OnHeadlineSelectedListener");

        }

    }

    @Override

    public void onListItemClick(ListView l, View v, int position, long id) {

        // Notify the parent activity of selected item

        mCallback.onArticleSelected(position);

       

        // Set the item as checked to be highlighted when in two-pane layout

        getListView().setItemChecked(position, true);

    }

}

3. public class ArticleFragment extends Fragment {

    final static String ARG_POSITION = "position";

    int mCurrentPosition = -1;

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

        Bundle savedInstanceState) {

        // If activity recreated (such as from screen rotate), restore

        // the previous article selection set by onSaveInstanceState().

        // This is primarily necessary when in the two-pane layout.

        if (savedInstanceState != null) {

            mCurrentPosition = savedInstanceState.getInt(ARG_POSITION);

        }

        // Inflate the layout for this fragment

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

    }

    @Override

    public void onStart() {

        super.onStart();

        // During startup, check if there are arguments passed to the fragment.

        // onStart is a good place to do this because the layout has already been

        // applied to the fragment at this point so we can safely call the method

        // below that sets the article text.

        Bundle args = getArguments();

        if (args != null) {

            // Set article based on argument passed in

            updateArticleView(args.getInt(ARG_POSITION));

        } else if (mCurrentPosition != -1) {

            // Set article based on saved instance state defined during onCreateView

            updateArticleView(mCurrentPosition);

        }

    }

    public void updateArticleView(int position) {

        TextView article = (TextView) getActivity().findViewById(R.id.article);

        article.setText(DataContainer.Articles[position]);

        mCurrentPosition = position;

    }

    @Override

    public void onSaveInstanceState(Bundle outState) {

        super.onSaveInstanceState(outState);

        // Save the current article selection in case we need to recreate the fragment

        outState.putInt(ARG_POSITION, mCurrentPosition);

    }

}

 4. package com.sks.fragment;

public class DataContainer {

    static String[] Headlines = {

        "Android",

        "java",

        "Database"

    };

    static String[] Articles = {

        "Android\n\nExcepteur pour-over occaecat squid biodiesel umami gastropub, nulla laborum salvia dreamcatcher fanny pack. Ullamco culpa retro ea, trust fund excepteur eiusmod direct trade banksy nisi lo-fi cray messenger bag. Nesciunt esse carles selvage put a bird on it gluten-free, wes anderson ut trust fund twee occupy viral. Laboris small batch scenester pork belly, leggings ut farm-to-table aliquip yr nostrud iphone viral next level. Craft beer dreamcatcher pinterest truffaut ethnic, authentic brunch. Esse single-origin coffee banksy do next level tempor. Velit synth dreamcatcher, magna shoreditch in american apparel messenger bag narwhal PBR ennui farm-to-table.",

        "javao\n\nVinyl williamsburg non velit, master cleanse four loko banh mi. Enim kogi keytar trust fund pop-up portland gentrify. Non ea typewriter dolore deserunt Austin. Ad magna ethical kogi mixtape next level. Aliqua pork belly thundercats, ut pop-up tattooed dreamcatcher kogi accusamus photo booth irony portland. Semiotics brunch ut locavore irure, enim etsy laborum stumptown carles gentrify post-ironic cray. Butcher 3 wolf moon blog synth, vegan carles odd future.",

        "DataBase\n\nsgshuishuihsuish89 ugishuhs huisuihs8uh , huihsuihj. gfuyghuygh HGUygh bhuih8ihun dHJAGDSYUGS7GBV . ftF6TYF76TGF78YGH78 YUG7GUKBHUIH H78UH78H87UH.YUG78Y87YU9KHNUIY,HIHU "

    };

}

 Now xml file, at first under layout folder

1. activity_home.xml

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

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

    android:id="@+id/fragment_container"

    android:layout_width="match_parent"

    android:layout_height="match_parent" />

 2. article_view.xml

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

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

    android:id="@+id/article"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:padding="16dp"

    android:textSize="18sp" />

lastly

3.  news_articles.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:baselineAligned="false"

    android:orientation="horizontal" >

    <fragment

        android:id="@+id/headlines_fragment"

        android:name="com.example.android.fragments.HeadlinesFragment"

        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:layout_weight="1" />

    <fragment

        android:id="@+id/article_fragment"

        android:name="com.example.android.fragments.ArticleFragment"

        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:layout_weight="2" />

</LinearLayout>

this is the starting code for Fragment. In next blog  I will put more light on Fragment LifeCycle and different type of fragment and Its uses. 

              Happy Coding !!!