### Set up Activity as Compose Entry Point

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/navigation

Replace the View layout setup in your Activity with setContent to use Compose.

```kotlin
class SampleActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample)
        setContent {
            SampleApp(/* ... */)
        }
    }
}
MigrationCommonScenariosSnippets.kt
```

--------------------------------

### Navigate to a Composable Screen

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/navigation

Example of navigating to a Composable screen using Navigation Compose. Ensure the target route is correctly defined and accessible.

```kotlin
val secondRoute = backStackEntry.toRoute<Second>()
SecondScreen(
    id = secondRoute.id,
    onIconClick = {
        // findNavController().navigate(secondScreenToThirdScreenAction)
        navController.navigate(Third)
    }
)

```

--------------------------------

### XML Layout for a Simple Screen

Source: https://developer.android.com/develop/ui/compose/migrate/strategy

This XML file defines a basic screen layout with a title, subtitle, body text, and a confirmation button. It serves as the source for a Compose migration example.

```XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/title_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/title"
      android:textAppearance="?attr/textAppearanceHeadline2" />

  <TextView
      android:id="@+id/subtitle_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/subtitle"
      android:textAppearance="?attr/textAppearanceHeadline6" />

  <TextView
      android:id="@+id/body_text"
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:text="@string/body"
      android:textAppearance="?attr/textAppearanceBody1" />

  <Button
      android:id="@+id/confirm_button"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="@string/confirm"/>
</LinearLayout>
migration_strategy_xml_example.xml
```

--------------------------------

### Extract Screen Composables to NavGraph

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/navigation

Move screen composables from Fragments into composable destinations within your NavHost. This example shows extracting FirstScreen.

```kotlin
class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ):
 View {
        return ComposeView(requireContext()).apply {
            setContent {
                // FirstScreen(...) EXTRACT FROM HERE
            }
        }
    }
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(/* ... */) // EXTRACT TO HERE
        }
        composable<Second> {
            SecondScreen(/* ... */)
        }
        // ...
    }
}
MigrationCommonScenariosSnippets.kt
```

--------------------------------

### Multiple ComposeView Instances with Unique IDs

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/compose-in-views

When using multiple `ComposeView` instances in the same layout, each must have a unique ID for `savedInstanceState` to function correctly. This example shows how to assign unique IDs to `ComposeView` elements within a Fragment.

```kotlin
class ExampleFragmentMultipleComposeView : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View = LinearLayout(requireContext()).apply {
        addView(
            ComposeView(requireContext()).apply {
                setViewCompositionStrategy(
                    ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
                )
                id = R.id.compose_view_x
                // ...
            }
        )
        addView(TextView(requireContext()))
        addView(
            ComposeView(requireContext()).apply {
                setViewCompositionStrategy(
                    ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
                )
                id = R.id.compose_view_y
                // ...
            }
        )
    }
}
```

--------------------------------

### Map RecyclerView LayoutManager to Compose Lazy List

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/recycler-view

Choose the appropriate Compose Lazy list composable based on your RecyclerView's layout manager. For example, LinearLayoutManager maps to LazyColumn or LazyRow.

```kotlin
// recyclerView.layoutManager = LinearLayoutManager(context)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager
    }
}

```

--------------------------------

### Create NavHost and Define Destinations

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/navigation

Set up the NavHost within the App composable, passing the NavController and defining composable destinations for your navigation graph.

```kotlin
@Composable
fun SampleApp() {
    val navController = rememberNavController()

    SampleNavHost(navController = navController)
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        // ...
    }
}
MigrationCommonScenariosSnippets.kt
```

--------------------------------

### Set up Compose in an Activity

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/compose-in-views

Use `setContent` within your Activity to define the Compose UI. Ensure you have the `activity-compose` dependency.

```kotlin
class ExampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent { // In here, we can call composables!
            MaterialTheme {
                Greeting(name = "compose")
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}
InteroperabilityAPIsSnippets.kt
```

--------------------------------

### Launch Activity from Composable

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose

Demonstrates how to launch a new Android Activity from a Composable function using `startActivity`. This follows the "data flows down, events flow up" principle.

