CODEWITHSUNDEEP
android-widgetglance-appwidgetglance
hiepkhach109
hiepkhach109

Reputation: 1

How to Draw 2 Circles and a Line in the Middle?

I am creating a Glance Widget. I want to draw a circle and a line in the middle but I have a problem.

This is image my problem

This is my code

@Composable
    fun TestCL() {
        Row(
            modifier = GlanceModifier.fillMaxSize(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            val size = 80.dp
            Image(modifier = GlanceModifier.size(size) , provider = ImageProvider(R.drawable.widget_glance_bg_off_white), contentDescription = "", contentScale = ContentScale.Fit )
            Image(modifier = GlanceModifier.size(size*2,30.dp) , provider = ImageProvider(R.drawable.space_line), contentDescription = "", contentScale = ContentScale.Fit )
            Image(modifier = GlanceModifier.size(size) , provider = ImageProvider(R.drawable.widget_glance_bg_off_white), contentDescription = "", contentScale = ContentScale.Fit )
        }
    }

R.drawable.widget_glance_bg_off_white

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:shape="oval">
    <solid android:color="#26fcfcff" />
    <size
        android:width="80dp"
        android:height="80dp" />
</shape>

R.drawable.space_line

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<solid android:color="#26fcfcff" />
</shape>

I want the color to fill the wrong location in the image.This is image my problem Please help me. Thank you so much

Upvotes: 0

Views: 31

Answers (1)

NS40
NS40

Reputation: 112

What I understood from your question is - you do no want the space between the circle and the line. Here is a simple solution I would like to suggest.

Overlap the line and circle from the center. Check the image below. The blue one is the line.

enter image description here

I know you wanted a solution in glance, but I hope you can convert the below compose code in glance easily.

Box(modifier = Modifier, contentAlignment = Alignment.Center) {
    val size = 80.dp
    Row(
        modifier = Modifier.width(size*3),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Image(
            modifier = Modifier.size(size),
            painter = painterResource(R.drawable.baseline_circle_24),
            contentDescription = ""
        )

        Image(
            modifier = Modifier.size(size),
            painter = painterResource(R.drawable.baseline_circle_24),
            contentDescription = ""
        )
    }
    Image(
        modifier = Modifier.size(size * (2), 30.dp),
        painter = painterResource(R.drawable.baseline_rectangle_24),
        contentDescription = "",
        contentScale = ContentScale.FillBounds
    )
}

Upvotes: 0

Related Questions