android basics user interface

08 Sep 2019

Notes are based on Android Basics: User Interface which is part of a free course created by Google. The entire course teaches you how to get started with building android apps in Kotlin.

Views

In android, a view is a rectangle on the screen that shows some content. It can be an image, text a button or anything else that the app can display.

Combined, the individual views make up the layout of the screen. Everything that you see and interact with is known as the User Interface (UI).

You can break down any app into the individual views that make it up. Just draw a rectangle around each of the individual pieces of content, then identify what kind of view it is.

XML - Extensible Markup Language

XML is ideal for describing the layout of a screen on an Android app. The layout always consists of one big view which may contain smaller views, which may contain even smaller views.

Wow am I glad to have spent a few years on front-end web development before branching into android. All of this is so much easier to understand.

Textview code example

This code displays text an the screen and has a purple background


<TextView
  android:text="Happy Birthday!"
  android:background="@android:color/darker_gray"
  android:layout_width="150dp"
  android:layout_height="75dp" />

'dp' is a unit of measurement like centimeters or millemeters. We use it to describe the size of views as well as the distance between views.

dp stands for density-independent pixels which keeps your views the same size across devices that may have different pixel resolutions.

Google developers on course recommend that buttons should be at least 48dps tall and wide


<TextView
    android:text="Happy Birthday, Berry Boo!"
    android:background="@android:color/darker_gray"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="36sp"
    android:textColor="@android:color/black"
    android:padding="20dp"
    />

Setting the height and width to 'wrap_content' makes the rectangle around the view the same size as it's containing content.

sp stands for scale independent pixels. This is also a unit of measurement, similar to dp. It makes the app look consistent across different devices. sp is only for fonts because it adjusts based on users preferences and setting for text size.

Typography

Material design type scale

The following scale is from Googles Material Design System. It shows a combination of 13 text styles that are recommended for different text categories.

You can find a bunch of conversion tables that show you how to convert font-size and letter spacing units here

Linear Layout

This layout lets you position elements in a horizontal or vertical sequence. The code below contains a parent view that uses the linear layout. The linear layout parent contains two text views which are displayed one on top of the other.


<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:text="Guest List"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:text="Berry"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />



The default orientation for the linear layout is horizontal for a row, which can be denoted by the 0 value.

To get a vertical, column based layout, you can change the orientation to 'vertical' which is denoted by the 1 value. In XML, for a vertical layout, you would add the following attribute to the layout view androii:orientation="vertical"

The first line in the code above names the android namespace, which specifies that all of the code belongs to android, which is why all of the attributes start with the word 'android'. This line should always be added as the first line of the root view for your layout.

Different widths

Setting different widths on child views can affect the final user interface layout.

dp sets views to be a specific width. If the content is bigger then you run the risk of cutting the content short.

Wrap content sets the width to match the size of the content inside of it.

Match parent sets the width of the content te the same width as the parent view width.

Whenever you see and attribute that starts with layout underscore 'layout_', these represent view group layout parameters. Attributes that do not start this way, like background and textSize for example, are handled by the view in terms of it's self instead of in relation to it's parent view.