Android Drawables for Multiple Screens

Android runs on an assortment of devices that offer different screen sizes and densities. For applications, Android system provides a consistent development environment across devices and handles most of the work to adjust each application’s user interface to the screen on which it is displayed.

Range of supported Screens:

Android provides support for multiple screen sizes and densities, reflecting the many different screen configurations that a device may have. One can use features of the Android system to optimise the application’s user interface for each screen configuration and ensure that the application not only renders properly, but provides the best user experience possible on each screen.

A set of six generalised densities:

  • ldpi (low) ~120dpi
  • mdpi (medium) ~160dpi
  • hdpi (high) ~240dpi
  • xhdpi (extra-high) ~320dpi
  • xxhdpi (extra-extra-high) ~480dpi
  • xxxhdpi (extra-extra-extra-high) ~640dpi

 

  Low Density(120), ldpi Medium Density(160), mdpi High Density(240), hdpi Extra-High Density(320), xhdpi
Small Screen QVGA (240×320)   480×640  
Normal Screen WQVGA400 (240×400)

WQVGA432 (240×432)

HVGA (320×480) WVGA800 (480×800)

WVGA854 (480×854)

600×1024

640×960
Large Screen WVGA800 (480×800)

WVGA854 (480×854)

WVGA800 (480×800)

WVGA854 (480×854)

600×1024

   
Extra-Large Screen 1024×600 WXGA (1280×800)

1024×768

1280×768

1536×1152

1920×1152

1920×1200

2048×1536

2560×1536

2560×1600

 

Formula for pixel

px=dp*(dpi/160)
dp→ Density Independent Pixel

dpi→ Dots per Inch

px→ Pixels

ppi→ Pixel per Inch

Step 1: Create a New Project with Android Studio.

Name the application to {anything of your choice} & then click Next. I have currently named it multiresasset.

Step 2:  Configure your App

Select the API Version (I took it as 15) as per your Target Audience. Under Phone and Tablet select the API and the click Next.

        Select Empty Activity and then click Next.

Keep the Activity name as MainActivity (or any name of your choice) and click Finish.

MainActivity is the Default name

 

ONCE THE PROJECT IS LOADED :

Step 3: Code Setup

In the Android Explorer Dropdown select res–>layout and then activity_main.xml

Under activity_main.xml change the layout to Relative Layout and then write the following code:

<ImageView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:id="@+id/imageview"
 android:src="@drawable/scene"
 android:layout_centerVertical="true"
 android:layout_centerHorizontal="true"/>
If you want to run the same image in Landscape mode, right click on layout under the res folder. Select New and then click on Layout resource file.

After making a new Layout Resource file, keep the following values for the New Resource File.

After clicking on Orientation click on the >> arrows so that you can choose the Screen Orientation type.

It will look something like the above image.

Step 4: Add Repository

In the Menu Bar click on File, and then click on Settings

Once the Settings tab is open, click on Plugins and then click on Browse Repositories.

Search for the repository called Android Drawable Importer and install the same. After installation Restart Android Studio.

Under the Android Explorer Dropdown.

          1) Right click on Res Folder–> New–> Multusource-Drawable

          2) Select the Image(for the formats you need i.e LDPI, MDPI, HDPI, XHDPI, XXHDPI, XXXHDPI and TVDPI) keep the Resource name as the name you want in the Drawables folder and click OK.

Double click on the java folder–> Package Name and then on MainActivity.

Under MainActivity write the following after setContentView(R.layout.activity_main);

ImageView myimage = (ImageView)findViewById(R.id.imageview);
 myimage.setImageResource(R.drawable.scene);
 PhotoViewAttacher photoView = new PhotoViewAttacher(myimage); //for the Zoom Feature
 photoView.update();

Step 5:  Project Settings

Under the Gradle Scripts, click on build.gradle(Project:multiresasset) import the following maven:

maven {url "https://jitpack.io"}

The above line should be written after the following:

