Advanced Android UI

Android provides multiple animation systems, and the right choice depends on whether you are using Jetpack Compose or the View system, and what you are trying to animate.

Animations in Jetpack Compose

Compose has a declarative animation API built around state changes. When state changes, Compose can smoothly interpolate between the old and new UI.

• animateFloatAsState / animateColorAsState / animateDpAsState: animate a single value when it changes. Simple and idiomatic. kotlin val alpha by animateFloatAsState(targetValue = if (visible) 1f else 0f) Box(modifier = Modifier.alpha(alpha)) { ... }
• AnimatedVisibility: animate the appearance/disappearance of content with enter/exit transitions (fade, slide, scale, expand, shrink).
• AnimatedContent: animate transitions between different content based on state.
• updateTransition: coordinate multiple animations between states.
• rememberInfiniteTransition: create repeating animations (loading spinners, pulsing effects).
• animate*AsState with spring / tween / keyframes: control the animation spec — spring physics, linear/eased timing, or explicit keyframes.

Compose animations are coroutine-based under the hood and are automatically cancelled and restarted when state changes, avoiding the callback hell of the old API.

Animations in the View system

Property Animator (preferred for Views)

Animates actual properties of a View object. Backed by ValueAnimator and ObjectAnimator. Because it modifies real properties, views respond correctly to touch after animation.

ObjectAnimator.ofFloat(view, "translationX", 0f, 100f).apply {
    duration = 300
    interpolator = DecelerateInterpolator()
    start()
}

AnimatorSet coordinates multiple animators (sequentially or in parallel).

View Animation (legacy, avoid for new code)

The original Animation class (AlphaAnimation, TranslateAnimation, ScaleAnimation, RotateAnimation) and AnimationUtils.loadAnimation(). These animate the visual representation of a view without changing its actual position/state — a click target stays at the original position even though the view appears to have moved. Largely replaced by Property Animator.

Transition Framework

TransitionManager.beginDelayedTransition() and the Transition API (including AutoTransition, Fade, ChangeBounds) animate layout changes automatically. The Navigation Component and Activity transitions use ActivityOptions and SharedElementTransition for inter-screen animations. Compose's Navigation library achieves the same with AnimatedNavHost.

Lottie

For complex, designer-authored animations (from Adobe After Effects), the Lottie library (com.airbnb.android:lottie) or Lottie-Compose is the standard industry approach. Animations are defined in a JSON format and rendered at runtime.

Common interview follow-up: "What is the difference between View Animation and Property Animation?" View Animation moves the drawn representation of a view but not the view itself — touch events still fire at the original location. Property Animation changes the actual property on the view object, so touch events follow the animated position.

A nine-patch image is a specially formatted PNG file with the extension .9.png that can be stretched to any size while keeping its corners and borders crisp. The "nine-patch" name comes from the fact that the image is divided into a 3×3 grid of nine sections: four corner patches that are never scaled, four edge patches that scale in only one axis, and one center patch that scales in both axes.

How it works

A nine-patch file has a 1-pixel transparent border added around the original image. Black pixels along this border encode the stretching rules:

• Left border: marks which rows of pixels are allowed to stretch vertically.
• Top border: marks which columns of pixels are allowed to stretch horizontally.
• Right border: marks the vertical padding zone (where content is placed inside the image).
• Bottom border: marks the horizontal padding zone.

Android reads these pixel hints at draw time and scales only the stretchable regions, preserving the appearance of rounded corners, shadows, and borders.

Where it is used

Nine-patches are used for backgrounds that must scale to different sizes while preserving visual details: buttons with rounded corners and shadows, chat bubbles, dialog backgrounds, input field decorations, and notification icons. They have been part of Android since API 1.

How to create one

Android Studio includes the nine-patch editor (right-click a .png → "Create 9-Patch file"). You can also use any image editor to paint the guide pixels manually.

Modern alternatives

In Jetpack Compose, nine-patches are less commonly needed because:

• Shape + Border + Shadow modifiers create scalable UI without bitmap images.
• DrawablePainter can still display a nine-patch if needed for legacy assets.
• Vector drawables (VectorPainter, Image(painter = painterResource(...))) scale to any size without quality loss and are now preferred for icons and simple shapes.
• NinePatchDrawable is still used in View-based code where a designer provides a nine-patch asset.

