Jetpack Compose UI elements Vs XML UI Elements

Jetpack Compose UI elements to their XML counterparts

Jetpack Compose vs XML UI Elements:

Text

• Jetpack Compose: Text("Hello")
• XML: <TextView android:text="Hello"/>

TextField

• Jetpack Compose: TextField(value = "", onValueChange = { ... })
• XML: <EditText android:text="" android:onTextChanged="..."/>

Button

• Jetpack Compose: Button(onClick = { ... }) { Text("Click Me") }
• XML: <Button android:text="Click Me" android:onClick="..."/>

FloatingActionButton

• Jetpack Compose: FloatingActionButton(onClick = { /* Do something */ }) { Icon(Icons.Filled.Add, contentDescription = "Add") }
• XML: <com.google.android.material.floatingactionbutton.FloatingActionButton android:src="@drawable/ic_add" />

Image

• Jetpack Compose: Image(painter = painterResource(id = R.drawable.image), contentDescription = null)
• XML: <ImageView android:src="@drawable/image" android:contentDescription=""/>

Column

• Jetpack Compose: Column { ... }
• XML: <LinearLayout android:orientation="vertical"> ... </LinearLayout>

Row

• Jetpack Compose: Row { ... }
• XML: <LinearLayout android:orientation="horizontal"> ... </LinearLayout>

Box

• Jetpack Compose: Box { ... }
• XML: <FrameLayout> ... </FrameLayout>

ConstraintLayout

• Jetpack Compose: ConstraintLayout { /* Constraints and children */ }
• XML: <androidx.constraintlayout.widget.ConstraintLayout />

LazyColumn

• Jetpack Compose: LazyColumn { items(items) { ... } }
• XML: <RecyclerView> ... </RecyclerView>

LazyRow

• Jetpack Compose: LazyRow { items(items) { ... } }
• XML: <RecyclerView android:orienttation="horizontal"> ... </RecyclerView>

FlowRow

• Jetpack Compose: FlowRow { /* Children */ }
• XML: <com.google.android.flexbox.FlexboxLayout />

FlowColumn

• Jetpack Compose: FlowColumn { /* Children */ }
• XML: <com.google.android.flexbox.FlexboxLayout android:orientation="vertical" />

Grid

• Jetpack Compose: LazyVerticalGrid(cells = GridCells.Fixed(2)) { /* Items */ }
• XML: <GridView />

Checkbox

• Jetpack Compose: Checkbox(checked = false, onCheckedChange = { ... })
• XML: <CheckBox android:checked="false" android:onCheckedChange="..."/>

RadioButton

• Jetpack Compose: RadioButton(selected= isSelected, onClick= { ... })
• XML: <RadioButton android:checked="true" />

Switch

• Jetpack Compose: Switch(checked = false, onCheckedChange = { ... })
• XML: <Switch android:checked="false" android:onCheckedChange="..."/>

Slider

• Jetpack Compose: Slider(value = 0f, onValueChange = { ... })
• XML: <SeekBar android:progress="0" android:onSeekBarChange="..."/>

ProgressBar

• Jetpack Compose: CircularProgressIndicator() or LinearProgressIndicator()
• XML: <ProgressBar android:indeterminate="true" />

Card

• Jetpack Compose: Card { ... }
• XML: <CardView> ... </CardView>

Surface

• Jetpack Compose: Surface { ... }
• XML: <FrameLayout> ... </FrameLayout> (with background, padding, etc.)

Spacer

• Jetpack Compose: Spacer(modifier = Modifier.height(16.dp))
• XML: <View android:layout_height="16dp" android:layout_width="match_parent"/>

Divider

• Jetpack Compose: Divider()
• XML: <View android:layout_height="1dp" android:layout_width="match_parent" android:background="?android:attr/listDivider"/>

Scaffold

• Jetpack Compose: Scaffold(topBar = { TopAppBar(title = { Text("Title") }) })
• XML: Requires a combination of various views in XML to achieve a similar layout.

Scaffold with Bottom Navigation

• Jetpack Compose: Scaffold(bottomBar = { BottomNavigation { /* Items */ } })
• XML: Combination of <androidx.coordinatorlayout.widget.CoordinatorLayout> and <com.google.android.material.bottomnavigation.BottomNavigationView>

TopAppBar

• Jetpack Compose: TopAppBar(title = { Text("Title") })
• XML: <androidx.appcompat.widget.Toolbar android:title="Title" />

BottomAppBar

• Jetpack Compose: BottomAppBar { /* Content */ }
• XML: <com.google.android.material.bottomappbar.BottomAppBar />

TabRow

• Jetpack Compose: TabRow(selectedTabIndex = 0) { /* Tabs */ }
• XML: <com.google.android.material.tabs.TabLayout />

ModalDrawer

• Jetpack Compose: ModalDrawer(drawerContent = { /* Drawer content */ }) { /* Content */ }
• XML: <androidx.drawerlayout.widget.DrawerLayout />

