CODEWITHSUNDEEP
android-studioxml-layout
Tanya Gupta
Tanya Gupta

Reputation: 67

Layout in Android Emulator looks different as compared to the layout file

I have recently started learning Android Development. I am using Android Studio and I created the XML layout file with it. But the layout is looking different on the emulator to the one I created on XML and I have no clue why it is happening.

This is the picture of my Main activity layout:

img_mail_layout

And this is the picture of my emulator:

img_emulator

The plain text should be below the text view but in the emulator, its position is different(I have marked the error by red).

Here is the code for the Main activity:

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="208dp"
    android:text="SUBMIT"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="80dp"
    app:layout_constraintBottom_toTopOf="@+id/button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="44dp"
    android:text="Enter the value in kg below"
    android:textSize="25sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<EditText
    android:id="@+id/editTextNumber"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:inputType="number"
    tools:layout_editor_absoluteX="100dp"
    tools:layout_editor_absoluteY="73dp" />

Upvotes: 2

Views: 607

Answers (2)

Omkar
Omkar

Reputation: 55

As you are using constraint layout every UI item must constraint vertical and horizontally. Try adding constraints to your EditText.

Upvotes: 0

shagberg
shagberg

Reputation: 2512

I'm not sure why it is showing that way in the emulator versus the preview, but the reason that the EditText field isn't where you want it to be is because of how you have set the position of the editTextNumber field:

tools:layout_editor_absoluteX="100dp" 
tools:layout_editor_absoluteY="73dp"

You are telling Android to position the field 100 pixels in and 73 pixels down from the top of the screen. Most than likely this occurred because you accidentally dragged the field slightly in the editor window, which specifies the exact pixel placement.

Instead, since you are using a ConstraintLayout, you'll want to set the location of the EditText in relation to other fields on your layout. For example, remove the two lines above and replace them with something like this:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView"

I would also suggest that you name your fields on the layout with descriptions of what they represent, rather than the defaults of textView and textView2. For example, consider changing textView2 to something like weight_label_textview. It will make it much easier to know which field you are dealing with both in the layout and in your code.

Upvotes: 2

Related Questions