Nine-patches remain relevant when a designer supplies a bitmap background with complex visual effects (gradients, shadows, textures) that are impractical to recreate in code, particularly in View-based screens.

Android has a range of display densities across thousands of device models, so using the wrong unit of measurement causes layouts to look dramatically different on different screens. Knowing which unit to use where is a standard interview topic.

dp — density-independent pixels (use for layout dimensions)

dp (also written dip) is the standard unit for specifying view sizes, margins, padding, and any spatial dimension in a layout. 1 dp equals 1 physical pixel on a 160 dpi screen (the mdpi baseline). At higher densities, the system scales accordingly:

Using dp ensures a button that is 48 dp wide appears roughly the same physical size on all devices, as recommended by Material Design's minimum touch target guidelines.

sp — scale-independent pixels (use for text sizes)

sp is identical to dp except it also respects the user's preferred text size set in system accessibility settings. Always use sp for android:textSize / fontSize. Never use dp for text — it prevents users with visual impairments from benefiting from large-text accessibility settings.

px — pixels (avoid in layouts)

Absolute physical pixels on the screen. Using px means your layout will appear much smaller on a high-density screen and much larger on a low-density screen. Only use px when you must work directly with the pixel buffer — for example, in a custom Canvas drawing operation where you need exact pixel measurements, using TypedValue.applyDimension() to convert dp to px at runtime.

Other units (rarely used)

• in — physical inches. Rarely useful; devices report physical dimensions with varying accuracy.
• mm — millimeters. Same caveats as in.
• pt — points (1/72 of an inch). Rarely used on Android.

In Jetpack Compose

Compose uses the same underlying unit system but expresses values in Kotlin:

// dp
Modifier.padding(16.dp)
Modifier.size(48.dp)

// sp (text only)
Text(text = "Hello", fontSize = 16.sp)

The Dp and TextUnit (sp) types are separate in Compose, enforcing correct usage at the type level — you cannot accidentally pass a Dp where sp is expected.

Common gotcha: WindowManager.getDefaultDisplay() and similar APIs return pixel dimensions. Always convert to dp before using them in layout calculations to stay density-independent.

RecyclerView is the standard widget for displaying large, scrollable lists and grids in the View-based UI system. In Jetpack Compose, LazyColumn and LazyRow serve the same purpose with a cleaner API, so new Compose-based code uses those instead. However, RecyclerView is still widely used in existing codebases and is an important interview topic.

Core concept

RecyclerView recycles (recycles) view holders as items scroll off screen, reusing them for new items that scroll into view. This keeps memory usage constant regardless of list size — a list of 10,000 items only ever has ~20 or so view objects alive at a time.

Key components

• RecyclerView: the scrollable container widget placed in your layout.
• RecyclerView.Adapter: supplies views for items. You override onCreateViewHolder() to inflate a view, onBindViewHolder() to bind data to it, and getItemCount() to report the list size.
• RecyclerView.ViewHolder: caches references to views within an item, avoiding repeated findViewById calls on every bind.
• LayoutManager: controls how items are arranged. LinearLayoutManager (vertical or horizontal list), GridLayoutManager (grid), StaggeredGridLayoutManager (Pinterest-style variable-height grid).
• DiffUtil / ListAdapter: calculate the minimal set of changes when the data set updates, and animate only the changed items. ListAdapter wraps DiffUtil and is the modern way to write adapters — you call submitList() and it handles diffing on a background thread.

Modern usage with ListAdapter

class UserAdapter : ListAdapter(UserDiffCallback()) {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): UserViewHolder {
        val binding = ItemUserBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return UserViewHolder(binding)
    }

    override fun onBindViewHolder(holder: UserViewHolder, position: Int) {
        holder.bind(getItem(position))
    }

    class UserViewHolder(private val binding: ItemUserBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(user: User) {
            binding.nameText.text = user.name
        }
    }
}

