GUI elements not displaying properly

Question

I was following along some Android tutorial on Youtube when I encountered the following problem: (left the designer, right the emulator)

I tried searching on google, but can't seem to find the right link. Does anyone have any idea what is going on? I tried deleting and placing new elements, but the same problem keeps occurring.

[Edit] XML code which I didn't change. This was created with a new project. All elements in the picture were dragged and dropped. No code was changed.

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.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"
    android:visibility="visible"
    tools:context="com.example.todor.myapplication.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteX="159dp"
        tools:layout_editor_absoluteY="235dp"
        tools:text="@string/loginbutton" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="132dp"
        android:layout_height="31dp"
        android:layout_marginBottom="42dp"
        android:fontFamily="monospace"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        android:textColorHint="@android:color/holo_blue_bright"
        android:textStyle="bold"
        android:visibility="visible"
        app:layout_constraintBottom_toTopOf="@+id/editText"
        tools:text="@string/logintext"
        tools:layout_editor_absoluteX="126dp" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="33dp"
        android:width="300dp"
        android:ems="10"
        android:hint="@string/emailhint"
        android:inputType="textEmailAddress"
        app:layout_constraintBottom_toTopOf="@+id/editText2"
        tools:layout_editor_absoluteX="42dp" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="40dp"
        android:width="300dp"
        android:ems="10"
        android:hint="@string/passowrdhint"
        android:inputType="textPassword"
        app:layout_constraintBottom_toTopOf="@+id/button"
        tools:layout_editor_absoluteX="42dp" />
</android.support.constraint.ConstraintLay

out>

[Study layouts](https://developer.android.com/guide/topics/ui/declaring-layout.html) — nobalG, Mar 05 '17 at 18:55
@ilan Todorovic what's your issue? where is your XML ? what kind of help you need from us? — Charuක, Mar 05 '17 at 19:02
@Charuක The left side of the image is the order of the elements I placed using the Designer and the right side is what is displayed in the emulator. I didn't mess with the code. I have no idea why this happened. — Milan Todorovic, Mar 05 '17 at 19:04
how can we help if you do not post the xml check your **setContentView** and which XML is linked to your Activity, It seems you have wrong XML for your Activity — Charuක, Mar 05 '17 at 19:06
@Milan Todorovic what is your XML name again? uninstall and try or did you check with a real device ? — Charuක, Mar 05 '17 at 19:13
@Charuක You can see it in the second screenshot (the second tab which is open). It's the default name activity_main. — Milan Todorovic, Mar 05 '17 at 19:14
@Milan Todorovic post your activity_main.xml in your question — Charuක, Mar 05 '17 at 19:17
@tools:text insted of `tools:text` use `android:text` `tools:text` is only to check the data in the design , and you view is not properly positioned! so it will jump to 0,0 , your view is only created for design view not for runtime — Charuක, Mar 05 '17 at 19:24
@Charuක Can you tell my why it is not positioned? Shouldn't the Designer do it automatically based on the position I dragged the element to? It even let's me center the damn elements... — Milan Todorovic, Mar 05 '17 at 19:29

score 1 · Accepted Answer · edited May 23 '17 at 12:00

Here are some tips for you !

Read about Tools Attributes Reference

Android Studio supports a variety of XML attributes in the tools namespace that enable design-time features (such as which layout to show in a fragment) or compile-time behaviors (such as which shrinking mode to apply to your XML resources). When you build your app, the build tools remove these attributes so there is no effect on your APK size or runtime behavior.

You need to understand the difference of below attributes!

tools:text="loginbutton"
android:text="loginbutton"

Your views are not constrained they have only design time position! Go to the design, drag the corners until the circle turns green and then give the constraint.Here is an extra guidance from linkOne LinkTwo related with ConstraintLayout

If you mess it up big-time you can replace android.support.constraint.ConstraintLayout with LinearLayout but that's not the solution it's another way instead!

GUI elements not displaying properly

1 Answers1