Since the beginning of 2016, I stopped designing for the web and fully immersed myself in the world of Android applications. Many factors influenced this decision, but the main one was probably the rapid growth of the mobile segment and the steadily declining desktop.
Why Android and not iOS, you may ask?
In this article I will try to tell you the basics, which should be enough for a successful start and further self-study of the platform. And let’s start with the types of screens, of which there are many in Android.
Screens of Android devices
Every shitty firm producing “androids” considers it their duty to produce a million different devices with the most unimaginable screen parameters. This greatly complicates the design development and it becomes much more difficult to achieve the effect “everywhere.
But all is not as terrible as it may seem at first glance, if you understand a few basic principles.
First, you have to remember that there are 5 basic screen densities: mdpi, hdpi, xhdpi, xxhdpi and xxxhdpi. The basic density is mdpi, from it we will dance.
hdpi = mdpi*1.5
xhdpi = mdpi*2
xxhdpi = mdpi*3
xxxhdpi = mdpi*4
We draw the design under mdpi, but the graphic elements present in the layout are cut for all 5 densities.
Second, it is important to decide on a device where you will test your doodles. For me it is a Nexus 5. You can choose any other smartphone.
The first thing you need to start with is the aspect ratio. Ideally, it should be equal to 16:9. This is approximately the same as 1024×768 in the web.
For example
We have the input data – the 16:9 aspect ratio and, perhaps, a working device handy.
Click the link https://design.google.com/devices/ and get stuck in the table. We are trying to find our device. Let’s say we are looking for the previously mentioned Nexus 5.
The table shows that the Nexus has the 16:9 aspect ratio we need. The screen size in DP is 360×640 and in PX is 1080×1920. The screen density is xxhdpi.
Without going into too much detail, 360×640 is our mdpi.
That’s what we’re going to draw our layouts under. I wrote above that xxhdpi = mdpi*3. Accordingly, if we multiply 360×640 by 3, we get exactly 1080×1920.
What is Dp
Dp is Density-independent pixel. 1dp = 1px at mdpi screen density. In any other case, 1dp=1px*Multiplier.
For example
We need to draw an icon for a Nexus 5. According to the guides it should be 24×24 dp. From the table above, we know that nexus 5 = xxhdpi, and xxhdpi = mdpi*3.
Accordingly, applying the previously studied formula 1dp=1px*Multiplier we get: 24dp=24px*3=72px.
Android Guidelines
Once we have decided on the device and the size of the future layouts, we can begin to study the Android Guidelines. This is a very responsible step and you need to take it as seriously as possible.
From the guidebook, you will learn all the things you need to do to get the design right, starting from the animation and finishing with the components that make up a layout. There’s a lot of information, but without it you are unlikely to be able to make a quality design.
Initially, I planned to give references to the most important points, but there is important absolutely everything. So do not be lazy and read very carefully, so that if anything – quickly find the necessary section.
Grid
I do not use a grid at all to build my layouts, despite the fact that Google strongly recommends using a grid in 8dp. A colleague who teaches me Android is a follower of the component approach, accordingly I also adopted this rule for myself.
There is an opinion that the grid ensures proper alignment of elements only within the graphics program. In combat conditions, everything crawls and jumps, and this is unrealistically annoying.
Generally speaking, the Android guidelines are a pretty weird thing. They focus primarily on the design, in terms of its visual part, and in some cases, almost completely ignore the code. This leads to the fact that it becomes almost impossible to implement the recommendation.
Another argument in favor of component design – developers. They have no concept of modular grid, and all work with the indentation is based on padding. Component design is also built on the basis of padding, respectively, to find a common language with the developers becomes easier.
In conclusion
There is nothing complicated about Android design. As in any other business, the most important thing is to get the hang of it. In the following articles we will take a more in-depth look at component design and try to make some kind of sane layout.