```kotlin
class OtherInteractionsActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // get data from savedInstanceState
        setContent {
            MaterialTheme {
                ExampleComposable(data, onButtonClick = {
                    startActivity(Intent(this, MyActivity::class.java))
                })
            }
        }
    }
}

@Composable
fun ExampleComposable(data: DataExample, onButtonClick: () -> Unit) {
    Button(onClick = onButtonClick) {
        Text(data.title)
    }
}
```

--------------------------------

### Implement Collapsing/Expanding Toolbar with Compose

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/coordinator-layout

Use `TopAppBarScrollBehavior` to create a collapsing and expanding toolbar effect. Connect the `NestedScrollConnection` to the `Scaffold` to enable the behavior.

```kotlin
// 1. Create the TopAppBarScrollBehavior
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()

Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text("My App")
            },
            // 2. Provide scrollBehavior to TopAppBar
            scrollBehavior = scrollBehavior
        )
    },
    // 3. Connect the scrollBehavior.nestedScrollConnection to the Scaffold
    modifier = Modifier
        .fillMaxSize()
        .nestedScroll(scrollBehavior.nestedScrollConnection)
) {
    /* Contents */
    // ...
}
```

--------------------------------

### Implement Navigation Drawer with Compose

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/coordinator-layout

Utilize the `ModalNavigationDrawer` composable for navigation drawers. It provides separate slots for the drawer content and the main screen content.

```kotlin
ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    Scaffold(Modifier.fillMaxSize()) {
        // Scaffold content
        // ...
    }
}
```

--------------------------------

### Initialize NavController in App Composable

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/navigation

Remember and initialize the NavController within your App composable to manage navigation state and back stack.

```kotlin
@Composable
fun SampleApp() {
    val navController = rememberNavController()
    // ...
}
MigrationCommonScenariosSnippets.kt
```

--------------------------------

### Create ComposeView Directly in Fragment (No XML)

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/compose-in-views

Create and configure a ComposeView directly within a Fragment's onCreateView method, bypassing the need for an XML layout file for Compose-only screens.

```Kotlin
class ExampleFragmentNoXml : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                MaterialTheme {
                    // In Compose world
                    Text("Hello Compose!")
                }
            }
        }
    }
}
```

--------------------------------

### Navigate with NavController and Pass Data

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/navigation

Replace findNavController() calls with navController.navigate() and pass data by creating instances of route classes, like Second(id = "ABC").

```kotlin
@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(
                onButtonClick = {
                    // findNavController().navigate(firstScreenToSecondScreenAction)
                    navController.navigate(Second(id = "ABC"))
                }
            )
        }
        composable<Second> { backStackEntry ->

```

--------------------------------

### Replace CoordinatorLayout with ComposeView

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/coordinator-layout?hl=tr

Comment out the existing CoordinatorLayout and its children, and add a ComposeView to your layout XML. This sets up the container for your Compose UI.

```xml
<!--  <androidx.coordinatorlayout.widget.CoordinatorLayout
      android:id="@id/coordinator_layout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:fitsSystemWindows="true">

    <androidx.compose.ui.platform.ComposeView
        android:id="@id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.appbar.AppBarLayout
        android:id="@id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/Theme.Sunflower.AppBarOverlay">

    <!-- AppBarLayout contents here -->

    </com.google.android.material.appbar.AppBarLayout>

  </androidx.coordinatorlayout.widget.CoordinatorLayout>-->

<androidx.compose.ui.platform.ComposeView
    android:id="@id/compose_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

```

--------------------------------

### Inflate Layout and Set Content in Fragment

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/compose-in-views

Inflate an XML layout in a Fragment, find the ComposeView by its ID, set a composition strategy, and then call setContent() to define the Compose UI.

```Kotlin
class ExampleFragmentXml : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val view = inflater.inflate(R.layout.fragment_example, container, false)
        val composeView = view.findViewById<ComposeView>(R.id.compose_view)
        composeView.apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // In Compose world
                MaterialTheme {
                    Text("Hello Compose!")
                }
            }
        }
        return view
    }
}
```

--------------------------------

### Display Snackbar with Compose Scaffold

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/coordinator-layout

Use the `snackbarHost` slot in `Scaffold` to display Snackbars. `rememberCoroutineScope` and `SnackbarHostState` are required to manage and show the Snackbar.

```kotlin
val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("Snackbar")
                }
            }
        )
    }
) {
    // Screen content
    // ...
}
```

