Android - Layout not appearing as expected

Question

This(1st image) is how the layout is appearing in content_main.xml https://s8.postimg.org/8ie65tzdh/Untitled1.png But this(2nd image) is how it appears in the virtual device. https://s8.postimg.org/wywc0enad/Untitled.png

I'm a beginner so I might be missing many things here. All kind of help will be appreciated.

<?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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.example.shanu.namerank.MainActivity"
tools:showIn="@layout/activity_main">

<Button
    android:id="@+id/submit"
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="216dp"
    android:layout_marginBottom="246dp"
    android:layout_marginLeft="132dp"
    android:layout_marginRight="132dp"
    android:text="@string/submit"
    tools:layout_editor_absoluteX="136dp"
    tools:layout_editor_absoluteY="217dp" />

<EditText
    android:id="@+id/name"
    android:layout_width="279dp"
    android:layout_height="70dp"
    android:layout_marginTop="128dp"
    android:layout_marginBottom="310dp"
    android:layout_marginLeft="40dp"
    android:layout_marginRight="40dp"
    android:digits="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
    android:ems="10"
    android:inputType="textPersonName"
    android:text="@string/enter_name"
    tools:layout_editor_absoluteX="41dp"
    tools:layout_editor_absoluteY="129dp" />

<Button
    android:id="@+id/check"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/check"
    android:layout_marginTop="283dp"
    android:layout_marginBottom="176dp"
    android:layout_marginLeft="124dp"
    android:layout_marginRight="124dp"
    tools:layout_editor_absoluteX="126dp"
    tools:layout_editor_absoluteY="284dp" />

<TextView
    android:id="@+id/result"
    android:layout_width="194dp"
    android:layout_height="67dp"
    android:layout_marginTop="356dp"
    android:layout_marginBottom="88dp"
    android:layout_marginLeft="80dp"
    android:layout_marginRight="80dp"
    android:text="@string/result"
    tools:layout_editor_absoluteX="83dp"
    tools:layout_editor_absoluteY="357dp" />


</android.support.constraint.ConstraintLayout>

enter image description here

Edit your question with proper urls . – ADM Dec 11 '17 at 15:04 — ADM, Dec 11 '17 at 15:04
You forgot to add the images – Andreas W Dec 11 '17 at 15:05 — Andreas W, Dec 11 '17 at 15:05
I uploaded the links to the images. – Shantanu Dec 11 '17 at 15:09 — Shantanu, Dec 11 '17 at 15:09

score 0 · Answer 1 · answered Dec 11 '17 at 15:14

You have constrains on your views that are only for showing in the xml layout editor but will be ignored when running on an actual device. Android studio should be giving you warnings regarding the usage of anything with the text "layout_editor_". You need to give the view real constraints.

score 0 · Accepted Answer · answered Dec 11 '17 at 15:19

0

You need to add "android:layout_marginBottom= x dp". Bottom/Top/Start(for left)/End(for right) for all 4 sides. And for every element.

Or if you like more design side, just pull arrows from elements to the sides and then move elements over layout.

answered Dec 11 '17 at 15:19

theKln

16
2

But even after adding the margins it's appearing the same. – Shantanu Dec 11 '17 at 16:32
Here is example of constrained element https://imgur.com/gXC0sHN. But i find it easier to do with those arrows and simply dragging it over layout. – theKln Dec 11 '17 at 19:07

Android - Layout not appearing as expected

2 Answers2