kodecocodes/jet-materials

The projects and the materials that accompany the Jetpack Compose book

Jetpack Compose by Tutorials: Materials

This repo contains all the downloadable materials and projects associated with the Jetpack Compose by Tutorials from Kodeco.

Each edition has its own branch, named editions/[EDITION]. The default branch for this repo is for the most recent edition.

Forum

We’ve set up an official forum for the book at https://forums.kodeco.com/c/books/jetpack-compose-by-tutorials. This is a great place to ask questions about the book or to submit any errors you may find.

Release History

Branch	Edition	Release Date
editions/1.0	1.0	2021-02-13
editions/1.1	1.1	2021-05-07
editions/2.0	2.0	2023-03-29

jet-materials's Issues

constraintlayout-compose version update

Chapter 9:
module level build file.

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

This version no longer works, please replace it with

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

useIR = true is required to build examples

All of the examples should have their build.gradle scripts updated to include android.kotlinOptions.useIR = true or to include the following block of alpha flags. Without these changes, the samples do not currently build in many Android Studio setups due to mixed Kotlin 1.4 and 1.3 compilers being used simultaneously.

This isn't supposed to be required because the documentation calls out that Jetpack Compose opts you in automatically, but it does not. https://kotlinlang.org/docs/whatsnew14.html#new-jvm-ir-backend

tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
    kotlinOptions {
        jvmTarget = "1.8"
        freeCompilerArgs += ["-Xallow-jvm-ir-dependencies", "-Xskip-prerelease-check"]
    }
}

Chapter 3 displays warning/error as padding values are being set in scaffold content

AS Description in screenshot

Any fix will need to update the Chapter 3 examples for MyColumn and MyRow with fix

Divider issue in Chapter 09

The design / screenshot in chapter 9 was:

But with the code in the final directory, it is:

/**
 * Represents app drawer header with the icon and the app name
 */
@Composable
private fun AppDrawerHeader() {
  Column(
    modifier = Modifier.fillMaxWidth(),
    horizontalAlignment = Alignment.CenterHorizontally
  ) {
    Image(
      imageVector = Icons.Filled.AccountCircle,
      colorFilter = ColorFilter.tint(Color.LightGray),
      modifier = Modifier
        .padding(16.dp)
        .size(50.dp),
      contentScale = ContentScale.Fit,
      alignment = Alignment.Center,
      contentDescription = stringResource(id = R.string.account)
    )

    Text(
      text = stringResource(R.string.default_username),
      color = MaterialTheme.colors.primaryVariant
    )

    ProfileInfo()
  }

  Divider( // Here
    color = MaterialTheme.colors.onSurface.copy(alpha = .2f),
    modifier = Modifier.padding(
      start = 16.dp,
      end = 16.dp,
      top = 16.dp
    )
  )
}

Look at the Divider.

The code snippet in the book is:

@Composable
private fun AppDrawerHeader() {
  Column(
     modifier = Modifier.fillMaxWidth(),
     horizontalAlignment = Alignment.CenterHorizontally
  ) {
    Image(
       ...
    )

    Text(
       ...
    )
    ProfileInfo() // Add this
  }
 
  Divider( // Here
      ...
  )
}

Look at the Divider again, with the sample code the divider would be above the Column rather than below it.

This is something you guys could do better, it confused me when reading this, sample codes before chapter 8 never runs into such issues.

General problem with all examples: Book is behind the API changes

The book's examples are behind the API. I understand that the API changes quickly, but the value I was looking to get out of the book was to help me spend less time learning. I'm finding that I'm spending nearly all of my time researching and figuring out why the provided examples no longer compile after updating kotlin/gradle/android gradle plugin. As such, the book is not a productivity or learning accelerator for me as I hoped it would be, and I probably could learn faster without it.

That said, I'm only in chapter 2. Would you like me to make pull requests fixing the issues I find? If I do so, can I have a refund on the book?

Could there be a better example?