DrawerLayout

• Jetpack Compose: ModalDrawer(drawerContent = { /* Drawer content */ }) { /* Content */ }
• XML: <androidx.drawerlayout.widget.DrawerLayout />

NavigationHost

• Jetpack Compose: NavHost(navController, startDestination = "start") { composable("start") { /* Screen content */ } }
• XML: Requires NavHostFragment and NavGraph definitions

NavigationRail

• Jetpack Compose: NavigationRail { /* Items */ }
• XML: <com.google.android.material.navigationrail.NavigationRailView />

AlertDialog

• Jetpack Compose: AlertDialog(onDismissRequest = { /* Dismiss */ }, confirmButton = { Button(onClick = { /* Confirm */ }) { Text("OK") } }, dismissButton = { Button(onClick = { /* Dismiss */ }) { Text("Cancel") } }, title = { Text("Title") }, text = { Text("Message") })
• XML: Requires usage of AlertDialog.Builder in Kotlin/Java

Pager

• Jetpack Compose: HorizontalPager(count = 10) { page -> /* Page content */ }
• XML: <androidx.viewpager2.widget.ViewPager2 />

DropdownMenu

• Jetpack Compose: DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) { DropdownMenuItem(onClick = { /* Handle click */ }) { Text("Item 1") } }
• XML: Combination of <Spinner> or <PopupMenu>

Snackbar

• Jetpack Compose: Snackbar { Text("This is a snackbar") }
• XML: Snackbar.make(view, "This is a snackbar", Snackbar.LENGTH_LONG).show()

Canvas

• Jetpack Compose: Canvas(modifier = Modifier.size(200.dp)) { drawCircle(Color.Red, radius = 50f) }
• XML: Custom drawing with android.view.View and overriding onDraw() method

OutlinedButton

• Jetpack Compose: OutlinedButton(onClick = { /* Do something */ }) { Text("Click me") }
• XML: <Button style="?attr/borderlessButtonStyle" android:text="Click me" />

IconButton

• Jetpack Compose: IconButton(onClick = { /* Do something */ }) { Icon(Icons.Filled.Favorite, contentDescription = "Favorite") }
• XML: <ImageButton android:src="@drawable/ic_favorite" />

RadioButtonGroup

• Jetpack Compose: Column { radioOptions.forEach { item -> RadioButton(selected = (item == selectedOption), onClick = { onOptionSelected(item) }) } }
• XML: Combination of <RadioGroup> and <RadioButton>

TopAppBar with Actions

• Jetpack Compose: TopAppBar(title = { Text("Title") }, actions = { IconButton(onClick = { /* Do something */ }) { Icon(Icons.Filled.Search, contentDescription = "Search") } })
• XML: <androidx.appcompat.widget.Toolbar> with <menu> for actions

Chip

• Jetpack Compose: Chip(onClick = { /* Do something */ }) { Text("Chip") }
• XML: <com.google.android.material.chip.Chip android:text="Chip" />

ChipGroup

• Jetpack Compose: ChipGroup { chips.forEach { chip -> Chip(onClick = { /* Do something */ }) { Text(chip) } } }
• XML: <com.google.android.material.chip.ChipGroup>

CircularProgressIndicator (determinate)

• Jetpack Compose: CircularProgressIndicator(progress = progress)
• XML: <ProgressBar android:progress="50" style="?android:attr/progressBarStyleHorizontal" />

BottomNavigation

• Jetpack Compose: BottomNavigation { BottomNavigationItem(icon = { Icon(Icons.Filled.Home, contentDescription = "Home") }, label = { Text("Home") }, selected = true, onClick = { /* Do something */ }) }
• XML: <com.google.android.material.bottomnavigation.BottomNavigationView>

NavigationDrawer (Permanent)

• Jetpack Compose: PermanentDrawer(drawerContent = { /* Drawer content */ }) { /* Main content */ }
• XML: <androidx.drawerlayout.widget.DrawerLayout>

Swipe to Refresh

• Jetpack Compose: SwipeRefresh(state = rememberSwipeRefreshState(isRefreshing), onRefresh = { /* Refresh */ }) { /* Content */ }
• XML: <androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Tooltips

• Jetpack Compose: TooltipArea(tooltip = { Text("Tooltip text") }) { Text("Hover over me") }
• XML: No direct equivalent, would need to use a custom view or third-party library.

Badge

• Jetpack Compose: BadgeBox(badgeContent = { Text("3") }) { Icon(Icons.Filled.Email, contentDescription = "Email") }
• XML: <com.google.android.material.badge.BadgeDrawable> (set programmatically)

Expandable Card

• Jetpack Compose: var expanded by remember { mutableStateOf(false) } Card(onClick = { expanded = !expanded }) { /* Content, handle expansion */ }
• XML: Requires custom implementation with animations and state handling.

