Vertical Line Separator with TextView

on
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 🠇


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".



Update (September 2026): vertical dividers with Material 3 and Jetpack Compose

An empty View with a fixed width works, but it does not follow your theme and it is easy to get wrong when the row height changes. Both the Material library and Compose now ship a proper divider.

1. MaterialDivider in XML

Add com.google.android.material:material and use MaterialDivider. For a vertical line, give it a fixed width and a height of 0dp constrained between the top and bottom of its parent (ConstraintLayout), so it always matches the height of the text next to it:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/left"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Followers"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/divider"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.divider.MaterialDivider
        android:id="@+id/divider"
        android:layout_width="1dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="@id/left"
        app:layout_constraintBottom_toBottomOf="@id/left"
        app:layout_constraintStart_toEndOf="@id/left"
        app:layout_constraintEnd_toStartOf="@id/right" />

    <TextView
        android:id="@+id/right"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Following"
        app:layout_constraintStart_toEndOf="@id/divider"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can change the color with app:dividerColor and, for a horizontal line, the thickness with app:dividerThickness.

2. Jetpack Compose

Compose has VerticalDivider (Material 3). Put it inside a Row and give the row IntrinsicSize.Min as its height, otherwise the divider would try to fill the whole screen height:

@Composable
fun StatsRow() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Min),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "Followers",
            modifier = Modifier.weight(1f),
            textAlign = TextAlign.Center
        )
        VerticalDivider(
            thickness = 1.dp,
            color = MaterialTheme.colorScheme.outlineVariant
        )
        Text(
            text = "Following",
            modifier = Modifier.weight(1f),
            textAlign = TextAlign.Center
        )
    }
}

Use HorizontalDivider for a horizontal line. On older Material 3 versions the composable is called Divider.

Which one should you use?

  • XML/View app: MaterialDivider inside a ConstraintLayout (or a horizontal LinearLayout with weights).
  • Compose app: VerticalDivider inside a Row with IntrinsicSize.Min.
  • Old code: the empty View with a background color still works fine for simple cases.

Comments

Post a Comment