Vertical Line Separator with TextView

Welcome to "Android Super Nerds". Thanks for coming back to my site, I really appreciate that and if you guys are new to my Site please do check my previous articles as well.

So back to the topic title which states Vertical Line Separator with TextView".

Vertical Line Separator with TextView

Linear layout is the parent component which is used for most the Android UI Design. 

As discussed in our previous blog, depending on its orientation we choose, for its child UI component to be aligned either vertical or horizontal.

For example, if orientation under Linear layout is set as horizontal, any child inside the linear layout component will be displayed as horizontally to each other.

Drawing a vertical line

For drawing a vertical separator line between different views, we need to make some changes in layout XML files. 

Notes: View separator is achievable by the layout itself.

The complete code is given below 🠇

	<?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:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="horizontal"
	android:gravity="center"
	tools:context=".MainActivity">
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:padding="20dp"
	android:gravity="center"
	android:text="Hello" />
	<View
	android:layout_width="5dp"
	android:layout_height="match_parent"
	android:background="@android:color/holo_green_light"/>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:padding="20dp"
	android:gravity="center"
	android:text="World!" />
	</LinearLayout>

view raw Vertical Line Separator between TextView hosted with ❤ by GitHub

Code Understanding

To get the vertical line between two equal width text view, we need to add the empty view in between the text view.

A view is empty, so we need to set it layout_width with some static value and layout_height with matching parent height .i.e match_parent.

The parent view is the linear layout, so its orientation is set as horizontal and gravity is set as the center. Once the orientation and gravity are updated we can see that all the child is aligned center horizontally to each other. 

So the final outcome looks like this 🠇

That's All Guys.

If you guys have any questions about any of the UI components, Please do Leave a comment below..!!

&&

If you like this article don’t forget to share it.

Till then "Happy Coding".