In this new post series, I’ll share what I’m learning about Android Development. This article is about the main concepts of User Interface in Android apps.
This app is pretty simple, it’s just an UI that shows some information about Hogwards. I made it only knowing a little bit about XML.
And now, I’ll share with you what I have learned.
First of all, it’s good to know that user interface represents everything that you see on the screen.
In this article, I’ll focus on some key concepts about UI.
View
A View is a rectangular area visible on the screen, it has width and height. It also can have a background color. It’s the most basic building block of an interface. There are three main View types: TextView, ImageView and ButtonView.
A TextView displays text on the screen. An ImageView shows an image such as an icon or a photo. And the ButtonView is a sensitive TextView, that is, it responds when the user touches it.
Below, I show what types of views I applied in my app:
The view 1 is an ImageView. All the others are TextViews. You could think that these icons in the views 3 and 4 are ImageViews, but, actually, they compound a special type of TextView.
Layout
Basically, a layout is the arrangement of the views on the screen. It’s the structure of the interface.
ViewGroup
A ViewGroup is a bigger view that contains smaller views. It almost always has an invisible background and its main task is to contain and position other views.
Each screen of an app, also known as Activity, can only have 1 root view. A root view is the view that contains all other views of the interface, thus it holds all the screen’s content. Usually, it’s a ViewGroup.
Views contained by a ViewGroup are called children views and the ViewGroup is called the parent view of its children views. Also, views that share the same ViewGroup are called sibling views.
There are two main types of ViewGroups: LinearLayout and RelativeLayout. Each one of them position its children views in a different way. They are used for distinct purposes.
These were the ViewGroups that I applied in my app:
Yeah, a ViewGroup inside another ViewGroup.
LinearLayout
LinearLayout is a common type of ViewGroup. It arranges its children views sequentially, that is, one after the other. Its orientation can be vertical (a column, one below the other) or horizontal (a row, one next the other).
Vertical:
Horizontal:
You could see that I used two vertical LinearLayouts in my app. But I would like to highlight that there was room to use horizontal LinearLayouts too, as you can see below:
I could have used 2 horizontal LinearLayouts to position these icons (ImageView) and words (TextView). But I used a special attribute of the TextView instead.
RelativeLayout
A RelativeLayout is a common type of ViewGroup that lets us position its children relative to its own edges. For example, the three children in the image below are placed in the corners of a RelativeLayout:
A RelativeLayout also lets us arrange its children relative to each other: one child can be placed to the right of another, and can even overlap.
Each type of ViewGroup has its advantages. We need to know what type is best suited for the task at hand.
Conclusion
So that’s it. These key concepts are the foundation to design any user interface. You can see the code of my app here. In the next article, I’ll talk about the implementation of these concepts. So expect to see some XML code here :)
Some images used in this article are own by Google. They were found here. Some of them were modified.