Develop Reference

Android databinding not triggered in jetpack compose android view

I am trying to mix Jetpack compose with some legacy code that we have. Was hoping that it would be an easy fix since this is a part of the app that is rarely used. The problem at hand is that i am trying to add legacy view that has databinding to an already made compose view
The View
#SuppressLint("ViewConstructor")
class TimeAndDateScroller #JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyle: Int = 0,
timePickerViewModel: TimeAndDatePickerViewModel,
) : LinearLayout(context, attrs, defStyle) {
var binding: ViewTimePickerBinding? = null
init {
binding = ViewTimePickerBinding.inflate(LayoutInflater.from(context), this, true).apply {
this.viewModel = timePickerViewModel
}
}
}
Compose View
AndroidView(
factory = {
TimeAndDateScroller(it, timePickerViewModel = viewModel).apply {
layoutParams = LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
}
}, update = {
}
)
ViewModel and XML
The view model is passed down correctly as far as i understand. But the values inside the view model is not triggering the listening xml view
val isPickerEnabled: LiveData<Boolean> = selectedOption
.map {
it != TimeParamType.NOW
}
.asLiveData(Dispatchers.Main)
The value above is found in the view model. But the corresponding xml listener is never triggered
android:alpha="#{viewModel.isPickerEnabled() ? 1f : 0.4f}"

In the viewModel you would normally add:
val isPickerEnabledValue = ObservableField<Boolean>()
init {
isPickerEnabledValue.set(false)
}
Then this will be updated based on the live data in the activity/fragment:
vm.isPickerEnabledLiveData.observe(this, isEnabled ->
vm.isPickerEnabledValue.set(isEnabled)
}
)
And then in the xml it would be:
android:alpha="#{viewModel.isPickerEnabledValue ? 1f : 0.4f}"
So since this is hybrid with compose, instead of the ObservableField we would use:
var isPickerEnabledValue: State<Boolean> = stateOf(false)
and then in Compose you could use:
AndroidView(
factory = {
viewModel.isPickerEnabledValue = viewModel.isPickerEnabledLiveData.observeAsState()
The key is you can't get data out of live data directly, but have to observer it in some way, while ObservableField or State can be used directly.

Use composable instead of marker in google maps?

I know it's possible to use a custom view instead of a basic map marker in Google Maps doing what's described in this answer. I was curious if it was possible to achieve a similar affect with Compose?
Since ComposeView is a final class, couldn't extend that directly so I was thinking of having a FrameLayout that could add it as a child. Although this seems to be causing a race condition since composables draw slightly differently from normal android Views.
class MapMarkerView : FrameLayout {
constructor(context: Context) : super(context) {
initView()
}
constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
initView()
}
private fun initView() {
val composeView = ComposeView(context).apply {
layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
}
composeView.setContent {
// this runs asynchronously making the the bitmap generation not include composable at runtime?
Text(text = "2345", modifier = Modifier.background(Color.Green, RoundedCornerShape(4.dp)))
}
addView(composeView)
}
}
Most articles I have read have some callback function for generating a bitmap like this which wouldn't necessarily work in this use case where each view is generated dynamically and needed to be converted to a bitmap right away for the map.

The MapMarkerView you are attempting to create is an indirect child of ViewGroup. ComposeView is also an indirect child of ViewGroup which means you can directly substitute a ComposeView in places where you intend to use this class. The ComposeView class is not meant to be subclassed. The only thing you really need to be concerned with as a developer is its setContent method.
val composeView: View = ComposeView(context).apply{
setContent {
Text(text = "2345", modifier = Modifier.background(Color.Green, RoundedCornerShape(4.dp)))
}
}
Now you can replace the MapMarkerView with this composeView in your code or even use it at any location where a View or any of it's subclasses is required.

Android: Jetpack Compose and XML in Activity

How can I add Jetpack Compose & xml in the same activity? An example would be perfect.

If you want to use a Compose in your XML file, you can add this to your layout file:
<androidx.compose.ui.platform.ComposeView
android:id="#+id/my_composable"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
and then, set the content:
findViewById<ComposeView>(R.id.my_composable).setContent {
MaterialTheme {
Surface {
Text(text = "Hello!")
}
}
}
If you want the opposite, i.e. to use an XML file in your compose, you can use this:
AndroidView(
factory = { context ->
val view = LayoutInflater.from(context).inflate(R.layout.my_layout, null, false)
val textView = view.findViewById<TextView>(R.id.text)
// do whatever you want...
view // return the view
},
update = { view ->
// Update the view
}
)

If you want to provide your composable like a regular View (with the ability to specify its attributes in XML), subclass from AbstractComposeView.
#Composable
fun MyComposable(title: String) {
Text(title)
}
// Do not forget these two imports for the delegation (by) to work
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
class MyCustomView #JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyle: Int = 0
) : AbstractComposeView(context, attrs, defStyle) {
var myProperty by mutableStateOf("A string")
init {
// See the footnote
context.withStyledAttributes(attrs, R.styleable.MyStyleable) {
myProperty = getString(R.styleable.MyStyleable_myAttribute)
}
}
// The important part
#Composable override fun Content() {
MyComposable(title = myProperty)
}
}
And this is how you would use it just like a regular View:
<my.package.name.MyCustomView
android:id="#+id/myView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:myAttribute="Helloooooooooo!" />
Thanks to ProAndroidDev for this article.
Footnote
To define your own custom attributes for your view, see this post.
Also, make sure to use -ktx version of the AndroidX Core library to be able to access useful Kotlin extension functions like Context::withStyledAttributes:
implementation("androidx.core:core-ktx:1.6.0")

