Modern Android App Development — 2 — Layout Editor

Tutorial 2 of the series where we learn about Layout Editor.

Video: https://youtu.be/94UrdYBX9h0

Launch android Studio and open our “TutorialOne” project. (If you haven’t completed Tutorial 1 you can get the code here https://github.com/madrzak/TutorialOne)

In the Project View on the left hand side, expand “app” > “res” > “layout” and open “activity_main.xml”.

Layout Editor consists of 2 main modes. Design mode and Text mode. You can switch between them on the bottom of the screen.

Design mode consists of 3 main parts.

1. On the left — Palette with all the widgets we would want to use in an app.
2. In the middle — live editor (where you can drag and drop widgets)
3. On the right — Properties panel where we can edit properties of a widget that is currently selected in the live editor.

Let’s create a basic messaging app layout.

Switch to “Text” mode.

Replace Constraint Layout with Linear Layout and delete TextView

<?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:orientation="vertical"
    android:layout_height="match_parent"
    tools:context="com.madrzak.tutorialone.MainActivity">
    


</LinearLayout>

Go Back to “Design” mode. From Palette Select “Text” > “Plain Text” and drag and drop “Plain text” to anywhere in our view (in the middle). It will look like this.

Switch back to “Text” mode.

Notice new item in our list. It’s EditText. We can edit’s it’s property here.

In particular let’s change the id which we will require later to bind it to our activity (will show how it’s done later). Let’s also add hint property and make it equal to “Message”. You should now have something like this:

<?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:orientation="vertical"
    android:layout_height="match_parent"
    tools:context="com.madrzak.tutorialone.MainActivity">

    <EditText
        android:id="@+id/etMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text=""
        android:hint="Message"
        />



</LinearLayout>

Now, let’s go back to “Design” mode so we can add a button and a TextView for our messaging app.

In Palette select “Widgets” & drag n drop Button to our view, just under the EditText. It should automatically take up the entire width of the screen.

Select Button in our view to mark it (should be highlighted) and the Properties panel on the right hand side should now be filled with many options. See image below.

Now we want to change the text property to read “Send”.

Next, let’s drag n drop TextView widget from Palette to our view — just under the button. Select it and let’s adjsut the following properties:

textAlignment: center

textSize: 26dp

The last thing we would like to do is to add some space between the button and the TextView as otherwise our layout will be very much crammed on top of the screen.

Change to “Text” mode and add the following property to the TextView:

android:layout_marginTop="60dp"

You can now run this app and you should get the following screen.

In the next tutorial we will make our app send a message! (That’s a lie — but we’ll get a good start).

Thanks for reading! If you found this tutorial useful, hit the 💚 green heart below. Means a lot! Plus more people will get to make use of this article.