Add two colors in a border (android)?

Question

im looking for a way, How to add two colors inside a border just like what this person has done on this image CSS 2-color border but im more intrested to know how you achieve this in android.

The goal is to have something that looks like this https://github.com/lorensr/segmented-control for my app .But with two different colors inside the border that switches between each other when the button is focused.

Have a nice day :)

score 2 · Accepted Answer · answered Oct 16 '18 at 20:58

You can use layer-list and one layer with a gradient background and second layout with solid color with all side padding, like below

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle">
            <gradient
                android:angle="180"
                android:endColor="#00f"
                android:startColor="#f00" />
        </shape>
    </item>
    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#0f0" />

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

In this example, I gave 10dp(in

android:bottom="10dp"
            android:left="10dp"
            android:right="10dp"
            android:top="10dp"

) just to see the more clear, you can change value as you want.

score 0 · Answer 2 · answered Oct 16 '18 at 20:34

0

You can use a custom xml bacground file like this and use a custom bacground

answered Oct 16 '18 at 20:34

Ahmed selim üzüm

11
1
5

score 0 · Answer 3 · answered Sep 14 '20 at 19:42

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="@dimen/_20sdp" />
            <gradient
                android:angle="180"
                android:endColor="@color/yellow_color"
                android:startColor="@color/color_red" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape android:shape="rectangle">
            <corners android:radius="@dimen/_20sdp" />
            <solid android:color="@color/white_color" />
        </shape>
    </item>

</layer-list>```


**Two color border with round corner**

Add two colors in a border (android)?

3 Answers3