Free Shipping

Secure Payment

easy returns

24/7 support

  • Home
  • Blog
  • Introduction to Multi-Pane Development in Android with Fragments

Introduction to Multi-Pane Development in Android with Fragments

 July 14  | 0 Comments

Introduction:

Firstly, we have to see the difference between multi-pane and single-pane. A pane or panel defines the part of user interface.
If the screen size is not big enough, then it shows only one pane or panel. This is called single-pane layout mainly present in phones or handsets.

If the screen size is available for multiple views, then it shows more than one layout. This is called multi-pane which is present mainly in Tablet.

Get Skilled in Android Development

By using fragments, we can easily create both type of layouts that is for single-pane (phones) as well as multi-pane (Tablet).
Let’s see how we do multi-pane development in Android using fragments.

Example with Code:

Here in this example, if we run the application on a tablet then it will contain both the fragments on the same screen and if we run it on a handset then it will only show the main fragment. For the other fragment, we have to switch to the next screen.
⦁ Create an Application MultiPaneFragmentExampleAndroid.

Requirements:

src/your package res/layout res/layout-large
MainActivity.java activity_main.xml activity_main.xml
MovieFragment.java movie_details.xml
MovieDetailsFragment.java
MovieData.java

Here, we create another layout for the same activity i.e first one is for single-pane and the second one means inside layout-large folder is for multi-pane layout.
Now, do it one by one.

res/layout/activity_main.xml:

Create this XML file for single-pane layout (phone).
Add the code here

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

Here, FrameLayout contains the fragments.
res/layout-large/activity_main.xml:
Create this XML file for multi-pane layout(Tablet).
Add the code here

<fragment
android:id="@+id/movie_fragment"
android:name="com.example.multipanefragmentexampleandroid.Moviefragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<fragment
android:id="@+id/movie_details_fragment"
android:name="com.example.multipanefragmentexampleandroid.MovieDetailsFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" />

It shows both fragments on the same screen.
movie_details_fragment.xml:
Create this XML file in layout it works for both single-pane and multi-pane. This XML file shows the details of a movie. For single-pane, we have to switch to another screen and for multi-pane, it shows on the same screen.
Add the code here

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tv_movie_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:textSize="18sp" />
MovieData.java:
Create this class to initialize the String array for movie and movie details.
Add the code here:
static String[] Movie = {……};
static String[] MovieDetails = {…..};

MovieFragment.java:
Create this Fragment class, extend it with ListFragment, and override its methods.

We have to define an interface in this class to communicate with Activity.

Add the code here

public interface OnMovieSelectedListener {
public void onMovieSelected(int position);
}
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
try {
mCallback = (OnMovieSelectedListener) activity;
} catch (ClassCastException e) {
throw new ClassCastException(activity.toString()
+ " must implement OnMovieSelectedListener");
}
}

Here, by using mCallback instance of the interface this fragment can deliver the message to the activity by calling onMovieSeleted() method.

MovieDetailsFragment.java:

Create this fragment class

Initialize:

final static String ARG_POSITION = "position";
int mCurrentPosition = -1;

Add the code here

Now, inflate the layout for this fragment in onCreateView() method

if (savedInstanceState != null) {
mCurrentPosition = savedInstanceState.getInt(ARG_POSITION);
}
return inflater.inflate(R.layout.movie_details_fragment, container, false);

Add the code in onStart() method:

Bundle args = getArguments();
if (args != null) {
updateMovieDetailsView(args.getInt(ARG_POSITION));
} else if (mCurrentPosition != -1) {
updateMovieDetailsView(mCurrentPosition);}
public void updateMovieDetailsView(int position) {
TextView tv_movie_details = (TextView) getActivity().findViewById(R.id.tv_movie_details);
tv_movie_details.setText(MovieData.MovieDetails[position]);
mCurrentPosition = position;
}

Here, we see that in updateMovieDetailsView() method it has set the text for Movie Details based on passing arguments and position.

MainActivity.java:

This is our Main Activity which extends with FragmentActivity and implements the interface OnMovieSelectedListener. This is again defined in fragment class to receive the event callbacks from the fragment.

Now implement the method onMovieSelected() for Multi-pane

If we are in multi-pane and user selects the Movie from MovieFragment then implement,

MovieDetailsFragment details_fragment = (MovieDetailsFragment)
getSupportFragmentManager().findFragmentById(R.id.movie_details_fragment);
if (details_fragment != null) {
details_fragment.updateMovieDetailsView(position);

It calls the method in MovieDetailsFragment class to update the view for selected movie.

If the fragment is not available and we are in single-pane then we have to replace the fragment and give it an argument for the selected movie.

Add the code here for single-pane:

MovieDetailsFragment new_fragment = new MovieDetailsFragment();
Bundle args = new Bundle();
args.putInt(MovieDetailsFragment.ARG_POSITION, position);
new_fragment.setArguments(args);
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.fragment_container, new_fragment);
transaction.addToBackStack(null);
transaction.commit();

Conclusion:

This is all about the multi-pane development in Android using Fragments. Here we see the difference between single-pane and multi-pane, which is nothing but just depends on the screen size available. According to this, we can create our layout. To show the one or more views on same screen we use multi-pane i.e on tablet. By using fragments we can easily reuse it on different screens. We can customize it and create wonderful applications. It is a very important and popular feature in Android development.

Download Code: GitHub

Output:

 Single Pane (Phone)

>