Android: looks good while editing, bad on emulator - why

Question

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView13"
        android:layout_width="100dp"
        android:layout_height="26dp"
        android:text="People:"
        tools:layout_editor_absoluteX="27dp"
        tools:layout_editor_absoluteY="50dp" />

    <TextView
        android:id="@+id/textView14"
        android:layout_width="79dp"
        android:layout_height="24dp"
        android:text="Amount:"
        tools:layout_editor_absoluteX="27dp"
        tools:layout_editor_absoluteY="125dp" />

    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#D9D9D9"
        android:text="CALCULATE"
        android:textColor="#323232"
        app:backgroundTint="#CCCCCC"
        tools:layout_editor_absoluteX="138dp"
        tools:layout_editor_absoluteY="193dp" />

    <EditText
        android:id="@+id/editTextNumber10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="number"
        tools:layout_editor_absoluteX="162dp"
        tools:layout_editor_absoluteY="38dp" />

    <EditText
        android:id="@+id/editTextNumber11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="number"
        android:textIsSelectable="false"
        tools:layout_editor_absoluteX="162dp"
        tools:layout_editor_absoluteY="104dp" />


</androidx.constraintlayout.widget.ConstraintLayout>

EDIT:

  <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteX="30dp"
        tools:layout_editor_absoluteY="353dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="196dp"
        >

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/button12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Button" />

            <Button
                android:id="@+id/button13"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"

                android:text="Button" />
        </TableRow>

    </TableLayout>

That is because you have given static height * width to your controls. — Karan Mehta, Mar 03 '21 at 03:04
@KaranMehta How do I fix it? I tried making `android:layout_height="wrap_content"` but it didn't work — parsecer, Mar 03 '21 at 03:10

score 1 · Answer 1 · answered Mar 03 '21 at 03:10

This issue is happening because you have given static height * width to your controls so now first of all please implement this library from this link : https://github.com/intuit/sdp#:~:text=SDP%20%2D%20a%20scalable%20size%20unit,sp%20size%20unit%20for%20texts.

And then copy and paste below code and you can change size according to UI that you want to make but you will have to give size like this only : "@dimen/_XXsdp" like given in below code.

<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView13"
        android:layout_width="@dimen/_100sdp"
        android:layout_height="@dimen/_26sdp"
        android:text="People:"
        tools:layout_editor_absoluteX="@dimen/_27sdp"
        tools:layout_editor_absoluteY="@dimen/_50sdp" />

    <TextView
        android:id="@+id/textView14"
        android:layout_width="@dimen/_79sdp"
        android:layout_height="@dimen/_24sdp"
        android:text="Amount:"
        tools:layout_editor_absoluteX="27dp"
        tools:layout_editor_absoluteY="125dp" />

    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#D9D9D9"
        android:text="CALCULATE"
        android:textColor="#323232"
        app:backgroundTint="#CCCCCC"
        tools:layout_editor_absoluteX="@dimen/_138sdp"
        tools:layout_editor_absoluteY="@dimen/_193sdp" />

    <EditText
        android:id="@+id/editTextNumber10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="number"
        tools:layout_editor_absoluteX="@dimen/_162sdp"
        tools:layout_editor_absoluteY="@dimen/_38sdp" />

    <EditText
        android:id="@+id/editTextNumber11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="number"
        android:textIsSelectable="false"
        tools:layout_editor_absoluteX="@dimen/_162sdp"
        tools:layout_editor_absoluteY="@dimen/_104sdp" />


</androidx.constraintlayout.widget.ConstraintLayout>

For that you will have to do R&D and then find some solution for this issue but let me tell you one thing that this library is very light weight and won't have much effect on your app size. — Karan Mehta, Mar 03 '21 at 03:16
I can't use third party libraries. And I want to understand how to do it without them. — parsecer, Mar 03 '21 at 03:20
For that check this out : https://stackoverflow.com/questions/5472445/how-to-change-size-of-button-dynamic-in-android or https://developer.android.com/training/multiscreen/screensizes — Karan Mehta, Mar 03 '21 at 03:21

javdromero · Answer 2 · 2021-03-03T03:18:22.033

When you put this .xml on Android Studio, you get this explicit warning:

This view is not constrained. It only has designtime positions, so it will jump to (0,0) at runtime unless you add the constraints

Remenber you are using a ConstraintLayout, try this:

   <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:text="People:"
        app:layout_constraintBottom_toTopOf="@+id/textView14"
        app:layout_constraintEnd_toStartOf="@+id/editTextNumber10"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:text="Amount:"
        app:layout_constraintBottom_toBottomOf="@+id/textView13"
        app:layout_constraintEnd_toStartOf="@+id/editTextNumber11"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView13" />

    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="46dp"
        android:background="#D9D9D9"
        android:text="CALCULATE"
        android:textColor="#323232"
        app:backgroundTint="#CCCCCC"
        app:layout_constraintStart_toEndOf="@+id/textView14"
        app:layout_constraintTop_toBottomOf="@+id/editTextNumber11" />

    <EditText
        android:id="@+id/editTextNumber10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="60dp"
        android:ems="10"
        android:inputType="number"
        app:layout_constraintBaseline_toBaselineOf="@+id/textView13"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView13" />

    <EditText
        android:id="@+id/editTextNumber11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="23dp"
        android:layout_marginEnd="60dp"
        android:ems="10"
        android:inputType="number"
        android:textIsSelectable="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView14"
        app:layout_constraintTop_toBottomOf="@+id/editTextNumber10" />


</androidx.constraintlayout.widget.ConstraintLayout>

Please see edit. It works, but if the screen is too narrow the input labels are lost — parsecer, Mar 03 '21 at 03:12
You are using some extreme margins like: android:layout_marginBottom="697dp" maybe is a typo, i edited my answer againg, but fix those margins — javdromero, Mar 03 '21 at 03:18
Thanks so much! It works! May I ask you - I've been watching this video - https://www.youtube.com/watch?v=DUmXfTI-ojY - and it uses `LinearLayout` and `RelativeLayout`. Are those preferable in my case over `ConstraintLayout`? I've only been using `ConstraintLayout`, because it was the default — parsecer, Mar 03 '21 at 03:21
Personally i would use Linear Layout it's faster to render in most of the cases, but please have a read at this post first, https://stackoverflow.com/questions/37321448/differences-between-constraintlayout-and-relativelayout Also, don't forget to check as accepted answer to help others. — javdromero, Mar 03 '21 at 03:25
Could you please see my last edit? ; ( I tried to add a `TableLayout` with two buttons, I set `marginTop` to `196dp` but it didn't work. Removing `absoluteX/absoluteY` makes the table to appear in the upper left corner even in the editor itself — parsecer, Mar 03 '21 at 03:52
You clearly don't understand how ConstraintLayout works, please read the documentation https://developer.android.com/training/constraint-layout I suggest changing your root layour to LinearLayour which is easier until you learn your basics — javdromero, Mar 03 '21 at 13:22

Android: looks good while editing, bad on emulator - why

2 Answers2