Android layout design is not the same as the app when running on the mobile

Question

The design of my layout is not the same in Android Studio preview and in my mobile (Samsung s8). I'm trying to make both button to be horizontal align (i.e To start and ends at the same x asix).According to the designer it seems aligned the way i want, but actually (in the device) they aren't.

Screenshot from the Android Studio Designer:

Screenshot from Samsung S8:

my Xml:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Menu"
        android:textSize="50sp" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textMultiLine"
        android:text="Select a layout type to view an example. The onClick attribute of each button will call a method which executes setContentView to load the new layout"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="0.59"
            android:text="Load ConstraintLayout"
            android:layout_marginLeft="8dp"
            android:textSize="20dp" />

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.41"
            android:text="Load"
            android:layout_marginRight="8dp"/>


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView3"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.7"
            android:layout_gravity="center_vertical"
            android:textSize="20dp"
            android:text="Load TableLayout"
            android:layout_marginLeft="8dp"/>

        <Button
            android:id="@+id/button2"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.3"
            android:text="Load"
            android:layout_marginRight="8dp"/>

    </LinearLayout>

    <RatingBar
        android:id="@+id/ratingBar4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="75dp"/>


</LinearLayout>

Does someone can understand the reason for the inconsistency?

Use same weight for textviews(0.7) and buttons(0.3) in both linearlayouts. You can modify weight, but keep it same in both layout. I suggest to use constraintlayout. — Niraj, Dec 22 '19 at 16:52
@ Niraj, your solution indded work. But only after i set for all four views layout_width attribute to zero. But is there a reasonable explanation why both designer and mobile aren't present the same result? — Eitanos30, Dec 22 '19 at 17:14

score 0 · Answer 1 · answered Dec 22 '19 at 16:28

0

This because you use margin with dp, if you won to define in percent im recommended to use constraintlayout please check this How to make ConstraintLayout work with percentage values?

answered Dec 22 '19 at 16:28

adi purnama

156
2
6

score 0 · Answer 2 · answered Dec 23 '19 at 07:57

You should use layout_weight in textview to fix this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical" 
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="Menu"
    android:textSize="50sp" />

<EditText
    android:id="@+id/editText3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ems="10"
    android:inputType="textMultiLine"
    android:text="Select a layout type to view an example. The onClick attribute of each button will call a method which executes setContentView to load the new layout"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_weight="0.65"
        android:text="Load ConstraintLayout"
        android:layout_marginLeft="8dp"
        android:textSize="20dp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.35"
        android:text="Load"
        android:layout_marginRight="8dp"/>


</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.65"
        android:layout_gravity="center_vertical"
        android:textSize="20dp"
        android:text="Load TableLayout"
        android:layout_marginLeft="8dp"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.35"
        android:text="Load"
        android:layout_marginRight="8dp"/>

</LinearLayout>

<RatingBar
    android:id="@+id/ratingBar4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:layout_marginTop="75dp"/>

score -1 · Answer 3 · answered Dec 22 '19 at 16:36

If you want to use android:layout_width, you should set the width to 0dp and use the same value inside your 2 LinearLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Menu"
        android:textSize="50sp" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textMultiLine"
        android:text="Select a layout type to view an example. The onClick attribute of each button will call a method which executes setContentView to load the new layout"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="0.7"
            android:text="Load ConstraintLayout"
            android:layout_marginLeft="8dp"
            android:textSize="20dp" />

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.3"
            android:text="Load"
            android:layout_marginRight="8dp"/>


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.7"
            android:layout_gravity="center_vertical"
            android:textSize="20dp"
            android:text="Load TableLayout"
            android:layout_marginLeft="8dp"/>

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.3"
            android:text="Load"
            android:layout_marginRight="8dp"/>

    </LinearLayout>

    <RatingBar
        android:id="@+id/ratingBar4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="75dp"/>


</LinearLayout>

Why use such complex layout when it can be easily done using constraintlayout. — Niraj, Dec 22 '19 at 16:57
@romaing, Thanks for the answer. It's really works. But can you explain the inconsistency between what we see in the designer and what we see in the mobile? — Eitanos30, Dec 22 '19 at 17:08
@Niraj, he is ok :) . He answered my question. I didn't ask him to find me a better layout since i'm now beginner and i'm practice *LinearLayout*. Thanks anyway. If you can say why designer and mobile **aren't similar** in aligning the buttons i will be glad — Eitanos30, Dec 22 '19 at 17:11
@Eitanos30 you should used the same weight for the both layouts (TextView and Buttons) and when you use weight in Horizontal linerarLayout `layout_width` whould be `"0dp"` check [link1](https://developer.android.com/guide/topics/ui/layout/linear), [link2](https://stackoverflow.com/questions/2698817/linear-layout-and-weight-in-android) — Mohammed Alaa, Dec 22 '19 at 18:14
@MohammedAlaa, thanks. But i have already said the i change the code (the way you say) and it's indeed working. But the question that still haven't been answer is why mobile and designer aren't displaying the same picture? — Eitanos30, Dec 22 '19 at 19:26
The layout preview is not as efficient enough as emulator or phone so you need to run your code to verify the layout — Mohammed Alaa, Dec 22 '19 at 19:37

Android layout design is not the same as the app when running on the mobile

3 Answers3