Loading...
Home
  • Tech Blogs
  • Videos
  • Conferences
    • Droidcon News
    • Upcoming Conferences
    • Become a Partner
    • Past Events
    • Keep Me Informed
    • Diversity Scholarships
  • Community
    • droidcon Team
    • How to Hold a Droidcon
  • Android Careers
Sign In

Global CSS

 

The Journey of Jetpack 🚀 — Compose [I]

 

 
Manuel Ernesto 💚🔥
|Software engineer | Kotlin & Firebase 🔥 lover | @GdgLubango Organizer
Published: July 27, 2020
Tweet
Share
 

 

Today we will continue our series about Android Jetpack, and for this post, we will cover Jetpack Compose.

 

What’s Jetpack Compose🧐

Jetpack Compose, is a modern toolkit for Android development and it’s the Google answer to simplify the development of UI in Android. Jetpack Compose is new and was announced last year at Google I/O 2019.

Jetpack Compose combines a reactive programming model with the conciseness and ease of use of the Kotlin programming language. It is fully declarative like we already see on flutter, Swift UI, and React Native.

In Jetpack Compose we describe the UI by calling functions that transform data into a UI hierarchy. That means when data changes, the framework automatically calls these functions, updating the UI.

Jetpack Compose still on the development phase, which means things will change a lot, and maybe when you read this post some features will be removed and others added.

In this article, we will see the basic aspects of Jetpack Compose by building a simple UI app.


Let’s go to the code 👨🏿‍💻

First, we need to create our project. Notice that Jetpack Compose just works on Android Studio Canary (4.2 canary 3 in my case).

 

Image for post

Android Studio 4.2 Canary 3

 

Clicking on “Create New Project” in Android Studio, we see a new project template “Empty Compose Activity”. Click on this template to set up a new Compose project.

 

Image for post

Creating Compose project | Android Studio 4.2 Canary 3

 

After creating the project, go to the build.gradle file and we will see that some important dependencies were added for Compose to work, We can also see the Compose was enabled in the buildFeatures session.

 

 

Now let’s open the MainActivity file and we will see code like this👇🏿.

 

Compose Activity Template

 

Let’s understand the code that was generated:

First, we see that we have a lambda function setContent, that is the function where the Compose code will be put. In this case we have a ComposeTheme function, and inside we also have a Composable function called Greeting. One important thing we need to know is that the app theme (ComposeTheme) used inside setContent depends on how your project is named. In this case our project is called Compose (or we can just rename the theme name).

 

A Compose app is made up of composable functions — just regular functions marked with @Composable annotation, which can call other composable functions. A function is all you need to create a new UI component. The annotation tells Compose to add special support to the function for updating and maintaining your UI over time. Compose lets you structure your code into small chunks. Composable functions are often referred to as “composables” for short.

 

We can also see a composable function called DefaultPreview with @Preview annotation, which means we can instantly view the preview of our code in Android Studio, as you can see in the screenshot below.

 

Image for post

windows for the preview

 

 

Components & Material Design

Jetpack Compose comes with Material Design components, which means from the beginning we have the beauty of Material Design to start building an amazing UI for our application. It also comes with dark mode in the theme. We can see that by convention, all components and functions starts with a capitalized letter. Some of the components are:

Text: is like TextView in XML file, which means we can display text and provide semantic and accessibility information.

Button: is like… you know, Button😁

Image: is like ImageView, it’s for putting images in our app.

Modifier: is a collection of elements that decorate or add behavior to Compose UI elements. For example, backgrounds, padding and click event listeners decorate or add behavior to rows, text or buttons.

Scaffold: is a component that implements the basic Material Design visual layout structure. It’s also used to combine several Material Components together to construct our screen.

Spacer: is a component that represents an empty space layout, whose size can be defined using the modifiers elements.

…

 

Row & Column

In Compose the easy way to create a layout is to use Row and/or Column.

Row: is like LinearLayout with Horizontal Orientation, which means its children will be placed in a horizontal sequence.

Column: is like LinearLayout with Vertical Orientation, as you can imagine, this means its children will be placed in a vertical sequence.

We also have ConstraintLayout, a Layout that positions its children according to the constraints between them.

 

Now let’s start to build our Placard app 🚀

 

Image for post

My placard app

 

