> For the complete documentation index, see [llms.txt](https://0xa1mn.gitbook.io/cyber-explained/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://0xa1mn.gitbook.io/cyber-explained/technologies/android-application/layout-and-resources-for-ui.md).

# Layout and Resources for UI

### Views <a href="#views" id="views"></a>

The UI consists of a hierarchy of objects called *views* — every element of the screen is a [`View`](https://developer.android.com/reference/android/view/View.html). The `View` class represents the basic building block for all UI components, and the base class for classes that provide interactive UI components such as buttons, checkboxes, and text entry fields.

A `View` has a location, expressed as a pair of left and top coordinates, and two dimensions, expressed as a width and a height. The unit for location and dimensions is the density-independent pixel (dp).

The Android system provides hundreds of predefined `View` subclasses. Commonly used `View` subclasses described over several lessons include:

* [`TextView`](http://developer.android.com/reference/android/widget/TextView.html) for displaying text
* [`EditText`](https://developer.android.com/reference/android/widget/EditText.html) to enable the user to enter and edit text
* [`Button`](https://developer.android.com/reference/android/widget/Button.html) and other clickable elements (such as [`RadioButton`](https://developer.android.com/reference/android/widget/RadioButton.html), [`CheckBox`](https://developer.android.com/reference/android/widget/CheckBox.html), and [`Spinner`](https://developer.android.com/reference/android/widget/Spinner.html)) to provide interactive behavior
* [`ScrollView`](https://developer.android.com/reference/android/widget/ScrollView.html) and [`RecyclerView`](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html) to display scrollable items
* [`ImageView`](https://developer.android.com/reference/android/widget/ImageView.html) for displaying images
* [`ConstraintLayout`](https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html) and [`LinearLayout`](https://developer.android.com/reference/android/widget/LinearLayout.html) for containing other views and positioning them

You can define a `View` to appear on the screen and respond to a user tap. A `View` can also be defined to accept text input, or to be invisible until needed.

You can specify `View` elements in layout resource files. Layout resources are written in XML and listed within the **layout** folder in the **res** folder in the **Project > Android** pane.

### ViewGroup groups <a href="#viewgroup-groups" id="viewgroup-groups"></a>

`View` elements can be grouped inside a [`ViewGroup`](https://developer.android.com/reference/android/view/ViewGroup.html), which acts as a container. The relationship is parent-child, in which the *parent* is a `ViewGroup`, and the *child* is a `View` or another `ViewGroup`. The following are commonly used `ViewGroup` groups:

* [`ConstraintLayout`](https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html): A group that places UI elements (child `View` elements) using constraint connections to other elements and to the layout edges (parent `View`).
* [`ScrollView`](https://developer.android.com/reference/android/widget/ScrollView.html): A group that contains one other child `View` element and enables scrolling the child `View` element.
* [`RecyclerView`](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html): A group that contains a list of other `View` elements or `ViewGroup` groups and enables scrolling them by adding and removing `View` elements dynamically from the screen.

### Layout ViewGroup groups <a href="#layout-viewgroup-groups" id="layout-viewgroup-groups"></a>

The `View` elements for a screen are organized in a hierarchy. At the *root* of this hierarchy is a [`ViewGroup`](https://developer.android.com/reference/android/view/ViewGroup.html) that contains the layout of the entire screen. The `ViewGroup` can contain child `View` elements or other `ViewGroup` groups as shown in the following figure.

![](https://google-developer-training.github.io/android-developer-fundamentals-course-concepts-v2/images/1-2-c-layouts-and-resources-for-the-ui/dg_viewgroup_hierarchy.png)

In the figure above:

1. The *root* `ViewGroup`.
2. The first set of child `View` elements and `ViewGroup` groups whose parent is the root.

Some `ViewGroup` groups are designated as *layouts* because they organize child `View` elements in a specific way and are typically used as the root `ViewGroup`. Some examples of layouts are:

* [`ConstraintLayout`](http://tools.android.com/tech-docs/layout-editor): A group of child `View` elements using constraints, edges, and guidelines to control how the elements are positioned relative to other elements in the layout. `ConstraintLayout` was designed to make it easy to click and drag `View` elements in the layout editor.
* [`LinearLayout`](https://developer.android.com/reference/android/widget/LinearLayout.html): A group of child `View` elements positioned and aligned horizontally or vertically.
* [`RelativeLayout`](https://developer.android.com/reference/android/widget/RelativeLayout.html): A group of child `View` elements in which each element is positioned and aligned relative to other elements within the `ViewGroup`. In other words, the positions of the child `View` elements can be described in relation to each other or to the parent `ViewGroup`.
* [`TableLayout`](https://developer.android.com/reference/android/widget/TableLayout.html): A group of child `View` elements arranged into rows and columns.
* [`FrameLayout`](https://developer.android.com/reference/android/widget/FrameLayout.html): A group of child `View` elements in a stack. `FrameLayout` is designed to block out an area on the screen to display one `View`. Child `View` elements are drawn in a stack, with the most recently added child on top. The size of the `FrameLayout` is the size of its largest child `View` element.
* [`GridLayout`](https://developer.android.com/reference/android/widget/GridLayout.html): A group that places its child `View` elements in a rectangular grid that can be scrolled.

![](https://google-developer-training.github.io/android-developer-fundamentals-course-concepts-v2/images/1-2-c-layouts-and-resources-for-the-ui/dg_common_layouts_visual_rep.png)

**Tip**: Learn more about different layout types in [Common Layout Objects](https://developer.android.com/guide/topics/ui/layout-objects.html).

A simple example of a `LinearLayout` with child `View` elements is shown below as a diagram of the layout file (`activity_main.xml`), along with a hierarchy diagram (top right) and a screenshot of the actual finished layout (bottom right).

![](https://google-developer-training.github.io/android-developer-fundamentals-course-concepts-v2/images/1-2-c-layouts-and-resources-for-the-ui/dg_layout_diagram_and_hierarchy.png)

In the figure above:

1. `LinearLayout`, the root `ViewGroup`, contains all the child `View` elements in a vertical orientation.
2. `Button` (`button_toast`). The first child `View` element appears at the top in the `LinearLayout`.
3. `TextView` (`show_count`). The second child `View` element appears under the first child `View` element in the `LinearLayout`.
4. `Button` (`button_count`). The third child `View` element appears under the second child `View` element in the `LinearLayout`.

The layout hierarchy can grow to be complex for an app that shows many `View` elements on a screen. It's important to understand the hierarchy, as it affects whether `View` elements are visible and how efficiently they are drawn.

### Resource files <a href="#resource-files" id="resource-files"></a>

Resource files are a way of separating static values from code so that you don't have to change the code itself to change the values. You can store all the strings, layouts, dimensions, colors, styles, and menu text separately in resource files.

Resource files are stored in folders located in the `res` folder when viewing the Project > Android pane. These folders include:

* `drawable`: For images and icons
* `layout`: For layout resource files
* `menu`: For menu items
* `mipmap`: For pre-calculated, optimized collections of app icons used by the Launcher
* `values`: For colors, dimensions, strings, and styles (theme attributes)

The syntax to reference a resource in an XML layout is as follows:

`@`*package\_name*`:`*resource\_type*`/`*resource\_name*

* *package\_name* is the name of the package in which the resource is located. The package name is not required when you reference resources that are stored in the `res` folder of your project, because these resources are from the same package.
* *resource\_type* is the `R` subclass for the resource type. See [Resource Types](https://developer.android.com/guide/topics/resources/available-resources.html) for more about the resource types and how to reference them.
* *resource\_name* is either the resource filename without the extension, or the `android:name` attribute value in the XML element.

For example, the following XML layout statement sets the `android:text` attribute to a `string` resource:

```
android:text="@string/button_label_toast"
```

* No *package\_name* is included, because the resource is stored in the `strings.xml` file in the project.
* The *resource\_type* is `string`.
* The *resource\_name* is `button_label_toast.`

Another example: this XML layout statement sets the `android:background` attribute to a `color` resource, and since the resource is defined in the project (in the `colors.xml` file), the *package\_name* is not specified:

```
android:background="@color/colorPrimary"
```

In the following example, the XML layout statement sets the `android:textColor` attribute to a `color` resource. However, the resource is not defined in the project but supplied by Android, so you need to specify the *package\_name*, which is `android`, followed by a colon:

```
android:textColor="@android:color/white"
```

**Tip**: For more about accessing resources from code, see [Accessing Resources](http://developer.android.com/guide/topics/resources/accessing-resources.html). For Android color constants, see the [Android standard R.color resources](http://developer.android.com/reference/android/R.color.html).

### Values resource files <a href="#values-resource-files" id="values-resource-files"></a>

Keeping values such as strings and colors in separate resource files makes it easier to manage them, especially if you use them more than once in your layouts.

For example, it is essential to keep strings in a separate resource file for translating and localizing your app, so that you can create a string resource file for each language without changing your code. Resource files for images, colors, dimensions, and other attributes are handy for developing an app for different device screen sizes and orientations.

### Strings <a href="#strings" id="strings"></a>

String resources are located in the `strings.xml` file (inside **res > values** in the **Project > Android** pane). You can edit this file directly by opening it in the editor pane:

```
<resources>
    <string name="app_name">Hello Toast</string>
    <string name="button_label_count">Count</string>
    <string name="button_label_toast">Toast</string>
    <string name="count_initial_value">0</string>
</resources>
```

The `name` (for example, `button_label_count`) is the resource name you use in your XML code, as in the following attribute:

```
android:text="@string/button_label_count"
```

The string value of this `name` is the word (`Count`) enclosed within the `<string></string>` tags. (You don't use quotation marks unless the quotation marks are part of the string value.)

#### Extracting strings to resources <a href="#extracting-strings-to-resources" id="extracting-strings-to-resources"></a>

You should also *extract* hard-coded strings in an XML layout file to string resources.![Extracting a string resource](https://google-developer-training.github.io/android-developer-fundamentals-course-concepts-v2/images/1-2-c-layouts-and-resources-for-the-ui/as_extract_string_resources.png)

![Naming the string resource](https://google-developer-training.github.io/android-developer-fundamentals-course-concepts-v2/images/1-2-c-layouts-and-resources-for-the-ui/as_extract_string_resources2.png)

To extract a hard-coded string in an XML layout, follow these steps, as shown in the figure above:

1. Click the hard-coded string and press **Alt-Enter** in Windows, or **Option-Return** in Mac OS X.
2. Select **Extract string resource**.
3. Edit the **Resource name** for the string value.

You can then use the resource name in your XML code. Use the expression `"@string/resource_name"` (including quotation marks) to refer to the string resource:

```
android:text="@string/button_label_count"
```