3

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

enter image description here

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>
Iulian Popescu
  • 2,595
  • 4
  • 23
  • 31
glaltv
  • 61
  • 1
  • 3

4 Answers4

3

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.

Iulian Popescu
  • 2,595
  • 4
  • 23
  • 31
0

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

Uday Ramjiyani
  • 1,407
  • 9
  • 22
0

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! :)

moshiah_now
  • 109
  • 1
  • 7
-1

you can click the infer Constraints buttonclick on this

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

Hasanga
  • 1