--------------------------------

### Profile Gradle build times

Source: https://developer.android.com/develop/ui/compose/migrate/compare-metrics

Use the standalone gradle-profiler tool to measure the mean build time for a debug build of your project.

```bash
gradle-profiler --benchmark --project-dir . :app:assembleDebug

```

--------------------------------

### Using ComposeView in a Fragment

Source: https://developer.android.com/develop/ui/compose/migrate/strategy

Integrate Compose UI into an existing Fragment by returning a ComposeView from onCreateView. Set the content of the ComposeView to a composable function. Ensure proper view lifecycle management.

```kotlin
class NewFeatureFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                NewFeatureScreen()
            }
        }
    }
}
```

--------------------------------

### Set Scaffold as ComposeView Content

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/coordinator-layout?hl=tr

Reference the ComposeView in your Activity or Fragment and call setContent to define the Scaffold as the root of your Compose UI. This is the entry point for your Scaffold-based layout.

```kotlin
composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) {
        // Scaffold contents
        // ...
    }
}

```

--------------------------------

### Populate Lazy List with Items

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/recycler-view

Use the items() function within the Lazy list's content slot to iterate through your data and display each item using its corresponding Composable.

```kotlin
val data = listOf<MyData>(/* ... */)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        items(data) {
            ListItem(it)
        }
    }
}

```

--------------------------------

### ViewModel Scoping in Navigation Graphs

Source: https://developer.android.com/develop/ui/compose/migrate/other-considerations

Illustrates how ViewModel instances are scoped differently when composables are destinations in a navigation graph. A new ViewModel instance is created for each navigation destination.

```kotlin
@Composable
fun MyApp() {
    NavHost(rememberNavController(), startDestination = "profile/{userId}") {
        /* ... */
        composable("profile/{userId}") { backStackEntry ->
            GreetingScreen(backStackEntry.arguments?.getString("userId") ?: "")
        }
    }
}
```

--------------------------------

### Compose Equivalent of a Simple Screen

Source: https://developer.android.com/develop/ui/compose/migrate/strategy

This Composable function replaces the XML layout with equivalent Compose UI elements. It uses a Column layout and Material Theme typography for text elements.

```Kotlin
@Composable
fun SimpleScreen() {
    Column(Modifier.fillMaxSize()) {
        Text(
            text = stringResource(R.string.title),
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = stringResource(R.string.subtitle),
            style = MaterialTheme.typography.headlineSmall
        )
        Text(
            text = stringResource(R.string.body),
            style = MaterialTheme.typography.bodyMedium
        )
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) {
            Text(text = stringResource(R.string.confirm))
        }
    }
}
MigrationStrategySnippets.kt
```

--------------------------------

### Define Navigation Destinations

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/navigation

Create data objects or classes to represent navigation destinations, using @Serializable for destinations that don't require data.

```kotlin
@Serializable data object First
@Serializable data class Second(val id: String)
@Serializable data object Third

MigrationCommonScenariosSnippets.kt
```

--------------------------------

### Use View Binding to Set Compose Content in Fragment

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/compose-in-views

Utilize view binding to access the ComposeView, set a composition strategy, and define the Compose UI content within the Fragment's lifecycle.

```Kotlin
class ExampleFragment : Fragment() {

    private var _binding: FragmentExampleBinding? = null

    // This property is only valid between onCreateView and onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentExampleBinding.inflate(inflater, container, false)
        val view = binding.root
        binding.composeView.apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // In Compose world
                MaterialTheme {
                    Text("Hello Compose!")
                }
            }
        }
        return view
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}
```

--------------------------------

### Add TopAppBar and FloatingActionButton to Scaffold

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/coordinator-layout?hl=tr

Utilize the topBar and floatingActionButton slots of the Scaffold composable to add a TopAppBar and a FloatingActionButton. This demonstrates how to incorporate common Material Design components within the Scaffold.

```kotlin
composeView.setContent {
    Scaffold(
        Modifier.fillMaxSize(),
        topBar = {
            TopAppBar(
                title = {
                    Text("My App")
                }
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { /* Handle click */ }
            ) {
                Icon(
                    Icons.Filled.Add,
                    contentDescription = "Add Button"
                )
            }
        }
    ) {
        contentPadding ->
        val pagerState = rememberPagerState {
            10
        }
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.padding(contentPadding)
        ) { /* Page contents */ }
    }
}

```