Hey guys, thanks for the fancy book! I'm reading through it now.

While reading this section:

From these examples, you can see that for this to work, the button should sometimes be constrained to the first name and sometimes to the last name, depending on which one is bigger.

I am a bit confused about this part.

Because the button is not sometimes to the left of the first, sometimes to the left of the last name.

It is, actually, can be constrained to either of them, because first name and last name, they are left aligned.

So I would suggest, if I was not mistaken the idea behind barrier, change the illustration a little bit, by placing the button to the right of the name texts, in this way, sometimes, first name is longer, so the button should be constrained to the end of the first name, and otherwise, constrained to the end of the last name.

Lemme know if this makes sense.
Thanks.

Crash at beginning cap. 11

This is the error:
Process: com.raywenderlich.android.jetreddit, PID: 10061
java.lang.NullPointerException
at androidx.compose.ui.res.ImageResources_androidKt.imageResource(ImageResources.android.kt:57)
at com.raywenderlich.android.jetreddit.components.PostKt.ImageContent(Post.kt:193)
at com.raywenderlich.android.jetreddit.components.PostKt$ImagePost$1.invoke(Post.kt:73)
at com.raywenderlich.android.jetreddit.components.PostKt$ImagePost$1.invoke(Post.kt:72)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
at com.raywenderlich.android.jetreddit.components.PostKt$Post$1.invoke(Post.kt:83)
at com.raywenderlich.android.jetreddit.components.PostKt$Post$1.invoke(Post.kt:79)

Chapter 14 project missing?

In Chapter 14, under Loading the Starter Project:

Next, navigate to 14-ui-tests-in-compose/projects and select the starter folder as the project root. Once the project opens, let it build and sync, and you’re ready to go!

However:

Am I missing something?
Thank you.

App crash on start - CH 12

Check out the final of Chapter 12 animation.

