Implementing Adaptive User Interface Flows

Introduction

When we talk about layouts then something with boundaries might come mind. We have already talked about layouts in our previous articles. Depending on the layout that an application is currently showing, the user interface flow might be different.

Determine the current layouts

When we are viewing something on the screen of the Android device then whether we are viewing on the various screen devices we must understand how it is possible that the same application is on a 4 inch device running the same as it is running on a 7 inch device. Then there are certain classes and objects to understand the layout. Let us create an activity as shown in the code below however this code might just be a reflection of the entire code.

public class NewsReaderActivity extends FragmentActivity {
boolean mIsDualPane;

@Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main_layout);

      View articleView = findViewById(R.id.article);
      mIsDualPane = articleView != null &&
      articleView.getVisibility() == View.VISIBLE;
   }
}

Note: Notice that this code queries whether or not the "article" pane is available that is much more flexible than hard-coding a query for a specific layout.

Reaction Depending on Current Layout

Some actions might have a different result depending on the current layout. Let us use an example that a browser having a page contains some of the links or anything that is navigational or clickable. Such as when we click it, it goes to the new tab so something like that is related to the layout. Whenever there are two window panes then there is a dual mode pane and then when one is clicked it shows something on the new tab.

Code

@Override
public void onHeadlineSelected(int index) {
   mArtIndex = index;
   if (mIsDualPane) {
   /* display article on the right pane */
      mArticleFragment.displayArticle(mCurrentCat.getArticle(index));
   } else {
/* start a separate activity */
      Intent intent = new Intent(this, ArticleActivity.class);
      intent.putExtra("catIndex", mCatIndex);
      intent.putExtra("artIndex", index);
      startActivity(intent);
   }
}

Likewise, if the application is in dual-pane mode, it should set up the action bar with tabs for navigation, whereas if the app is in single-pane mode, it should set up navigation with a spinner widget. So our code should also check which case is appropriate as in the following:  

final String CATEGORIES[] = { "Top Stories", "Politics", "Economy", "Technology" };

public void onCreate(Bundle savedInstanceState) {
....
   if (mIsDualPane) {
   /* use tabs for navigation */
      actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_TABS);
      int i;
      for (i = 0; i < CATEGORIES.length; i++) {
         actionBar.addTab(actionBar.newTab().setText(
         CATEGORIES[i]).setTabListener(handler));
      }
         actionBar.setSelectedNavigationItem(selTab);
   }
      else {
/* use list navigation (spinner) */
         actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_LIST);
         SpinnerAdapter adap = new ArrayAdapter(this,
         R.layout.headline_item, CATEGORIES);
         actionBar.setListNavigationCallbacks(adap, handler);
}
}

Reuse Fragments in Other Activities

Reuse the Fragments on other activities. Likewise it might be a good consideration in the optimized programming of the recurring pattern in the designing for multiple screens is to have a portion of your interface that's implemented as a pane on some screen configurations and as a separate activity on other configurations. Reusing the fragments in the code reduces redundancies and duplicity as shown below.

Code 

<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/headlines"
   android:layout_height="fill_parent"
   android:name="com.example.android.newsreader.HeadlinesFragment"
   android:layout_width="400dp"
   android:layout_marginRight="10dp"/>
<fragment android:id="@+id/article"
   android:layout_height="fill_parent"
   android:name="com.example.android.newsreader.ArticleFragment"
   android:layout_width="fill_parent" />
</LinearLayout>

Note: As the preceding layout indicates it is necessary to do something with fill_parent as shown and other things are done to the width that must be 400 to 500 dp. 

Handling Screen Configuration Changes

As we have already learned, handing various devices or screens revolve around the layouts. If we are using a separate activity to implement separate parts of your interface then you need to keep in it may be necessary to react to certain configuration changes and result in the interface consistency.

Java code

package com.example.android.newsreader;

import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class ArticleActivity extends FragmentActivity {
// The news category index and the article index for the article we are to display
   int mCatIndex, mArtIndex;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   mCatIndex = getIntent().getExtras().getInt("catIndex", 0);
   mArtIndex = getIntent().getExtras().getInt("artIndex", 0);

// If we are in two-pane layout mode, this activity is no longer necessary
    if (getResources().getBoolean(R.bool.has_two_panes)) {
       finish();
       return;
}

// Place an ArticleFragment as our content pane
    ArticleFragment f = new ArticleFragment();
    getSupportFragmentManager().beginTransaction().add(android.R.id.content, f).commit();

// Display the correct news article on the fragment
    NewsArticle article = NewsSource.getInstance().getCategory(mCatIndex).getArticle(mArtIndex);
    f.displayArticle(article);
   }
}

Summary

This article tells us about the adaptation of user interfaces using various layouts and devices. An application adapts to the various screen resolutions and configuration changes on the device.