Lesson 18 – Layout (LinearLayout) in Kotlin Example

Hello viewer, You can now have our Tutorial Lessons in your android mobile device and read it offline.
Download kotlin Programming APP on PlayStore
Download Website SEO Lessons APP on PlayStore

Android organizes the visual components (Button, EditText, TextView etc.) on the screen using containers called Layout.

So far we have not worried how to organize a screen, but we have focused on the functionality of each program we implement.

Now we will start to worry about how to organize and arrange the components inside the screen.

– LinearLayout.

LinearLayout is one of the simplest designs and is quite employed. It simply sets the visual components side by side, either horizontally or vertically.

We create a project called Project020, delete the TextView that adds by default the Android Studio.

From the Android Studio component palette, drag the “Linear Layout (Vertical)” object from the “Layouts” tab:

Lesson 18 - Layout (LinearLayout) in Kotlin Example - Lesson 18 - Layout (LinearLayout) in Kotlin Example - Lesson 18 - Layout (LinearLayout) in Kotlin Example -

Now we can see what happens when we have five buttons inside the LinearLayout container (All buttons are placed one under the other and there is no possibility of placing them with the mouse):

Lesson 18 - Layout (LinearLayout) in Kotlin Example - Lesson 18 - Layout (LinearLayout) in Kotlin Example - Lesson 18 - Layout (LinearLayout) in Kotlin Example -

The first change we can make to this type of Layout is to change the “orientation” property to the horizontal value (this makes the buttons side by side and there is no possibility of having controls one under another)

Keep in mind that if the controls do not enter the screen they are not visible and if they are buttons as in this case it is impossible to click on them:

We must also select each Button and change the layout_width property to the value “wrap_content” so that each button does not occupy the entire width of the device.

Then we can see that even if there are many buttons, not all of them are seen:

Lesson 18 - Layout (LinearLayout) in Kotlin Example - Lesson 18 - Layout (LinearLayout) in Kotlin Example - Lesson 18 - Layout (LinearLayout) in Kotlin Example -

Note that in the “Palette” of Android Studio there are two options to have “Linear Layout (Horizontal)” or “Linear Layout (Vertical)” the only difference is that the “orientation” property is loaded in the value: horizontal or vertical.

Removing the ConstraintLayout from the root of the application.

If we do not need the root of the interface to define a ConstraintLayout, we can have a LinearLayout instead. We will modify the program made up to now so that the interface is only a LinearLayout with vertical orientation and with 5 buttons inside.

We can not do it visually with Android Studio, we must manually modify the code of the XML file, we change the view “Design” to “Text”.

We proceed to modify the name of the Layout and define and initialize the property “orientation” (We replace the name android.support.constraint.ConstraintLayout with LinearLayout and we add the property android: orientation = “vertical”):

<?xml version="1.0" encoding="utf-8"?>
<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:layout_height="match_parent"
    android:orientation="vertical"
 tools:context="com.coding180.project020.MainActivity">

</LinearLayout>

Now we can arrange the buttons in the interface and they will appear one under the other similar to how we started but will be more efficient since there is a ConstraintLayout in the root of the interface:

Lesson 18 - Layout (LinearLayout) in Kotlin Example - Lesson 18 - Layout (LinearLayout) in Kotlin Example - Lesson 18 - Layout (LinearLayout) in Kotlin Example -

……

 

About The Author

Related posts

Leave a Reply