Is there a tutorial for custom radio buttons? I got a kind reply here but I have not managed to understand how it is supposed to work. 😥

What do you think about the easiest way to show a circle? Currently I have 3 options, but only 2 are working… I would prefer to use Icon and CircleShape. But that seems impossible

// CircleShape does not work
    Image(
        asset = CircleShape,
        modifier = Modifier
            .preferredSize(16.dp)
            .background(Color.Red)
    )
    
    // Show an Circle
    Box(shape = CircleShape,
        backgroundColor = Color.Red,
        modifier = Modifier.preferredSize(16.dp)
    ) { }



    //  Material has no regular circle
    Image(
        asset = Icons.Default.AddCircle,
        modifier = Modifier
            .preferredSize(16.dp)
            .background(Color.Red)
    )

Is there anything like a GridView yet?

Can you enable compose without buildFeatures?

New to compose, but I expected something like this to work but it does not. My activity has a field myTodoList mutableListOf<String> and it has items added to it by another source (right now I have a post delayed handler that waits for 5 seconds, and then adds ten items) and I expect the items to update this Screen composable, but nothing shows. I'm assuming it's because the state can't live in the activity? That actually doesn't really make sense I guess. Just want someone to look this over. Thank you!

@Composable
private fun MyActivityScreen(items: List<String>) {
    val myThings = remember { mutableStateOf(items) }
    Column() {
        myThings.value.forEach {
            Text(text = it)
        }
    }
}

Quick question: how can I see the preview of a Composable into the inline documentation? Like @romainguy is showing here:

How to route from one screen to another ？

I am filling the content of a fragment with Compose. I don't know why there is a huge margin around the Compose area. I haven't used any padding for the scaffold. Here's my fragment code:

class HomeFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? = LinearLayout(context).apply{
        addView(ComposeView(context).apply {
            setContent {
                BodyContent(this.findFragment())
            }
        })
    }

}

@Composable
fun BodyContent(fragment: Fragment) {


    val data = listOf("One", "Two", "Three", "Four", "Five")

    Scaffold(
        modifier = Modifier.background(Color.Black).fillMaxSize()
            .background(Color.Blue),
        topBar = {
            MyTopAppBar()
        },
        bottomBar = {
            MyBottomBar()
        },

        floatingActionButton = { MyFab(fragment) },
        floatingActionButtonPosition = FabPosition.End,
        snackbarHost = {  },
        drawerContent = { MyDrawer() }

    ){



        LazyColumnFor(items = data, modifier = Modifier
            .background(Color.Green),
            itemContent = {item->
                Text(item, modifier = Modifier.padding(8.dp))
            }
        )




    }
}

@Composable
fun MyDrawer() {
    val items = arrayOf("My Account", "Monthly Cost", "Savings Report")
    Box(paddingStart = 32.dp) {
        Column(modifier = Modifier.align(Alignment.CenterVertically)) {
            for (item in items) {
                Text(item, modifier = Modifier.padding(8.dp))
            }
        }
    }
}


@Composable
fun MyTopAppBar() {
    TopAppBar(modifier = Modifier.padding(8.dp, 16.dp, 8.dp, 8.dp)) {
        if(gCost != null){
            Text("Cost is $gCost", modifier = Modifier.border(1.dp, Color.Red))
        }
        Icon(Icons.Default.Add, modifier = Modifier.clip(RoundedCornerShape(8.dp)))
        Icon(Icons.Default.AccountBox, modifier = Modifier.clip(RoundedCornerShape(8.dp)))
        Icon(Icons.Default.ExitToApp, modifier = Modifier.clip(RoundedCornerShape(8.dp)))
        Icon(Icons.Default.ArrowBack, modifier = Modifier.clip(RoundedCornerShape(8.dp)))
    }
}




