Image for post
Image for post

Animation in an application has a significant role because it helps to provide a better user experience and makes your application more attractive.

Jetpack Compose provides a nice API for creating animations in our application. We can do any type of animation, for example, alpha or scale animations. In this tutorial, we will learn how to create and use animations in Jetpack Compose

Let’s assume that we developing a news app, which shows us the latest news as a list. And we want every item in the list to slide in from the right side.

First, let’s create class ListItemAnimationDefinition…


Image for post
Image for post

Introduction

“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”. — Android Developers

As we can see nowadays mobile development changes so fast, and many frameworks and tools now available to create an Android application. Now it’s time when frameworks and tools such as SwiftUI, Flutter, Jetpack Compose which use a declarative way of programming growing so fast.

Despite that Jetpack Compose is still in alpha version, it has made a lot if interest and discussion around it. …


Image for post
Image for post

As we can see Jetpack Compose grows like crazy. Last week they announced that Jetpack Compose went to Beta! Today we will talk about how to create bottom sheets in Jetpack Compose.

To implement the bottom sheet, we need to use BottomSheetScaffold. It was annotated as an ExperimentalApi, so to use it we need to add @ExperimentalMaterialApi annotation to the method where we will use.

Let’s look at this code block closely.

First, we define bottomSheetScaffoldState which will hold the state of BottomSheetScaffold. In turn it holds drawerState, bottomSheetState, snackbarHostState. In this tutorial, we focus only on bottomSheetState

sheetContent


Image for post
Image for post

In the post before we learned how to create Shapes with cut corners. Today we will continue and add some new functionality such as rounded corners to our ShapeableView.

In previous examples, we had two corner types which were CUT and NONE. Let’s add ROUNDED corner type to our enum class.

enum class CornerType {
CUT,
ROUNDED,
NONE
}

Also, we add when expression to control which corner type selected for every corner:

when (decoration.topStart.type) {
CornerType.CUT, CornerType.NONE -> {
moveTo(0f, topStartSize)
lineTo(topStartSize, 0f)
}
CornerType.ROUNDED_IN -> {
// There will be our code
}
}

We will use arcTo…


Image for post
Image for post

Declarative way programming becomes so popular nowadays. There are a lot of frameworks such as Flutter, SwiftUI, JetPack Compose which use this way of programming. Until recently Flutter and SwiftUI were the only frameworks that allow you to develop cross-platform applications using the same codebase. But today, meet new framework Compose for Desktop.

Compose for Desktop is a UI framework port for developing applications for macOS, Linux, Windows. It uses the core Compose repository developed by Google. It is currently in the alpha version, but despite that, we will try to create a simple app using it.

Usage

For developing applications…


Image for post
Image for post

In the previous story, I talked about how to create a different types of shapes in Jetpack Compose.

In Material Components we have a widget called ShapeableImageView. Today we will create the Composable View that allows having a different type of corners

In Material Components we have a widget called ShapeableImageView. It allows you to change the shape of your image to circle, diamond, and so on. And also, using this widget you can set a corner radius to your ImageView. Today we will create the Composable View that allows having a different type of corners

First, we need to…


Image for post
Image for post

There are times when when we need to create views with custom forms. For example card with rounded corners, or message view in our chat application. Jetpack Compose provides various tools for creating a different type of shapes without any difficulties.

Canvas

Canvas is a component that allows us to draw various types of shapes any things we want. According to official documentation we must to specify our canvas size.

*You MUST specify size with modifier, whether with exact sizes via [Modifier.size]
* modifier, or relative to parent, via [Modifier.fillMaxSize], [ColumnScope.weight], etc. …


Image for post
Image for post

When started to develop application for both platforms, I faced with problem that localize both apps taking so much time and it is not effective way. I tried various of online services but every of them has disadvantages or not worked as I want. So i decided to write my own application that converts Localizable.strings to strings.xml and also from strings.xml to Localizable.strings.

The application written completely on Kotlin with JavaFX to user interface.

The main features of application is

  1. Support different file extentions: .xml .strings .csv
  2. Show parsed key value pairs in user friendly interface


Image for post
Image for post

Couple days ago I received the task to make triangle progress bar in Android. I had some research to found any library which has functionality like this, but did not find anything. So I decided to write my own triangle seekbar which will has all features that I need. For example to show percentage on the triangle, or to change progress and background colors of it.

And here it is, TriangleSeekbar .

To add library add this to dependencies:

implementation 'com.github.agarasul:TriangleSeekbar:1.0.12'

Here attributes that you can customize easily.


Image for post
Image for post

Today we will learn how to fetch our news from the network and show it in our application. First of all, we need to add http to our dependencies. Open pubspec.yaml and add the following lines in the dependencies :

dependencies:
flutter:
sdk: flutter
http: ^0.12.0+2 // We need it to make network requests

After this open terminal and run: flutter pub get.

Now we should import in our main.dart file, open the main.dart file and add this line to the top:

import ‘package:http/http.dart’ as http;

Now we can use http to make network requests. We will fetch our news…

Rasul Aghakishiyev

Android Software Engineer. Interested in mobile development. In love with Jetpack Compose

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store