ConstraintLayout 准则下的边距未正确显示

Question

I am trying to add some space underneath the Guideline for my constraint layout, but for some reason it doesn't appear to be applied. Does anyone know what is going on and how to apply 5dp of margin underneath the Guideline (for both portrait and landscape orientations)?

XML layout

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/lightgrey">
    <com.google.android.gms.maps.MapView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/map_townmap"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#09c"
        app:layout_constraintBottom_toBottomOf="@+id/guideline"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.9"/>

    <ImageView
        android:id="@+id/imageViewSun"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:src="@drawable/ic_sun_black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/switch"
        app:layout_constraintTop_toBottomOf="@+id/guideline"
        />

    <Switch
        android:id="@+id/switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="5dp"
        android:background="@android:color/transparent"
        android:theme="@android:style/Theme.Material.Light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/imageViewSun"
        app:layout_constraintRight_toLeftOf="@+id/imageViewMoon"
        app:layout_constraintTop_toBottomOf="@+id/guideline"/>

    <ImageView
        android:id="@+id/imageViewMoon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_moon_black"
        android:layout_marginBottom="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/switch"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/guideline"/>
</android.support.constraint.ConstraintLayout>

Portrait orientation

Portrait orientation (close-up)

Landscape orientation

Landscape orientation (close-up)

Answer 1

You can apply margins to Guidelines:

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="1dp"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="5dp" />

Although you might need to adjust the margin layout_constraintGuide_begin and the android:orientation accordingly. Probably you should do that though a portrait layout xml file and a landscape layout xml file in their correct res folder locations.

Answer 2

Actually, the thing is you have added Guideline and you are using app:layout_constraintGuide_percent="0.9" . This means that Guideline will be set according to the parent layout, so when you change orientation it will look weird.

Use following code to solve your problem:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/lightgrey">
    <com.google.android.gms.maps.MapView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/map_townmap"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#09c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/imageViewSun"
        app:layout_constraintTop_toTopOf="parent"/>

    <ImageView
        android:id="@+id/imageViewSun"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:src="@drawable/ic_sun_black"
        app:layout_constraintTop_toBottomOf="@+id/map_stationmap_lighttheme"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/switch" />

    <Switch
        android:id="@+id/switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        app:layout_constraintTop_toBottomOf="@+id/map_stationmap_lighttheme"
        android:background="@android:color/transparent"
        android:theme="@android:style/Theme.Material.Light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/imageViewSun"
        app:layout_constraintRight_toLeftOf="@+id/imageViewMoon"/>

    <ImageView
        android:id="@+id/imageViewMoon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_moon_black"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        app:layout_constraintTop_toBottomOf="@+id/map_stationmap_lighttheme"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/switch"
        app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>