Search code examples
androidkotlinandroid-jetpack-composegoogle-codelab

Scaffold vs Surface


I'm going through some of the initial Android/Kotlin Google Codelabs. The current No Action template from Android Studio provides a code skeleton with a Scaffold top-level. But the Codelabs show Surface for that purpose instead. I'm assuming this is due to some historical shift? I commonly have to replace Scaffold with Surface in the generated skeleton code in order to get the behaviors described in the Codelabs (usually due to padding differences inherited through the Scaffold), which is annoying.

What's the difference between Scaffold and Surface for the top-level UI composition? What are the pros and cons of each? What's considered the Common Best Practice?


Solution

  • One reason why you should use Scaffold instead of Surface is because recently Google recommended that apps should use enableEdgeToEdge(). This is even enforced from Android 15 onwards.

    With edge-to-edge enabled your app takes the entire display size, from the top to the bottom edge of the display. That also means your app needs to properly handle overlaying status and system navigation bars, as well as drawing around insets like the camera notch.

    This can be handled automatically to a degree when you use Material 3 layout components like the Scaffold. The Scaffold provides a PaddingValues parameter to its content that you should apply with the padding modifier to the outermost content in the Scaffold. This will take care of resizing the rest of your app according to the insets, while still providing the fullscreen edge-to-edge view.

    That would be more difficult if you would use a Surface instead of a Scaffold.

    From the link above:

    Important: If your app is not already edge-to-edge, portions of your app may be obscured and you must handle insets. Depending on the app, this work may or may not be significant. The Material 3 Scaffold component can reduce the work required to be compatible with the Android 15 edge-to-edge enforcement.