CODEWITHSUNDEEP
androidandroid-studio
Nachum Olman
Nachum Olman

Reputation: 37

Margins in constraint layout end up reversed

I have a view that is constructed of many buttons in a certain order that is achieved through the use of margins, but for some reason when I push the app to a device the margins end up reversed and thus i get a flipped image on a xiaomi honor android 5.1 api 22 but on a 5.4 fwvga android 9 api 28 everything is as expected.

My main activity xml:

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="@android:color/white"
    tools:context=".MainMap">

    <android.support.constraint.ConstraintLayout
        android:layout_width="@dimen/map_width"
        android:layout_height="@dimen/map_height"
        android:background="@drawable/menu_map"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/MaalotButton"
            style="@android:style/Widget.Holo.Light.Button.Borderless.Small"
            android:layout_width="32dp"
            android:layout_height="10dp"
            android:layout_marginStart="96dp"
            android:layout_marginLeft="96dp"
            android:layout_marginTop="28dp"
            android:text="@string/PaPMaalot"
            android:textSize="8sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/ShderotButton"
            style="@android:style/Widget.Holo.Light.Button.Borderless.Small"
            android:layout_width="32dp"
            android:layout_height="10dp"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="@string/PaPShderot"
            android:textSize="8sp"
            app:layout_constraintEnd_toEndOf="@+id/AshdodButton"
            app:layout_constraintTop_toBottomOf="@+id/AshdodButton" />

        <Button
            android:id="@+id/KfarVardimButton"
            style="@android:style/Widget.Holo.Light.Button.Borderless.Small"
            android:layout_width="46dp"
            android:layout_height="10dp"
            android:layout_marginEnd="6dp"
            android:layout_marginRight="6dp"
            android:text="@string/PaPKfarVradim"
            android:textSize="8sp"
            app:layout_constraintEnd_toEndOf="@+id/MaalotButton"
            app:layout_constraintTop_toBottomOf="@+id/MaalotButton" />

        <Button
            android:id="@+id/TalElButton"
            style="@android:style/Widget.Holo.Light.Button.Borderless.Small"
            android:layout_width="32dp"
            android:layout_height="10dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="@string/PaPTalEl"
            android:textSize="8sp"
            app:layout_constraintEnd_toEndOf="@+id/KfarVardimButton"
            app:layout_constraintTop_toBottomOf="@+id/KfarVardimButton" />

        <Button
            android:id="@+id/CholonButton"
            style="@android:style/Widget.Holo.Light.Button.Borderless.Small"
            android:layout_width="32dp"
            android:layout_height="10dp"
            android:layout_marginTop="110dp"
            android:layout_marginEnd="12dp"
            android:layout_marginRight="12dp"
            android:text="@string/PaPCholon"
            android:textSize="8sp"
            app:layout_constraintEnd_toStartOf="@+id/TalElButton"
            app:layout_constraintTop_toBottomOf="@+id/TalElButton" />

        <Button
            android:id="@+id/AshdodButton"
            style="@android:style/Widget.Holo.Light.Button.Borderless.Small"
            android:layout_width="32dp"
            android:layout_height="10dp"
            android:layout_marginTop="18dp"
            android:layout_marginEnd="14dp"
            android:layout_marginRight="14dp"
            android:text="@string/PaPAshdod"
            android:textSize="8sp"
            app:layout_constraintEnd_toEndOf="@+id/CholonButton"
            app:layout_constraintTop_toBottomOf="@+id/CholonButton" />

        <Button
            android:id="@+id/TfachotButton"
            style="@android:style/Widget.Holo.Light.Button.Borderless.Small"
            android:layout_width="32dp"
            android:layout_height="10dp"
            android:layout_marginTop="7dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="@string/PaPTfachot"
            android:textSize="8sp"
            app:layout_constraintEnd_toEndOf="@+id/BarYochayButton7"
            app:layout_constraintTop_toBottomOf="@+id/BarYochayButton7" />

        <Button
            android:id="@+id/DaltonButton"
            style="@android:style/Widget.Holo.Light.Button.Borderless.Small"
            android:layout_width="32dp"
            android:layout_height="10dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:text="@string/PaPDalton"
            android:textSize="8sp"
            app:layout_constraintStart_toEndOf="@+id/MaalotButton"
            app:layout_constraintTop_toTopOf="@+id/MaalotButton" />

        <Button
            android:id="@+id/BarYochayButton7"
            style="@android:style/Widget.Holo.Light.Button.Borderless.Small"
            android:layout_width="38dp"
            android:layout_height="10dp"
            android:layout_marginTop="7dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="@string/PaPBarYochay"
            android:textSize="8sp"
            app:layout_constraintEnd_toEndOf="@+id/DaltonButton"
            app:layout_constraintTop_toBottomOf="@+id/DaltonButton" />
    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

I expect a pattern but i get a flipped one.

Upvotes: 0

Views: 305

Answers (1)

TorchNight MC
TorchNight MC

Reputation: 56

I believe it's the way you set up your margins. More than likely, your devices have different languages set as the default.

Margin Left - creates a margin that is relative from the left.

Margin Right - creates a margin that is relative from the right.

Margin Start - creates a margin that is relative from the side that the device's writing system starts at.

If my device's language is English, a left-to-right (LTR) writing system, Margin Start is essentially the same as Margin Left.

If however, my device's language was Hebrew, a right-to-left (RTL) writing system, then Margin Start is essentially the same as Margin Right.

Margin End - is the opposite of Margin Start.

Solution - If you would like to create margins independent of the device's language, remove all marginStart and marginEnd attributes, and only use marginLeft and marginRight attributes.

Upvotes: 1

Related Questions