Android: How can I achieve layout like this?
Solution 1
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
.
Solution 2
Check this beautiful library for step view https://github.com/baoyachi/StepView?utm_source=android-arsenal.com&utm_medium=referral&utm_campaign=3774
Sample
<com.baoyachi.stepview.HorizontalStepView
android:id="@+id/step_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
HorizontalStepView setpview5 = (HorizontalStepView) mView.findViewById(R.id.step_view5);
List<StepBean> stepsBeanList = new ArrayList<>();
StepBean stepBean0 = new StepBean("接单",1);
StepBean stepBean1 = new StepBean("打包",1);
StepBean stepBean2 = new StepBean("出发",1);
StepBean stepBean3 = new StepBean("送单",0);
StepBean stepBean4 = new StepBean("完成",-1);
stepsBeanList.add(stepBean0);
stepsBeanList.add(stepBean1);
stepsBeanList.add(stepBean2);
stepsBeanList.add(stepBean3);
stepsBeanList.add(stepBean4);
setpview5
.setStepViewTexts(stepsBeanList)//总步骤
.setTextSize(12)//set textSize
.setStepsViewIndicatorCompletedLineColor(ContextCompat.getColor(getActivity(), android.R.color.white))//设置StepsViewIndicator完成线的颜色
.setStepsViewIndicatorUnCompletedLineColor(ContextCompat.getColor(getActivity(), R.color.uncompleted_text_color))//设置StepsViewIndicator未完成线的颜色
.setStepViewComplectedTextColor(ContextCompat.getColor(getActivity(), android.R.color.white))//设置StepsView text完成线的颜色
.setStepViewUnComplectedTextColor(ContextCompat.getColor(getActivity(), R.color.uncompleted_text_color))//设置StepsView text未完成线的颜色
.setStepsViewIndicatorCompleteIcon(ContextCompat.getDrawable(getActivity(), R.drawable.complted))//设置StepsViewIndicator CompleteIcon
.setStepsViewIndicatorDefaultIcon(ContextCompat.getDrawable(getActivity(), R.drawable.default_icon))//设置StepsViewIndicator DefaultIcon
.setStepsViewIndicatorAttentionIcon(ContextCompat.getDrawable(getActivity(), R.drawable.attention));//设置StepsViewIndicator AttentionIcon
Er. Kaushik Kajavadara
Android application developing as part of my passion to code and solve complex logical problems. "We do not get skills by birth we have to 'develop' it with experience, even walking!!! And I am happy that I am Developer" - Kaushik Kajavadara "FEEL FREE TO CONTACT ME on Facebook,Because God creates urge to make us friends TO GROW TOGETHER, we just follow"
Updated on June 04, 2022Comments
-
Er. Kaushik Kajavadara almost 2 years
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:
Problem in Detail:
I have white
ProgressBar
(you can take any view temporary) on which I wantTextView
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.