Comparision of android native xml UI components and the Getpack UI components

Certainly I want to see side by side how the old android native xml UI components and the Getpack UI components. if you guys are started learning about the getpack compose this article will help you to understand better about the components.

Just go thought the below comparison.

check the LinkedIn

1. 
   

2. Text

   • Jetpack Compose

   • Text(text = "Hello, world!")

   • Native Android XML

   • <TextView android:text="Hello, world!" />

3. TextField

   • Jetpack Compose

   • TextField(value = textState, onValueChange = { newText -> textState = newText })

   • Native Android XML

     <EditText android:text="@={viewModel.text}" />

4. 
   
5. 
   

6. Button

   • Jetpack Compose

   • Button(onClick = { /* Do something */ }) { Text("Click me") }

   • Native Android XML

   • <Button android:text="Click me" android:onClick="onClickHandler" />

7. Image

   • Jetpack Compose

   • Image(painter = painterResource(R.drawable.my_image), contentDescription = "My Image")

   • Native Android XML

   • <ImageView android:src="@drawable/my_image" android:contentDescription="My Image" />

8. Row / Column

   • Jetpack Compose

   • Column { /* Add children here */ } or Row { /* Add children here */ }

   • Native Android XML

     <LinearLayout android:orientation="vertical|horizontal">

9. Spacer

   • Jetpack Compose

   • Spacer(modifier = Modifier.height(16.dp))

   • Native Android XML
   • Use Margins

10. Surface

    • Jetpack Compose

    • Surface(color = Color.Blue) { /* Add children here */ }

    • Native Android XML

    • <LinearLayout android:background="@color/blue">

11. Box

    • Jetpack Compose

    • Box { /* Add children here */ }

    • Native Android XML

    • <FrameLayout>

12. ScrollableColumn / ScrollableRow

    • Jetpack Compose

      Column(modifier = Modifier.verticalScroll(rememberScrollState())) { /* Add scrollable content here */ }

    • Native Android XML

    • <ScrollView>

13. 
    

14. AlertDialog

    • Jetpack Compose

    • AlertDialog(onDismissRequest = { /* Handle dismiss */ }, buttons = { /* Add buttons here */ })

    • Native Android XML

    • Custom implementation using AlertDialog.Builder or DialogFragment.

15. Snackbar

    • Jetpack Compose

    • SnackbarHost { /* Show snackbar using scaffoldState */ }

    • Native Android XML

    • Snackbar.make(view, "Message", Snackbar.LENGTH_SHORT).show()

16. BottomNavigation

    • Jetpack Compose

    • BottomNavigation { /* Add navigation items here */ }

    • Native Android XML

    • BottomNavigationView