--------------------------------

### XML Layout with tools:composableName for Preview

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/compose-in-views

This XML layout uses the `tools:composableName` attribute on a `ComposeView` to specify which composable to render in the Layout Editor. This allows for previewing Compose UI within an XML layout.

```xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/my_compose_view"
      tools:composableName="com.example.compose.snippets.interop.InteroperabilityAPIsSnippetsKt.GreetingPreview"
      android:layout_height="match_parent"
      android:layout_width="match_parent"/>

</LinearLayout>
```

--------------------------------

### Wrap Composable in Custom View for View System Integration

Source: https://developer.android.com/develop/ui/compose/migrate/other-considerations

Create a custom view wrapper extending `AbstractComposeView` to use composables in View-based screens. The `Content` composable should include your reusable composable wrapped in your app's theme.

```kotlin
import android.content.Context
import android.util.AttributeSet
import androidx.compose.runtime.*
import androidx.compose.ui.platform.AbstractComposeView

class CallToActionViewButton @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyle: Int = 0
) : AbstractComposeView(context, attrs, defStyle) {

    var text by mutableStateOf("")
    var onClick by mutableStateOf({}) // Use a default empty lambda

    @Composable
    override fun Content() {
        YourAppTheme { // Assuming YourAppTheme is your app's theme composable
            CallToActionButton(text, onClick)
        }
    }
}
```

--------------------------------

### Accessing ViewModel in Compose Activity

Source: https://developer.android.com/develop/ui/compose/migrate/other-considerations

Demonstrates how to access a ViewModel from a composable within an Activity. The same ViewModel instance is reused across composables hosted by the same Activity.

```kotlin
class GreetingActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MaterialTheme {
                Column {
                    GreetingScreen("user1")
                    GreetingScreen("user2")
                }
            }
        }
    }
}

@Composable
fun GreetingScreen(
    userId: String,
    viewModel: GreetingViewModel = viewModel(  
        factory = GreetingViewModelFactory(userId)  
    )
) {
    val messageUser by viewModel.message.observeAsState("")
    Text(messageUser)
}

class GreetingViewModel(private val userId: String) : ViewModel() {
    private val _message = MutableLiveData("Hi $userId")
    val message: LiveData<String> = _message
}

class GreetingViewModelFactory(private val userId: String) : ViewModelProvider.Factory {
    @Suppress("UNCHECKED_CAST")
    override fun <T : ViewModel> create(modelClass: Class<T>): T {
        return GreetingViewModel(userId) as T
    }
}
```

--------------------------------

### Use hiltViewModel for ViewModel Injection

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/navigation

Inject ViewModels into screen composables using hiltViewModel for seamless integration with Hilt and Navigation Compose.

```kotlin
@Composable
fun FirstScreen(
    // viewModel: FirstViewModel = viewModel(),
    viewModel: FirstViewModel = hiltViewModel(),
    onButtonClick: () -> Unit = {},
) {
    // ...
}
MigrationCommonScenariosSnippets.kt
```

--------------------------------

### Test mixed Compose and Views UI with createAndroidComposeRule

Source: https://developer.android.com/develop/ui/compose/migrate/other-considerations

Use `createAndroidComposeRule` to test activities or fragments that contain both Compose and View elements. This rule integrates `ActivityScenarioRule` with `ComposeTestRule` for unified testing.

```kotlin
class MyActivityTest {
    @Rule
    @JvmField
    val composeTestRule = createAndroidComposeRule<MyActivity>()

    @Test
    fun testGreeting() {
        val greeting = InstrumentationRegistry.getInstrumentation()
            .targetContext.resources.getString(R.string.greeting)

        composeTestRule.onNodeWithText(greeting).assertIsDisplayed()
    }
}
AddingComposeToYourAppSnippets.kt
```

--------------------------------

### Displaying a Toast with LocalContext

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose

Access the current Android `Context` within a Composable using `LocalContext.current`. This allows you to interact with Android framework APIs, such as showing a `Toast` message.

