How to apply divider or view in Constraint layout

Question

I want to apply a divider at some places in Constraint layout but when I do it by simple view, the whole layout get shifted to the top and everything gets merged. I want to use only constraints layout for the whole design.

<TextView
    android:id="@+id/textView16"
    android:layout_width="0dp"
    android:layout_height="18dp"
    android:text="TextView"
    app:layout_constraintLeft_toRightOf="@+id/imageView11"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    android:layout_marginTop="13dp"
    app:layout_constraintTop_toBottomOf="@+id/textView14"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginBottom="8dp"
    app:layout_constraintVertical_bias="0.0"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp" />

<TextView
    android:id="@+id/textView20"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toBottomOf="@+id/textView16"
    app:layout_constraintLeft_toRightOf="@+id/imageView11"
    android:layout_marginLeft="8dp"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintVertical_bias="0.0"
    android:layout_marginRight="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp" />

<View
    android:layout_width="0dp"
    android:layout_height="2dp"
    android:background="@android:color/background_dark"
    tools:layout_editor_absoluteY="98dp"
    android:id="@+id/view"
    tools:layout_editor_absoluteX="0dp" />

<TextView
    android:id="@+id/textView21"
    android:layout_width="wrap_content"
    android:layout_height="17dp"
    android:layout_marginBottom="8dp"
    android:layout_marginRight="8dp"
    android:text="Nivedita Parmar"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.025"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/view"
    app:layout_constraintVertical_bias="0.035"
    android:layout_marginEnd="8dp" />

Please give some idea regarding this. Thanks in advance..

Answer 1

Check out Guideline. I've found it to be useful when working with Constraint Views.

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

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

    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

See my answer below. I am putting view between text view. May help you.

<?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="match_parent"
       tools:context="com.example.shweta.firebasedemo.Main2Activity">

    <TextView
        android:id="@+id/txt_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView1"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="@+id/imageView2"
        app:layout_constraintBottom_toTopOf="@+id/txt_2"
        />

    <TextView
        android:id="@+id/txt_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView2"
        android:layout_marginTop="8dp"
        app:layout_constraintRight_toRightOf="@+id/txt_1"
        app:layout_constraintLeft_toLeftOf="@+id/txt_1"
        app:layout_constraintTop_toBottomOf="@+id/txt_1"
        app:layout_constraintBottom_toTopOf="@+id/txt_3"
        />

    <TextView
        android:id="@+id/txt_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView3"
        android:layout_marginTop="8dp"
        app:layout_constraintRight_toRightOf="@+id/txt_2"
        app:layout_constraintLeft_toLeftOf="@+id/txt_2"
        app:layout_constraintTop_toBottomOf="@+id/txt_2"
        app:layout_constraintBottom_toBottomOf="@+id/imageView2"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        android:id="@+id/imageView2"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="16dp" />

    <View
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="@android:color/background_dark"
        android:id="@+id/view"
        android:layout_marginTop="25dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        />

    <TextView
        android:id="@+id/textView21"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Nivedita Parmar"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/imageView"
        app:layout_constraintHorizontal_bias="0.502" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:id="@+id/imageView"
        android:layout_marginRight="16dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/view"
        android:layout_marginTop="20dp" />

    <TextView
        android:id="@+id/txt_home"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="home"
        android:layout_marginTop="8dp"
        app:layout_constraintRight_toRightOf="@+id/textView21"
        app:layout_constraintTop_toBottomOf="@+id/textView21"
        app:layout_constraintLeft_toLeftOf="@+id/textView21"
        app:layout_constraintBottom_toTopOf="@+id/txt_height"/>

    <TextView
        android:id="@+id/txt_height"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="home"
        android:layout_marginTop="8dp"
        app:layout_constraintRight_toRightOf="@+id/txt_home"
        app:layout_constraintTop_toBottomOf="@+id/txt_home"
        app:layout_constraintLeft_toLeftOf="@+id/txt_home"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"/>

</android.support.constraint.ConstraintLayout>