CODEWITHSUNDEEP
javaandroidlayout
Jovke
Jovke

Reputation: 15

App layout differs from Android Studio layout

I am new to Android Studio and Java programming, so i'm sorry if this this a dumb question. I made a project with basic activity and its something like a note app and when you click on floating button, something like pop up window should appear. I will post 2 screenshots. First is how the app should look like and the second is how the app looks on phone when i run the app.

This is how app should look like enter image description here

This is how it looks like enter image description here

Here is the code for this layout:

    <?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">

    <EditText
        android:id="@+id/editTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginTop="43dp"
        android:ems="10"
        android:hint="@string/title_hint"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="47dp"
        android:layout_marginTop="139dp"
        android:ems="10"
        android:hint="@string/description_hint"
        android:inputType="textMultiLine"
        android:text="Name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <CheckBox
        android:id="@+id/checkBoxIdea"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginTop="244dp"
        android:text="@string/idea_text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <CheckBox
        android:id="@+id/checkBoxToDo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:text="@string/todo_text"
        app:layout_constraintStart_toStartOf="@+id/checkBoxIdea"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxIdea" />

    <CheckBox
        android:id="@+id/checkBoxImportant"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:text="@string/important_text"
        app:layout_constraintStart_toStartOf="@+id/checkBoxToDo"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxToDo" />

    <Button
        android:id="@+id/btnCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cancel_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/checkBoxImportant"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/checkBoxImportant"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.922" />

    <Button
        android:id="@+id/btnOK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ok_button"
        app:layout_constraintBottom_toBottomOf="@+id/btnCancel"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.86"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btnCancel"
        app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 1

Views: 84

Answers (4)

Sarah Khan
Sarah Khan

Reputation: 866

You have nowhere in btnOk or btnCancel defined that these buttons should be below the checkBoxImportant, hence when the screen height/width changes the screen adjusts itself according to the constraints provided. Now you can try,

<?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">

    <EditText
        android:id="@+id/editTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginTop="43dp"
        android:ems="10"
        android:hint="Name"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="47dp"
        android:layout_marginTop="20dp"
        android:ems="10"
        android:hint="Name"
        android:inputType="textMultiLine"
        android:text="Name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/editTitle" />

    <CheckBox
        android:id="@+id/checkBoxIdea"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginTop="100dp"
        android:text="Idea"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/editDescription" />

    <CheckBox
        android:id="@+id/checkBoxToDo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:text="To Do"
        app:layout_constraintStart_toStartOf="@+id/checkBoxIdea"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxIdea" />

    <CheckBox
        android:id="@+id/checkBoxImportant"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:text="Important"
        app:layout_constraintStart_toStartOf="@+id/checkBoxToDo"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxToDo" />

    <Button
        android:id="@+id/btnCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cancel"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/checkBoxImportant"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/checkBoxImportant"
        app:layout_constraintTop_toBottomOf="@id/checkBoxImportant"
        app:layout_constraintVertical_bias="0.922" />

    <Button
        android:id="@+id/btnOK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ok"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.86"
        app:layout_constraintStart_toEndOf="@id/btnCancel"
        app:layout_constraintTop_toTopOf="@id/btnCancel"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxImportant"
        app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 1

Zain
Zain

Reputation: 40908

Make sure that not every device has the same dimension and pixel density; so your views can be hidden off the screen unless you provided the right constrains among views and their parent ViewGroup

If you're not sure 100% that your views can fit in different screens, then you should wrap them in a ScrollView which I did below, also tweaked the buttons constrains to be below the check boxes.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/editTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="44dp"
            android:layout_marginTop="43dp"
            android:ems="10"
            android:hint="@string/title_hint"
            android:inputType="textPersonName"
            android:text="Name"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/editDescription"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="47dp"
            android:layout_marginTop="139dp"
            android:ems="10"
            android:hint="@string/description_hint"
            android:inputType="textMultiLine"
            android:text="Name"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <CheckBox
            android:id="@+id/checkBoxIdea"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="44dp"
            android:layout_marginTop="244dp"
            android:text="@string/idea_text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <CheckBox
            android:id="@+id/checkBoxToDo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="22dp"
            android:text="@string/todo_text"
            app:layout_constraintStart_toStartOf="@+id/checkBoxIdea"
            app:layout_constraintTop_toBottomOf="@+id/checkBoxIdea" />

        <CheckBox
            android:id="@+id/checkBoxImportant"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="22dp"
            android:text="@string/important_text"
            app:layout_constraintStart_toStartOf="@+id/checkBoxToDo"
            app:layout_constraintTop_toBottomOf="@+id/checkBoxToDo" />

        <Button
            android:id="@+id/btnCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/cancel_button"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@+id/checkBoxImportant"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="@+id/checkBoxImportant"
            app:layout_constraintTop_toBottomOf="@+id/checkBoxImportant"
            app:layout_constraintVertical_bias="0.922" />

        <Button
            android:id="@+id/btnOK"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ok_button"
            app:layout_constraintBottom_toBottomOf="@+id/btnCancel"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.86"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintVertical_bias="0.0" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Upvotes: 0

Ticherhaz FreePalestine
Ticherhaz FreePalestine

Reputation: 2387

It is because the size of the phone is small, so all of them need to fix inside ScrollView

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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">

    <androidx.constraintlayout.widget.ConstraintLayout 
       android:layout_width="match_parent"
       android:layout_height="match_parent">

    <EditText
        android:id="@+id/editTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginTop="43dp"
        android:ems="10"
        android:hint="@string/title_hint"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="47dp"
        android:layout_marginTop="139dp"
        android:ems="10"
        android:hint="@string/description_hint"
        android:inputType="textMultiLine"
        android:text="Name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <CheckBox
        android:id="@+id/checkBoxIdea"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginTop="244dp"
        android:text="@string/idea_text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <CheckBox
        android:id="@+id/checkBoxToDo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:text="@string/todo_text"
        app:layout_constraintStart_toStartOf="@+id/checkBoxIdea"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxIdea" />

    <CheckBox
        android:id="@+id/checkBoxImportant"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:text="@string/important_text"
        app:layout_constraintStart_toStartOf="@+id/checkBoxToDo"
        app:layout_constraintTop_toBottomOf="@+id/checkBoxToDo" />

    <Button
        android:id="@+id/btnCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cancel_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/checkBoxImportant"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/checkBoxImportant"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.922" />

    <Button
        android:id="@+id/btnOK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ok_button"
        app:layout_constraintBottom_toBottomOf="@+id/btnCancel"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.86"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btnCancel"
        app:layout_constraintVertical_bias="0.0" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Upvotes: 0

maxmitz
maxmitz

Reputation: 180

You have to use constraints to fix your layout. Go to your xml file. Choose the element and connect it vertical and horizontal. If you need more information search for "constraint layout" in youtube.

Upvotes: 0

Related Questions