@Composable
fun MyBottomBar() {
    BottomAppBar() {
        Row(){
            Icon(Icons.Default.Person, modifier = Modifier.clip(RoundedCornerShape(8.dp)).weight(0.25f))
            Icon(Icons.Default.Call, modifier = Modifier.clip(RoundedCornerShape(8.dp)).weight(0.25f))
            Icon(Icons.Default.Send, modifier = Modifier.clip(RoundedCornerShape(8.dp)).weight(0.25f))
            Icon(Icons.Default.Refresh, modifier = Modifier.clip(RoundedCornerShape(8.dp)).weight(0.25f))
        }
    }
}

@Composable
fun MyFab(fragment: Fragment) {
    FloatingActionButton(
        icon = { Icon(Icons.Default.Add) },

        onClick = {
            findNavController(fragment).navigate(HomeFragmentDirections.actionHomeFragmentToAddCostActivity())

            launchActivity = true
        },
        modifier = Modifier.padding(8.dp)
    )
}

One general question. Is Scaffold better to be used for each screen or just the home screen?

I thinks it’s a silly question, but I want to define a set of colors based on theme like I did with

colors.xml

and

colors-night.xml

(besides the primaryColor, secondaryColor and so on) without using the xml resources.

<!-- colors.xml -->
<color name="customers_button_background">#123456</color>
<color name="customers_button_content">#FFFFFF</color>

<!-- colors-night.xml -->
<color name="customers_button_background">#7890AB</color>
<color name="customers_button_content">#000000</color>

How can I achieve this in Compose? Thanks!

Hi ! How can I disable the drag on the

BottomDrawerLayout

? I want to use it to show information about marker on the map. I want to disable the

expandable

state. And where can I found the open source code of Compose ?

I like how @Zach Klippenstein (he/him) [MOD] described it https://kotlinlang.slack.com/archives/CJLTWPH7S/p1594385570100600?thread_ts=1594338382.091800&amp;cid=CJLTWPH7S

One thing we saw in developer preview Compose code was people would treat screen composables as equivalent to Fragments and do DI there. However, without a compose-friendly API it caused unexpected side-effects on recomposition. It seems a reasonable pattern, and it's definitely one I expect to see lots of apps do. We reached out to the Koin maintainers to share what we learned and they put together a nice solution 🎉

whats the best or recommended architecture for jetpact compose

I'm reading this react article and I think its pretty sweet and will show some problems that we encounter in compose soon enough. https://epicreact.dev/one-react-mistake-thats-slowing-you-down/ I'm new to react, but I know more react than compose. In the article above is "context" in react similar to Ambients in compose world?

Do bad things happen every time we don't remember state? is

remember{}

always recommended when dealing with some state?

I am finishing this Codelab but the tag function for Modifier is missing, what is the replacement?

Hi, I have a dialog composable that I want to integrate in this code:

fun checkNotificationPolicyAccess(
    notificationManager: NotificationManager,
    context: Context
): Boolean {
    if (notificationManager.isNotificationPolicyAccessGranted) {
        Toast.makeText(context, "Notification policy access granted.", Toast.LENGTH_SHORT).show()
        return true
    } else {
// add dialog here
    }
    return false
}

How can I do that? The composable looks like this:

@Composable
fun NotificationPolicyPermissionDialog() {

    val openDialog = remember { mutableStateOf(true) }

    Dialog(onDismissRequest = { openDialog.value = false }) {
        Box(Modifier.preferredSize(100.dp, 100.dp), backgroundColor = Color.White)
    }
}

How a composable lambda would validate or accept only one composable or a list of composable. In flutter we can decide to accept a single widget or list of widget for children or child parameter

Will motion layout work with compose

Which maven dependency does

WebComponent

belong to?

What's the difference between Box and Surface components? The Surface looks like a Material Theme specific component and that's it?

Is

State

considered

Stable

because any changes will cause a recomposition? (If not then why?)

Hello, is there any modifier to apply rotation? My use case:

Stack {
   Image(Modifier.alignment(Alignment.Center)) // want to center & rotate 45 degrees
}