class UserDiffCallback : DiffUtil.ItemCallback() {
    override fun areItemsTheSame(old: User, new: User) = old.id == new.id
    override fun areContentsTheSame(old: User, new: User) = old == new
}

In Jetpack Compose

LazyColumn replaces RecyclerView and is simpler to use:

LazyColumn {
    items(users, key = { it.id }) { user ->
        UserItem(user = user)
    }
}

key parameter is important — it tells Compose which composable corresponds to which data item, enabling correct animations and state preservation during list updates.

Common interview questions

• Why not use ListView? ListView is older and less efficient — it does not enforce view recycling and has no built-in DiffUtil support. RecyclerView replaced it.
• What is the difference between notifyDataSetChanged() and DiffUtil? notifyDataSetChanged() redraws the entire list (no animations, expensive). DiffUtil calculates and animates only the changed items (insertions, removals, moves).
• How do you handle click events on RecyclerView items? Pass a click lambda into the adapter or ViewHolder; avoid using android:onClick in item XML, which breaks item reuse.

Android provides a rich set of UI components. In Jetpack Compose these are composable functions; in the View system they are View subclasses. Both are commonly used in production codebases.

Text display

• TextView (View) / Text (Compose): displays text. Supports rich formatting, clickable spans, and HTML via Spannables in Views. In Compose, use AnnotatedString for styled text. Always use sp for font size.
• EditText (View) / TextField / OutlinedTextField (Compose): accepts user input. In Views, set android:inputType to control the keyboard type (text, number, email, password). In Compose, TextField is fully stateful and follows the unidirectional data flow pattern.

Images

• ImageView (View) / Image (Compose): displays images. For loading images from the network or disk, use Coil (Compose-first, Kotlin coroutines-based, recommended in 2026) or Glide/Picasso in View-based code. kotlin // Coil in Compose AsyncImage(model = url, contentDescription = "User avatar")

Buttons and selection

• Button / MaterialButton (View) / Button (Compose): triggers an action. Material 3 in Compose provides Button, OutlinedButton, TextButton, ElevatedButton, and FilledTonalButton variants.
• CheckBox (View) / Checkbox (Compose): binary on/off selection. In Compose, checkbox state is hoisted.
• RadioButton + RadioGroup (View) / RadioButton (Compose): single selection from a group. In Compose, manage the selected value in a state holder.
• Switch (View / Compose): toggle control. Material 3 provides an updated Switch composable.

Progress and loading

• ProgressBar (View) / CircularProgressIndicator / LinearProgressIndicator (Compose): determinate (shows progress value) or indeterminate (spinning). Use for loading states.

Scrolling and lists

• RecyclerView (View): the standard for large lists and grids in the View system. Uses Adapter + ViewHolder + LayoutManager.
• LazyColumn / LazyRow / LazyVerticalGrid (Compose): Compose equivalents that compose items on demand as they scroll into view.
• ScrollView / HorizontalScrollView (View): for simple scrollable content where RecyclerView is overkill. Not suitable for large datasets.
• NestedScrollView (View): supports nested scrolling — used to scroll a layout that contains a fixed-height RecyclerView inside a CoordinatorLayout.

Navigation and structure

• BottomNavigationView (View) / NavigationBar (Compose): Material Design bottom navigation bar for top-level destinations.
• Toolbar / AppBarLayout (View) / TopAppBar (Compose): application toolbar with title, navigation icon, and actions.
• ViewPager2 (View): horizontal swipe between pages (e.g., tabs, onboarding). In Compose, use HorizontalPager from the accompanist-pager / Compose Foundation library.

Dialogs and overlays

• AlertDialog (View) / AlertDialog composable (Compose): modal confirmation dialogs. Material 3 provides styled variants.
• Snackbar (View / Compose): brief feedback message that can include an action. In Compose, managed through SnackbarHostState inside a Scaffold.
• BottomSheetDialogFragment (View) / ModalBottomSheet (Compose): swipe-up panel for additional options or content.

Common interview gotcha: interviewers often ask "how would you display a list of 1 million items?" The answer is RecyclerView with DiffUtil and a paged data source (Jetpack Paging 3), or LazyColumn with collectAsLazyPagingItems() in Compose — never load all items into memory at once.