Horizontally center TextView inside ImageView and there is another view next to Imageview

Question

Hi I want to build UI as below

I want to center imageview above textview at the same time there is another view next to imagview dash line I am not able to do this.

Currently I am using RelativeLayout. Any idea how this can be done?

Following is XML

  <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true">

        <ImageView
            android:id="@+id/ivnumberfill"
            android:layout_width="16dp"
            android:layout_height="16dp"
            app:srcCompat="@drawable/ic_otp_fill" />

        <ImageView
            android:id="@+id/ivfirstdiv"
            android:layout_width="76dp"
            android:layout_height="2dp"
            android:layout_alignBottom="@id/ivnumberfill"
            android:layout_alignTop="@+id/ivnumberfill"
            android:layout_toRightOf="@id/ivnumberfill"
            android:src="@drawable/stroke_divider" />

        <ImageView
            android:id="@+id/ivotp"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_toRightOf="@+id/ivfirstdiv"
            app:srcCompat="@drawable/otp_process_circle" />

        <ImageView
            android:id="@+id/ivseconddiv"
            android:layout_width="76dp"
            android:layout_height="2dp"
            android:layout_alignBottom="@id/ivotp"
            android:layout_alignTop="@+id/ivotp"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/ivotp"
            android:background="@drawable/stroke_divider" />

        <ImageView
            android:id="@+id/ivprofile"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_toRightOf="@+id/ivseconddiv"
            app:srcCompat="@drawable/otp_process_circle" />

        <TextView
            android:id="@+id/tvnumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ivnumberfill"
            android:alig="@id/ivnumberfill"
            android:text="Mobile Number"
            android:textColor="?colorAccent"
            android:textSize="11sp" />
    </RelativeLayout>

Answer 1

I would recommend using ConstraintLayout, you should really learn it and use it instead of Relative Layout, it's more flexible and less computation consuming. Here is my layout, is it also more flexible - you can just move guideline and everything moves with it.

<?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="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_margin="24dp">

        <ImageView
            android:id="@+id/ivnumberfill"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_marginEnd="18dp"
            android:layout_marginTop="4dp"
            app:layout_constraintBottom_toBottomOf="@id/guideline2"
            app:layout_constraintEnd_toStartOf="@+id/ivotp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/guideline2"
            app:srcCompat="@drawable/plane" />

        <ImageView
            android:id="@+id/ivotp"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_marginEnd="18dp"
            android:layout_marginTop="4dp"
            app:layout_constraintBottom_toBottomOf="@id/guideline2"
            app:layout_constraintEnd_toStartOf="@+id/ivprofile"
            app:layout_constraintStart_toEndOf="@id/ivnumberfill"
            app:layout_constraintTop_toTopOf="@id/guideline2"
            app:srcCompat="@drawable/plane" />

        <ImageView
            android:id="@+id/ivprofile"
            android:layout_width="16dp"
            android:layout_height="16dp"
            app:layout_constraintBottom_toBottomOf="@id/guideline2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/ivotp"
            app:layout_constraintTop_toTopOf="@id/guideline2"
            app:srcCompat="@drawable/plane" />


        <ImageView
            android:id="@+id/ivfirstdiv"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintWidth_default="wrap"
            android:src="@drawable/line"
            app:layout_constraintBottom_toBottomOf="@id/guideline2"
            app:layout_constraintTop_toTopOf="@id/guideline2"
            app:layout_constraintEnd_toStartOf="@+id/ivotp"
            app:layout_constraintStart_toEndOf="@+id/ivnumberfill"
            />

        <ImageView
            android:id="@+id/ivseconddiv"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintWidth_default="wrap"
            android:src="@drawable/line"
            app:layout_constraintBottom_toBottomOf="@id/guideline2"
            app:layout_constraintEnd_toStartOf="@+id/ivprofile"
            app:layout_constraintStart_toEndOf="@id/ivotp"
            app:layout_constraintTop_toTopOf="@id/guideline2" />


        <TextView
            android:id="@+id/tvnumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="Mobile Number"
            android:textColor="?colorAccent"
            android:textSize="11sp"
            app:layout_constraintEnd_toEndOf="@id/ivnumberfill"
            app:layout_constraintStart_toStartOf="@id/ivnumberfill"
            app:layout_constraintTop_toBottomOf="@id/ivnumberfill" />

        <TextView
            android:id="@+id/tvotp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="OTP"
            android:textColor="?colorAccent"
            android:textSize="11sp"
            app:layout_constraintEnd_toEndOf="@id/ivotp"
            app:layout_constraintStart_toStartOf="@id/ivotp"
            app:layout_constraintTop_toBottomOf="@id/ivotp" />

        <TextView
            android:id="@+id/tvprofile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="Profile"
            android:textColor="?colorAccent"
            android:textSize="11sp"
            app:layout_constraintEnd_toEndOf="@id/ivprofile"
            app:layout_constraintStart_toStartOf="@id/ivprofile"
            app:layout_constraintTop_toBottomOf="@id/ivprofile" />

        <android.support.constraint.Guideline
            android:id="@+id/guideline2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.2" />

    </android.support.constraint.ConstraintLayout>