https://developer.android.com/jetpack/compose/interop?hl=en
To embed an XML layout, use the AndroidViewBinding API, which is provided by the androidx.compose.ui:ui-viewbinding library. To do this, your project must enable view binding.
AndroidView, like many other built-in composables, takes a Modifier parameter that can be used, for example, to set its position in the parent composable.
#Composable
fun AndroidViewBindingExample() {
AndroidViewBinding(ExampleLayoutBinding::inflate) {
exampleView.setBackgroundColor(Color.GRAY)
}
}

Updated : When you want to use XML file in compose function
AndroidView(
factory = { context ->
val view = LayoutInflater.from(context).inflate(R.layout.test_layout, null, false)
val edittext= view.findViewById<EditText>(R.id.edittext)
view
},
update = { }
)

AirBnb Epoxy - Views are duplicated instead of replaced

I am rendering a form based on JSON response that I fetch from the server.
My use case involves listening to a click from a radio button, toggling the visibility of certain text fields based on the radioButton selection, and refreshing the layout with the visible textView.
The expected output should be to update the same view with the textView now visible, but I'm now seeing the same form twice, first with default state, and second with updated state.
Have I somehow created an entirely new model_ class and passing it to the controller? I just want to change the boolean field of the existing model and update the view.
My Model Class
#EpoxyModelClass(layout = R.layout.layout_panel_input)
abstract class PanelInputModel(
#EpoxyAttribute var panelInput: PanelInput,
#EpoxyAttribute var isVisible: Boolean,
#EpoxyAttribute(EpoxyAttribute.Option.DoNotHash) var context: Context,
#EpoxyAttribute(EpoxyAttribute.Option.DoNotHash) var textChangedListener: InputTextChangedListener,
#EpoxyAttribute(EpoxyAttribute.Option.DoNotHash) var radioButtonSelectedListener: RadioButtonSelectedListener,
#EpoxyAttribute(EpoxyAttribute.Option.DoNotHash) var validationChangedListener: ValidationChangedListener
) : EpoxyModelWithHolder<PanelInputModel.PanelInputHolder>() {
#EpoxyAttribute var imageList = mutableListOf<ImageInput>()
override fun bind(holder: PanelInputHolder) {
val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
generateViews(holder, inflater, panelInput.elements) // Generates textViews, radioButtons, etc, based on ElementType enum inside Panel input
}
fun generateRadioButtonView(element: Element) {
// Created a custom listener and calling its function
radioButtonSelectedListener.radioButtonSelected(chip.id, chip.text.toString())
}
fun generateTextView() {
// Show/hide textView based on isVisible value
}
My Controller Class
class FormInputController(
var context: Context,
var position: Int, // Fragment Position in PagerAdapter
var textChangedListener: InputTextChangedListener,
var radioButtonSelectedListener: RadioButtonSelectedListener,
var validationChangedListener: ValidationChangedListener
) : TypedEpoxyController<FormInput>() {
override fun buildModels(data: FormInput?) {
val panelInputModel = PanelInputModel_(
data as PanelInput,
data.isVisible,
context,
textChangedListener,
radioButtonSelectedListener,
validationChangedListener
)
panelInputModel.id(position)
panelInputModel.addTo(this)
}
}
My fragment implements the on radio button checked listener, modifies the formInput.isVisible = true and calls formInputController.setData(componentList)
Please help me out on this, thanks!

I don't think you are using Epoxy correctly, that's not how it's supposed to be.
First of all, let's start with the Holder: you should not inflate the view inside of bind/unbind, just set your views there. Also, the view is inflated for you from the layout file you are specifying at R.layout.layout_panel_input, so there is no need to inflate at all.
You should copy this into your project:
https://github.com/airbnb/epoxy/blob/master/kotlinsample/src/main/java/com/airbnb/epoxy/kotlinsample/helpers/KotlinEpoxyHolder.kt
And create your holder in this way:
class PanelInputHolder : KotlinHolder() {
val textView by bind<TextView>(R.id.your_text_view_id)
val button by bind<Button>(R.id.your_button_id)
}
Let's move to your model class: you should remove these variables from the constructor as they are going to be a reference for the annotation processor to create the actual class.
Also, don't set your layout res from the annotation as that will not be allowed in the future.
Like so:
#EpoxyModelClass
class PanelInputModel : EpoxyModelWithHolder<PanelInputHolder>() {
#EpoxyAttribute
lateinit var text: String
#EpoxyAttribute(DoNotHash)
lateinit var listener: View.OnClickListener
override fun getDefaultLayout(): Int {
return R.layout.layout_panel_input
}
override fun bind(holder: PanelInputHolder) {
// here set your views
holder.textView.text = text
holder.textView.setOnClickListener(listener)
}
override fun unbind(holder: PanelInputHolder) {
// here unset your views
holder.textView.text = null
holder.textView.setOnClickListener(null)
}
}
Loop your data inside the controller not inside the model:
class FormInputController : TypedEpoxyController<FormInput>() {
override fun buildModels(data: FormInput?) {
data?.let {
// do your layout as you want, with the models you specify
// for example a header
PanelInputModel_()
.id(it.id)
.text("Hello WOrld!")
.listener { // do something here }
.addTo(this)
// generate a model per item
it.images.forEach {
ImageModel_()
.id(it.imageId)
.image(it)
.addTo(this)
}
}
}
}
When choosing your id, keep in mind that Epoxy will keep track of those and update if the attrs change, so don't use a position, but a unique id that will not get duplicated.

How to draw something on exisiting custom view?

I'm making android app with Kotlin in android studio now, and want to draw on already drawn custom view.
This app is simple app about shows graphical information with received data with serial port. Actually I'm new on Kotlin and rookie on Java/Android. This is code that has problem.
This is XML of custom view, (it is in the contraintlayout)
<!--activity_main.xml-->
<androidx.constraintlayout.widget.ConstraintLayout ... >
<com.(...).DrawUI
android:id="#+id/DrawUI" ...
/>
Trying to call drawing function 'DrawRxData(rxData)' on this thread,
//BluetoothController.kt
class BluetoothClient(private val activity: MainActivity,
private val socket:BluetoothSocket): Thread() {
override fun run() {
...
if(inputStream.available() > 0) {
...
inputStream.read(buffer)
val rxData = BluetoothRxParser(buffer)
DrawRxData(rxData)
...
}
...
}
}
And this is DrawUI that wrote above on XML
I want to draw something on this View with calling function in BluetoothController.kt!
//DrawUI.kt
class DrawUI(context: Context, attrs: AttributeSet?) : View(context, attrs) {
init {
// initializing Paint()s
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
// measuring dimension and determine drawing sector
}
override fun onDraw(canvas: Canvas) {
// drawing background
}
}
I tried use Canvas on DrawUI class but it didn't work properly.
Also tried making Bitmap but it occurs error that width and height are zero. How can I fix this problem?
EDIT
This way is how I solved this problem, maybe there is another and simple solution..
Created ImageView that has same size with DrawUI on XML
<ImageView
android:id="#+id/DrawRx" ...
/>
Get View and cast to ImageView, then create bitmap and canvas.. DrawRxData() is in BluetoothClient class.
private fun DrawRxData (rxData: RxData) {
val v : View = activity.findViewById(R.id.DrawRx)
val iv : ImageView = v as ImageView
val bitmap = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)
val paint = Paint(Paint.ANTI_ALIAS_FLAG)
paint.setColor(Color.BLACK)
canvas.drawCircle(50F, 50F, 10F, paint)
Attach bitmap to ImageView but for thread, it looks like Dispatcher in C#..
Reference
activity.runOnUiThread(java.lang.Runnable {
iv.setImageBitmap(bitmap)
})
Actually just overlapped exist view, please answer if there is efficient way!