```kotlin
import android.widget.Toast
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext

@Composable
fun ToastGreetingButton(greeting: String) {
    val context = LocalContext.current
    Button(onClick = {
        Toast.makeText(context, greeting, Toast.LENGTH_SHORT).show()
    }) {
        Text("Greet")
    }
}
```

--------------------------------

### Embed XML Layout with View Binding in Compose

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose

Use `AndroidViewBinding` to inflate and interact with an XML layout within Compose. Requires the `ui-viewbinding` library and enabling view binding in your project. Suitable for smaller, legacy layouts during migration.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.viewinterop.AndroidViewBinding

// Assume ExampleLayoutBinding is generated from your XML layout
// Assume exampleView is a View defined in your XML layout

@Composable
fun AndroidViewBindingExample() {
    AndroidViewBinding(ExampleLayoutBinding::inflate) {
        exampleView.setBackgroundColor(Color.GRAY.hashCode())
    }
}

// Placeholder for ExampleLayoutBinding for compilation
object ExampleLayoutBinding {
    lateinit var exampleView: android.view.View
    fun inflate(inflater: android.view.LayoutInflater): ExampleLayoutBinding {
        // In a real scenario, this would inflate an XML layout
        exampleView = android.view.View(inflater.context)
        return this
    }
}
```

--------------------------------

### Replace RecyclerView with ComposeView in XML

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/recycler-view

Replace the RecyclerView in your XML layout with a ComposeView to host your Compose UI, including Lazy lists. This is the first step in migrating from RecyclerView to Compose.

```xml
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<!--    <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />"-->

    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

```

--------------------------------

### Reusable Composable with State Hoisting

Source: https://developer.android.com/develop/ui/compose/migrate/other-considerations

Promote component reusability by hoisting state and callbacks to parent composables. This allows child composables to be encapsulated and less coupled to their environment.

```kotlin
@Composable
fun AScreen() {
    var isEnabled by rememberSaveable { mutableStateOf(false) }

    Column {
        ImageWithEnabledOverlay(isEnabled)
        ControlPanelWithToggle(
            isEnabled = isEnabled,
            onEnabledChanged = { isEnabled = it }
        )
    }
}

```

--------------------------------

### Integrate Custom Compose View with View Binding

Source: https://developer.android.com/develop/ui/compose/migrate/other-considerations

Use View Binding to inflate and interact with custom Compose views in an Activity. This allows setting parameters like text and click listeners on the custom view, similar to traditional Views.

```kotlin
import android.os.Bundle
import androidx.activity.ComponentActivity
import com.example.app.ActivityExampleBinding // Replace with your actual binding class

class ViewBindingActivity : ComponentActivity() {

    private lateinit var binding: ActivityExampleBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityExampleBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.callToAction.apply {
            text = getString(R.string.greeting) // Replace with your string resource
            onClick = { /* Do something */ } // Define the click action
        }
    }
}
```

--------------------------------

### Preview Composable in Layout Editor

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/compose-in-views

This Kotlin code defines a `@Preview` composable function that can be previewed within the Android Layout Editor. It's a good practice for visualizing composables in a mixed Views and Compose environment.

```kotlin
@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Android")
}
```

--------------------------------

### Migrate ViewPager2 to HorizontalPager within Scaffold

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/coordinator-layout

Use the HorizontalPager composable within the Scaffold's content lambda, applying the provided PaddingValues to manage spacing correctly. This replaces the functionality of ViewPager2.

```kotlin
composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) {
        val pagerState = rememberPagerState { 10 }
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.padding(contentPadding)
        ) { /* Page contents */ }
    }
}

```

--------------------------------

### View System as Source of Truth with mutableStateOf

Source: https://developer.android.com/develop/ui/compose/migrate/other-considerations

When the View system owns the state, wrap it in `mutableStateOf` for thread safety in Compose. This simplifies composables but requires the View system to manage state updates and associated Views.

```kotlin
import android.content.Context
import android.util.AttributeSet
import android.widget.LinearLayout
import android.widget.TextView
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TextField
import androidx.compose.runtime.*
import androidx.compose.ui.platform.ComposeView

