In this article, we’re going to talk about jetpack compose, its benefits and the components available, Jetpack compose is the new way to build UI for your android applications in a declarative manner.
Without wasting your time we are going to start with the definition of jetpack compose.
What is Jetpack compose
Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.
now that we have known what it is, its time to know it's benefits.
Benefits of Jetpack Compose
Concise and Idiomatic Kotlin
— Built with the benefits that Kotlin brings
Declarative
— Fully declarative for defining UI components
Compatible
— Compatible with existing views
Enable Beautiful Apps
— Designed with Material Design
100% Kotlin
– written in Kotlin programming language
Accelerate Development
— writing less code and using tools
One codebase
- No need to write XML anymore.
Less code
- Do more with less code and avoid entire classes of bugs, so code is simple and easy to maintain.
Accelerate Development
- Compatible with all your existing code so you can adopt when and where you want. Iterate fast with live previews and full Android Studio support.
Note:
- Jetpack Compose is currently in Developer Preview. The API surface is not yet finalized, and should not be used in production apps.
Below are a few terms we need to understand before we can be able to build awesome Android apps with jetpack compose.
1: Composable function (@Composable)
- These functions let you define your app's UI programmatically by describing its shape and data dependencies, rather than focusing on the process of the UI's construction. To create a composable function, just add the @Composable annotation to the function name.
2: @Preview Annotation
- the preview annotation lets you preview your composable functions within the IDE, instead of needing to download the app to an Android device or emulator.
3: Layouts
- UI elements are hierarchical, with elements contained in other elements. In Compose, you build a UI hierarchy by calling composable functions from other composable functions.
4: Column function
- The Column() function lets you stack elements vertically. The default settings stack all the children directly, one after another, with no spacing.
5: Material design
- Compose is built to support material design principles. Many of its UI elements implement material design out of the box.
6: Row function
- The Row () function lets you stack elements horizontally. The default settings stack all the children directly next to each other, with no spacing.
7: Stack() — A widget that positions its children relative to its edges. The component is useful for drawing children that overlap. The children will always be drawn in the order they are specified in the body of the [Stack]
8: FixedSpacer() — Component that represents an empty space with a given width and height.
9: VerticalScroller() — If the contents don’t fit the height, the drag gesture allows scrolling its content vertically. The contents of the VerticalScroller are clipped to the VerticalScroller’s bounds.
10: Padding() — Layout widget that takes a child composable and applies whitespace padding around it.
11: Container() — A convenience widget that combines common layout widgets for one child: padding, alignment, constraints, width, and height.
12: ConstrainedBox() —Widget that enforces additional [Constraints] to its only child. The ConstrainedBox will itself create a [Layout] which will take the same size that the child chooses.
13: Center()- A layout that takes a child and centers it within itself. The layout will be as large as possible for finite incoming constraints or wrap content otherwise.
14: Alignment() — Represents a positioning of a point inside a 2D box. [Alignment] is often used to define the alignment of a box inside a parent container.
15: AspectRatio() — Layout widget that attempts to size itself and a potential layout child to match a specified aspect ratio
16: WidthSpacer() — Component that represents an empty space with a fixed width and zero height. See FixSpacer below.
17: HeightSpacer() — Component that represents an empty space with fixed height and zero width. See FixedSpacer below.
18: FlexColumn() — A widget that places its children in a vertical sequence, assigning children widths according to their flex weights.
19: FlexRow()- A widget that places its children in a horizontal sequence, assigning children widths according to their flex weights.
I think we can work with the above listed, we what we have above we can call our selves " Champions ".
Alright, let's play with codes now.
Steps to build a jetpack compose app in Android Studio
we need Android studio 4.0 Canary1 installed on our machine if we have that installed proceed with the steps below.
Steps: click "file" -> "New" -> "New Project" -> "Empty Compose Activity"
then Android studio will automatically create a "Hello World" project for you.
you just created your first Jetpack Compose App Hurray.
check out my repo
https://github.com/wise4rmgod/JetpackCompose_HelloWorldApp
Top comments (1)
This is really a neat explanation. Thanks a lot.