Build, no problem.
Run, crash, caused by:

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.raywenderlich.android.jetreddit, PID: 17430
    java.lang.RuntimeException: Canvas: trying to draw too large(132286200bytes) bitmap.
        at android.graphics.RecordingCanvas.throwIfCannotDraw(RecordingCanvas.java:266)
        at android.graphics.BaseRecordingCanvas.drawBitmap(BaseRecordingCanvas.java:97)
        at androidx.compose.ui.graphics.AndroidCanvas.drawImageRect-bgE79EM(AndroidCanvas.kt:275)
        at androidx.compose.ui.graphics.drawscope.CanvasDrawScope.drawImage-Yc2aOMw(CanvasDrawScope.kt:222)
        at androidx.compose.ui.node.LayoutNodeDrawScope.drawImage-Yc2aOMw(LayoutNodeDrawScope.kt:31)
        at androidx.compose.ui.graphics.drawscope.DrawScope$DefaultImpls.drawImage-Yc2aOMw$default(DrawScope.kt:464)
        at androidx.compose.ui.graphics.painter.ImagePainter.onDraw(ImagePainter.kt:55)
        at androidx.compose.ui.graphics.painter.Painter.draw-ty3CEPU(Painter.kt:212)
        at androidx.compose.ui.draw.PainterModifier.draw(PainterModifier.kt:268)
        at androidx.compose.ui.node.ModifiedDrawNode.performDraw(ModifiedDrawNode.kt:102)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:190)
        at androidx.compose.ui.node.ModifiedLayoutNode.performDraw(ModifiedLayoutNode.kt:79)
        at androidx.compose.ui.node.LayoutNodeWrapper$invoke$2.invoke(LayoutNodeWrapper.kt:204)
        at androidx.compose.ui.node.LayoutNodeWrapper$invoke$2.invoke(Unknown Source:0)
        at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:131)
        at androidx.compose.ui.node.OwnerSnapshotObserver.observeReads$ui_release(OwnerSnapshotObserver.kt:78)
        at androidx.compose.ui.node.LayoutNodeWrapper.invoke(LayoutNodeWrapper.kt:203)
        at androidx.compose.ui.node.LayoutNodeWrapper.invoke(Unknown Source:3)
        at androidx.compose.ui.platform.RenderNodeApi29.record(RenderNodeApi29.kt:156)
        at androidx.compose.ui.platform.RenderNodeLayer.updateDisplayList(RenderNodeLayer.kt:193)
        at androidx.compose.ui.platform.RenderNodeLayer.drawLayer(RenderNodeLayer.kt:174)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:185)
        at androidx.compose.ui.node.ModifiedLayoutNode.performDraw(ModifiedLayoutNode.kt:79)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:190)
        at androidx.compose.ui.node.ModifiedLayoutNode.performDraw(ModifiedLayoutNode.kt:79)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:190)
        at androidx.compose.ui.node.ModifiedLayoutNode.performDraw(ModifiedLayoutNode.kt:79)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:190)
        at androidx.compose.ui.node.LayoutNode.draw$ui_release(LayoutNode.kt:800)
        at androidx.compose.ui.node.InnerPlaceable.performDraw(InnerPlaceable.kt:131)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:190)
        at androidx.compose.ui.node.ModifiedLayoutNode.performDraw(ModifiedLayoutNode.kt:79)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:190)
        at androidx.compose.ui.node.LayoutNode.draw$ui_release(LayoutNode.kt:800)
        at androidx.compose.ui.node.InnerPlaceable.performDraw(InnerPlaceable.kt:131)
        at androidx.compose.ui.node.LayoutNodeWrapper$invoke$2.invoke(LayoutNodeWrapper.kt:204)
        at androidx.compose.ui.node.LayoutNodeWrapper$invoke$2.invoke(Unknown Source:0)
        at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:131)
        at androidx.compose.ui.node.OwnerSnapshotObserver.observeReads$ui_release(OwnerSnapshotObserver.kt:78)
        at androidx.compose.ui.node.LayoutNodeWrapper.invoke(LayoutNodeWrapper.kt:203)
        at androidx.compose.ui.node.LayoutNodeWrapper.invoke(Unknown Source:3)
        at androidx.compose.ui.platform.RenderNodeApi29.record(RenderNodeApi29.kt:156)
        at androidx.compose.ui.platform.RenderNodeLayer.updateDisplayList(RenderNodeLayer.kt:193)
        at androidx.compose.ui.platform.RenderNodeLayer.drawLayer(RenderNodeLayer.kt:174)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:185)
