unflagged.destination
unflagged.destination

Reputation: 1566

Give custom border to TextView

How can I give the custom border to TextView where:
1) left and right border is 2 dp and with the different color with little opacity
2) top and bottom border is 1 dp
3) The text of TextView should be visible. right now What I have created is not showing the text of textview

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <stroke
            android:width="1dp"
            android:color="#FF000000" />
        <solid android:color="#FFDDDDDD" />

    </shape>
</item>

<item
    android:bottom="1dp"
    android:left="2dp"
    android:right="15dp"
    android:top="1dp">
    <shape android:shape="rectangle">
        <stroke
            android:width="1dp"
            android:color="#FFDDDDDD" />
        <solid android:color="#00000000" />
    </shape>
</item>

Upvotes: 0

Views: 420

Answers (3)

Nir Patel
Nir Patel

Reputation: 367

Check my code I have integrated the same.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    //for top and bottom borders
    <item
        android:left="-2dp"
        android:right="-2dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="#fff70b" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    //for left and right border
    <item
        android:bottom="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="2dp"
                android:color="#e90c0c" />
            <solid android:color="@android:color/transparent" />
        </shape>

    </item>
</layer-list>

Please note that opacity should be defined when creating your color only. While writing your color in colors.xml, you can change opacity like shown in below screenshot. Either change the 255 to your chosen opacity or use the bottom bar.

enter image description here

Also, you need to define the solid tag for each border and apply transparent color in order to make your TextView visible. After applying the code in drawable, you will be able to see some preview like this :

enter image description here

Good Luck..!!

Upvotes: 0

Gundu Bandgar
Gundu Bandgar

Reputation: 2603

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#76d273" />
        </shape>
    </item>
    <item android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#76d63f" />

        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:top="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#d63f60" />

        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
        </shape>
    </item>
</layer-list>

add this code in your drawable(test_drawable) file and set to textview

android:background="@drawable/test_drawable"

Upvotes: 0

Zahoor Saleem
Zahoor Saleem

Reputation: 634

use alpha color according to your recruitment

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#080808" />

        </shape>
    </item>
    <item
        android:bottom="2dp"
        >
        <shape android:shape="rectangle">
            <solid android:color="#76d63f" />

        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:top="2dp"
        >
        <shape android:shape="rectangle">
            <solid android:color="#d63f60" />

        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:top="2dp"
        android:left="2dp"
        android:right="2dp"
        >
        <shape android:shape="rectangle">
            <solid android:color="#3fa9d6" />

        </shape>
    </item>
</layer-list>

Upvotes: 1

Related Questions