Callum Osborne
Callum Osborne

Reputation: 41

is an android shape with a gradient border and transparent middle possible?

I am looking to make the middle of the button transparent with the gradient border, I am not sure how this can be done using the layer-list. I know the same question already exists but the answer was not sufficient as they were just adding another gradient inside. The middle has to be transparent so that the gradient background will be seen.

enter image description here

This is the code for my current button which has my background for the center.

<layer-list>
    <item >
        <shape android:shape="rectangle" android:innerRadius="8dp">
            <corners android:radius="@dimen/secondary_button_roundness" />
            <gradient
                android:startX="0"
                android:startY="0"
                android:endX="20"
                android:endY="0"
                android:endColor="@color/primaryGradientStart"
                android:startColor="@color/primaryGradientEnd"
                android:angle="180" >
            </gradient>
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape android:shape="rectangle" android:innerRadius="8dp">
            <corners android:radius="@dimen/secondary_button_roundness" />
            <solid android:color="@color/Background" />
        </shape>
    </item>
</layer-list>

Upvotes: 2

Views: 1288

Answers (1)

chandresh sidpara
chandresh sidpara

Reputation: 111

you can achieve this using jetpack compose then you can use interoperability API

@Composable
fun SetRing() {
    Box(
        modifier = Modifier
            .background(Color.Transparent)
            .border(
                2.dp,
                Brush.linearGradient(
                    colors = listOf(
                        Color.Yellow,
                        Color.Blue
                    )
                ),
                shape = RoundedCornerShape(5.dp)
            )
            .padding(6.dp)
    ) {
        Text(text = "Hiphop")
    }
}

interoperability API, in XML file

<androidx.compose.ui.platform.ComposeView
    android:id="@+id/compose_interest"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

[output]

enter image description here

Upvotes: 3

Related Questions