Follow treslines by email clicking Here!

Thursday, July 10, 2014

How to implement a dynamic dotted line around a view android

Hi there!

Today i'm gonna share a cool think with you. A way to implement a dotted line that grows dynamically around a view. I tryed to resolve it using a nine patch (.9.png) but without success. The end result will look like this:


Resource definition

Define a resource called dotted_pattern.xml in the folder drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape>
            <stroke
                android:dashGap="6dp"
                android:dashWidth="6dp"
                android:width="3dp"
                android:color="#ec9a87" />
        </shape>
    </item>
</layer-list>


Layout definition (your view)

Create in your layout a view like this. Set the defined resource like shown bellow

<FrameLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_gravity="center"
 android:background="@drawable/dotted_pattern"
android:layerType="hardware" /> 


That's all. hope you like it.

No comments:

Post a Comment