Android: How can I achieve layout like this?
Question
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 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.
2 answers
solution1
2 ACCPTED 2017-03-09 11:35:50
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 .
solution2
1 2017-03-08 12:32:32
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I achieve this layout in Android?
How can I achieve this tabbed layout in Android?
how can achieve layout like this
How do I achieve a layout like this in my Android app?
How can I achieve this layout?
Android how can I achieve a arrow based layout?
How can i achieve something like a vertical ViewPager in Android?
How to achieve Android UI like this image layout? About android:clipChildren
How do I achieve this layout in android?
How do I achieve this kind of layout in Android?
Related Tags