Handling Screen Rotations on Android For Tablet and Phone (Different Layouts)

[koeks525]

Hi guys,

I am creating a mobile app for my BTech project. I want to create this app in such a way that it scales well for mobile phones and tablets. To this end, I have setup the following so far:

1. I have 3 Main Activity xml files - one xml file is for mobile phones (portrait and landscape), the other one is for a tablet (landscape), and the last one is for a tablet (portrait). For the tablet layout in landscape, I have two FrameLayout's - these frame layouts are where I will programatically load two fragments for the tablet view. In the two layout files (mobile portrait, tablet portrait), I have one FrameLayout - I load the needed fragment programatically.

2. Before loading the needed fragment(s), I first perform a calculation which will tell me if the current device is a tablet, or a mobile phone. If the device is a tablet, I then check if it the tablet is in portrait mode, or in landscape mode. If the tablet is in landscape mode, I load the two fragments. If not, I load one fragment (for portrait mode).

All of this works fine, expect for when the screen is rotated. Currently, I have LoginFragment, LoginInformationFragment, RegistrationFragment, RegistrationInformationFragment, etc. If I go to registration, on a tablet, in landscape mode - the two fragments load fine. However, when I rotate the device, this takes loads the login fragment.

Here is my code for the onCreate method of the Activity:

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getData();
        setSocialMedia();
        mainActivityToolbar = (Toolbar) findViewById(R.id.MainActivityToolbar);
        toolbarTextView = (TextView) findViewById(R.id.MainActivityToolbarTextView);
        setSupportActionBar(mainActivityToolbar);
        loadLoginFragment();

    }

Here is the code for loadLoginFragment - this is where the "magic" is happening :

 private void loadLoginFragment(){
        deviceUtils = new DeviceUtils(this);
        isTablet = deviceUtils.isTablet();
        if (isTablet) {
            toolbarTextView.setText("Log In To Continue");
            isLandscape = deviceUtils.isLandscape();
            if (isLandscape) {
                LoginFragment loginFragment = new LoginFragment();
                LoginInformationFragment loginInformationFragment = new LoginInformationFragment();
                FragmentManager fragmentManager = getFragmentManager();
                FragmentTransaction loginTransaction = fragmentManager.beginTransaction();
                loginTransaction.replace(R.id.MainActivityContentViewTabletOne, loginFragment);
                loginTransaction.addToBackStack(null);
                loginTransaction.commit();

                FragmentTransaction informationTransaction = fragmentManager.beginTransaction();
                informationTransaction.replace(R.id.MainActivityContentViewTabletTwo, loginInformationFragment);
                informationTransaction.addToBackStack(null);
                informationTransaction.commit();
            } else {
                LoginFragment loginFragment = new LoginFragment();
                FragmentManager fragmentManager = getFragmentManager();
                FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.MainActivityContentViewTabletLand, loginFragment);
                fragmentTransaction.addToBackStack(null);
                fragmentTransaction.commit();
            }
        } else {
            FragmentManager fragmentManager = getFragmentManager();
            FragmentTransaction transaction = fragmentManager.beginTransaction();
            transaction.replace(R.id.MainActivityContentViewMobile, new LoginFragment());
            transaction.addToBackStack(null);
            transaction.commit();
        }
    }

So for the more experienced Android developers here, how would you handle screen rotation for a mobile app which has a different layout for mobile and tablet? I hope I am making sense in this post.

Thanks.

 

[Stillie]

/snip

I have seen a library out there called Parcels which is a nice library, which allows you to save data before and load the data after rotation complete.

https://github.com/johncarl81/parceler

If you don't want to have a look into a separate library, you will need to use the onSaveInstanceState and onRestoreInstanceState methods. These methods are also used to save data before rotation and allows you to load them back up after rotation. Read into either of those

 

[[)roi(]]

Some ideas on approach:

• On phones i.e. smaller screens: portrait, and typically only support vertical orientations; i.e. rotate to adjust for upside down or rightside up
• On tablets i.e. wider screens: have 3 views; each view is just a container for your controllers. Turning the device, you then simply adjust the constraints of those views, and in portrait; like the iPad, you could even hide one of those views and replace the functionality with a popover menu, alternatively use a slide out drawer.