Android UI Development 101 — Part 1: Views!
You wanted to understand Android and to try making an app for development experimenting purposes. Or perhaps you had a great idea that will change the way your coworkers use their smartphones at work. Or maybe you love technology and want to study every platform out there.
Whatever is your reason, designing an user interface, or UI, will be one of your most important tasks during Android development. And I’m not even presuming you want to create a screen design according to Material Design (even though you should contemplate applying it in the future). It will still be important to know how to put text side by side, to place a title above an image or to make the content scrollable.
So, this article and the next are dedicated to laying the foundation of crafting screens in Android. What I will lecture about is an introduction to the theme, but I am confident that, by understanding these basics, you will be able to produce most of the visual elements and screens in an app. Even though there are specific good practices, my objective is for you to absorb, first, the core concepts; first things first! I am presuming you already had a go at Java, Object Orientation, XML, and more importantly, how they are used in Android. Nevermind Kotlin now being the official development language — let’s stick to concepts!
If you already have modest experience in Android, this article may not prove itself so useful to you, but I always like to revisit key concepts to check if I haven’t forgotten anything. Also, you never know when you might learn something new. But, now, let’s get to it!
Views
Among the many topics one could talk about when implementing Android UI, there are two undeniably important: the View and the ViewGroups. We will first talk about the View, which composes the basic building block in Android. From the official documentation:
This class represents the basic building block for user interface components.
When we use an app, we interact with and see a great deal of text, images, buttons, which are the means, or interface, through which information is conveyed and actions are performed by the user. Android has specific classes dedicated to manipulating them, such as:
You should take some time to read the documentation and understand them. But, remember, you don’t need to memorize every attribute you can use with them; the important, now, is to have a basic understanding of what they mean and why you would use them.
As an attentive reader, you probably thought “But why you only gave three examples of Views?”.
Well, if you come to think about the apps that you use, most of them are composed of just that: images, texts and buttons. The Medium app that you may be even using to read this is a good example:
There are, of course, more types and more complex Views, but the three I talked about will cover most of the UI you will build. That is why I’d like to reinforce that it’s very important to study and learn how to use them. Here are some key topics that you should consider looking up:
TextView
- Apply a style in XML;
- Use a custom font;
- Change text size, color, weight, both in XML and programmatically;
- How to format strings;
ImageView
- Load an image from an asset in your app;
- Load an image by receiving an URL;
- The types of scaling that can be applied to an image;
- Apply a background or borders;
- Format your image (learning how to crop and center it should cover many cases);
Button
- Apply a style in XML;
- Change the text;
- Understand its states (enabled, clicked, disabled)
- Understand how to change its background according to its states (this is a hard one!)
- Learn about the ripple effect (be sure to read about its compatibility with older Android versions!)
- Understand the Listener pattern. This is a very hard one and don’t worry if you don’t understand it in the beginning. When I first read about it, my biggest question was why I had to use it, so this may be a good starting point. This pattern is a fundamental part of the Android architecture, so it’s really important to get comfortable with it. Refer also to the Observer pattern, which has much in common with the Listener one.
As important as Views are, the most difficult part of building an UI, in my perspective, is more related to the ViewGroups, which causes more doubts and confusion among developers starting in Android!
So far, we’ve talked about types of Views and functionality, but, without ViewGroups, we can’t add visual behavior to them, such as aligning, stacking them horizontally or vertically, putting a View on top of another, positioning them relatively, making our screen more responsive and so on.
That is why I’d like to focus more on ViewGroups and leave it to you to deepen your knowledge on Views; there is much quality documentation and Stack Overflow is filled with answered questions about them.
So, you had a taste of Views, the building blocks of your screen. Up next, we’ll learn what are the tools you must use to craft formidable designs that will wow your users: the ViewGroups! Check out Android UI Development 101 — Part 2: ViewGroups!
