Design Showing Perfectly in Android Studio Preview but Not in Real Device

Question

I am working on an Android Application and I am trying to implement Design Layout in Android Studio like Image in Android Studio Preview

But When I run It on Real Device It is showing layout like Design In Real Device.

In the Android Studio I used Nexus 4 to design the Layout and my Phone Resolution is 720x1280. Here is my xml code

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.usmanali.childsafety.MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="275sp"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="3dp">

    <ImageView
        android:id="@+id/imgschool"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/im"
        android:contentDescription="@string/todo" />
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="115sp"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="278dp">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/download" />
</LinearLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="110sp"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="393dp"
    tools:ignore="MissingConstraints">

    <Button
        android:id="@+id/btnlogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btnregister"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:text="@string/login"
        android:textStyle="bold"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="291dp" />

    <Button
        android:id="@+id/btnregister"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:text="@string/sign_up"
        android:textStyle="bold"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="340dp" />
</RelativeLayout>

All attributes with `tools:` prefix are ignored during running on device. You should replace at least all `layout_editor_absolute` with constraints — lukjar, Sep 20 '18 at 08:13
E.g can you please elaborate because I am new in Android app development and also designing — Usman Ali, Sep 20 '18 at 08:20
After adding view to your layout you have to set up all constraints in design editor. Here is the animation how to do this https://codelabs.developers.google.com/codelabs/constraint-layout/img/835a0c5c1065d425.png . When you set all constraints `layout_editor_aboslute` should be replaced with something similar to ` app:layout_constraintTop_toTopOf`. Try to do this coding lab https://codelabs.developers.google.com/codelabs/constraint-layout/index.html — lukjar, Sep 20 '18 at 08:28
@ziikhankhan it required to use ConstraintLayout for designing ? if its not required then i suggest you use LinearLayout . — Arbaz.in, Sep 20 '18 at 08:33
Actually I want to design a responsive design and someone told me use constraint layout for responsive of design — Usman Ali, Sep 20 '18 at 08:54
okay !! For Responsive design i suggest you refer [my answer](https://stackoverflow.com/a/51875376/5995648) which i already post for same. _IT WILL HELP YOU_ — Arbaz.in, Sep 20 '18 at 08:59

score 1 · Accepted Answer · answered Sep 20 '18 at 09:09

Try this

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


    <LinearLayout
        android:id="@+id/mainLinearLayout"
        android:layout_width="match_parent"
        android:layout_height="275sp"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="3dp">

        <ImageView
            android:id="@+id/imgschool"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/im"
            android:contentDescription="@string/todo" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="115sp"
       app:layout_constraintTop_toBottomOf="@+id/mainLinearLayout"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="278dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/download" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="110sp"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="393dp"
        tools:ignore="MissingConstraints">

        <Button
            android:id="@+id/btnlogin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/btnregister"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:text="@string/login"
            android:textStyle="bold"
            tools:ignore="MissingConstraints"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="291dp" />

        <Button
            android:id="@+id/btnregister"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:text="@string/sign_up"
            android:textStyle="bold"
            tools:ignore="MissingConstraints"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="340dp" />
    </RelativeLayout>
</android.support.constraint.ConstraintLayout>

_did you try this design ? in all device?_ **i suggest you to double check it then put as a answer.** — Arbaz.in, Sep 20 '18 at 10:03
yes i check it and i am sure about my answer. i think you should check and if you have any issue related to that please send me **screen shot** — Drashti Joshi, Sep 20 '18 at 13:08
nope its not working< What i have done i juts paste your code and change device screen size from XML it's perfect with <=5.0 screen size but design will change when i choose device screen >5.0. actually i am unable to sent screenshort in comment thats why i explain you. — Arbaz.in, Sep 20 '18 at 13:16
i don't know about you issue dear because in my **all screen size which is > 5.0** is working perfectly. if you attach screen short then i can help you out dear other wish i am sorry dear. — Drashti Joshi, Sep 20 '18 at 13:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/180490/discussion-between-arbaz-in-and-drashti-joshi). — Arbaz.in, Sep 21 '18 at 04:36

Design Showing Perfectly in Android Studio Preview but Not in Real Device

1 Answers1