Fit Your Android App to Every Screen

A few months ago, I decided that I want to find myself a side project.
Therefore, I started to search the web for ideas. While wandering between many sites, which were full of suggestions, I came across an online web game and I thought to myself that this game could be a great challenge to improve my skills and explore new topics that interest me. To spice things up a bit, I decided to create an android application for the game.

I had no prior experience in application development, but I figured I could learn what it takes to have my application up and running, and that I wouldn’t be the first programmer to autodidactically learn something new from scratch.
After all, studying new skills alone is one of the most important abilities that a programmer should have.

I developed the game, created my application, checked it many times,
fixed placements of all the objects in my application as much as possible.
The application in my emulator looked perfect!
I published the application to Google Play, downloaded it and then everything looked different. After checking with a few more phones, I understood that each screen size is responding differently to my application.

There are a few critical tips that can save you a lot of time and frustration, and more than that, it will make your app look fine on any cell phone.

Android Emulator:

In android studio (as well in other application development platforms) you have an emulator which simulates a phone and helps debugging and checking your application. There are many different devices and android API levels that you can create to run your application on different devices.
You can play with the different screen sizes, height, width and to see how your application responds to various devices. You should use them all, try to test your application with devices that differ in their size, the more the merrier.

Responsive Size:

There are a few measurements that you might have seen while creating your application: dp, px, sp. Each of them can work locally and to solve your specific problem, but you should know how to use them in the optimal way to avoid a problem in all the different devices.

1. Pixels (px): correspond to the actual pixels on the screen. Not recommended because the actual representation can vary across devices.

2. Density-independent Pixels (dp): An abstract unit that is based on the physical density of the screen. Using dp is a simple solution for making your layout resize properly for different screen densities.

3. Scale-independent Pixels (sp): Similar to the dp unit, but it also corresponds to the user’s font size preferences. recommended to use this unit when specifying fonts for texts, headlines, etc.

There are many more measurements, you can check them all in the android developer guide, dimensions. In general, sp is for texts and dp would usually work for margin, padding and the rest.

Multiple Layouts:

After testing your application with the emulator, it will most probably look different for a variety of devices, even if you used all your measurements correctly. In order to support more than one screen size, you should create a layout for the different screen sizes. In order for your application to “decide” which layout it should choose, the application needs to “know” the layouts sizes.
Check in the emulator what are the device screen size properties.
For example, we will choose a device with size: 420Dpi.
Now we need to create a folder inside the “Resources” directory, we will call it “layout-420Dpi”.
Now at this point, we will copy the xml file to the layout folder, and adjust the xml file as we would like the application to look like.
Now every time the application will be opened by a device which has 420Dpi properties, it will look just as planned.

Center Horizontally and Vertically:

In order to place your objects and views in the middle of every screen, we would like to use the correct attributes and the right programming.
After all, using eyesight might work when the application has one button, but when you have many TextViews and other objects it would become harder.
Because of that, we will use the gravity attribute.
For example, our application has a layout which is “LinearLayout”. The layout contains a button, and we want to make sure this button will always be horizontally centered. In that case, we will add to the layout the next attribute:

android:orientation=“ horizontal”

Then we will add to the button attribute the next line:

android: layout_gravity=”center”

If we want to make the orientation vertical, we will change the layout orientation as follows:

android:orientation=“ vertical”

This will result in having your button centered on every screen that the user will have.

That’s it! Now we’ve got it all covered and the application will be responsive on any device.

I hope that those advices and tips will help you build the perfect application and maybe will save you some time and searches over the internet.