How to draw Line & Rectangle shapes for EditText in drawable XML file? - ANDROID - Helper

Friday, October 19, 2018

How to draw Line & Rectangle shapes for EditText in drawable XML file?

To draw a LINE

1. Create an XML file in the drawable folder

2. Create layer-list tag and add item tag as inner tag

3. Give top, left & right in negative values (-2dp), so that the 3 sides goes out of the boundary

4. Use stroke tag to draw the outline of the circle with your custom color

line_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
     <item
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape>
            <solid android:color="#FFFFFF" />
            <stroke
                android:width="1dp"
                android:color="#FF0000" />
        </shape>
    </item>
</layer-list>

To draw a DOTTED LINE


* Use dashGap & dashWidth attribute of stroke tag to set it as dotted line with your custom color.
line_dotted_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
     <item
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape>
            <solid android:color="#FFFFFF" />
            <stroke
                android:width="1dp"
                android:dashWidth="1dp"
                android:dashGap="1dp"
                android:color="#FF0000" />
        </shape>
    </item>
</layer-list>

To draw a RECTANGLE

1. Create an XML file in the drawable folder

2. Use shape tag and set shape attribute as rectangle

3. Use solid tag to fill the circle with your custom color

4. Use stroke tag to draw the outline of the circle with your custom color

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

To draw a ROUNDED RECTANGLE

* Use corners tag to set it as rounded rectangle with your radius

rectangle_roundcorner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF" />
    <stroke android:width="1dp" android:color="#FF0000" />
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
</shape>

To draw a DOTTED RECTANGLE

* Use dashGap & dashWidth attribute of stroke tag to set it as dotted rectangle with your custom color.

rectangle_dotted.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF" />
    <stroke
        android:width="1dp"
        android:color="#FF0000"
        android:dashGap="1dp"
        android:dashWidth="1dp" />
</shape>

To draw a DOTTED & ROUNDED RECTANGLE

* Use corners tag to set it as rounded rectangle with your radius

* Use dashGap & dashWidth attribute of stroke tag to set it as dotted rectangle with your custom color.

rectangle_dotted_roundcorner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF" />
    <stroke
        android:width="1dp"
        android:color="#FF0000"
        android:dashGap="1dp"
        android:dashWidth="1dp" />
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
</shape>

Youtube Video



No comments:

Post a Comment