How to draw view from center android layout
Question
I need to design following screen but I am not sure how to draw a vertical line that will be center of the imageview present inside my cardview
my current xml code is
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/account_opening_grey_bg"
android:baselineAligned="false"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<com.widgets.TextViewRobotoRegular
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:layout_weight="0.6"
android:gravity="center"
android:text="@string/lbl_acc_header" />
<android.support.v7.widget.CardView
android:id="@+id/cardStep1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="25dp"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/white"
card_view:cardCornerRadius="@dimen/dimen_2"
card_view:cardElevation="@dimen/dimen_2"
card_view:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@color/step_one_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="@string/lbl_step_one"
android:textColor="@color/step_one_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepOneDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/lblStepOne"
android:layout_alignStart="@+id/lblStepOne"
android:layout_below="@+id/lblStepOne"
android:layout_marginTop="5dp"
android:text="@string/lbl_step_one_details"
android:textColor="@color/txt_black" />
<ImageView
android:id="@+id/imgStep1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:src="@drawable/menu_ipo" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/cardStep2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="25dp"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/white"
card_view:cardCornerRadius="@dimen/dimen_2"
card_view:cardElevation="@dimen/dimen_2"
card_view:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@color/step_two_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="@string/lbl_step_two"
android:textColor="@color/step_two_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepTwoDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/lblStepTwo"
android:layout_alignStart="@+id/lblStepTwo"
android:layout_below="@+id/lblStepTwo"
android:layout_marginTop="5dp"
android:text="@string/lbl_step_two_details"
android:textColor="@color/txt_black" />
<ImageView
android:id="@+id/imgStep2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:src="@drawable/menu_ipo" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/cardStep3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="25dp"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/white"
card_view:cardCornerRadius="@dimen/dimen_2"
card_view:cardElevation="@dimen/dimen_2"
card_view:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@color/step_three_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepThree"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="@string/lbl_step_three"
android:textColor="@color/step_three_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepThreeDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/lblStepThree"
android:layout_alignStart="@+id/lblStepThree"
android:layout_below="@+id/lblStepThree"
android:layout_marginTop="5dp"
android:text="@string/lbl_step_three_details"
android:textColor="@color/txt_black" />
<ImageView
android:id="@+id/imgStep3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:src="@drawable/menu_ipo" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/cardStep4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginBottom="25dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/white"
card_view:cardCornerRadius="@dimen/dimen_2"
card_view:cardElevation="@dimen/dimen_2"
card_view:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@color/step_four_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepFour"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="@string/lbl_step_four"
android:textColor="@color/step_four_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepFourDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/lblStepFour"
android:layout_alignStart="@+id/lblStepFour"
android:layout_below="@+id/lblStepFour"
android:layout_marginTop="5dp"
android:text="@string/lbl_step_four_details"
android:textColor="@color/txt_black" />
<ImageView
android:id="@+id/imgStep4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:src="@drawable/menu_ipo" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/cardStep5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginBottom="25dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/white"
card_view:cardCornerRadius="@dimen/dimen_2"
card_view:cardElevation="@dimen/dimen_2"
card_view:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@color/step_five_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepFive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="@string/lbl_step_five"
android:textColor="@color/step_five_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepFiveDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/lblStepFive"
android:layout_alignStart="@+id/lblStepFive"
android:layout_below="@+id/lblStepFive"
android:layout_marginTop="5dp"
android:text="@string/lbl_step_five_details"
android:textColor="@color/txt_black" />
<ImageView
android:id="@+id/imgStep5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:src="@drawable/menu_ipo" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<com.widgets.RobotoRegularButton
android:id="@+id/buttonPayIn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/selector_fp_next_button"
android:text="@string/btn_get_started"
android:textAllCaps="true"
android:textAlignment="center"
android:textColor="@color/color_primary_text_color_fivep"
android:textSize="16sp" />
</LinearLayout>
I had used LinearLayout as my parent with vertical orientation now I need to draw vertical lines between 5 cardview that I have used. Please any suggestion will be much helpful
3 answers
solution1
1 ACCPTED 2016-10-06 06:45:21
The simple aproach to solve your problem (it's not a perfect solution, but in your case, I think it will be enough):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/account_opening_grey_bg">
<View
android:layout_widht="1dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_marginRight="56dp"
android:background="#FF785C"/>
<!-- You will need to vary layout_marginRight parameter -->
<!-- to pick up correct position for asked grey stripe -->
<!-- I assumed this value as sum of 10(padding of linearlayout), -->
<!-- 15(margin of image in cardview), 24(half size of image) -->
<!-- and 7(margin of cardView), but you can change it, as I said-->
<LinearLayout ...>
<!-- paste here your layout but remove background for root LinearLayout-->
</FrameLayout>
solution2
0 2016-10-06 06:36:02
All you have to do is:
Change your Layout root to a
RelativeLayoutMake sure all
CardViews fall nicely under each other with the required spacing between them (margin) using thelayout_belowpropertyDeclare the "line views" inside the root
RelativeLayoutbut AFTER theCardViews in XML so that when you lay them out they appear on top of theCardViewsUse
layout_belowandlayout_abovereferencing theImageViews on top and under the line. For example...
<View
android:layout_width="2dp"
android:layout_below="@id\id_of_the_image_view_at_the_top"
android:layout_above="@id\id_of_the_image_view_below" />
Then make sure you set you margins so you can centre them horizontally
solution3
0 2016-10-06 07:08:18
Here.. Use This Layout..
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/account_opening_grey_bg"
android:baselineAligned="false"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<com.widgets.TextViewRobotoRegular
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:layout_weight="0.6"
android:gravity="center"
android:text="@string/lbl_acc_header" />
<android.support.v7.widget.CardView
android:id="@+id/cardStep1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/white"
card_view:cardCornerRadius="@dimen/dimen_2"
card_view:cardElevation="@dimen/dimen_2"
card_view:cardUseCompatPadding="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@color/step_one_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="@string/lbl_step_one"
android:textColor="@color/step_one_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepOneDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/lblStepOne"
android:layout_alignStart="@+id/lblStepOne"
android:layout_below="@+id/lblStepOne"
android:layout_marginTop="5dp"
android:text="@string/lbl_step_one_details"
android:textColor="@color/txt_black" />
<ImageView
android:id="@+id/imgStep1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:src="@drawable/menu_ipo" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<View
android:layout_width="1dp"
android:layout_height="25dp"
android:layout_gravity="right"
android:layout_marginRight="40dp"
android:background="#666" />
<android.support.v7.widget.CardView
android:id="@+id/cardStep2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/white"
card_view:cardCornerRadius="@dimen/dimen_2"
card_view:cardElevation="@dimen/dimen_2"
card_view:cardUseCompatPadding="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@color/step_two_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="@string/lbl_step_two"
android:textColor="@color/step_two_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepTwoDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/lblStepTwo"
android:layout_alignStart="@+id/lblStepTwo"
android:layout_below="@+id/lblStepTwo"
android:layout_marginTop="5dp"
android:text="@string/lbl_step_two_details"
android:textColor="@color/txt_black" />
<ImageView
android:id="@+id/imgStep2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:src="@drawable/menu_ipo" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<View
android:layout_width="1dp"
android:layout_height="25dp"
android:layout_gravity="right"
android:layout_marginRight="40dp"
android:background="#666" />
<android.support.v7.widget.CardView
android:id="@+id/cardStep3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/white"
card_view:cardCornerRadius="@dimen/dimen_2"
card_view:cardElevation="@dimen/dimen_2"
card_view:cardUseCompatPadding="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@color/step_three_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepThree"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="@string/lbl_step_three"
android:textColor="@color/step_three_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepThreeDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/lblStepThree"
android:layout_alignStart="@+id/lblStepThree"
android:layout_below="@+id/lblStepThree"
android:layout_marginTop="5dp"
android:text="@string/lbl_step_three_details"
android:textColor="@color/txt_black" />
<ImageView
android:id="@+id/imgStep3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:src="@drawable/menu_ipo" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<View
android:layout_width="1dp"
android:layout_height="25dp"
android:layout_gravity="right"
android:layout_marginRight="40dp"
android:background="#666" />
<android.support.v7.widget.CardView
android:id="@+id/cardStep4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/white"
card_view:cardCornerRadius="@dimen/dimen_2"
card_view:cardElevation="@dimen/dimen_2"
card_view:cardUseCompatPadding="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@color/step_four_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepFour"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="@string/lbl_step_four"
android:textColor="@color/step_four_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepFourDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/lblStepFour"
android:layout_alignStart="@+id/lblStepFour"
android:layout_below="@+id/lblStepFour"
android:layout_marginTop="5dp"
android:text="@string/lbl_step_four_details"
android:textColor="@color/txt_black" />
<ImageView
android:id="@+id/imgStep4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:src="@drawable/menu_ipo" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<View
android:layout_width="1dp"
android:layout_height="25dp"
android:layout_gravity="right"
android:layout_marginRight="40dp"
android:background="#666" />
<android.support.v7.widget.CardView
android:id="@+id/cardStep5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="25dp"
android:layout_weight="1"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/white"
card_view:cardCornerRadius="@dimen/dimen_2"
card_view:cardElevation="@dimen/dimen_2"
card_view:cardUseCompatPadding="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@color/step_five_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepFive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="@string/lbl_step_five"
android:textColor="@color/step_five_view" />
<com.widgets.TextViewRobotoLight
android:id="@+id/lblStepFiveDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/lblStepFive"
android:layout_alignStart="@+id/lblStepFive"
android:layout_below="@+id/lblStepFive"
android:layout_marginTop="5dp"
android:text="@string/lbl_step_five_details"
android:textColor="@color/txt_black" />
<ImageView
android:id="@+id/imgStep5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:src="@drawable/menu_ipo" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<com.widgets.RobotoRegularButton
android:id="@+id/buttonPayIn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/selector_fp_next_button"
android:text="@string/btn_get_started"
android:textAlignment="center"
android:textAllCaps="true"
android:textColor="@color/color_primary_text_color_fivep"
android:textSize="16sp" />
</LinearLayout>
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
Android - how to draw in a multiple view layout
How to center a View inside of an Android Layout?
How to draw layout from XML in another View's draw() method?
android use a View from a XML layout to draw a canvas
How to layout a view that count margin from it's center instead of top-left on Android?
How to set android xml layout to custom view and be able to draw on it
Android studio how to center image view in constraint layout
how to place a view bottom and center of the page android layout?
Android - Center View in Other View inside Layout
How to draw a circle in center in android
Related Tags