Android User Interface — XML and View Components

Previously, you had run the application on your device or the emulator. Here, we are going to start with XML (extensible markup language) and design a screen and understand what the different types of View Components Android Studio provided to us.

View

The view is the component which Android provides us to design the layouts of the app. So, we can understand view as a rectangular area which is going to contain some element inside it.

A View is a superclass for all the UI components. You can also check out the official documentation of View, here.

What are these components? Let's make a small list of some of the view components:

  • TextView
  • EditView
  • ImageView
  • ProgressBar
  • Button
  • ImageButton
  • CheckBox
  • DatePicker

A group of view is known as ViewGroup. Top level ViewGroup is a parent, and under it, all the view and other view groups are its children.

Let’s create User Interface now:


Open your layout file which is in the app>res>layout>activity_main.xml

You can see a palette of components which divided into different sections like widget, text, layouts etc.

We can drag the element from category and put it on the screen.

You can customise elements property like colour, size, text etc.

Let's discuss the view customisation:

1. Width and Height of a View

a. wrap_content - this is used to set the size of the view content

b. match_parent - this is used to set the size same as the size of the parent

2. Resources

You can see some folders inside the res folder:

a. Drawable - here, we put all our graphics, vector images, custom drawings.

b. Layout - here, we put all our screen layout files. example: activity_main.xml

c. Mipmap - here, we put the images which are used to make the logo of the application.

d. Values - this folder contains four default files. colors.xml, dimens.xml, strings.xml, style.xml.

To make your code looks good, Android Studio provides us with this feasibility where you can define all your colours, strings, sizes and styles at one place and use them wherever you need it. Lokie below:

// colors.xml - you can define all your colors here
<color name="colorPrimary">#EFC455</color>
// dimens.xml - you can define all the size here
<dimen name="height">150dp</dimen>
// strings.xml - you can define all the strings here
<string name="app_name">MindOrks</string>
// styles.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
</style>

3. Size

Every measurement has a particular unit like Km for distance. Android also has its own measurement.

For text size, we use "sp" - Scale Independent Pixels.

For views other than text, we use "dp" - Density Independent Pixel.

To use different resource sizes at different phone screen resolutions, Android Studio have separate folders. Android has:

  • ldpi - low
  • mdpi - medium
  • hdpi - high
  • xhdpi - extra high
  • xxhdpi - extra extra high

We only need to put things in those folders and Android System automatically take stuff from here based on the mobile screen resolution app is running on.

Where you find these folders?

For graphics, you can add drawable sibling folders like "drawable-mdpi", "drawable-hdpi" etc.

Here, we had a Button, so we are going to change the colour of the Button to blue and changing text to "MINDORKS", bring both the values from the resources.

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:text="@string/app_name" />

Now, we can run this app on the emulator.

Try to explore the palette and the fantastic components inside it.

In the next chapter, we are going to understand how the multiple views can be arrange on the screen.