2

I'm going to achieve this goal using ConstraintLayout: enter image description here

The length of each TextView is not fixed and may change and the TextViews should be in the middle of their columns. I guessed that barriers and guidelines could help me if I chain barrier_left and barrier_right using app:layout_constraintHorizontal_chainStyle="spread_inside", so I checked it out:

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_left"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        app:barrierDirection="left"
        app:constraint_referenced_ids="tv_left_1,tv_left_2,tv_left_3"
        app:layout_constraintEnd_toStartOf="@id/barrier_right"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_left_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 1 AA"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_left_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 2 AAA"
        app:layout_constraintEnd_toEndOf="@id/tv_left_1"
        app:layout_constraintStart_toStartOf="@id/tv_left_1"
        app:layout_constraintTop_toBottomOf="@+id/tv_left_1" />

    <TextView
        android:id="@+id/tv_left_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 3 AAAA"
        app:layout_constraintEnd_toEndOf="@+id/tv_left_2"
        app:layout_constraintStart_toStartOf="@+id/tv_left_2"
        app:layout_constraintTop_toBottomOf="@+id/tv_left_2" />

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

    <TextView
        android:id="@+id/tv_middle_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 1 AA"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_middle_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 2 AAAAAA"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@id/tv_middle_1" />

    <TextView
        android:id="@+id/tv_middle_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 3 AAAA"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/tv_middle_2" />

    <TextView
        android:id="@+id/tv_right_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 1 AAAAAAAAA"
        app:layout_constraintEnd_toEndOf="@id/barrier_right"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_right_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 2 AAAA"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_right_1" />

    <TextView
        android:id="@+id/tv_right_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 3 A"
        app:layout_constraintEnd_toEndOf="@+id/tv_right_2"
        app:layout_constraintStart_toStartOf="@+id/tv_right_2"
        app:layout_constraintTop_toBottomOf="@+id/tv_right_2" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_right"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        app:barrierDirection="right"
        app:constraint_referenced_ids="tv_right_1,tv_right_2,tv_right_3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/barrier_left" />

</androidx.constraintlayout.widget.ConstraintLayout>

but it didn't work at all! It is the result:

enter image description here

And this is my Design Surface:

enter image description here

I need to keep all Views on the screen (none of them should go out) and each View should place in the center of its column. I need to give some space from the Middle column to the left or right column if left or right ones are longer and need space. How can I arrange the Views like the one shown in the first image?

Alireza Noorali
  • 3,129
  • 2
  • 33
  • 80

2 Answers2

0

I checked your code and maybe my version will be good for you. try like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.constraint.Barrier
        android:id="@+id/barrier_left"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        app:barrierDirection="right"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_left_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 1 AA"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="@+id/tv_left_2"
        app:layout_constraintEnd_toEndOf="@+id/tv_left_2"/>

    <TextView
        android:id="@+id/tv_left_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 2 AAA"
        app:layout_constraintEnd_toEndOf="@+id/tv_left_3"
        app:layout_constraintStart_toStartOf="@+id/tv_left_3"
        app:layout_constraintTop_toBottomOf="@+id/tv_left_1" />

    <TextView
        android:id="@+id/tv_left_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 3 AAAA"
        app:layout_constraintStart_toStartOf="@+id/barrier_left"
        app:layout_constraintTop_toBottomOf="@id/tv_left_2"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <TextView
        android:id="@+id/tv_middle_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 1 AA"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_middle_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 2 AAAAAA"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@id/tv_middle_1" />

    <TextView
        android:id="@+id/tv_middle_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 3 AAAA"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/tv_middle_2" />

    <TextView
        android:id="@+id/tv_right_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 1 AAAAAAAAA"
        app:layout_constraintEnd_toEndOf="@id/barrier_right"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_right_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 2 AAAA"
        app:layout_constraintStart_toStartOf="@+id/tv_right_1"
        app:layout_constraintEnd_toEndOf="@+id/tv_right_1"
        app:layout_constraintTop_toBottomOf="@+id/tv_right_1" />

    <TextView
        android:id="@+id/tv_right_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 3 A"
        app:layout_constraintEnd_toEndOf="@+id/tv_right_2"
        app:layout_constraintStart_toStartOf="@+id/tv_right_2"
        app:layout_constraintTop_toBottomOf="@+id/tv_right_2" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier_right"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        app:barrierDirection="left"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>
Vadim Eksler
  • 865
  • 9
  • 24
0

Didn't get your requirement clearly. But you can try this one

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_left"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        app:barrierDirection="right"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline_left"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.33" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline_right"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.66" />

    <TextView
        android:id="@+id/tv_left_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 1 AAAAAAAA"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier_left"
        app:layout_constraintEnd_toStartOf="@+id/guideline_left"/>

    <TextView
        android:id="@+id/tv_left_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 2 AAA"
        app:layout_constraintStart_toStartOf="@+id/barrier_left"
        app:layout_constraintEnd_toStartOf="@+id/guideline_left"
        app:layout_constraintTop_toBottomOf="@+id/tv_left_1" />

    <TextView
        android:id="@+id/tv_left_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 3 AAAA"
        app:layout_constraintStart_toStartOf="@+id/barrier_left"
        app:layout_constraintEnd_toStartOf="@+id/guideline_left"
        app:layout_constraintTop_toBottomOf="@id/tv_left_2"/>

    <TextView
        android:id="@+id/tv_middle_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 1 AA"
        app:layout_constraintEnd_toStartOf="@+id/guideline_right"
        app:layout_constraintStart_toEndOf="@+id/guideline_left"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_middle_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 2 AAAAAA"
        app:layout_constraintEnd_toStartOf="@+id/guideline_right"
        app:layout_constraintStart_toEndOf="@+id/guideline_left"
        app:layout_constraintTop_toBottomOf="@id/tv_middle_1" />

    <TextView
        android:id="@+id/tv_middle_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 3 AAAA"
        app:layout_constraintEnd_toStartOf="@+id/guideline_right"
        app:layout_constraintStart_toEndOf="@+id/guideline_left"
        app:layout_constraintTop_toBottomOf="@+id/tv_middle_2" />

    <TextView
        android:id="@+id/tv_right_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 1 AAAAAAAAA"
        app:layout_constraintEnd_toEndOf="@id/barrier_right"
        app:layout_constraintStart_toEndOf="@+id/guideline_right"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_right_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 2 AAAA"
        app:layout_constraintEnd_toEndOf="@id/barrier_right"
        app:layout_constraintStart_toEndOf="@+id/guideline_right"
        app:layout_constraintTop_toBottomOf="@+id/tv_right_1" />

    <TextView
        android:id="@+id/tv_right_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 3 A"
        app:layout_constraintEnd_toEndOf="@id/barrier_right"
        app:layout_constraintStart_toEndOf="@+id/guideline_right"
        app:layout_constraintTop_toBottomOf="@+id/tv_right_2" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_right"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        app:barrierDirection="left"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
Md. Asaduzzaman
  • 14,963
  • 2
  • 34
  • 46
  • I need to keep all Views in the screen (none of them should go out) and each View should in the center of its column. your answer is like a LinearLayout that has 3 other layouts init with the same weight. I need to give some space from the Middle column to the left column if left ones are longer and need space. now it doesn't happen in your answer. – Alireza Noorali Dec 02 '19 at 13:48