class CustomViewGroup @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyle: Int = 0
) : LinearLayout(context, attrs, defStyle) {

    // Source of truth in the View system as mutableStateOf
    // to make it thread-safe for Compose
    private var text by mutableStateOf("")

    private val textView: TextView

    init {
        orientation = VERTICAL

        textView = TextView(context)
        val composeView = ComposeView(context).apply {
            setContent {
                MaterialTheme {
                    TextField(value = text, onValueChange = { updateState(it) })
                }
            }
        }

        addView(textView)
        addView(composeView)
    }

    // Update both the source of truth and the TextView
    private fun updateState(newValue: String) {
        text = newValue
        textView.text = newValue
    }
}
```

--------------------------------

### Create Reusable Composable for Shared UI

Source: https://developer.android.com/develop/ui/compose/migrate/other-considerations

Define a composable function for shared UI elements like a button. This allows the component to be reused across the application, whether in Compose or View-based screens.

```kotlin
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun CallToActionButton(
    text: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Button(
        colors = ButtonDefaults.buttonColors(
            containerColor = MaterialTheme.colorScheme.secondary
        ),
        onClick = onClick,
        modifier = modifier,
    ) {
        Text(text)
    }
}
```

--------------------------------

### Define ComposeView IDs in XML

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/compose-in-views

This XML snippet defines the resource IDs used for `ComposeView` elements in the layout, ensuring they are uniquely identifiable.

```xml
<resources>
  <item name="compose_view_x" type="id" />
  <item name="compose_view_y" type="id" />
</resources>
```

--------------------------------

### Add ComposeView to XML Layout

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/compose-in-views

Declare a ComposeView in your XML layout file like any other Android View. This ComposeView will host your Compose UI content.

```XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/compose_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</LinearLayout>
```

--------------------------------

### Create a Custom View in Compose

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose

Use `AndroidView` to embed a custom `View` hierarchy into Compose. The `factory` lambda creates the view, and the `update` lambda handles recomposition when state changes. This allows for Compose to View communication.

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.viewinterop.AndroidView

// Assume MyView is a custom View class
// Assume setOnClickListener and selectedItem are defined in MyView

@Composable
fun CustomView() {
    var selectedItem by remember { mutableIntStateOf(0) }

    // Adds view to Compose
    AndroidView(
        modifier = Modifier.fillMaxSize(), // Occupy the max size in the Compose UI tree
        factory = { context ->
            // Creates view
            MyView(context).apply {
                // Sets up listeners for View -> Compose communication
                setOnClickListener {
                    selectedItem = 1
                }
            }
        },
        update = {
            // View's been inflated or state read in this block has been updated
            // Add logic here if necessary

            // As selectedItem is read here, AndroidView will recompose
            // whenever the state changes
            // Example of Compose -> View communication
            view.selectedItem = selectedItem
        }
    )
}

@Composable
fun ContentExample() {
    Column(Modifier.fillMaxSize()) {
        Text("Look at this CustomView!")
        CustomView()
    }
}

// Placeholder for MyView and its methods for compilation
class MyView(context: android.content.Context) : android.view.View(context) {
    var selectedItem: Int = 0
        set(value) {
            field = value
            // In a real scenario, this would trigger a UI update
        }

    fun setOnClickListener(listener: () -> Unit) {
        // In a real scenario, this would set an actual OnClickListener
    }
}
```

--------------------------------

### Conditional Composable Display in Compose

Source: https://developer.android.com/develop/ui/compose/migrate/other-considerations

Use Kotlin's conditional logic to display different composables based on state. This approach avoids inherent visibility properties found in Views.

```kotlin
@Composable
fun MyComposable(showCautionIcon: Boolean) {
    if (showCautionIcon) {
        CautionIcon(/* ... */)
    }
}

```

--------------------------------

### Create Composable for List Item

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/recycler-view

Define a Composable function to represent each item in your list. This replaces the ViewHolder pattern from RecyclerView.Adapter.

```kotlin
@Composable
fun ListItem(data: MyData, modifier: Modifier = Modifier) {
    Row(modifier.fillMaxWidth()) {
        Text(text = data.name)
        // … other composables required for displaying `data`
    }
}

```

--------------------------------

### Implement HorizontalPager within Scaffold

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/coordinator-layout?hl=tr

Add a HorizontalPager to the Scaffold's content lambda, applying the provided PaddingValues to its modifier. This integrates a swipeable page view into your Scaffold layout.

