Search code examples
androidxmluser-interfacelayoutandroid-relativelayout

Android: How can I achieve layout like this?

enter image description here

I am able to do this using below code. But problem is "Shipping Address" and "1" TextView must be centered to vertical line(below "1" there should be center of "Shipping Address" TextView).

neccesary_part_of_layout.xml

       <RelativeLayout
            android:id="@+id/fcm_rl_scroll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp">


            <ProgressBar
                android:id="@+id/mProgressBar"
                style="@android:style/Widget.DeviceDefault.Light.ProgressBar.Horizontal"
                android:layout_width="wrap_content"
                android:layout_height="5dp"
                android:layout_centerInParent="true"
                android:layout_weight="1"
                android:focusable="false"
                android:nestedScrollingEnabled="false"
                android:progress="100"
                android:progressDrawable="@drawable/custom_progress_bar"
                android:secondaryProgress="100"
                android:visibility="visible" />

            <TextView
                android:id="@+id/fcm_tv_step1"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignBaseline="@+id/mProgressBar"
                android:layout_alignLeft="@+id/mProgressBar"
                android:layout_alignStart="@+id/mProgressBar"
                android:layout_centerVertical="true"
                android:background="@drawable/bg_round_filled_white"
                android:gravity="center"
                android:text="1"
                android:textColor="@color/colorPrimary"
                android:textSize="@dimen/sp16" />


            <TextView
                android:id="@+id/fcm_tv_step1text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/fcm_tv_step1"
                android:layout_marginTop="@dimen/dp40"
                android:text="Shopping Address"
                android:textColor="@color/white"
                android:textSize="@dimen/sp16" />


            <TextView
                android:id="@+id/fcm_tv_step22"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignBaseline="@+id/mProgressBar"
                android:layout_alignLeft="@+id/mProgressBar"
                android:layout_alignStart="@+id/mProgressBar"
                android:layout_centerVertical="true"
                android:layout_marginLeft="150dp"
                android:layout_toRightOf="@+id/fcm_tv_step1"
                android:background="@drawable/bg_round_filled_white"
                android:gravity="center"
                android:text="2"
                android:textColor="@color/colorPrimary"
                android:textSize="@dimen/sp16" />


            <TextView
                android:id="@+id/fcm_tv_step22text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/fcm_tv_step22"
                android:layout_marginLeft="150dp"
                android:layout_marginTop="@dimen/dp40"
                android:layout_toRightOf="@+id/fcm_tv_step1text"
                android:text="Address"
                android:textColor="@color/white"
                android:textSize="@dimen/sp16" />
        </RelativeLayout>

This is what I have achieved using above code:

enter image description here

Problem in Detail:

I have white ProgressBar(you can take any view temporary) on which I want TextView with step numbers. and below each number I want step title both aligned centered to each-other.

How can I achieve this? I tried to put it in layout but that breaks dependency with progress bar.

Solution

  • I have finally solved this using ConstraintLayout. Thanks to 'Google' for providing such a good layout which allows better customisation.

    <HorizontalScrollView
    android:id="@+id/checkout_hsv_scrollview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_constraintLeft_creator="1"
    tools:layout_constraintRight_creator="1">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="@dimen/checkout_steps_view_height"
        android:layout_marginBottom="@dimen/checkout_steps_view_margin_bottom"
        android:layout_marginTop="@dimen/checkout_steps_view_margin_top"
        android:minWidth="@dimen/checkout_steps_view_minwidth">

        <ProgressBar
            android:id="@+id/progressBar2"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="@dimen/checkout_progressbar_width"
            android:layout_height="@dimen/checkout_progressbar_height"
            android:layout_marginLeft="@dimen/checkout_steps_side_margin"
            android:layout_marginRight="@dimen/checkout_steps_side_margin"
            android:progressDrawable="@drawable/custom_progress_bar"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/fcm_tv_step1"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"

            android:text="@string/str_checkout_step1"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintRight_toLeftOf="@+id/progressBar2"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step1text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name1"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step1"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step1"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step1" />

        <TextView
            android:id="@+id/fcm_tv_step2"
            android:layout_width="@dimen/checkout_step_big_node_size"
            android:layout_height="@dimen/checkout_step_big_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step2"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step1"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step2text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name2"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_big_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step2"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step2"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step2" />

        <TextView
            android:id="@+id/fcm_tv_step3"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step3"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step2"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step3text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name3"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step3"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step3"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step3" />

        <TextView
            android:id="@+id/fcm_tv_step4"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step4"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step3"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step4text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name4"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step4"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step4"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step4" />

        <TextView
            android:id="@+id/fcm_tv_step5"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step5"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step4"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step5text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name5"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step5"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step5"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step5" />
    </android.support.constraint.ConstraintLayout>
</HorizontalScrollView>

    Contact me if anyone wants help design this type of layout. I think I am expert now to use ConstaintLayout.