Android RelativeLayout add border

Android RelativeLayout add border

In this article we are going to learn how to add border in relative layout. We are trying to add multiple borders in our Relative Layout

  • All Border (Top, Right, Bottom, Left) – 2 Methods
  • Top Border only – 2 Methods
  • Right Border only – 2 Methods
  • Bottom – 2 Methods
  • Left – 2 Methods
  • Multiple Borders

Before start check below video demo video.

I hope you enjoyed the demo video. Now let’s start with the actual code. You can also download the source code. Source code download is available in the bottom of this article.

Below is the code for activity_main.xml

Code

<pre class="brush:xml;">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
    xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
    xmlns:tools=&quot;http://schemas.android.com/tools&quot;
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;match_parent&quot;
    tools:context=&quot;com.vlemonn.blog.demo.relativelayoutborders.MainActivity&quot;
    &gt;
    &lt;!--
        Relative Layout Tutorial: https://go.vlemonn.com/poBjHNejdg
    --&gt;
    
    &lt;!--
        TextView Tutorial: https://go.vlemonn.com/KbYFfDHqsl
        It is sample text view to add some contents in our Relative Layout
    --&gt;
    &lt;TextView
        android:id=&quot;@+id/editText&quot;
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;wrap_content&quot;
        android:layout_margin=&quot;15dp&quot;
        android:gravity=&quot;center&quot;
        android:text=&quot;Hello vLemonn&quot;
        /&gt;
&lt;/RelativeLayout&gt;</pre>

<p>&nbsp;</p>

Let’s run our code with this. Below is the out put for the same.

RelativeLayout add border

Now we are going to add a border for our relative layout for this we are going to use a drawable file. We are going to add relative_layout_background.xml and then we are going to use it in our activity_main.xml using android:background=”@drawable/relative_layout_background”.

Let’s create a relative_layout_background.xml file and add it in our activity_main.xml file using background property. Once done Run it again.

Below is the code for relative_layout_background.xml file

Code

<pre class="brush:xml;">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;!--
Drawable Advance Tutorial: https://go.vlemonn.com/3mDKtdo4hw
Layer List Advance Tutorial: https://go.vlemonn.com/2DMz9xo2uQ
We are using layer list for instead of shape because we are going to learn about
All Border, Top Border Only, Bottom Border Only, Right Border Only, Left Border Only
--&gt;
&lt;layer-list xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
    &lt;item&gt;
        &lt;!--
        For creating a border we drawing a rectangle
        Shape Tutorial: https://go.vlemonn.com/1YirjYYIwg
        --&gt;
        &lt;shape android:shape=&quot;rectangle&quot;&gt;
            &lt;!--
            For our rectangle we are adding a red color stroke
            which is going to display a red border for our layout
            Stroke Tutorial: https://go.vlemonn.com/imJtv3MOCn
            --&gt;
            &lt;stroke android:color=&quot;#FF0000&quot; android:width=&quot;10dp&quot;/&gt;
        &lt;/shape&gt;
    &lt;/item&gt;
&lt;/layer-list&gt;</pre>

<p>&nbsp;</p>

Now we know how to add a border let’s control it now we are going to add another shap on top of existing shap. This new shape is going to with same size except it is 5dp small from bottom. It will cause a illusion to display a bottom border. Below is the updated code for relative_layout_background.xml file and the out put for the same.

Code

<pre>
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;!--
Drawable Advance Tutorial: https://go.vlemonn.com/3mDKtdo4hw
Layer List Advance Tutorial: https://go.vlemonn.com/2DMz9xo2uQ
We are using layer list for instead of shape because we are going to learn about
All Border, Top Border Only, Bottom Border Only, Right Border Only, Left Border Only
--&gt;
&lt;layer-list xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
    &lt;item&gt;
        &lt;!--
        For creating a border we drawing a rectangle
        Shape Tutorial: https://go.vlemonn.com/1YirjYYIwg
        --&gt;
        &lt;shape android:shape=&quot;rectangle&quot;&gt;
            &lt;!--
            For our rectangle we are adding a red color stroke
            which is going to display a red border for our layout
            Stroke Tutorial: https://go.vlemonn.com/imJtv3MOCn
            --&gt;
            &lt;stroke android:color=&quot;#FF0000&quot; android:width=&quot;10dp&quot;/&gt;
        &lt;/shape&gt;
    &lt;/item&gt;
    &lt;item android:bottom=&quot;5dp&quot;&gt;
        &lt;!--
        A new rectangle shape on top of first one with a bottom space of 5dp which helps us to
        create a bottom border only. Actually it is on top of first one with size from bottom
        is less then 5dp which is causing a illusion for bottom border.
        Solid Tutorial: https://go.vlemonn.com/y0r40GHRk5
        --&gt;
        &lt;shape android:shape=&quot;rectangle&quot;&gt;
            &lt;solid android:color=&quot;#FFFFFF&quot;&gt;&lt;/solid&gt;
        &lt;/shape&gt;
    &lt;/item&gt;
&lt;/layer-list&gt;</pre>

In this article we showed you how to add a bottom border. All the other examples are available in the source code. Feel free to download the source code and have a look or use modify the above code to simulate top, bottom, left and right border. Below is all scenario.

0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share