Do we have a

composable manager

like

resource manager

in Android Studio to preview all of them?

Tried playing with Canvas API and managed to build a Chrome Trex Dino game in Jetpack Compose. Code: https://github.com/wajahatkarim3/DinoCompose

Modifier.fillMaxHeight()

is not working, can some one explain me what I am doing wrong?

Row(Modifier.padding(horizontal = 32.dp, vertical = 16.dp).background(Color.Red)) {
    Column(Modifier.fillMaxHeight().weight(1f).background(Color.Cyan)) {
        Row {
            Image(
                asset = imageResource(id = Drawables.mappin),
                Modifier.gravity(Alignment.CenterVertically)
            )
            Column(Modifier.padding(start = 16.dp)) {
                Text(
                    text = "Address", style = TextStyle(
                        color = Color.Black.copy(alpha = 0.7f),
                        fontSize = 20.sp
                    )
                )
                Text(
                    text = "House # 2, Road # 5, Green Road Dhanmondi, Dhaka, Bangladesh",
                    style = TextStyle(color = Color.Gray)
                )
            }
        }
        Row {
            Image(
                asset = imageResource(id = Drawables.clock),
                Modifier.gravity(Alignment.CenterVertically)
            )
            Column(Modifier.padding(start = 16.dp)) {
                Text(
                    text = "Daily Practice", style = TextStyle(
                        color = Color.Black.copy(alpha = 0.7f),
                        fontSize = 20.sp
                    )
                )
                Text(
                    text = "Monday - Friday Open till 7 Pm",
                    style = TextStyle(color = Color.Gray)
                )
            }
        }
    }
    Image(
        asset = imageResource(id = Drawables.map),
        modifier = Modifier.fillMaxHeight().weight(1f)
    )
}

Not sure if doing something wrong? Building a complex UI with maps, scrolling, scale, images, etc ...

@Preview @Composable

85% of the time does not render anything ... emulator and device work perfect! Anything to be done to make

@Preview

work better?

Can anyone share me good and simple app with Compose and Kotlin Flow in it?

Is there a known limitation on composable local functions? This is the

RadioButtonSample()

from the SDK:

@Composable
fun RadioGroupSample() {
    val radioOptions = listOf("Calls", "Missed", "Friends")
    val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
    Column {
        radioOptions.forEach { text ->
            Row(Modifier
                .fillMaxWidth()
                .preferredHeight(56.dp)
                .selectable(
                    selected = (text == selectedOption),
                    onClick = { onOptionSelected(text) }
                )
                .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(
                    selected = (text == selectedOption),
                    onClick = { onOptionSelected(text) }
                )
                Text(
                    text = text,
                    style = MaterialTheme.typography.body1.merge(),
                    modifier = Modifier.padding(start = 16.dp)
                )
            }
        }
    }
}

It works, including changing the checked state of the

RadioButton()

widgets on click events. This is a refactored version of that sample, pulling the

Row()

declaration out into a local function:

@Composable
fun RadioGroupSample() {
  val radioOptions = listOf("Calls", "Missed", "Friends")
  val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }

  @Composable
  fun RadioRow(text: String) {
    Row(Modifier
      .fillMaxWidth()
      .preferredHeight(56.dp)
      .selectable(
        selected = (text == selectedOption),
        onClick = { onOptionSelected(text) }
      )
      .padding(horizontal = 16.dp),
      verticalAlignment = Alignment.CenterVertically
    ) {
      RadioButton(
        selected = (text == selectedOption),
        onClick = { onOptionSelected(text) }
      )
      Text(
        text = text,
        style = MaterialTheme.typography.body1.merge(),
        modifier = Modifier.padding(start = 16.dp)
      )
    }
  }

  Column {
    radioOptions.forEach { text -> RadioRow(text) }
  }
}

It compiles and renders, but the

RadioRow()

widgets do not get recomposed when the state changes.