Advertisements

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.

view and view group hierarchy

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.

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:

If you encounter Any Problem you can comment I will reply you with solution As Soon As Possible. If You want to learn Android App development for free then don’t forget to subscribe to my blog or you can Subscribe to my YouTube channel to get notified regularly.

How useful was this post?

Do not forget to rate! this helps us to Improve.

Average rating / 5. Vote count:

Read More Like This..

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Advertisements

Safiya Akhtar

Safiya Akhtar is Android Application Developer in India. She is currently working as a public consultant for career and education too, besides blogging and freelancing. She believes that it is never too late or too early to start what you have always dreamed of.

Your Views And Question are Welcome Here!

Advertisements