Elements overlapping on each other in my android studio emulator

问题

I am new to Android Studio, when I created my app all my elements overlapped on each other. I am not sure how to edit this code. Please give me a detailed description.

Layout editor and emulator result

Code for the layout

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 
    xmlns:android="schemas.android.com/apk/res/android"; 
    xmlns:app="schemas.android.com/apk/res-auto"; 
    xmlns:tools="schemas.android.com/tools"; 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="com.example.first.anew.MainActivity"> 

    <TextView
        android:layout_width="216dp"
        android:layout_height="60dp"
        android:text="Hello World!"
        tools:layout_editor_absoluteY="16dp"
        tools:layout_editor_absoluteX="61dp" />

    <Button
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="45dp"
        android:text="Login"
        tools:layout_editor_absoluteY="343dp"
        tools:layout_editor_absoluteX="177dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="215dp"
        android:layout_height="65dp"
        android:text="username"
        tools:layout_editor_absoluteY="117dp"
        tools:layout_editor_absoluteX="61dp" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        app:layout_constraintGuide_begin="20dp"
        android:orientation="horizontal" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="217dp"
        android:layout_height="57dp"
        android:ems="10"
        android:inputType="textPassword"
        tools:layout_editor_absoluteY="218dp"
        tools:layout_editor_absoluteX="61dp" />
</android.support.constraint.ConstraintLayout>

回答1:

Your emulator screen and the layout editor are different because of tools namespace. In a few words, it is a tool that helps you to better visualise the written code. This tool also generates constraints like tools:layout_editor_absoluteY="343dp", which inform the layout editor on how it should draw the views. The problem is that this constraints will not be present in your app code, resulting in that weird behaviour when all views are overlapped (since the above mentioned constraints are not used in the app code we can deduct that there are no constraint at all).

Since you are a beginner I would recommend to start with a LinearLayout or RelativeLayout because I think that ConstraintLayout is harder to understand, use and debug.

回答2:

put the whole code. if you are using Relativelayout, this will happen. change it to Linearlayout at the top i mean the bottom most element, and put orientation as vertical

回答3:

see this - for me my soltion works...

add this in xml to the button etc

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.57"

then play with it in the design.

Good luck! :)

回答4:

you can click the infer Constraints buttonclick on this

and run your programme again..it will solve your problem

来源：https://stackoverflow.com/questions/45145804/elements-overlapping-on-each-other-in-my-android-studio-emulator

标签

android

emulation