CODEWITHSUNDEEP
androidandroid-layoutandroid-designer
Eitanos30
Eitanos30

Reputation: 1439

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

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:

Designer

Screenshot from Samsung S8:

Samsung

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?

Upvotes: 0

Views: 640

Answers (3)

Shubham Agrawal
Shubham Agrawal

Reputation: 21

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"/>

Upvotes: 0

romaing
romaing

Reputation: 38

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>

Upvotes: -1

adi purnama
adi purnama

Reputation: 156

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?

Upvotes: 0

Related Questions