E/AndroidRuntime:     at androidx.compose.ui.node.ModifiedLayoutNode.performDraw(ModifiedLayoutNode.kt:79)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:190)
        at androidx.compose.ui.node.LayoutNodeDrawScope.drawContent(LayoutNodeDrawScope.kt:42)
        at androidx.compose.foundation.Background.draw(Background.kt:104)
        at androidx.compose.ui.node.ModifiedDrawNode.performDraw(ModifiedDrawNode.kt:102)
        at androidx.compose.ui.node.LayoutNodeWrapper$invoke$2.invoke(LayoutNodeWrapper.kt:204)
        at androidx.compose.ui.node.LayoutNodeWrapper$invoke$2.invoke(Unknown Source:0)
        at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:131)
        at androidx.compose.ui.node.OwnerSnapshotObserver.observeReads$ui_release(OwnerSnapshotObserver.kt:78)
        at androidx.compose.ui.node.LayoutNodeWrapper.invoke(LayoutNodeWrapper.kt:203)
        at androidx.compose.ui.node.LayoutNodeWrapper.invoke(Unknown Source:3)
        at androidx.compose.ui.platform.RenderNodeApi29.record(RenderNodeApi29.kt:156)
        at androidx.compose.ui.platform.RenderNodeLayer.updateDisplayList(RenderNodeLayer.kt:193)
        at androidx.compose.ui.platform.RenderNodeLayer.drawLayer(RenderNodeLayer.kt:174)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:185)
        at androidx.compose.ui.node.ModifiedLayoutNode.performDraw(ModifiedLayoutNode.kt:79)
        at androidx.compose.ui.node.LayoutNodeWrapper$invoke$2.invoke(LayoutNodeWrapper.kt:204)
        at androidx.compose.ui.node.LayoutNodeWrapper$invoke$2.invoke(Unknown Source:0)
        at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:131)
        at androidx.compose.ui.node.OwnerSnapshotObserver.observeReads$ui_release(OwnerSnapshotObserver.kt:78)
        at androidx.compose.ui.node.LayoutNodeWrapper.invoke(LayoutNodeWrapper.kt:203)
        at androidx.compose.ui.node.LayoutNodeWrapper.invoke(Unknown Source:3)
        at androidx.compose.ui.platform.RenderNodeApi29.record(RenderNodeApi29.kt:156)
        at androidx.compose.ui.platform.RenderNodeLayer.updateDisplayList(RenderNodeLayer.kt:193)
        at androidx.compose.ui.platform.RenderNodeLayer.drawLayer(RenderNodeLayer.kt:174)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:185)
        at androidx.compose.ui.node.LayoutNode.draw$ui_release(LayoutNode.kt:800)
        at androidx.compose.ui.node.InnerPlaceable.performDraw(InnerPlaceable.kt:131)
        at androidx.compose.ui.node.LayoutNodeWrapper.draw(LayoutNodeWrapper.kt:190)
        at androidx.compose.ui.node.ModifiedLayoutNode.performDraw(ModifiedLayoutNode.kt:79)
        at androidx.compose.ui.node.LayoutNodeWrapper$invoke$2.invoke(LayoutNodeWrapper.kt:204)
        at androidx.compose.ui.node.LayoutNodeWrapper$invoke$2.invoke(Unknown Source:0)
        at androidx.compose.runtime.snapshots.Snapshot$Companion.observe(Snapshot.kt:1710)
        at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:126)
        at androidx.compose.ui.node.OwnerSnapshotObserver.observeReads$ui_release(OwnerSnapshotObserver.kt:78)
        at androidx.compose.ui.node.LayoutNodeWrapper.invoke(LayoutNodeWrapper.kt:203)
        at androidx.compose.ui.node.LayoutNodeWrapper.invoke(Unknown Source:3)
        at androidx.compose.ui.platform.RenderNodeApi29.record(RenderNodeApi29.kt:156)
        at androidx.compose.ui.platform.RenderNodeLayer.updateDisplayList(RenderNodeLayer.kt:193)
        at androidx.compose.ui.platform.AndroidComposeView.dispatchDraw(AndroidComposeView.kt:535)
        at android.view.View.draw(View.java:23896)
        at android.view.View.updateDisplayListIfDirty(View.java:22762)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5339)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5311)
        at android.view.View.updateDisplayListIfDirty(View.java:22709)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5339)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5311)
        at android.view.View.updateDisplayListIfDirty(View.java:22709)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5339)
E/AndroidRuntime:     at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5311)
        at android.view.View.updateDisplayListIfDirty(View.java:22709)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5339)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5311)
        at android.view.View.updateDisplayListIfDirty(View.java:22709)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5339)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5311)
        at android.view.View.updateDisplayListIfDirty(View.java:22709)
        at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:602)
        at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:608)
        at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:684)
        at android.view.ViewRootImpl.draw(ViewRootImpl.java:5305)
        at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:5013)
        at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:4106)
        at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:2831)
        at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:10311)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1063)
        at android.view.Choreographer.doCallbacks(Choreographer.java:845)
        at android.view.Choreographer.doFrame(Choreographer.java:780)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1048)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loopOnce(Looper.java:226)
        at android.os.Looper.loop(Looper.java:313)
        at android.app.ActivityThread.main(ActivityThread.java:8641)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:567)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1133)