Jetpack Compose UI elements 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()
orLinearProgressIndicator()
- 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
andNavGraph
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 overridingonDraw()
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
orandroidx.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 aRoundedCorner
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
orAspectRatioFrameLayout
.
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