How To Support Multiple Screen Size In Android

There are a lot of android devices with different screen size and resolution. This article will tell you how to make android program load layout file dynamically based on the device’s screen resolution or size at run time.

1. Use Android Qualifiers.

If you use tablet often, you will find that most of tablet apps use two panel model. This is because tablet screen size is big, there are enough space to show content. But almost all mobile apps use single panel model, because of it’s small screen size.

android pad app one activity show multiple view

android phone app multiple activity single panel

But how to make your single app show different layout when running on different screen size devices? The answer is use android qualifiers.

Qualifiers can be used for all android resources such as layout, drawable, mipmap etc. When android OS get the device matched qualifier, it will use the resource files saved in that qualifier directory such as layout file, drawable file etc.

Let’s see a previous example again Android Multiple Fragments In One Activity Example. If we run this example in a mobile phone, we will find below screen effect.

android two page model in mobile device

Above example’s activity layout file name is activity_multiple_fragment.xml, it is saved in app / res / layout folder. This layout file is ok for tablet device with big screen, but for mobile it is not perfect.

To make the app load different layout file for multiple size screen, we need follow below steps.

  1. Modify app / res / layout / activity_multiple_fragment.xml file as below. Now the layout file only contain one left fragment.
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    
        <fragment
            android:id="@+id/fragmentLeft"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:name="com.dev2qa.example.fragment.multiple.FragmentLeft"/>
    
    </LinearLayout>
  2. Create a folder layout-large under app / src / main / res folder. And copy original layout file to there, the layout file name do not change. To make the layout-large folder visible in android studio, you need to switch to Project mode in left panel. large is just one layout qualifier, the layout file under layout-large folder will be used when android OS think the device screen size is large.
    android app res layout-large folder
  3. Now run the MultipleFragmentActivity use a mobile and a tablet emulator, you can find that the tablet screen is not changed but the mobile screen is changed more reasonable as below.
    android small size screen layout example
  4. But when you click the button in mobile screen, the app stopped. Because in mobile layout file, there is only left fragment, do not contains right fragment.But the code need to get the right fragment when the button is clicked. That action trigger a null pointer exception. So we need to change the code to check whether the right fragment exist or not. If right fragment do not exist, we need to start an activity to show right fragment content.
    // Do not use fragmentBelongActivity.getFragmentManager() method which is not compatible with older android os version. .
    FragmentManager fragmentManager = fragmentBelongActivity.getSupportFragmentManager();
    
    // Get right Fragment object.
    Fragment rightFragment = fragmentManager.findFragmentById(R.id.fragmentRight);
    
    // If in single panel mode, right fragment do not exist.
    // Then start right fragment activity.
    if(rightFragment==null)
    {
        MultipleFragmentRightActivity rightActivity = new MultipleFragmentRightActivity();
        rightActivity.startActivity(getContext(), "You click Android button.");
    }else {
        // Get the TextView object in right Fragment.
        final TextView rightFragmentTextView = (TextView) rightFragment.getView().findViewById(R.id.fragmentRightTextView);
    
        // Set text in right Fragment TextView.
        rightFragmentTextView.setText("You click Android button.");
    }

    android start right fragment activity if right fragment do not exist

  5. So we need to create MultipleFragmentRightActivity java class and it’s layout xml file activity_multiple_fragment_right.xml.
  6. MultipleFragmentRightActivity.java

    package com.dev2qa.example.fragment.multiple;
    
    import android.content.Context;
    import android.content.Intent;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.widget.TextView;
    
    import com.dev2qa.example.R;
    
    public class MultipleFragmentRightActivity extends AppCompatActivity {
    
        private final static String INTENT_KEY_MESSAGE = "INTENT_KEY_MESSAGE";
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_multiple_fragment_right);
    
            setTitle("dev2qa.com - Right Fragment Activity");
    
            // Get intent and transferred message.
            Intent intent = getIntent();
            String message = intent.getStringExtra(INTENT_KEY_MESSAGE);
    
            // Show the message in the text view.
            TextView textView = (TextView)findViewById(R.id.fragmentRightTextView);
            textView.setText(message);
        }
    
        // This method is used to start this activity. It is called by other activity.
        public void startActivity(Context ctx, String message)
        {
            Intent intent  = new Intent(ctx, MultipleFragmentRightActivity.class);
            intent.putExtra(INTENT_KEY_MESSAGE, message);
            ctx.startActivity(intent);
        }
    }
  7. activity_multiple_fragment_right.xml

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    
        <fragment
            android:id="@+id/fragmentRight"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:name="com.dev2qa.example.fragment.multiple.FragmentRight"/>
    
    </LinearLayout>

2. Android Qualifiers Classification.

2.1 Qualifiers By Screen Size.

  1. small : Small screen size resources.
  2. normal : Normal screen size resources.
  3. large : Large screen size resources.
  4. xlarge : Super large screen size resources.

2.2 Qualifiers By Screen Resolution.

  1. ldpi : Low screen resolution resources ( less than 120 dpi ).
  2. mdpi : Middle screen resolution resources ( 120 dpi – 160 dpi ).
  3. hdpi : High screen resolution resources ( 160 dpi – 240 dpi ).
  4. xhdpi : Super high screen resolution resources ( 240 dpi – 320 dpi ).
  5. xxhdpi : Super super high screen resolution resources ( 320 dpi – 480 dpi ).

2.3 Qualifiers By Screen Orientation.

  1. land : Horizontal screen resource.
  2. port : Vertical screen resource.

3. Use Custom Minimum Width / Height Qualifier.

We can make the qualifier more accurate by specify the screen minimum width or height value. When screen size is bigger than the specified width / height use one resource ( layout, drawable, mipmap ), when screen size is smaller than the specified width / height then use another resouce ( layout, drawable, mipmap ).

  1. Create a folder layout-sw600dp in app / src / main / res folder. This folder tell android OS when run device that screen width bigger than 600dp then use the layout file in this folder.
  2. Copy the activity_multiple_fragment.xml file into this folder.
    custom android qualifiers
  3. Modify the xml file content as following.
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    
        <fragment
            android:id="@+id/fragmentLeft"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:name="com.dev2qa.example.fragment.multiple.FragmentLeft"/>
        
    </LinearLayout>
  4. Run the activity again, you can find the custom minimum width qualifier has higher priority than the built-in large qualifier.
    android custom minimum width layout qualifier example
  5. To create minimum height qualifier, just create folder layout-sh600dp under app / src / main / res folder. And copy related layout file in it.
(Visited 2,119 times, 15 visits today)
READ :   Simple Android News App Compatible With Phones and Tablets

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.