# Concept

Widgets and Layouts help to design your app. You can add available widgets just by dragging and dropping from the list as shown:

![Example of Dragging (Pic.1)](https://1589143646-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3AlXnP5kHENnvBXdKq%2F-M3B1guQ7rdmUUP9pmA_%2F-M3B3_bUyjp7TOVrVa79%2Fezgif.com-optimize.gif?alt=media\&token=d8c756da-6d48-4739-a6a0-a70f27d7a64c)

> Fact: When the project is compiled, all the views are translated into **XML**. To view translated XML, go to Open your Project > Menu > Show Source Code

## Layout

#### Linear Layout

By default, widgets are placed vertically on the screen. You can place widgets horizontally inside the Linear(H) layout and vertically inside the Linear(V) layout.

{% hint style="info" %}
In "Pic.1", Linear (V) is used.
{% endhint %}

![Example picture taken from Official Docs. (Pic. 2)](https://1589143646-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3AlXnP5kHENnvBXdKq%2F-M3B42kG3pdC348VXo2h%2F-M3B6YoIvUkYoPN_KeVh%2Flayouts.png?alt=media\&token=5e8225f0-c84d-4fed-ac9c-917d53d0c725)

#### Scroll View

As the name suggests, contents in the scroll view are scrollable as shown:

![Scrolling contents (Pic. 3)](https://1589143646-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3AlXnP5kHENnvBXdKq%2F-M3B7nnichWcEgoBYTGK%2F-M3B9mzwUVAgOjIXuJkP%2Fscrolling_example.gif?alt=media\&token=05e43ba4-b84b-46f9-abde-35daaafd401a)

{% hint style="success" %}
A scroll view is a must-have for almost all apps.
{% endhint %}

{% hint style="warning" %}
If you are adding multiple contents in scroll view, it is necessary to add a linear layout and then your contents inside of it.
{% endhint %}