Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 52 additions & 7 deletions runtimes/data-binding.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1746,6 +1746,51 @@ Image properties let you set and replace raster images at runtime, with each ins
imageProperty.setValue(nil)
```
</Tab>
<Tab title="Android">
```kotlin
import app.rive.runtime.kotlin.RiveAnimationView
import app.rive.runtime.kotlin.RiveInitializer
import app.rive.runtime.kotlin.core.RiveRenderImage

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()

// Load image from assets and cache the bytes.
var imageBytes: ByteArray
application.assets.open("example.jpg").use { inputStream ->
imageBytes = inputStream.readBytes()
}

// Initialize Rive.
AppInitializer.getInstance(applicationContext)
.initializeComponent(RiveInitializer::class.java)

setContent {
AndroidView(
factory = { context ->
RiveAnimationView(context).also {
it.setRiveResource(
resId = R.raw.example,
stateMachineName = "State Machine 1",
autoBind = true,
)

// Preferred way of acquiring viewModelInstance.
val vmi = it.stateMachines.first().viewModelInstance!!

// Replace image property in view model instance with new image.
val riveImage = RiveRenderImage.make(imageBytes)
vmi.getImageProperty("Image property").set(riveImage)
}
}
)
}
}
}
```
</Tab>
<Tab title="Flutter">
<Info>
See the [Flutter data binding images example](https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding_images.dart).
Expand Down Expand Up @@ -1810,15 +1855,15 @@ Image properties let you set and replace raster images at runtime, with each ins
Debug.Log("Image updated!");
}

// Example method to toggle between light and dark mode images
public void ToggleTheme()
{
if (imageProperty != null)
// Example method to toggle between light and dark mode images
public void ToggleTheme()
{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this broke the code formatting.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dang it! I hate this mintlify thing!

isDarkMode = !isDarkMode;
imageProperty.Value = isDarkMode ? m_darkImageAsset : m_lightImageAsset;
if (imageProperty != null)
{
isDarkMode = !isDarkMode;
imageProperty.Value = isDarkMode ? m_darkImageAsset : m_lightImageAsset;
}
}
}

// Example method to clear the image
public void ClearImage()
Expand Down
3 changes: 2 additions & 1 deletion snippets/demos.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ export const Demos = ({
image: '/images/runtimes/rive-db-images.webp',
links: {
web: 'https://codesandbox.io/p/sandbox/objective-cohen-sqwh9q',
flutter: 'https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding_images.dart'
flutter: 'https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding_images.dart',
android: 'https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/AssetLoaderFragment.kt'
},
},
dataBindingLists: {
Expand Down