allprojects {
 repositories {
 google()
 jcenter()
 //paste the maven line here
 }

Click on build.gradle(Module:app) and add the following library under the dependencies

//Add Library
 compile 'com.github.chrisbanes:PhotoView:1.2.6'

Step 6:  Sync Gradle

To test the code you can take the same image and test it on different devices.

Also, to check you can delete the previous LDPI, MDPI, HDPI, XHDPI formats. Then load a picture which is less clear and compare it with the XXHDPI and XXXHDPI image.(This step has particularly been done to show the difference that the image is picked by the application with respect to the Screen Resolution)

The picture will adjust according to the Resolution of the Screen(ppi density).

I have tested the code on the following devices:

  • Xiaomi Redmi Note 4 (∽401 ppi)
  • Xiaomi Mi A1 (∽403 ppi)
  • Asus Zenpad 8 (∽189 ppi)
  • Samsung J1 (∽245 ppi)

OUTPUT:

(Landscape Mode)

(PORTRAIT MODE)

 

(Distorted image on Tablet in accordance to the Screen resolution)

How to make Build Variants in Android Studio?

We may need to create different versions of an APK file based on an application type (free or paid application), the server environment type (QA, UAT)  & etc.

To reduce the convolution of making different versions of an APK file, Android Studio uses Gradle, a build toolkit, to automate and manage the build process. It allows us to define flexible custom build configurations. Each build configuration can define its own set of code and resources while reusing parts common to all the application versions. It enables us to have multiple similar versions of an app within a single code base like different colors, dependencies & etc.

Step 1: Create a New Project with Android Studio.

Name the Application to {anything of your choice} & then click Next. I have currently named it buildvariant.

Step 2:  Configure your app

Select the API Version (I took it as 15) as per your Target Audience. Under Phone and Tablet select the API and the click Next.

Select Empty Activity and then click Next.

Keep the Activity name as MainActivity (or any name of your choice) and click Finish.

MainActivity is the Default name

Step 3:  Project Settings

Under the heading Gradle Scripts browse for build.gradle(Module:app)

Append the build.gradle file with the following under the buildTypes DSL:

buildTypes{
         ...
         <your existing code/configurations>
         ...
}
        qa {
            initWith debug
            jniDebuggable true
            applicationIdSuffix ".qa" //uniquely identify the app qa
            manifestPlaceholders = [buildtestAppName: "buildtest qa"] //used to change the name of the app according to the build variant
        }

        uat {
           initWith debug
           jniDebuggable true
           applicationIdSuffix ".uat" //uniquely identify the app uat
           manifestPlaceholders = [buildtestAppName: "buildtest uat"] //used to change the name of the app according to the build variant
       }
}

You can take build variant names as per your choice. (I have made assumptions of taking the build variants as qa and uat.)

Step 4:  Sync Gradle

After the Sync is complete from the buildvariants tab, select the Variant you have to work on.

Under the Manifests file select the AndroidManifest.xml file and change the android:label to

android:label="${buildtestAppName}"

Step 5: Directory and Code Setup.

Click on Explorer dropdown and select Project.

  1. Click on app–>src
  2. Right click on src–> New–> Directory
  3. Give name to the Directory and then click on the Named Directory
  4. Right click on the Directory–> New–> Folder–> Res Folder
  5. Under Res Folder–> New–> Image Asset
  6. Select the Image and click Next and then click Finish.

OR

After creating the Res Folder, copy the image and Paste the same into the Res Folder.

Step 6: Using build variants

Under QA folder, create a XML layout and name it splash_layout.

Write the following code under splash_layout.xml:

<ImageView
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:src="@drawable/qa"
 android:scaleType="centerCrop"/>

Note: Similarly recreate Step 6 for UAT with the same name as the one kept in QA.

Step 7: In the main folder add a New Empty Activity and name it SplashActivity.

SplashActivity consists of the following code:

package com.example.jrb.buildtest;
 import android.content.Intent;
 import android.support.v7.app.AppCompatActivity;
 import android.os.Bundle;
 public class SplashActivity extends AppCompatActivity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.splash_layout);

Step 8. In the AndroidManifest.xml check for the activity and make sure on keeping it attached to the SplashActivity.

Step 9. Hallelujah we are done, now Debug your Application according to the build variant.

 

OUTPUT