The JetPack Compose syntax changed so the code samples are not up to date

Intro

Before we create the app, I must first introduce you to Jetpack Compose. Google's new UI component Framework for Android development. Jetpack Compose uses the same UI rendering as Flutter, where it doesn't use the native Android UI elements but draw's it own UI elements on the screen. The way you create UI components is also very similar to React with Hooks.

With any new component based library or framework, the first thing we MUST (At this point I think that it is required) do is build a counter app. In this app I will go over some basic functionality (including +state) and overview of Jetpack Compose. At the moment I couldn't find any documentation on how to use +state so I thought I would write up a tutorial for anyone looking to learn more about JetPack Compose.

Setup

As of today (1/8/20), in order to use Jetpack Compose you will need to install the Canary build of Android Studio. In order to set up your project you will have to follow the steps provided by the Android Team (this link is pointed to the compose setup page).

Code

Counter

As you can see that fun Counter is a function just like React Hooks function components but in this case our function has the @Composable decorator. val count = +state{0} is similar to the react hooks' useState const [count, setCount] = useState(0) except there is no setCount that is being produced from +state. The state manipulation is simple with count.value++ and count.value--. Once either button is clicked we will be changing the value of the count and the UI will update.

MainActivity

The MainActivity is really simple, we set the content of MainActivity to our App component which calls our Counter component and that is it. Short simple and straight to the point. There is more to JetPack Compose but I thought that this would be a good start for basic functionality

For more information on JetPack Compose