First, we will create a Kotlin file called Team, and put inside it the model class with some variables. Notice that we add the @Drawable annotation, that means that the field will be a drawable resource reference.

 

 

On the MainActivity file, we will start to create our first composable function. This will be the function that will create the team item. In a column, we will put the title of the placard, followed by the team logo, team name, the field to show the score and the buttons that will allow us to increase the score. Notice that we have a 16.dp space between the components.

 

 

Now let’s create a Home function, which starts by instantiating the Team model. Notice that we put the reserved words “by state”, which means when the state of some value changes it will be automatically updated on the UI.

 

 

Below the instantiated model, we will call two times the TeamItem function, passing to each function the parameter we want. We also add another button to clear the score of the teams. In the onClick of the buttons, we pass to the variable team a copy of itself and the new value of scores.

 

 

Now, it’s time to add our AppBar. For doing that we will create a composable function called App, in which we will add a Scaffold. In the Scaffold, we pass as a parameter topAppBar and inside bodyContent call our Home function.

 

 

In the onCreate method, we just need to call our App composable function inside the theme. After that, we can run our app to see the result.

 

 

In case we want to just preview, instead of run our app, we just need to create a composable function with the annotation @Preview.

 

 

Now the final result 🎉

 

Image for post

My Placard | final result

 

That is it, don’t forget to see the full code on my 👇🏿

 

manuelernesto/myplacard_jetpack_compose

Contribute to manuelernesto/myplacard_jetpack_compose development by creating an account on GitHub.

github.com

 

The Journey of Jetpack 🚀 — Introduction

Hello There, today we will be starting a new journey of learning Android Jetpack. Android Jetpack was introduced from…

droidcon.com

 

Thanks 🙌🏿 to you for reading this post! Please do 👏🏿 if you liked it and want more posts about android development and Kotlin.

 

 

 

Tags: Jetpack Compose, Android, Jetpack, Android App Development, Kotlin

 

View original article at: 


 

Originally published: July 07, 2020

Android News
Evolution of Android Update SystemEvolution of Android Update System
Evolution of Android Update SystemEvolution of Android Update System

By Ivan Kuten

So, how can you update Android on mobile devices? While developing software for Smart TVs and Android-based set-top boxes, we’ve narrowed it down to four ways, discarding some very exotic options:

By ProAndroidDev -
Android News
Happy Railway
Happy Railway

By Hadi Lashkari Ghouchani

This post is on the tail of Railway Oriented Programming in Kotlin by Antony Harfield. So you need to read it first and continue here. As it’s obvious I really liked it and tried it out. It needs every process have a result like

By ProAndroidDev -
Android News
Unit Tests and Concurrency
Unit Tests and Concurrency

By Stojan Anastasov

Once Retrofit added RxJava support, RxJava became my go-to concurrency framework for writing Android apps. One of the great things about RxJava is the excellent testing support. It includes TestObserver, TestScheduler, RxJavaPlugins so you can switch your schedulers in tests.

By ProAndroidDev -
Android News
When Compat libraries will not save you
When Compat libraries will not save you

By Danny Preussler

And why you should avoid using the “NewApi” suppression! The idea of “Compat” libraries was probably one of the key aspects of Android dominating the mobile space. Other than with iOS, Android users often could not update their operating system after a new version launch, simply as their phones won’t allow them to, the Android problem of fragmentation.

 

By ProAndroidDev -
droidcon News

Tech Showcases,

Developer Resources &

Partners

/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/home-details/EmployerBrandingHeader
EmployerBrandingHeader
https://jobs.droidcon.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/jobs-droidcon/jobs.droidcon.com
jobs.droidcon.com

Latest Android Jobs

http://www.kotlinweekly.net/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/kotlin-weekly/Kotlin Weekly
Kotlin Weekly

Your weekly dose of Kotlin

https://proandroiddev.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/pad/ProAndroidDev
ProAndroidDev

Android Tech Blogs, Case Studies and Step-by-Step Coding

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
Zalando

Meet one of Berlin's top employers

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
Academy for App Success

Google Play resources tailored for the global droidcon community

Follow us

Team droidcon

Get in touch with us

Write us an Email

 

 

Quicklinks

> Code of Conduct

> Terms and Conditions

> How to hold a conference

> FAQs

> Imprint

Droidcon is a registered trademark of Mobile Seasons GmbH Copyright © 2020. All rights reserved.

powered by Breakpoint One