```kotlin
composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) {
        contentPadding ->
        val pagerState = rememberPagerState {
            10
        }
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.padding(contentPadding)
        ) { /* Page contents */ }
    }
}

```

--------------------------------

### Using AndroidView in Lazy Lists

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose

When using `AndroidView` in a Lazy list, use the overload introduced in version 1.4.0-rc01 to enable Compose to reuse the underlying `View` instance. The `onReset` callback must be non-null to enable View reuse.

```kotlin
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView

@Composable
fun AndroidViewInLazyList() {
    LazyColumn {
        items(100) {
            index ->
            AndroidView(
                modifier = Modifier.fillMaxSize(), // Occupy the max size in the Compose UI tree
                factory = { context ->
                    MyView(context)
                },
                update = { view ->
                    view.selectedItem = index
                },
                onReset = {
                    view -> view.clear()
                }
            )
        }
    }
}
```

--------------------------------

### Register Broadcast Receiver in Composable

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose

Use `LocalContext`, `rememberUpdatedState`, and `DisposableEffect` to safely register and unregister a `BroadcastReceiver` from a Composable function. This ensures proper lifecycle management.

```kotlin
@Composable
fun SystemBroadcastReceiver(
    systemAction: String,
    onSystemEvent: (intent: Intent?) -> Unit
) {
    // Grab the current context in this part of the UI tree
    val context = LocalContext.current

    // Safely use the latest onSystemEvent lambda passed to the function
    val currentOnSystemEvent by rememberUpdatedState(onSystemEvent)

    // If either context or systemAction changes, unregister and register again
    DisposableEffect(context, systemAction) {
        val intentFilter = IntentFilter(systemAction)
        val broadcast = object : BroadcastReceiver() {
            override fun onReceive(context: Context?, intent: Intent?) {
                currentOnSystemEvent(intent)
            }
        }

        context.registerReceiver(broadcast, intentFilter)

        // When the effect leaves the Composition, remove the callback
        onDispose {
            context.unregisterReceiver(broadcast)
        }
    }
}

@Composable
fun HomeScreen() {

    SystemBroadcastReceiver(Intent.ACTION_BATTERY_CHANGED) { batteryStatus ->
        val isCharging = /* Get from batteryStatus ... */ true
        /* Do something if the device is charging */
    }

    /* Rest of the HomeScreen */
}
```

--------------------------------

### Compose as Source of Truth with SideEffect

Source: https://developer.android.com/develop/ui/compose/migrate/other-considerations

Use SideEffect to publish Compose state to non-Compose code, such as updating an analytics library with user properties. This ensures that future events carry the relevant metadata.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.SideEffect

@Composable
fun rememberFirebaseAnalytics(user: User): FirebaseAnalytics {
    val analytics: FirebaseAnalytics = remember {
        FirebaseAnalytics()
    }

    // On every successful composition, update FirebaseAnalytics with
    // the userType from the current User, ensuring that future analytics
    // events have this metadata attached
    SideEffect {
        analytics.setUserProperty("userType", user.userType)
    }
    return analytics
}
```

--------------------------------

### Add Dividers in LazyColumn

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/recycler-view

Replicate item dividers in Compose's LazyColumn by conditionally rendering a HorizontalDivider after each item, except for the last one. This approach integrates decoration directly into the composition.

```kotlin
LazyColumn(Modifier.fillMaxSize()) {
    itemsIndexed(data) { index, d ->
        ListItem(d)
        if (index != data.size - 1) {
            HorizontalDivider()
        }
    }
}
```

--------------------------------

### Add Item Decorations to RecyclerView

Source: https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/recycler-view

Use DividerItemDecoration to add visual dividers between items in a RecyclerView. Ensure the RecyclerView context and layout manager are correctly provided.

```kotlin
val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL)
recyclerView.addItemDecoration(itemDecoration)
```

--------------------------------

### Embedding Fragments in Compose

Source: https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose

Use the `AndroidFragment` composable to embed an Android `Fragment` within your Compose UI. This composable handles fragment lifecycle events, such as removal when the composable leaves the composition. You can pass a `Fragment` class, set initial `fragmentState`, provide `arguments`, and define an `onUpdate` callback.

```kotlin
import androidx.compose.runtime.Composable

@Composable
fun FragmentInComposeExample() {
    AndroidFragment<MyFragment>()
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.