Android Studio Tutorial For Beginners #4: Layouts in Android
A layout defines the structure for a user interface in your app, such as in an activity ( How Your Activity will look like?).
To understand these layouts better they have categorized them in two:
1.ViewGroup: It is a container which defines the layout structure of multiple views that will things be vertical, horizontal, scroll enabled, below/above/left/right of another element. It is invisible to the user, these are just used to arrange views systematically as per the requirement of your application.
2. Views: It is something to which user interact like they right in EditText, select from the spinner, the text is shown in Text view or click on a button. These are visible to the user and they can interact with them via touching on the screen.
A ViewGroup can contain more than one Views and ViewGroups. Android developer says:
The View objects are usually called “widgets” and can be one of many subclasses, such as Button or TextView. The ViewGroup objects are usually called “layouts” can be one of many types that provide a different layout structure, such as LinearLayout or ConstraintLayout .
You can create layouts in XML files (Layout folder) or you can also declare your elements at run time. But declaring Layouts in XML files helps you develop an application as that will have a preview of how your application will look like, also in XML files you can create the same layout for multiple screen sizes.
You can add multiple properties to views and ViewGroup like height, width, center, horizontal, vertical, margin, padding, style and much more.
Layouts
Linear Layout: A layout that organizes its children into a single horizontal or vertical row. It creates a scrollbar if the length of the window exceeds the length of the screen.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="horizontal"
android:padding="16dp"
android:layout_height="match_parent"
tools:context=".LinearLayoutActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Safiya Akhtar" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_marginTop="10dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Safiya Akhtar" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_marginTop="10dp"/>
</LinearLayout>
</LinearLayout>
Relative Layout: Enables you to specify the location of child objects relative to each other (child A to the left of child B) or to the parent (aligned to the top of the parent).
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
tools:context=".RelativeActivity">
<TextView
android:id="@+id/txtview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Safiya Akhtar"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_below="@id/txtview"/>
</RelativeLayout>
Web View: Displays web pages. HTML pages from your website can be shown in an android application. But it is not always the right approach to develop an application. Write Below code in Your Java File and Layout File.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView"
/>
</android.support.constraint.ConstraintLayout>
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView mywebview = (WebView) findViewById(R.id.webView);
mywebview.loadUrl("https://life-news.blog/category/android-for-beginner/");
}
}
Constraint Layout: It allows you to position and size widgets in a flexible way. It is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread). It is extended version of all the other layouts.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/txthello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Helloe World!"
tools:layout_editor_absoluteX="163dp"
tools:layout_editor_absoluteY="356dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
tools:layout_editor_absoluteX="68dp"
tools:layout_editor_absoluteY="252dp" />
</android.support.constraint.ConstraintLayout>
List View: Displays a scrolling(Both horizontal & clever) single column list.
Grid View: Displays a scrolling grid of columns and rows.
Grid View 
List View
Table Layout: It positions its children into rows and columns. TableLayout containers do not display border lines for their rows, columns, or cells.
Recycler View: A flexible view for providing a limited window into a large data set. It is extended version for List View and Grid View
Now see a preview in your android studio and try creating This layout via Linear Layout:
