My layout has stopped working

Question

I’m mounting a screen for an android application, I made the screen layout and was working, but after updating the android studio my layout no longer works.

The code is this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".actyvities.MainActivity">

<include
    android:id="@+id/tool_bar"
    layout="@layout/tool_bar"
    ></include>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/edit_box"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:hint="Nova nota..."/>
    <Button
        android:id="@+id/insert_button"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:text="Inserir" />

</LinearLayout>-->

<ListView
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"></ListView>
</LinearLayout>

Before the screen looked like this:

But now she’s like this:

I don’t know much about HTML, I tried to tidy up the layout, but I only managed to put fixed values in the text box size, I didn’t want to do so because if you change the screen size the layout doesn’t look good.

Answer 1

So, the Android layout is not HTML. It’s XML, which is a prime of HTML.

Joking aside, the problem here is you’re defining the width of the EditText as match_parent, which causes it to overlap the Button.

The correct thing in this case is to use weights (layout_weight="1") in combination with dynamic width (layout_width="0dp"), causing the EditText occupy the maximum width available by discounting the width of the button. This is a very common trick on Android.

The important part of your layout would look like this:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/edit_box"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:inputType="text"
        android:hint="Nova nota..."/>

    <Button
        android:id="@+id/insert_button"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:text="Inserir" />
</LinearLayout>