How to draw Horizontal and Vertical lines in an Android App using XML

This article demonstrates how to draw a horizontal and a vertical line in an Android app.

Although we have countless XML tags to meet almost all of our needs, unfortunately, we don’t have any tag such as <line> tag to draw the line. However, <view> tag can be used in XML as a workaround.

NOTE: The “view” tag is different than the View class in Android.

How to draw a Vertical line?
Consider the following XML code to draw a Vertical line in Android:

filter_none

edit
close

play_arrow

link
brightness_4
code

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
      
      
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="Vertical Line"
        android:background="#512DA8"
        android:textSize="25sp"
        android:gravity="center_horizontal"/>
      
    <View
        android:layout_width="2dp"
        android:layout_height="560dp"
        android:background="#E91E63"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="175dp"/>
</LinearLayout>

chevron_right


Here, we use the “View” tag to create a rectangle with a very small width such that it becomes a vertical line. In the above code, a red vertical line of height ‘560dp’ and width ‘2dp’ is drawn which is at a left margin of ‘175dp’ from the left side of the screen and at a top margin of ’20dp’ from the TextView that lies above it. The thickness of this line can be increased or decreased by increasing and decreasing the layout_width of the “View” tag respectively.



Note: To run this code, we can copy and paste this code into the XML Visualizer provided by Udacity. Make sure to erase all the previously written code in the visualizer(if any).

Output:

Drawing a Horizontal line:
A horizontal line can be drawn in a very similar way as a vertical line. Following is the XML code for a horizontal line:

filter_none

edit
close

play_arrow

link
brightness_4
code

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
      
      
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="Horizontal Line"
        android:background="#4CAF50"
        android:textSize="25sp"
        android:gravity="center_horizontal"/>
      
    <View
        android:layout_width="320dp"
        android:layout_height="2dp"
        android:background="#E91E63"
        android:layout_marginTop="270dp"
        android:layout_marginLeft="20dp"/>
</LinearLayout>

chevron_right


Here, a horizontal line was drawn by making a rectangle of very small height and the desired width such that it becomes a horizontal line. In the above code, a red horizontal line of height “2dp” and width “320dp” is drawn which is at a left margin of “20dp” from the left side of the screen and at a top margin of “270dp” from the TextView that lies above it. Here, the thickness of the line can be increased or decreased by increasing and decreasing the value of layout_height in contrast to layout_width for vertical lines.

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.