Search code examples
android-studiocolorsbordershapes

Shape with an alternated bi-color border in android studio


I would like to create a shape to use as a background for an element, since the app has red and orange as main colors I would like to make a cool border, however I have only managed to find how to put a single color and don't really know how to do a sort of a design. I would like to do something like this (I made this quickly in paint just a demonstration of my idea):

Shape with cool alternated border


Solution

  • Ok I worked on it a bit and came to a solution that isn't exactly what I was trying to do but it will be good enough I guess. This is the code to put in the xml file in the drawable folder:

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape
                android:shape="rectangle"
                android:padding="10dp">
                <solid android:color="#FFFFFF"/>
                <corners
                    android:bottomRightRadius="20dp"
                    android:bottomLeftRadius="20dp"
                    android:topLeftRadius="20dp"
                    android:topRightRadius="20dp"/>
    
                <stroke
                    android:width="10dp"
                    android:color="@color/colorAccent"/>
            </shape>
        </item>
        <item>
            <shape
                android:shape="rectangle"
                android:padding="10dp">
                <corners
                    android:bottomRightRadius="20dp"
                    android:bottomLeftRadius="20dp"
                    android:topLeftRadius="20dp"
                    android:topRightRadius="20dp"/>
    
                <stroke
                    android:width="8dp"
                    android:color="@color/colorPrimary"
                    android:dashGap="10dp"
                    android:dashWidth="8dp" />
            </shape>
        </item>
    </layer-list>
    

    this code will produce this result:

    shape with bicolor border

    Hope this helps anybody