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