Search code examples
androidxmlandroid-studiodrawable

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>

Solution

  • 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