Search code examples
androidandroid-layoutandroid-studiobuttonandroid-linearlayout

The sides of the buttons changed


when I try my app on my computer all the buttons are in the correct place.

enter image description here

but when I testing my app on my phone all the buttons changed.

enter image description here

how can I fix that?

This is my xml code:

<?xml version="1.0" encoding="utf-8"?>

<Space
    android:id="@+id/s1"
    android:layout_width="match_parent"
    android:layout_height="40dp"/>

<TextView
    android:id="@+id/tv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/s1"
    android:textSize="30sp" />

<Space
    android:id="@+id/s2"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_below="@id/tv"/>

<LinearLayout
    android:id="@+id/ll789"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/s2"
    android:orientation="horizontal">

    <Button
        android:id="@+id/buttonSeven"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="7"
        android:textSize="20sp" />

    <Button
        android:id="@+id/buttonEight"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="8"
        android:textSize="20sp" />

    <Button
        android:id="@+id/buttonNine"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="9"
        android:textSize="20sp" />

    <Button
        android:id="@+id/buttonDivide"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="/"
        android:textSize="20sp" />

</LinearLayout>

<LinearLayout
    android:id="@+id/ll456"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/ll789"
    android:orientation="horizontal">

    <Button
        android:id="@+id/buttonFour"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="4"
        android:textSize="20sp" />

    <Button
        android:id="@+id/buttonFive"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="5"
        android:textSize="20sp" />

    <Button
        android:id="@+id/buttonSix"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="6"
        android:textSize="20sp" />

    <Button
        android:id="@+id/buttonMultiply"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="*"
        android:textSize="20sp" />

</LinearLayout>

<LinearLayout
    android:id="@+id/ll123"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/ll456"
    android:orientation="horizontal">

    <Button
        android:id="@+id/buttonOne"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1"
        android:textSize="20sp" />

    <Button
        android:id="@+id/buttonTwo"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="2"
        android:textSize="20sp" />

    <Button
        android:id="@+id/buttonThree"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="3"
        android:textSize="20sp" />

    <Button
        android:id="@+id/buttonSubtract"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="-"
        android:textSize="20sp" />

</LinearLayout>

<LinearLayout
    android:id="@+id/ll0"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/ll123"
    android:orientation="horizontal">

    <Button
        android:id="@+id/buttonDot"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="."
        android:textSize="20sp" />

    <Button
        android:id="@+id/buttonZero"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="0"
        android:textSize="20sp" />

    <Button
        android:id="@+id/buttonEqual"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="="
        android:textSize="20sp" />

    <Button
        android:id="@+id/buttonAdd"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="+"
        android:textSize="20sp" />

</LinearLayout>

<LinearLayout
    android:id="@+id/llC"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/ll0"
    android:orientation="horizontal">

    <Space
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

    <Space
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

    <Space
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

    <Button
        android:id="@+id/buttonClear"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="C"
        android:textSize="20sp" />

</LinearLayout>

I think maybe that's happened because of my phone in Hebrew and my computer in English.


Solution

  • This is most likely happening because the <application> tag in your AndroidManifest.xml file specifies android:supportsRtl="true". Assuming this attribute is there, any time the user (i.e. you) has their phone set to a right-to-left language, the contents of your LinearLayouts will be reversed.

    You can set this attribute to false or you can add android:layoutDirection="ltr" to your LinearLayouts.