How to add Dash-line Border in Android View

In my android tips section, I usually write about common issues beginners android developers face and the solution to it. Today we are going to learn how to add a dash-line in UI View components in your applications.

Sometimes, using a dash-line in your app that bring that its beauty and make your app appealing.

In other to achieve this, we are going to create a new android project. We will also add drawable resources for both straight and rectangle dash-lines.

If you are interested you how to create a circular image or photo in android, I will suggest you read my post on How to make circular ImageView and rounded corner ImageView in android.

Before we dive into more details, it is important for us to understand what we are planning to achieve. Below is the screen-shot of the application we will be creating.

android dash line

Lets start to soil our hands in code. Start up your IDE. For this tutorial, I am using the following tools and environment, feel free to use what works for you.

Windows 7

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 23

To create a new android application project, follow the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidDashLine

Package: com.inducesmile.androiddashline

Select Blank Activity

Name your activity : MainActivity

Keep other default selections

Continue to click on next button until Finish button is active, then click on Finish Button.

Strings.xml

We are going to update our project strings.xml file located in the values folder inside the res folder. Open the file and add the code below to it.

<string name="app_name">Android Dash Line</string>
<resources>
    <string name="app_name">Android Dash Line</string>
</resources>

Colors.xml

Open the colors.xml file in the same location as the strings.xml file and add the code below to the file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorBlack">#000000</color>
</resources>

Drawable Resource

We are going to create our dash-line as a drawable resources then we will add the drawable resource files as a background properties of the attached View or GroupView widget.

Rectangle Dash Line

Go to your android project res folder, double click to open the folder. Right click on the drawable folder inside the res folder and choose create a resource file, name the file rectangle_dash_line.xml.

Open the file and add the below code inside the file.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
    android:dashGap="3dp"
    android:dashWidth="2dp"
    android:width="1dp"
    android:color="@color/colorBlack" />
</shape>

Straight Dash Line

We will repeat the same process of create a new file but now we will name this new file straight_dash_line.xml. Copy and paste the code below to this file.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:dashGap="3dp"
        android:dashWidth="2dp"
        android:width="1dp"
        android:color="@color/colorBlack" />
</shape>

Activity_main.xml

We will proceed to the main layout file. There we will add one LinearLayout and a View widgets. The LinearLayout will be used to test the rectangular dash line while the View widget will be used to test the straight dash line.

Open the file – activity_main.xml and paste the below code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.inducesmile.androiddashline.MainActivity">
    <LinearLayout
        android:id="@+id/linear_layout"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:orientation="vertical"
        android:background="@drawable/rectangle_dash_lines">
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@drawable/straight_dash_line"
        android:layout_below="@+id/linear_layout"
        android:layout_marginTop="32dp"
        android:layerType="software" />
</RelativeLayout>

You can see that the layout file is very simple. Also notice that we have set the background properties of the Views to the dash line drawable resources we created above.

This brings us to the end of this tutorial. I hope that you have learn something. Run your app to see for yourself.

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email address so that you will be among the first to receive my new android blog post once it is published.

Please if you love this tutorial, kindly download my android app – Complete Mathematics – in Google Play Store and let me know what you think about it.

OTHER INTERESTING POSTS:

Add a Comment