Text wrapping in Constraint layout

Question

Trying to make a really simple layout for a settings page using ConstraintLayout. Simple text views to the left one below the other and a switch to the right to the center. The layout I have works fine for newer devices, but as soon I switch to a Nexus 4 or older, the switch goes below/disappears from the view.

Here is my layout code,

<android.support.constraint.ConstraintLayout
    android:id="@+id/locationLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="parent">

<TextView
    android:id="@+id/locationTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="@string/location_title"
    android:textStyle="bold"
    app:layout_constraintEnd_toStartOf="@id/guidelineLocationLayout"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:textSize="16sp"/>

<TextView
    android:id="@+id/locationDescription"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/location_description"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/locationTitle"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="@id/locationTitle"
    app:layout_constraintRight_toLeftOf="@id/guidelineLocationLayout"
    android:textSize="12sp"
    />

<Switch
    android:id="@+id/locationPermissionSwitch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@id/guidelineLocationLayout"
    app:layout_constraintTop_toBottomOf="parent"
    app:layout_constraintBottom_toTopOf="parent"/>

<View
    android:id="@+id/viewLocationLayout"
    android:layout_width="fill_parent"
    android:layout_height="1dip"
    android:background="#d6d6d6"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/locationDescription"/>

<android.support.constraint.Guideline
    android:id="@+id/guidelineLocationLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_end="48dp" />


</android.support.constraint.ConstraintLayout>

And here are how the constraints look like for the Pixel 2XL,

Here is how they look on a smaller device,

I have used 0dp width for the long description and defined left and right constraints, anything else I could do?

Answer 1

You can use barriers instead of guidelines because a Barrier references multiple widgets as input, and creates a virtual guideline based on the most extreme widget on the specified side.

According to the Documentation

Similar to a guideline, a barrier is an invisible line that you can constrain views to. Except a barrier does not define its own position; instead, the barrier position moves based on the position of views contained within it. This is useful when you want to constrain a view to the a set of views rather than to one specific view.

Hope this helps you. I've used barrier instead of guideline.

<?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:id="@+id/locationLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="parent">

    <TextView
        android:id="@+id/locationTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Save location to the song"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/locationDescription"
        android:layout_width="261dp"
        android:layout_height="32dp"
        android:text="Your location is only requested when a new song is identified. Location details are never sent to the server"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/locationTitle" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="locationDescription,locationTitle" />

    <Switch
        android:id="@+id/locationPermissionSwitch"
        android:layout_width="41dp"
        android:layout_height="26dp"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/viewLocationLayout"
        android:layout_width="fill_parent"
        android:layout_height="1dip"
        android:background="#d6d6d6"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/locationDescription" />

</android.support.constraint.ConstraintLayout>

Answer 2

You need to change the constraints of the switch like this

<Switch
    android:id="@+id/locationPermissionSwitch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@id/guidelineLocationLayout"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>

You are constraining the bottom of the switch to the top of the parent and top of the switch to the bottom of the parent. You have to change it to layout_constraintTop_toTopOf and layout_constraintBottom_toBottomOf