In this tutorial you will learn how to build responsive user interface in android.We will use Fragments and Frame Layout.You must read Fragment in Android and Frame Layout tutorial before starting this tutorial.You will create a layout with list which will be responsive for all android devices like smartphone,tablet etc.For list you will use ListFragment.

Now let’s start create android application project.

Fragments

After that go to your activity_main.xml and remove all default XML code.Then put XML code for FrameLayout like this.

Fragments

Till here your MainActivity.java class will look like this.

public class MainActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Next you will create a directory and a layout within that directory to support large screens.Simply go to res directory right click > Create new folder name it layout-large nothing else like this.

Fragments

Right click on layout-large > New > Android XML File.Name it same as your default XML file mine is activity_main.xml.Now put Linear Layout with horizontal orientation and Two fragments.

Fragments
First Fragment is for list and second is for textview concerning with each item.
Now next create two activity/class.Right click src > New > Class name it what ever you want(CodecFragments.java) and (ArticleFragments.java).Initially it will look simple.

CodecFragments.java

public class CodecFragments {

}

ArticleFragment.java

public class ArticleFragment {

}

Now next First you will implement all those method which you need.For CodecFragments.java class you will implement all these methods.

public class CodecFragments extends ListFragment{
	OnCodecSelectedListener mCallback;

   
        public interface OnCodecSelectedListener {
       
       
        }
	@Override
	public void onAttach(Activity activity) {
		// TODO Auto-generated method stub
		super.onAttach(activity);
	}

	@Override
	public void onListItemClick(ListView l, View v, int position, long id) {
		// TODO Auto-generated method stub
		super.onListItemClick(l, v, position, id);
	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
	}

	@Override
	public void onStart() {
		// TODO Auto-generated method stub
		super.onStart();
	}

}

For ArticleFragment.java class you need these methods.

public class ArticleFragment extends Fragment{

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		return super.onCreateView(inflater, container, savedInstanceState);
	}
	@Override
	public void onStart() {
		// TODO Auto-generated method stub
		super.onStart();
	}
	@Override
	public void onSaveInstanceState(Bundle outState) {
		// TODO Auto-generated method stub
		super.onSaveInstanceState(outState);
	}
	public void updateArticleView(int position) {
       
    }
}

Now you have implemented all methods.Next create a new class name it CodecList.Now create two string array.

public class CodecList {
	 static String[] Header = {
	        "Article One",
	        "Article Two"
	    };

	    static String[] Description = {
	        "Article One\n\nThis is simple text fragments in android application which provides you a responsive layout for all android devices.",
	        "Article Two\n\nThis is a second demo to demonstrate that how fragments look like for large and small android devices."
	    };
}

Now go to your MainActivity.java class.Implement an interface onCodecSelectedListener.And also create a public method for articleView.

public class MainActivity extends FragmentActivity implements CodecFragments.OnCodecSelectedListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    public void onArticleSelected(int position) {
    	
    }
}

Next put some code to set listview and interface for list selection whenever list item is clicked,open concerning view and set click mode to single.
CodecFragment.java

package androidcodec.flexibleui;

/*
 * 
 * All Rights Reserved By:Farhan Rasheed
 * 
 * */

import android.app.Activity;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class CodecFragments extends ListFragment{
	OnCodecSelectedListener mCallback;

   
    public interface OnCodecSelectedListener {
    	public void onArticleSelected(int position);
    }
	@Override
	public void onAttach(Activity activity) {
		// TODO Auto-generated method stub
		super.onAttach(activity);
		 // This makes sure that the container activity has implemented
        // the callback interface. If not, it throws an exception.
        try {
            mCallback = (OnCodecSelectedListener) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString()
                    + " must implement OnCodecSelectedListener");
        }
	}

	@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);
	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		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 CodecList array
        setListAdapter(new ArrayAdapter(getActivity(), layout, CodecList.Header));
	}

	@Override
	public void onStart() {
		// TODO Auto-generated method stub
		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);
        }
	}

}

Now you are done with list.Next go to your MainActivity.java file and set first fragment to Frame Layout like this.

public class MainActivity extends FragmentActivity implements CodecFragments.OnCodecSelectedListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
     // Check whether the activity is using the layout version with
        // the fragments 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;
            }
            //creating an object of CodecFragment class
            CodecFragments codeFragment = new CodecFragments();
            // In case this activity was started with special instructions from an Intent,
            // pass the Intent's extras to the fragment as arguments
            codeFragment.setArguments(getIntent().getExtras());
            getSupportFragmentManager().beginTransaction()
            .add(R.id.fragment_container, codeFragment).commit();
        }
    }
    public void onArticleSelected(int position) {
    	
    }
}

Now till here if you run your android application project your output should look like this.

Fragments

If you click any item it display nothing because you haven’t add article view functionality.
Next create new layout right click on layout > New > Android XML File name it as article_view.Now put TextView in that layout.

seven

Now go to ArticleFragment.java class.Inflate layout,updating article view when list item clicked or for large screens by passing position of the article from onStart() method.

ArticleFragment.java

package androidcodec.flexibleui;
/*
 * 
 * All Rights Reserved By:Farhan Rasheed
 * 
 * */
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 ArticleFragment extends Fragment{
	final static String ARG_POSITION = "position";
	int mCurrentPosition = -1;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		// 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() {
		// TODO Auto-generated method stub
		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 fragments 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(CodecList.Description[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);
	}
}

Now next go to your MainActivity.java class and put some code for updating article view when selected from list view after that your final code.
MainActivity.java

package androidcodec.flexibleui;

/*
 * 
 * All Rights Reserved By:Farhan Rasheed
 * 
 * */



import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBarActivity;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import androidcodec.flexibleui.CodecFragments.OnCodecSelectedListener;


@SuppressLint("NewApi") 
public class MainActivity extends FragmentActivity implements CodecFragments.OnCodecSelectedListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
     // 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;
            }
            //creating an object of CodecFragment class
            CodecFragments codeFragment = new CodecFragments();
            // In case this activity was started with special instructions from an Intent,
            // pass the Intent's extras to the fragment as arguments
            codeFragment.setArguments(getIntent().getExtras());
            getSupportFragmentManager().beginTransaction()
            .add(R.id.fragment_container, codeFragment).commit();
        }
    }
    public void onArticleSelected(int position) {
    	 // The user selected the list item of an article

        // 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();
        }
    }
}

Now run your android application project.Output against each item click in horizontal and vertical view.
Fragments

Fragments

You can Download code from Official Website.Thanks for visiting.I hope this tutorial helped you alot.