Skip to content
ESEN
Contact

Technology · Interfaces for Android

Interface development with Jetpack Compose

Jetpack Compose is the current way to build interfaces on Android: the screen is described with small pieces and adapts on its own to the state of the data and to the size of the device. We build new interfaces, prepare them for phone, foldable and tablet, and migrate old views without stopping the app.

Tell us about your project See an example

Often combined with

Fig. 01Extending frameCOMPACTMEDIUMEXPANDEDADAPTIVE LAYOUTLooping
Turning the crank widens the frame and the screen rearranges: one column on the phone, list and detail on the foldable, and a side menu on the tablet.

Situations

What you can solve with a Jetpack Compose interface

Compose pays off when the app has to look right on very different devices, carry your brand's look and change often without every tweak becoming a project.

  • A tablet showing a giant phone

    The same screen stretched wastes the space. With Compose the interface changes its arrangement with the width: two panes, a side menu or a single column.

  • Screens that are hard to tweak

    Design split between XML files and code, with duplicated styles. With reusable pieces the change is made once and reaches every screen.

  • A brand you can't recognize in the app

    Colors, type and shapes defined as a theme, with its light and dark versions, so the whole app inherits them without repeating them on every screen.

  • An app with XML views that has to be modernized

    There is no need to redo it. New screens are written in Compose and live alongside the old ones, which are replaced one by one.

The width meter: it shows when the screen changes its arrangement

What to check before starting

  • Which screen sizes it is used on: phone, foldable, tablet
  • Whether there is a design or a brand system to start from
  • Which screens exist today and what they are built with
  • Which minimum Android version is supported

Services

What we build with Jetpack Compose

Four kinds of job. The theme and the pieces come first; the screens come out of them.

  • Module 1 · Frame

    Screens and whole interfaces

    Lists, forms, detail views and navigation, with their empty, loading and error states, built on the app's real data and with Material components adapted to your brand.

    Examples of deliverables

    • List with search and filters
    • Step-by-step form
    • Detail view with actions
  • Module 2 · Width rule

    Adaptive layouts

    The interface prepared for phone, foldable and tablet: panes that appear when there is room, a menu that moves from the bottom to the side and content that doesn't stretch for no reason.

    Examples of deliverables

    • List and detail on a tablet
    • Screen for an open foldable
    • Side menu on wide screens
  • Module 3 · Theme drum

    Theme and design system

    Your brand's colors, type, shapes and components defined once, with light and dark mode, and documented so every new screen is assembled from them.

    Examples of deliverables

    • Light and dark brand theme
    • Component library
    • Components with previews
  • Module 4 · Adapter

    Gradual migration from XML views

    Old screens are replaced one by one. Compose and XML views live on the same screen if needed, so the migration doesn't force development to stop.

    Examples of deliverables

    • New screen in an old app
    • A Compose piece inside a view
    • Screen-by-screen migration plan

A working example

One screen, three widths

Working example on made-up data. Change the width of the device and the brand color: the screen rearranges and repaints itself, without anyone having drawn three versions.

Working example · sample data

Device width

Brand color

What the screen decides

The screen is drawn in your browser and is not a real Android app. It shows the behavior programmed with Compose: the arrangement depends on the space available and the look, on the theme.

Integration

How it fits your app

Jetpack Compose is the layer you see. Underneath are the app's data and rules, written in Kotlin, and around it, the views that already exist.

Where it comes from

Jetpack ComposeJetpack Compose interfaceadapts to state and width

Where it goes

  • Phonesone column
  • Foldables and tabletsseveral panes
  • Widgets and watchinformation at a glance
  • The iPhone version same design, in SwiftUI

Dependencies worth checking

  • Which minimum Android version the oldest devices have
  • Which screens depend on third-party components made for XML views
  • Whether the data is already separate from the screens or has to be separated
  • Which screen sizes your users really have

How we work and what we deliver

How we run a Jetpack Compose job

  1. 01

    Initial review

    We look at the screens that exist, what they are built with, which devices they are used on and the design we start from.

  2. 02

    Scope

    We write down which screens and pieces come in, for which widths, in which order the old ones are migrated and what stays out.

  3. 03

    First release

    The theme, the first pieces and one whole screen working inside your app, on real data.

  4. 04

    Validation

    You test it on a phone, a tablet and a foldable if there is one, with large text and in dark mode.

  5. 05

    Documentation

    The catalog of pieces with their previews and the rules for building new screens from them.

What you get when the job closes

  • The code of the screens, the theme and the pieces in your repository
  • A component catalog with previews
  • The migration plan for the remaining screens
  • The list of what is left out, and why

Questions

Questions about Jetpack Compose

Missing yours? Write it to info@veodar.com and we'll reply with a specific question, not a brochure.

Does the app have to be redone to use Jetpack Compose?

No. Compose and XML views live together: a Compose screen can include an old view and an old screen can include a Compose piece. The usual path is to start with new screens and with the ones touched most.

Is it worth adapting the app to tablets and foldables?

It depends on where it is used. If your team works on tablets or your customers have foldables, an interface that uses the width shows in every task. If everyone is on a phone, it is enough that the app doesn't break on large screens. We decide with the real devices.

Does Compose work on old devices?

It works on Android versions from quite a few years back, so it is rarely the limit. What is worth checking is performance on the most modest devices of the fleet, especially in long lists, and that is why it is tested on them.

Can I use my brand's colors and typeface?

Yes. Compose starts from Google's design system, Material, but the theme is defined with your colors, your type and your shapes. Components inherit them, and the ones you need different are built separately.

And the iPhone version?

On iPhone the equivalent is SwiftUI, which works on the same idea. The design and the names of the pieces are shared between the two systems even though the code is different. There is also a variant of Compose that runs on iOS; whether it pays off is weighed per project.

What about the screens that aren't migrated?

They keep working the same. The migration doesn't have to be complete: there are stable screens not worth touching. Which ones are migrated, which are left and why is written down.

Updated:

Related services

All services

Other technologies

What it is combined with

All technologies
  • Android app development in KotlinNative apps for the device fleet you have: phones, tablets and rugged work devices, with background tasks and peripherals.
  • SwiftUI interfacesScreens, your own components and widgets for iPhone, iPad and watch. We build new interfaces or migrate the UIKit ones screen by screen.
  • React Native app developmentOne codebase for iPhone and Android, with native modules where they are needed. We build new apps and continue the ones you already have.

Get started

Tell us which devices your app is used on.

A few screenshots of the screens and the devices it is used on are enough for a first answer.

What helps us assess it

  • Screenshots or design of the screens
  • What the app is built with today
  • Which devices it is used on
  • The minimum Android version
Tell us about your project info@veodar.com

Before you write, see how we price a project or our solutions by department.

Fig. 07Morse keyH · E · L · L · O