The following is the first few sections of a chapter from The Busy Coder's Guide to Android Development, plus headings for the remaining major sections, to give you an idea about the content of the chapter.


Tutorial #17 - Supporting Large Screens

So far, we have created a variety of fragments that are being used one at a time in a hosting activity: notes, help, and about. And, on smaller-screen devices, like phones, that is probably the best solution. But on devices like 10” tablets, it might be nice to be able to have some of those fragments take over a part of the main activity’s space. For example, the user could be reading the chapter and reading the online help.

Hence, in this tutorial, we will arrange for the help and about fragments to be loaded into EmPubLiteActivity directly on tablets, while retaining our existing functionality for other devices.

This is a continuation of the work we did in the previous tutorial.

You can find the results of the previous tutorial and the results of this tutorial in the book’s GitHub repository:

Step #1: Creating Our Layouts

The simplest way to both add a place for these other fragments and to determine when we should be using these other fragments in the main activity is to create new layout resource sets for larger-screen devices, with customized versions of main.xml to be used by EmPubLiteActivity.

Right-click over the res/ directory in your app, then choose New > “Android Resource Directory” from the context menu. As before, this brings up the new resource directory dialog:

Android Studio New Resource Dialog, As Initially Opened
Figure 338: Android Studio New Resource Dialog, As Initially Opened

Choose “layout” from the “Resource type” drop-down. Then, click on “Screen Width” in the list of qualifiers on the left, and click the “>>” button to add that to the list on the right:

Android Studio New Resource Dialog, After Selecting Screen Width
Figure 339: Android Studio New Resource Dialog, After Selecting “Screen Width”

In the “Screen width” field, fill in 880:

Android Studio New Resource Dialog, After Setting Screen Width
Figure 340: Android Studio New Resource Dialog, After Setting Screen Width

Click OK to create the directory. Repeat that process to create a res/layout-h880dp/ directory, this time choosing “Screen Height” rather than “Screen Width”.

Then, right-click over the res/layout/main.xml file and choose “Copy” from the context menu. After that, right-click over the new res/layout-w880dp/ directory and choose “Paste” from the context menu. This brings up the copy dialog:

Android Studio Copy Dialog
Figure 341: Android Studio Copy Dialog

Check the “Open copy in editor” checkbox and click OK. This will bring up the graphical layout editor on this copy of the main layout.

Unfortunately, what we want to do is not readily supported by Android Studio’s edition of the drag-and-drop GUI builder. So, switch over to the XML for this layout, and replace it with:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="horizontal">

  <LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="7"
    android:orientation="vertical">

    <io.karim.MaterialTabs
      android:id="@+id/tabs"
      android:layout_width="match_parent"
      android:layout_height="48dp"
      app:mtIndicatorColor="@color/colorAccent"
      app:mtSameWeightTabs="true" />

    <android.support.v4.view.ViewPager
      android:id="@+id/pager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"></android.support.v4.view.ViewPager>
  </LinearLayout>

  <View
    android:id="@+id/divider"
    android:layout_width="2dp"
    android:layout_height="match_parent"
    android:background="#AA000000"
    android:visibility="gone" />

  <FrameLayout
    android:id="@+id/sidebar"
    android:layout_width="0dp"
    android:layout_height="match_parent" />
</LinearLayout>

Repeat the same process, copying res/layout/main.xml into the res/layout-h880dp/ directory, and replacing the copy’s contents with:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="7"
    android:orientation="vertical">

    <io.karim.MaterialTabs
      android:id="@+id/tabs"
      android:layout_width="match_parent"
      android:layout_height="48dp"
      app:mtIndicatorColor="@color/colorAccent"
      app:mtSameWeightTabs="true" />

    <android.support.v4.view.ViewPager
      android:id="@+id/pager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"></android.support.v4.view.ViewPager>
  </LinearLayout>

  <View
    android:id="@+id/divider"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#AA000000"
    android:visibility="gone" />

  <FrameLayout
    android:id="@+id/sidebar"
    android:layout_width="match_parent"
    android:layout_height="0dp"></FrameLayout>
</LinearLayout>

Step #2: Loading Our Sidebar Widgets

Now that we added the divider widget and sidebar container to (some of) our layouts, we need to access those widgets at runtime.

So, in EmPubLiteActivity, add data members for them:

  private View sidebar=null;
  private View divider=null;

Then, in onCreate() of EmPubLiteActivity, initialize those data members, sometime after the call to setContentView():

    sidebar=findViewById(R.id.sidebar);
    divider=findViewById(R.id.divider);

Step #3: Opening the Sidebar

The preview of this section was eaten by a grue.

Step #4: Loading Content Into the Sidebar

The preview of this section may contain nuts.

Step #5: Removing Content From the Sidebar

The preview of this section is out seeking fame and fortune as the Dread Pirate Roberts.