BottomSheetScaffold

• Jetpack Compose: BottomSheetScaffold(sheetContent = { /* Sheet content */ }) { /* Main content */ }
• XML: <com.google.android.material.bottomsheet.BottomSheetBehavior>

LazyGrid (Staggered)

• Jetpack Compose: LazyVerticalStaggeredGrid(cells = StaggeredGridCells.Fixed(2)) { /* Items */ }
• XML: <androidx.recyclerview.widget.StaggeredGridLayoutManager>

SystemBarsPadding

• Jetpack Compose: Box(modifier = Modifier.systemBarsPadding()) { /* Content */ }
• XML: Use android:fitsSystemWindows="true" or custom padding handling.

Shimmer Effect

• Jetpack Compose: Shimmer(modifier = Modifier.fillMaxSize()) { /* Shimmer content */ }
• XML: Third-party library like Facebook’s Shimmer library.

Placeholder

• Jetpack Compose: Placeholder(visible = isLoading, highlight = PlaceholderHighlight.shimmer())
• XML: Custom implementation using View visibility and animations.

Popup

• Jetpack Compose: Popup(alignment = Alignment.Center) { /* Popup content */ }
• XML: PopupWindow or androidx.appcompat.widget.PopupMenu

LinearProgressIndicator

• Jetpack Compose: LinearProgressIndicator(progress = progress)
• XML: <ProgressBar android:progress="50" style="?android:attr/progressBarStyleHorizontal" />

Image Slider

• Jetpack Compose: HorizontalPager(count = images.size) { page -> Image(painter = rememberImagePainter(data = images[page]), contentDescription = null) }
• XML: ViewPager2 with a custom adapter.

AnimatedVisibility

• Jetpack Compose: AnimatedVisibility(visible = isVisible) { /* Content */ }
• XML: Custom implementation using View visibility and animations.

Lottie Animation

• Jetpack Compose: LottieAnimation(composition, progress)
• XML: <com.airbnb.lottie.LottieAnimationView android:src="@raw/animation" />

Modifier.padding

• Jetpack Compose: Box(modifier = Modifier.padding(16.dp)) { /* Content */ }
• XML: android:padding="16dp"

Modifier.fillMaxSize

• Jetpack Compose: Box(modifier = Modifier.fillMaxSize()) { /* Content */ }
• XML: android:layout_width="match_parent" android:layout_height="match_parent"

Modifier.wrapContentSize

• Jetpack Compose: Box(modifier = Modifier.wrapContentSize()) { /* Content */ }
• XML: android:layout_width="wrap_content" android:layout_height="wrap_content"

Modifier.align

• Jetpack Compose: Box(modifier = Modifier.align(Alignment.Center)) { /* Content */ }
• XML: android:layout_gravity="center"

Modifier.background

• Jetpack Compose: Box(modifier = Modifier.background(Color.Red)) { /* Content */ }
• XML: android:background="@android:color/holo_red_dark"

Modifier.border

• Jetpack Compose: Box(modifier = Modifier.border(2.dp, Color.Black)) { /* Content */ }
• XML: Custom implementation with ShapeDrawable or similar.

Modifier.clip

• Jetpack Compose: Image(painter = painterResource(id = R.drawable.image), contentDescription = null, modifier = Modifier.clip(RoundedCornerShape(8.dp)))
• XML: android:scaleType="centerCrop" with a RoundedCorner background drawable.

Modifier.size

• Jetpack Compose: Box(modifier = Modifier.size(100.dp)) { /* Content */ }
• XML: android:layout_width="100dp" android:layout_height="100dp"

Modifier.aspectRatio

• Jetpack Compose: Box(modifier = Modifier.aspectRatio(1f)) { /* Content */ }
• XML: Custom implementation using ConstraintLayout or AspectRatioFrameLayout.

Modifier.offset

• Jetpack Compose: Box(modifier = Modifier.offset(x = 10.dp, y = 10.dp)) { /* Content */ }
• XML: android:layout_marginLeft="10dp" android:layout_marginTop="10dp"

Modifier.zIndex

• Jetpack Compose: Box(modifier = Modifier.zIndex(2f)) { /* Content */ }
• XML: android:elevation="2dp"

Keyword

#Jetpack #Jetpack Compose #JetpackComposeUI #XML #UIkit #UIToolKet #KotlinProgramming #AndroidDevLife #GradleBuilds #AndroidApps #KotlinCoder #GoogleAndroidDev #KotlinLove #AndroidStudio #SoftwareDevelopmentLifeCycle #LinkedInTips #KotlinCommunity #AndroidCoding #GradleConfig #KotlinCode #AndroidSDK #GradleDependencies #AndroidDevelopmentTips #KotlinExperts #KotlinApps #AndroidLife #GoogleDevelopersGroup #GradlePlugin #Java #Activity #AndroidActivity #AndroidApp

Clapping free icons designed by berkahicon