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.
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>
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]