Large screen usability

Multi-pane layout

  • On larger screens, multipane layout lets you show different levels of app hierarchy, such as menu items and main content. Users can adjust the size of the panes with a split bar.
public class MultiPanePreferenceActivity extends AppCompatActivity {
    View mSplitBar;
    ViewGroup mLeftContainer;
    ViewGroup mRightContainer;
    float mNewBarCenter = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_multi_pane);
        mSplitBar = findViewById(R.id.split_bar);
        mLeftContainer = (ViewGroup) findViewById(R.id.left_container);
        mRightContainer = (ViewGroup) findViewById(R.id.right_container);
        mSplitBar.setOnTouchListener(mOnTouchListener);
    }
    private View.OnTouchListener mOnTouchListener = new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            int action = event.getAction();
            switch (action) {
                case MotionEvent.ACTION_DOWN:
                    break;
                case MotionEvent.ACTION_MOVE:
                    float newBarX = mSplitBar.getX() + event.getX();
                    mSplitBar.setX(newBarX);
                    mSplitBar.requestLayout();
                    mNewBarCenter = newBarX + (mSplitBar.getWidth() / 2);
                    LinearLayout.LayoutParams llp = (LinearLayout.LayoutParams) mLeftContainer.getLayoutParams();
                    LinearLayout.LayoutParams rlp = (LinearLayout.LayoutParams) mRightContainer.getLayoutParams();
                    float sumWeight = llp.weight + rlp.weight;
                    int parentLayoutWidth = ((View) (mSplitBar.getParent())).getWidth();
                    float leftRatio = mNewBarCenter / parentLayoutWidth;
                    float newlLeftWeight = sumWeight * leftRatio;
                    float newRightWeight = sumWeight - newlLeftWeight;
                    llp.weight = newlLeftWeight;
                    rlp.weight = newRightWeight;
                    mLeftContainer.setLayoutParams(llp);
                    mRightContainer.setLayoutParams(rlp);
                    break;
                case MotionEvent.ACTION_UP:
                    break;
            }
            return true;
        }
    };
    public static class LeftPreferenceFragment extends PreferenceFragmentCompat {
        @Override
        public void onCreatePreferences(Bundle savedInstanceState, String rootKey) {
           setPreferencesFromResource(R.xml.preference_single_pane, rootKey);
        }
    }
    public static class RightPreferenceFragment extends PreferenceFragmentCompat {
        @Override
        public void onCreatePreferences(Bundle savedInstanceState, String rootKey) {
            setPreferencesFromResource(R.xml.preference_second, rootKey);
        }
    }
}

Pop-over

  • For an input field that requires a small volume of information for creating or editing a task, it's required to provide a pop-over with phone-pane dimensions similar to the mobile layout without losing context.
  • As a pop-over is displayed in a partial view that partially overlaps with the current app screen, users can refer to the existing context and perform the requested task with the reduced finger travel distance.

Optimized dialog location

  • A dialog window is designed to receive user feedback. On larger screens, the dialog window should be shown above the pressed button rather than at a fixed location within the screen, in order to miminize the distance the user has to move.