MacaronLover MacaronLover - 9 months ago 43
Android Question

Items not constrained properly in ConstraintLayout

I am trying to create a ConstraintLayout containing a complex layout but for some reason, it won't appear in the way that is expected. Does anyone know what must be done in order to fix the constraints and achieve the expected outcome?

XML layout code

<?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="wrap_content"
android:orientation="vertical"
android:background="@color/lightgrey"
android:weightSum="100">

<com.google.android.gms.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mymap"
android:name="com.google.android.gms.maps.SupportMapFragment"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_constraintLeft_creator="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="41dp"
android:layout_height="0dp"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp" />

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

<ImageView
android:id="@+id/imageViewSun"
android:importantForAccessibility="no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_sun_black"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="guideline"
app:layout_constraintRight_toLeftOf="@+id/switch_stationstopmap_lighttheme"
app:layout_constraintHorizontal_bias="0.5"
android:layout_marginEnd="8dp"
android:layout_marginBottom="0dp" />

<Switch
android:id="@+id/switch_stationstopmap_lighttheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="@+id/guideline"
app:layout_constraintHorizontal_bias="0.5"
android:background="@android:color/transparent"
android:theme="@android:style/Theme.Material.Light" />

<ImageView
android:id="@+id/imageViewMoon"
android:importantForAccessibility="no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_moon_black"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintLeft_toRightOf="@+id/switch_stationstopmap_lighttheme"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="@+id/guideline"
android:layout_marginBottom="5dp" />
</android.support.constraint.ConstraintLayout>


Expected result

enter image description here

Current result

enter image description here

Desired requirements

enter image description here


  1. The
    MapView
    height needs to be 90% of the layout's height

  2. The height underneath for the 3 items needs to be 10% of the layout's height

  3. The
    Switch
    needs to be exactly in the horizontal centre of the screen

  4. The 3 items (both image views and Switch) need to be exactly in the vertical centre of the 10% height for point 2

  5. The
    ImageView
    of the sun needs to be exactly halfway horizontally between the left hand side of the screen and the switch

  6. The
    ImageView
    of the moon needs to be exactly halfway horizontally between the switch and the right hand side of the screen

  7. 5dp margin is required for both the top and bottom of the 10% height at the bottom of the layout (for the 3 items)

  8. All of the above should result in the expected result image, which is what I want.


Answer Source

You can try this. I changed your root layout height to android:layout_height="match_parent" and then most of the issues are solved.

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

    <ImageView
        android:id="@+id/imageViewSun"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_action_name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/switch_stationstopmap_lighttheme"
        app:layout_constraintTop_toBottomOf="@+id/guideline"
        />

    <Switch
        android:id="@+id/switch_stationstopmap_lighttheme"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        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_action_name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/switch_stationstopmap_lighttheme"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/guideline"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.9"/>
</android.support.constraint.ConstraintLayout>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download