In this post, I am going to explain about using the retrofit and recyclerview in jetpack compose with MVVM pattern. Everybody knows that the Jetpack Compose is a modern toolkit designed to simplify UI development.

Before jump in this example on retrofit and recyclerview. I have created posts on jetpack compose components, layouts, modifiers, and themes. go through this for a better understanding of jetpack compose.

Basic components — Jetpack Compose

Layouts — Jetpack Compose

Modifiers — Jetpack Compose

ConstraintLayout — Jetpack Compose

Theming — Jetpack Compose

Setup jetpack compose on android studio

Method 1 — Creating new Jetpack compose Project

Jetpack Compose implements Material Theming and supports a dark theme by default. You can customize color, typography, and shape theming values to fit your product’s brand, and get access to convenient functions for working with a system of dark themes (like isSystemInDarkTheme, lightColors, and darkColors).

The default MaterialTheme from the documentation looks like this:

MaterialTheme(
    colors = colors,
    typography = Typography,
    shapes = Shapes,
    content = content
)

We can set custom attributes:

• colors: A complete definition of the Material Color theme for this hierarchy.
• typography: A set of text styles to be used as this hierarchy’s typography system.
• shapes…

A Scaffold is a layout that implements the basic material design layout structure. You can add things like a TopBar, BottomBar, FAB, or a Drawer. Jetpack Compose provides Scaffold Composable which can save a lot of time. It’s like a prebuilt template.

If you’re new to Compose, I highly recommend going through the following articles:

Getting started with jetpack compose — Basic components

Getting started with jetpack compose — Layouts

Getting started with jetpack compose — Modifiers

Getting started with jetpack compose — ConstraintLayout

looks at my sample scaffold layout,

setContent {…

Modifiers are used to modifier certain aspects of how the component is displayed on the screen. The Modifier itself is an interface, so we don’t directly instantiate an instance of that — instead, we use the provided subclasses to decorate our component in some way.

If you’re new to Compose, I highly recommend going through the following articles:

Getting started with jetpack compose — Basic components

Getting started with jetpack compose — Layouts

Getting started with jetpack compose — ConstraintLayout

Getting started with jetpack compose — Scaffold layout

And when it comes to applying these modifiers, we can supply either…

ConstraintLayout can help place composable relative to others on the screen and is an alternative to using multiple nested Row, Column, Box, and custom layout elements. ConstraintLayout is useful when implementing larger layouts with more complicated alignment requirements. — Android Developers

If you’re new to Compose, I highly recommend going through the following articles:

Getting started with jetpack compose — Basic components

Getting started with jetpack compose — Layouts

Getting started with jetpack compose — Modifiers

Getting started with jetpack compose — Scaffold layout

To use ConstraintLayout in Compose, you need to add this dependency in your build.gradle:

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02"

Steps to setup constraintLayout in jetpack compose

• …

The Jetpack Compose implementation of the layout system has two main goals: being high-performant, and making it easy to write custom layouts. High performance is achieved in Compose by prohibiting measuring layout children more than once.

A Composable function might emit several UI elements. However, if you don’t provide guidance on how they should be arranged, Compose might arrange the elements in a way you don’t like.

If you’re new to Compose, I highly recommend going through the following articles:

Getting started with jetpack compose — Basic components

Getting started with jetpack compose — ConstraintLayout

Getting started with jetpack compose…

Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

To learn more about the jetpack compose internals, Please check the official documents. In this post, I am focusing on creating material components using jetpack compose.

Jetpack compose official page

Jetpack compose tutorial by android developers

If you’re new to Compose, I highly recommend going through the following articles:

Getting started with jetpack compose — Modifiers

Getting started with jetpack compose — Layouts

Getting started with jetpack…

We are using recyclerview, almost all of our android applications. It’s very useful to know about recyclerviews. in this post, I have explained all about animating recyclerview using the simple anim XML file.

Steps to animate recyclerview items in android

1. Create an animation XML files.
2. Apply the animation to the layout container.

Create an animation XML file

To create an animation XML layout, Create an anim directory in your res folder.