Android app development layout type

 2021-08-20

Android app development layout type

The layout is a component that defines the structure of the user interface. In other words, it is the component that determines the screen interface of Android applications.

Layouts support the placement of widgets (eg TextView, Button, or EditText, etc.) as can be seen in Android apps.

When building a website interface in a web design, the first step is to create the layout of the site. Even on Android, you need to arrange the layout provided by Android and the layout of the view to create the interface of the Android application.

 

1. Why is it important to create a layout?


black iphone 7 plus on brown wooden table

  • Like other applications such as web applications and desktop applications, layouts are the components that directly interact with the user.
  • A well-laid-out application enhances the user's experience.
  • A well-organized layout can also improve application performance.

In addition, mobile applications need to resolve the issue of being properly displayed on different devices of different sizes. Therefore, if you have sufficient knowledge and experience in layout design, your application may not have any problems with layout corruption.

 

2. Android layout type


Android has 6 layouts: RelativeLayout, LinearLayout, GridLayout, TableLayout, FrameLayout, and ConstraintLayout.

Cách cài đặt ứng dụng trên Android mà không dùng CH Play2.1. FrameLayout

The frame layout is the most basic layout. When you attach views to this layout, they are always kept in the left corner of the screen and cannot be repositioned. If you don't set this view transparent, later views can be overwritten.

<FrameLayout xmlns: android = "http://schemas.android.com/apk/res/android"

xmlns: tools = "http://schemas.android.com/tools"

android: layout_width = "match_parent"

android: layout_height = "match_parent"

tools: context = ". MainActivity">

<TextView>

android:id="@+id/textView2"

android:layout_width="218dp"

android:layout_height="221dp"

android:background="@color/colorPrimaryDark" />

</FrameLayout>

2.2 Linear Layout

LinearLayout is probably the most commonly used layout type because of its simplicity. LinearLayout arranges the view in block format and does not overwrite it. The bidirectional layout of LinearLayout is as follows:

  • VerticalOrientation: The view is oriented vertically.
  • Horizontal Orientation: Horizontal.

Example: LinearLayout Horizontal.

code: <LinearLayout'>

xmlns:android1="http://schemas.android.com/apk/res/android"

android1:layout_width="match_parentlayout_height=<"match_parent" >

<TextView

android1:layout_width="80dp"_android1:layout_height="80dp"

android1:text="1"

android1:textColor="#fff"

android1:textSize="15pt"

android1:textAlignment="center"

android1:textStyle="bold"

android1:background="@color/colorAccent" />

<TextView

android1:layout_width="80dp"

android1:layout_height="80dp"

android1:text="1"

android1:textColor="#fff"

android1:textSize="15pt"

android1:textAlignment="center"

android1:textStyle="bold"

android1:background="@color/colorPrimary" />

<TextView

android1:layout_width="80dp"

android1:layout_height="80dp"

android1:text="3"

android1:textColor="#fff"

android1:textSize="15pt"

android1:textAlignment="center"

android1:textStyle="bold"

android1:background="#8c0520" />

<TextView

android1:layout_width="80dp"

android1:layout_height="80dp"

android1:background="#efcd21"

android1:text="4"

android1:textAlignment="center"

android1:textColor="#fff"

android1:textSize="15pt"

android1:textStyle="bold" />

</LinearLayout>

2.3. Realistic Layout

RealisticLayout is a type of layout in which the position of each view is fixed to another subview or its principal component via ID.

RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:layout_width="150dp"

android:layout_height="50dp"

android:text="1"

android:textColor="#fff"

android:id="@+id/hop1"

android:textSize="10pt"

android:textAlignment="center"

android:background="@color/colorAccent" />

<TextView

android:layout_width="150dp"

android:layout_height="50dp"

android:text="2"

android:textColor="#fff"

android:id="@+id/hop2"

android:textSize="10pt"

android:textAlignment="center"

android:layout_toRightOf="@+id/hop1"

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

<TextView

android:layout_width="150dp"

android:layout_height="50dp"

android:text="3"

android:textColor="#fff"

android:id="@+id/hop3"

android:background="#8e0917"

android:textSize="10pt"

android:textAlignment="center"

android:layout_below="@+id/hop1" />

<TextView

android:layout_width="150dp"

android:layout_height="50dp"

android:text="4"

android:textColor="#fff"

android:id="@+id/hop4"

android:textSize="10pt"

android:textAlignment="center"

android:background="#edcb25"

android:layout_below="@+id/hop2"

android:layout_toRightOf="@+id/hop3" />

</RelativeLayout>

2.4. TableLayout

TableLayout arranges internal subviews in tabular form. Each row is a TableRow view object within a TableRow that contains subviews, and each of these subviews is in a cell. Columns/rows start at zero. First, let's practice the layout with TableLayout and TableRow.

