Using Custom Views with Jetpack Compose

Question

Let's suppose I'm using some library that's intended to provide some UI Widgets. Let's say this library provides a Button Widget called FancyButton.

In the other hand, I have a new project created with Android Studio 4 that allows me to create a new project with an Empty Compose Activity.

The question is: How should I add this FancyButton to the view stack? Is it possible? Or with Jetpack Compose I can only use components that had been developed specifically for Jetpack Compose. In this case, AFAIK I could only use Android standars components (Text, MaterialTheme, etc).

If I try to use something like this:

override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MaterialTheme { Greeting("Android") FancyButton(context, "Some text") } } }

then I get this error:

e: Supertypes of the following classes cannot be resolved. Please make sure you have the required dependencies in the classpath.

I assume that the FancyButton is an Android View and not a Compose component? — Ryan M
– Ryan M ♦, Commented Jan 30, 2020 at 23:28

Mahdi-Malv · Accepted Answer · 2020-10-29 15:50:30Z

Update in alpha 06

It is possible to import Android View instances in a composable.

Use ContextAmbient.current as the context parameter for the View.

Column(modifier = Modifier.padding(16.dp)) { // CustomView using Object MyCustomView(context = ContextAmbient.current) // If the state updates AndroidView(viewBlock = ::CustomView, modifier = modifier) { customView -> // Modify the custom view } // Using xml resource AndroidView(resId = R.layout.view_demo) }

Raed Mughaus · Accepted Answer · 2022-04-07 20:11:03Z

You can wrap your custom view within the AndroidView composable:

@Composable fun RegularTextView() { AndroidView( factory = { context -> TextView(context).apply { text = "RegularTextView" textSize = 34.dp.value } }, ) }

And here is how to update your custom view during a recomposition, by using the update parameter:

@Composable fun RegularTextView() { var string by remember { mutableStateOf("RegularTextView") } Column(horizontalAlignment = Alignment.CenterHorizontally) { AndroidView( factory = { context -> TextView(context).apply { textSize = 34.dp.value } }, update = { textView -> textView.text = string } ) Spacer(modifier = Modifier.height(8.dp)) Button( onClick = { string = "Button clicked" }, ) { Text(text = "Update text") } } }

Codemaker2015 · Accepted Answer · 2022-04-29 04:12:36Z

@Composable fun ButtonType1(text: String, onClick: () -> Unit) { Button ( modifier=Modifier.fillMaxWidth().height(50.dp), onClick = onClick, shape = RoundedCornerShape(5.dp), border = BorderStroke(3.dp, colorResource(id = R.color.colorPrimaryDark)), colors = ButtonDefaults.buttonColors(contentColor = Color.White, backgroundColor = colorResource(id = R.color.colorPrimaryDark)) ) { Text(text = text , color = colorResource(id = R.color.white), fontFamily = montserrat, fontWeight = FontWeight.Normal, fontSize = 15.sp ) } }

Collectives™ on Stack Overflow

Using Custom Views with Jetpack Compose

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related