Guideline does not shift based on change in Views dimensions inside barrier in ConstraintLayout

Question

I have my root layout as ConstraintLayout in my activity. I have added one Guideline which is Percentage based and it is about 35 % from top. The Guideline divides the Layout in 2 section (35% top & 65% bottom). In top 25% section I have 2 TextViews. The textview text is dynamically changing. One Barrier is added in Layout which has my Guideline added in it. Top constraint of Image inside the below Section 65% is given to bottom of Barrier & bottom constraint of textview inside the 25% section is given to top of Barrier. When my Text inside above textview is increased, it is not shifting the Guideline & violating Barrier working. How it can be done ?

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/clIntroMainContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/intro_screen_background">


    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/mybarrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="imageView,textView4,textView3,guideline2"
        tools:layout_editor_absoluteY="731dp" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="fitXY"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@drawable/intro_background_cross" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.50"
        app:srcCompat="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dp"
        android:gravity="center"
        android:text="@string/auto_expense_title"
        android:textColor="@color/white"
        android:textSize="@dimen/ExtraLargeText"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/imageView2" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dp"
        android:gravity="center"
        android:text="@string/auto_expense_info"
        android:textColor="@color/white"
        android:textSize="@dimen/MedText"
        app:layout_constraintBottom_toTopOf="@+id/mybarrier"
        app:layout_constraintEnd_toEndOf="@+id/textView3"
        app:layout_constraintStart_toStartOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <ImageView
        android:id="@+id/iv2"
        android:layout_width="wrap_content"
        android:layout_height="330dp"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toTopOf="@+id/mybarrier"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@drawable/phone_blue_black_final_intro" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.35" />
</androidx.constraintlayout.widget.ConstraintLayout>

As I understand the question you want to change top part based on "textView4" text size changed or above part should be 25% and should increase if text is increased??? — Shweta Chauhan, Jul 30 '21 at 08:29

Shweta Chauhan · Answer 1 · 2021-07-30T09:29:23.560

As I understand the question you want to change top part based on "textView4"'s text size changed, If text is small then above part will not stay 25% in my answer. Let me know if your requirement is different, I will update it.

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/clIntroMainContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_grey">


    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/mybarrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="imageView,textView4,textView3,guideline2"
        tools:layout_editor_absoluteY="731dp" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="fitXY"
        android:visibility="visible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@color/browser_actions_text_color" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.50"
        app:srcCompat="@drawable/ic_pen" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dp"
        android:gravity="center"
        android:text="auto_expense_title"
        android:textColor="@color/white"
        android:textSize="@dimen/_12ssp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/imageView2" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dp"
        android:gravity="center"
        android:text="auto_expense_info  auto_expense_info auto_expense_info auto_expense_info"
        android:textColor="@color/white"
        android:textSize="@dimen/_15ssp"
        app:layout_constraintBottom_toTopOf="@+id/mybarrier"
        app:layout_constraintEnd_toEndOf="@+id/textView3"
        app:layout_constraintStart_toStartOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <ImageView
        android:id="@+id/iv2"
        android:layout_width="wrap_content"
        android:layout_height="330dp"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mybarrier"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@drawable/empty_star" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.35" />
</androidx.constraintlayout.widget.ConstraintLayout>

The primary thing is the guideline percent should be maintained. But if the text from above part is increased it will go below ImageView. So it will create confusion for below ImageView to respect constraint for guideline or barrier — Satyam Gondhale, Jul 30 '21 at 09:10
@SatyamGondhale: Check updated answer, might it's as per your requirement — Shweta Chauhan, Jul 30 '21 at 09:29

Guideline does not shift based on change in Views dimensions inside barrier in ConstraintLayout

1 Answers1