Android Constraint Layout Breaks When Keyboard is Opened

Question

I'm developing an android app using a constraint layout, but when the keyboard is opened, the layout breaks and does not return until the app has been restarted. The textEdit box alos remains highlighted after the keyboard has been closed, which is unwanted behavior.

How can I edit the GUI so that the layout returns to its proper state after the keyboard has been closed and the textEdit box is unfocused?

As a side note, talk to me like I know nothing, because I do know nothing about GUI's or android development. I'm working on this app as part of a group project in one of my CS classes (the course material isn't on android or GUI development).

Below is the XML and images of whats happening.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
        >


    <ScrollView
            android:layout_width="362dp"
            android:layout_height="194dp"
            android:layout_marginTop="360dp"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="25dp"
            android:layout_marginBottom="177dp"
            android:layout_marginEnd="22dp"
            app:layout_constraintEnd_toEndOf="parent"
            android:id="@+id/nextGuesses"
            android:backgroundTint="#7E55C8"
            android:background="#A8A8A8"
            app:layout_constraintVertical_bias="0.0"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintBottom_toBottomOf="parent">

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:backgroundTint="#673AB7"/>
    </ScrollView>

    <TextView
            android:id="@+id/prevGuess5"
            android:layout_width="80dp"
            android:layout_height="26dp"
            android:text="5."
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="223dp"
            android:layout_marginTop="306dp"
            android:layout_marginEnd="108dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintVertical_bias="0.0"
            android:backgroundTint="#A6A6A6"
            android:layout_marginBottom="399dp"
            android:textAlignment="viewStart"
            android:background="#A5A5A5"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/prevGuess4"
            android:layout_width="85dp"
            android:layout_height="29dp"
            android:text="4."
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="95dp"
            android:layout_marginTop="306dp"
            android:layout_marginEnd="231dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintVertical_bias="0.0"
            android:backgroundTint="#A6A6A6"
            android:layout_marginBottom="396dp"
            android:textAlignment="viewStart"
            android:background="#A5A5A5"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/prevGuess3"
            android:layout_width="86dp"
            android:layout_height="30dp"
            android:text="3."
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="278dp"
            android:layout_marginTop="266dp"
            android:layout_marginEnd="47dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintVertical_bias="0.0"
            android:backgroundTint="#A6A6A6"
            android:layout_marginBottom="423dp"
            android:textAlignment="viewStart"
            android:background="#A5A5A5"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/prevGuess2"
            android:layout_width="88dp"
            android:layout_height="31dp"
            android:text="2."
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="156dp"
            android:layout_marginTop="266dp"
            android:layout_marginEnd="167dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintVertical_bias="0.0"
            android:backgroundTint="#A6A6A6"
            android:layout_marginBottom="422dp"
            android:textAlignment="viewStart"
            android:background="#A5A5A5"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/prevGuess1"
            android:layout_width="98dp"
            android:layout_height="31dp"
            android:text="1."
            android:layout_marginEnd="280dp"
            app:layout_constraintEnd_toEndOf="parent"
            android:backgroundTint="#979797"
            android:textAlignment="viewStart"
            android:background="#A5A5A5"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="34dp"
            android:layout_marginTop="266dp"
            android:layout_marginBottom="434dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
            android:text="Current Guess:"
            android:layout_width="230dp"
            android:layout_height="52dp"
            android:id="@+id/currentGuess3"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="28dp"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="325dp"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginBottom="51dp"
            app:layout_constraintBottom_toTopOf="@+id/gridLayout"
            app:layout_constraintHorizontal_bias="0.075"
            app:layout_constraintVertical_bias="0.0"
            android:textSize="34sp"/>

    <Button
            android:id="@+id/undoGuess"
            android:layout_width="173dp"
            android:layout_height="60dp"
            android:text="Undo Last Guess"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="24dp"
            android:layout_marginTop="582dp"
            android:layout_marginEnd="214dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintVertical_bias="0.0"
            android:backgroundTint="#5D0FB5"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginBottom="89dp"/>

    <Button
            android:id="@+id/startOver"
            android:layout_width="173dp"
            android:layout_height="60dp"
            android:text="Start Over"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="24dp"
            android:layout_marginTop="646dp"
            android:layout_marginEnd="214dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintVertical_bias="0.0"
            android:backgroundTint="#A30000"
            android:layout_marginBottom="25dp"
            app:layout_constraintTop_toTopOf="parent"/>

    <Button
            android:id="@+id/helpButton"
            android:layout_width="102dp"
            android:layout_height="60dp"
            android:text="Help?"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="278dp"
            android:layout_marginTop="655dp"
            android:layout_marginEnd="24dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintVertical_bias="0.0"
            android:backgroundTint="#939393"
            android:layout_marginBottom="16dp"
            app:layout_constraintTop_toTopOf="parent"/>

    <GridLayout
            android:id="@+id/gridLayout"
            android:layout_width="381dp"
            android:layout_height="152dp"
            android:layout_marginStart="12dp"
            android:layout_marginTop="70dp"
            android:layout_marginEnd="12dp"
            android:background="@color/cardview_dark_background"
            android:columnCount="5"
            android:rowCount="2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.333"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:context=".MainActivity">


        <EditText
                android:id="@+id/gridInput_00"
                android:layout_width="76dp"
                android:layout_height="76dp"
                android:layout_row="0"
                android:layout_column="0"
                android:ems="10"
                android:gravity="center"
                android:inputType="text"
                android:maxLength="1"
                android:textColor="@color/white"
                android:textSize="28dp"
                android:textAllCaps="true"
                android:textAlignment="center"/>

        <EditText
                android:id="@+id/gridInput_01"
                android:layout_width="76dp"
                android:layout_height="76dp"
                android:layout_row="0"
                android:layout_column="1"
                android:ems="10"
                android:gravity="center"
                android:inputType="text"
                android:maxLength="1"
                android:textColor="@color/white"
                android:textSize="28dp"
                android:textAllCaps="true"
                android:textAlignment="center"/>

        <EditText
                android:id="@+id/gridInput_02"
                android:layout_width="76dp"
                android:layout_height="76dp"
                android:layout_row="0"
                android:layout_column="2"
                android:ems="10"
                android:gravity="center"
                android:inputType="text"
                android:maxLength="1"
                android:textColor="@color/white"
                android:textSize="28dp"
                android:textAllCaps="true"/>

        <EditText
                android:id="@+id/gridInput_03"
                android:layout_width="76dp"
                android:layout_height="76dp"
                android:layout_row="0"
                android:layout_column="3"
                android:ems="10"
                android:gravity="center"
                android:inputType="text"
                android:maxLength="1"
                android:textColor="@color/white"
                android:textSize="28dp"
                android:textAllCaps="true"/>

        <EditText
                android:id="@+id/gridInput_04"
                android:layout_width="76dp"
                android:layout_height="76dp"
                android:layout_row="0"
                android:layout_column="4"
                android:ems="10"
                android:gravity="center"
                android:inputType="text"
                android:maxLength="1"
                android:textColor="@color/white"
                android:textSize="28dp"
                android:textAllCaps="true"/>

        <Button
                android:id="@+id/gridColor_00"
                android:layout_width="76dp"
                android:layout_height="76dp"
                android:layout_row="1"
                android:layout_column="0"
                android:backgroundTint="#D3D3D3"/>

        <Button
                android:id="@+id/gridColor_01"
                android:layout_width="76dp"
                android:layout_height="76dp"
                android:layout_row="1"
                android:layout_column="1"
                android:backgroundTint="#D3D3D3"/>

        <Button
                android:id="@+id/gridColor_02"
                android:layout_width="76dp"
                android:layout_height="76dp"
                android:layout_row="1"
                android:layout_column="2"
                android:backgroundTint="#D3D3D3"/>

        <Button
                android:id="@+id/gridColor_03"
                android:layout_width="76dp"
                android:layout_height="76dp"
                android:layout_row="1"
                android:layout_column="3"
                android:backgroundTint="#D3D3D3"/>

        <Button
                android:id="@+id/gridColor_04"
                android:layout_width="76dp"
                android:layout_height="76dp"
                android:layout_row="1"
                android:layout_column="4"
                android:backgroundTint="#D3D3D3"/>
        />
    </GridLayout>


    <Button
            android:id="@+id/enterGuess"
            android:layout_width="173dp"
            android:layout_height="60dp"
            android:text="Enter Guess"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="214dp"
            android:layout_marginTop="582dp"
            android:layout_marginEnd="24dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintVertical_bias="0.0"
            android:backgroundTint="#2F602B"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginBottom="89dp"/>

    <TextView
            android:text="Current Guess:"
            android:layout_width="230dp"
            android:layout_height="52dp"
            android:id="@+id/currentGuess"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="28dp"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="325dp"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginBottom="51dp"
            app:layout_constraintBottom_toTopOf="@+id/gridLayout"
            app:layout_constraintHorizontal_bias="0.075"
            app:layout_constraintVertical_bias="0.0"
            android:textSize="34sp"/>

    <TextView
            android:text="Previous Guesses:"
            android:layout_width="148dp"
            android:layout_height="25dp"
            android:id="@+id/previousGuesses"
            android:textSize="16sp"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="32dp"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toTopOf="@+id/prevGuess2"
            android:layout_marginEnd="200dp"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginTop="13dp"
            app:layout_constraintTop_toBottomOf="@+id/gridLayout"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintVertical_bias="0.0"/>

    <androidx.constraintlayout.widget.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline2"
            app:layout_constraintGuide_begin="20dp"
            android:orientation="vertical"/>


</androidx.constraintlayout.widget.ConstraintLayout>

I've tried constraining all of the UI elements to the border of the parent/screen

With the check mark on the bottom right of the keyboard or the triangle on the bottom left of the screen — interloper.__init__, Nov 05 '22 at 17:29
I mean in your code, you need to remove the focus from `EditText` programmatically. There is a lot of tutorials out there on how to do it. — Lawrence Gimenez, Nov 06 '22 at 10:50
Ah, I see. That's the info I didn't know I needed. I have a feeling not removing the focus is the root cause of these issues. — interloper.__init__, Nov 06 '22 at 21:28
@LawrenceGimenez How can i detect that the "check mark"/ "ok button" on the bottom right on the keyboard has been pressed? what is that called from a code point of view? — interloper.__init__, Nov 08 '22 at 02:16
You can check if soft keyboard is visible or now here: https://stackoverflow.com/questions/4745988/how-do-i-detect-if-software-keyboard-is-visible-on-android-device-or-not — Lawrence Gimenez, Nov 08 '22 at 02:20

Android Constraint Layout Breaks When Keyboard is Opened

0 Answers0