TableLayout android: layout_height = "match_parent"

android: layout_width = "match_parent"

xmlns: android = "http://schemas.android.com/apk/res/android">

<TableRow>

<TextView

android: text = "TableLayout Example"

android: background = "# c98282"

android: gravity = "center" />

</ TableRow>

<TableRow>

<Button android: text = "B1 B1" />

<Button android: text = "B2" />

</ TableRow>

<TableRow>

<Button android: text = "C1" />

<Button android: text = "C2" />

<Button android: text = "Cell example" />

</ TableRow>

</ TableLayout>

2.5. GridLayout

Android's GridLayout is a grid layout that allows you to split the columns and rows of that grid. Each view is placed in a cell in this grid.

GridLayout

xmlns: android1 = "http://schemas.android.com/apk/res/android"

android1: layout_width = "match_parent"

android1: layout_height = "match_parent"

android1: columnCount = "2"

android1: rowCount = "2">

<TextView

android1: layout_width = "80dp"

android1: layout_height = "80dp"

android1: text = "1"

android1: textColor = "# fff"

android1: textSize = "15pt"

android1: textAlignment = "center"

android1: textStyle = "bold"

android1: background = "@ color / colorAccent" />

<TextView

android1: layout_width = "80dp"

android1: layout_height = "80dp"

android1: text = "2"

android1: textColor = "# fff"

android1: textSize = "15pt"

android1: textAlignment = "center"

android1: textStyle = "bold"

android1: background = "@ color / colorPrimary" />

<TextView

android1: layout_width = "80dp"

android1: layout_height = "80dp"

android1: text = "3"

android1: textColor = "# fff"

android1: textSize = "15pt"

android1: textAlignment = "center"

android1: textStyle = "bold"

android1: background = "# 8c0520" />

 

<TextView

android1: layout_width = "80dp"

android1: layout_height = "80dp"

android1: background = "# efcd21"

android1: text = "4"

android1: textAlignment = "center"

android1: textColor = "# fff"

android1: textSize = "15pt"

android1: textStyle = "bold" />

</ GridLayout>

This is a layout in which a view is placed relative to other views.

This is a layout just announced by Google and is designed to be fully used with Android Studio design tools.

<? xml version = "1.0" encoding = "utf-8"?>

<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 / textView"

android: layout_width = "wrap_content"

android: layout_height = "wrap_content"

android: text = "Hello World!"

app: layout_constraintBottom_toBottomOf = "parent"

app: layout_constraintLeft_toLeftOf = "parent"

app: layout_constraintRight_toRightOf = "parent"

app: layout_constraintTop_toTopOf = "parent" />

<Button

android: id = "@ + id / button"

android: layout_width = "wrap_content"

android: layout_height = "wrap_content"

android: text = "constrainLayout"

app: layout_constraintBottom_toBottomOf = "parent"

app: layout_constraintEnd_toEndOf = "parent"

app: layout_constraintStart_toStartOf = "parent"

app: layout_constraintTop_toBottomOf = "@ + id / textView" />

</ android.support.constraint.ConstraintLayout>

 

3. Mobile application development service for Android


We provide a series of application development such as planning/idea-design/ development-operation/market application/maintenance/management to understand the customer's business contents.

Taking advantage of many years of experience from native app development for iOS and Android to hybrid app development such as React Native, Ionic, Cordova, etc., we select the method that best suits our customers' needs.

3.1 Development technology

  • Android
  • IOS
  • Cross-Platform: Xamarin, Titanium, Phonegap, Meteor.
  • Unity
  • Cocos2dx,…
  • Maps, GPS, sensor, socket,…

3.2 Developed application

  • Health care
  • Recruitment 
  • Mobile games 2D, 3D
  • Applications in the enterprise
  • Traveling

3.3 Hachinet service flow

1. Conclusion of NDA contract

We advise you to gain a better understanding of the information when you place your order. This is the basic step in deciding whether a software company can accept an outsourcing project.

2. Information exchange between both parties

Investigate your customers and understand their information and requirements to place compelling orders.

3. Analysis of the consultant

After understanding the customer requirements, the company team will carry out requirements analysis and planning.

4. Sending quotation and proposal

We will explain the outline of the project plan and send a detailed quotation to the customer.

5. Delivery and business review

If the customer approves, it will be handed over to the ordering company. This also proves that the project is almost complete and successful.

6. Business start

Start the project.

7. Contract conclusion

We will conclude a contract with the customer.

8. Interview with team developers

 

If you are considering offshore development, please feel free to contact us.

Here is our contact information.

Account Manager: Quan (Japanese/English available)

Phone number: (+84) 2462 900 388

Email: contact@hachinet.com

Please feel free to contact us for consultation/application by phone.

Click here for more information ▶