Search code examples
androidandroid-layoutandroid-constraintlayout

Android studio: Barrier does not take into account line breaks


I am trying to put barrier under buttons, switches and list. The barrier is set right, but only if screen is wide enough to fit switch text in one line (attached images).

One line:

One line

Two lines:

Two lines

Three lines:

Three lines

I have tried changing barriers parameters from wrap_content to two others. Also tried 0dp, per example found on internet.

As you can see in attached images, the barrier does not move with bigger switch text.

Here's the code. It's a cut version, just to show the problem. It is put into scroll view because smaller screens do not fit everything.

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

<ScrollView 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:id = "@+id/big_scroll"
    tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ListView
        android:id="@+id/list"
        android:layout_width="0dp"
        android:layout_height="450dp"
        android:drawSelectorOnTop="false"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent=".17" />

    <Switch
        android:id="@+id/switch1"
        android:layout_width="0dp"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent=".40"
        android:layout_height="wrap_content"
        android:text="FIRST OPTION"
        android:textSize="14sp"
        app:layout_constraintStart_toEndOf="@+id/list"
        app:layout_constraintTop_toTopOf="@+id/list" />

    <Switch
        android:id="@+id/switch2"
        android:layout_width="0dp"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent=".40"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:checked="true"
        android:text="SECOND OPTION. BALALALALA. YADADADADA."
        android:textSize="14sp"
        app:layout_constraintStart_toEndOf="@+id/list"
        app:layout_constraintTop_toBottomOf="@+id/switch1"/>



    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="OKAY"
        app:layout_constraintStart_toEndOf="@+id/list"
        app:layout_constraintTop_toBottomOf="@+id/switch2"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent=".40" />


    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/labelBarrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="button3" />


</androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>

Although list (on the left) has working barrier.


Solution

  • The answer is to use guidelines instead of percentage. That way line breaks dont have influence on the rest of design.

    <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.2" />
    

    Such guideline will be at percentage of 20%. Then I use few more until I can wrap my content the way I want.