Handling state dependent content in Jetpack Compose

Joseph Jazdzewski — Sat, 25 Jan 2020 05:01:32 +0000

For almost all projects there will be state dependent content, this could be anything from error messages to whole pages. Different component based frameworks handle this issue differently. We will look at React and Angular's approaches and then look at the way Jetpack Compose handles it.

Angular

For example Angular's most common example is *ngIf

<element *ngIf="someState"></element>

The display logic is handled in the template file rather than the typescript file, this approach separates template logic and state logic. The template logic is very straight forward and readable for any new developer to understand.

React

React handles state dependent content in a not as straight forward way.

<>
    {
        this.state.someState && <p>some text</p>
    }
</>

If you are not familiar with this syntax, it functions the same as an "if statement". In the code above, if "this.state.someState" is defined and is not false, [], {}, "", or 0 then <p>some text</p> will appear. This syntax is not completely straight forward to all developers.

JetPack Compose

Jetpack Compose combines these two approaches to produce a very straight forward and readable way to have state dependent content. If we are creating a carousel for our app, that changes the view when the next button is clicked.

In the code above, you can see that the render part of the code has a few "if statements" in it, which combines the previous two approaches when rendering state dependent content. Where there is no distinction between template and state logic and keeps the "if statement" more readable

Creating a Counter App using Android Jetpack Compose

Joseph Jazdzewski — Wed, 08 Jan 2020 20:43:03 +0000

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

DEV Community: Joseph Jazdzewski