DEV Community: Alejandro Zurcher

Full Android Release Lifecycle CLI Agent Skill

Alejandro Zurcher — Wed, 18 Feb 2026 10:02:28 +0000

I've put together some handy tools I'll be sharing. This is the first one.

The Android Release Bump skill handles the full release cycle of an Android app: version bump, localized release notes, build verification, signed bundle, and Play Console upload.

You type something like bump a new release for my-app and the agent takes it from there: analyzes your commits, recommends a version, generates release notes in 18+ locales, runs your tests, and uploads the bundle to Play Console.

It's a single markdown file any agent can run (Claude Code, Codex CLI, Cursor, Aider).

Check it out and let me know what you think.

https://github.com/zurche/agent-skills/blob/main/android-release-bump.md

Building High Quality Android UI: Embracing Test Driven Development with Jetpack Compose

Alejandro Zurcher — Tue, 18 Jul 2023 13:48:22 +0000

Cover Photo by David Watkis on Unsplash

How can we approach UI development in Android while ensuring we are writing high-quality software from the design spec? Test Driven Development (TDD) is a way of approaching software development that is very handy for both feature writing and bug fixing.

It provides a path for developers to request more information when needed before writing “just in case” software, also known as YAGNI (You Aren’t Gonna Need It), while fostering the creation of optimized code using the KISS principle (Keep It Simple, Stupid), I guess? Additionally, TDD is highly effective for writing code that is easy to update. Introducing a new test is straightforward once the suite is running, and tests are always there for you if you accidentally or intentionally decide to update the behavior of your software.

So, if we all agree that TDD is the way, let’s give it a try and attempt writing our UI with it using Jetpack Compose.

Plan

First, let’s consider a common scenario for a mobile engineer: receiving a new design specification for a brand new screen to be added to our app. For this exercise, I have chosen Taras Migulko’s fantastic work on an E-commerce app design from Dribbble.

Specifically, we will be implementing one of the UI elements of a clothing list of items, as depicted in the following screen:

Keeping this in mind, let’s set up our development environment. In this case, we will start a new project with Compose, assuming that this step has already been completed for the purpose of this sample.

I’ve created a default project using the templates of Android Studio for an Activity + Compose. Let’s make sure our project is including all the required libraries to do TDD in Compose:

Lastly, if we choose to follow a Test-Driven Development (TDD) approach, it is essential to remember and adhere to the three rules of TDD defined by Robert C. Martin, also known as Uncle Bob. These rules serve as our development traffic lights🚦when writing or updating any tests in the app:

Write production code only to pass a failing unit test.

Write no more of a unit test than sufficient to fail (compilation failures are failures).

Write no more production code than necessary to pass the one failing unit test.

By following these rules, we ensure that our development process remains focused and efficient.

🚦Action

The Design Spec is ready and the environment is set, so How do we approach a new piece of UI with a test?

This will depend on each framework used for UI, for this example we’ll be using Jetpack Compose so it becomes relevant to understand how to “Think in Compose”

With Compose is easy to dissect the UI into very small pieces that are described as Composables that will be put together to render the full UI.

So the first thing we’ll need to do Is have a close look into the UI to define how can we divide it and go from small to big.

Taking a first glance I’ve identified (at least) five different Composables that will conform this screen:

A top Action Bar which includes the Back, Name, Item Count and Filter action.
A main List of clothing items
Each Clothing Item
The Clothing Item Content (display name, price and the add to cart action button)
The Favourite Button

There’s already some added value in doing this as now we are starting to surface both reusable components such as the top action bar and also starting to think on naming for our composables, without even touching a single line of code.

So let’s go ahead and pick the smallest possible composable from our new screen; the Favourite Button.

Assuming this behaves as any favourite button this will have to support 2 states; filled heart and empty heart. Let’s write our first test:

Worth mentioning at this stage that we’ll be following the suggested documentation on Testing Compose so we also need to add the composeTestRule and initialise our screen using its setContent function:

Let’s now bring in our test condition

🔴 And when we write our Composable name (that still does not exist) we brake the second TDD rule; the test no longer compiles

To address this issue we create a new Kotlin file and write our Composable

And we go back to the test

🟢 Compilation issue addressed! We may continue writing the test now

So the test is ready and compiles, next step; let’s run it

🔴 We made it; we have a failing test now. Let’s follow TDD rules 1 and 2 now to make It pass before writing any new tests.

And I know what you are thinking, we are not checking the boolean! We are not supporting the other scenarios, we could write so much more code! But this, this is the exact point where you need to take that hat of and pick the TDD hat If you want to make the switch and only think: Are we following all the TDD rules? Yes, then Its ok, lets keep going.

🟢 Test is going fully green now, this means we are able to write the next test. So let’s try the other scenario our composable needs to support, displaying an empty heart if isFavourite is false.

🔴 And when we run it:

So once again, following TDD rule number 1 & 3 we go back to our composable and add the required logic to make this test pass, being careful enough that our previous test will work too this time.

And we make sure to run the entire suite now so that both tests are ran:

🟢 And we can see all our tests going green now!

Finally we can update our tests to make sure that the other icon is not displayed in the incorrect scenario.

With all of this in place we now have peace of mind that our Composable will do exactly what we need to, so we can take a pause on our Test writing and go to the Composable itself to make sure It looks as it should by adding Its background, colors and right sizing.

Conclusion

As you can see with this process of following just the 3 rules of TDD, stoping when requried 🔴 and moving on when we can 🟢 we can ensure that our UI will work as expected and is fully covered in case we want to update it in the future; a.k.a.: high quality software.

By incorporating Test-Driven Development (TDD) into our development process, we eliminate the guesswork associated with coding and relying on trial-and-error to verify functionality. Instead, our code is designed to precisely meet our requirements. TDD acts as a lighthouse, guiding us to write the necessary code while helping us identify any gaps in the requirements specification through thoughtful consideration.

Moreover, implementing TDD in Jetpack Compose is a straightforward process, as we have seen. This approach resolves any potential issues during the design phase, allowing us to confidently write our user interface (UI) knowing that it will seamlessly integrate with the business logic layers in the future.

In upcoming posts I’ll continue developing this entire screen with TDD for now I encourage you to embrace TDD from the outset rather than writing tests after developing the code. By doing so, you will write less code, think through your implementation thoroughly, and easily identify any missing components in the requirements. Embrace the power of TDD and have a wonderful day!

A Composable Journey: Creating a Unique UI using Jetpack Compose

Alejandro Zurcher — Wed, 28 Jun 2023 09:25:07 +0000

Intro

From time to time, our team’s designer comes up with a brilliant idea for the mobile app we’re working on. But then, horror strikes: it’s not based on a native component that we can easily find in the Material Design Guidelines or the iOS Human Interface Design Guidelines. It’s fresh, it’s new, it’s custom.

As a developer, this is the exact moment when you start scratching your head or, at best, suggesting a native alternative. But what if you could implement it as it is, in a reusable way? And not only that, what if you could also incorporate some animations into it?

Today, we will explore how to utilize Compose to effortlessly implement a highly customized UI, bringing a designer’s wildest dream to life and creating an astonishing visual experience.

Design

The design we’ll be working with in this exercise is a captivating element from a Crypto Wallet App, skillfully crafted by Roman Lieliushkin. You can check out his incredible mobile design work here: https://www.behance.net/ozmoweb

More specifically, we will be focusing on implementing square cards in the center of the screen. These cards will display the value of a cryptocurrency coin along with some additional details.

The Base

The first step we take when dealing with a custom UI like this is to search for its closest native counterpart that can serve as a foundation. This approach helps us minimize the amount of work required. Fortunately, in this case, it’s relatively straightforward. We can utilize a native Card, which provides us with the fundamental structure of rounded corners for our component.

val cardSize = 150.dp
Card(
    modifier = Modifier.size(cardSize).clip(RoundedCornerShape(15.dp)),
    colors = CardDefaults.cardColors(containerColor = Color.Black)
) { ... }

Now, let’s head to the drawing board and contemplate how we can fashion this unique shape by utilizing other shapes.

Collaborating closely with the designer would be incredibly beneficial at this point. They can provide valuable insights into the creation of the custom element, making it easier for us to translate and incorporate it into our own custom piece.

The plan now is to utilize different shapes to “cover” or “cut” the original card in order to achieve the desired custom shape. We’ll begin by creating squares that will be filled with the background color of our UI, giving the illusion of being cut.

Canvas Time

Within our Card, we’ll utilize the Canvas Composable, which plays a crucial role in our plan to develop a new custom component.

The Canvas enables us to position shapes or lines of any size and color at any x, y coordinate pair. Our initial step is to add rectangular white boxes to remove unnecessary portions of the original Card, accomplished through the use of drawRect()

val cardSize = 150.dp
Card(
    modifier = Modifier.size(cardSize).clip(RoundedCornerShape(15.dp)),
    colors = CardDefaults.cardColors(containerColor = Color.Black)
) {
    Canvas(modifier = Modifier.size(cardSize), onDraw = {
        drawRect(
            color = backgroundColor,
            topLeft = Offset(x = size.width - radius + (radius * 0.2f), y = 12f),
            size = size / 2f,
        )

//...

val cardSize = 150.dp
Card(
    modifier = Modifier.size(cardSize).clip(RoundedCornerShape(15.dp)),
    colors = CardDefaults.cardColors(containerColor = Color.Black)
) {
    Canvas(modifier = Modifier.size(cardSize), onDraw = {
        drawRect(
            color = backgroundColor,
            topLeft = Offset(x = size.width - radius + (radius * 0.2f), y = 12f),
            size = size / 2f,
        )

        drawRect(
            color = backgroundColor,
            topLeft = Offset(x = cardSize.value * 1.3f, y = cardSize.value * -1f),
            size = size / 2f,
        )

//...

To create the curvy shape cutout at the top, I used three circles strategically positioned around the corner. By partially blending the background color (white) with the card color (black), it successfully achieves the curvy shape for the top left section of the card. Luckily, there’s an easy way to draw circles in the Canvas using drawCircle()

    drawCircle(
        color = Color.Red,
        radius = cardSize.value / 1.5f,
        center = Offset(
            x = size.width - radius + (radius * 0.2f),
            y = radius - (radius * 0.2f)
        )
    )

    drawCircle(
        color = Color.Green,
        radius = radius * 0.8f,
        center = Offset(
            x = size.width / 2.14f,
            y = radius - (radius * 0.2f)
        )
    )

    drawCircle(
        color = Color.Green,
        radius = radius * 0.8f,
        center = Offset(
            x = size.width - radius + (radius * 0.2f),
            y = radius + (radius * 1.93f)
        )
    )

I’m highlighting them here so Its easier to see but the idea Is that the Green ones will be turned into the Card color and the Red one will be coloured as the background Is.

Finally, let’s add the Circle background the original design had in place to display the Crypto Coin Icon. To do so, we add one more circle.

      drawCircle(
          color = bubbleColor,
          radius = radius * 0.8f,
          center = Offset(
              x = size.width - radius + (radius * 0.2f),
              y = radius - (radius * 0.2f)
          )
      )

The full background Canvas:

Canvas(modifier = Modifier.size(cardSize), onDraw = {
      drawRect(
          color = backgroundColor,
          topLeft = Offset(x = size.width - radius + (radius * 0.2f), y = 12f),
          size = size / 2f,
      )

      drawRect(
          color = backgroundColor,
          topLeft = Offset(x = cardSize.value * 1.3f, y = cardSize.value * -1f),
          size = size / 2f,
      )

      drawCircle(
          color = backgroundColor,
          radius = cardSize.value / 1.5f,
          center = Offset(
              x = size.width - radius + (radius * 0.2f),
              y = radius - (radius * 0.2f)
          )
      )

      drawCircle(
          color = cardBackground,
          radius = radius * 0.8f,
          center = Offset(
              x = size.width / 2.14f,
              y = radius - (radius * 0.2f)
          )
      )

      drawCircle(
          color = cardBackground,
          radius = radius * 0.8f,
          center = Offset(
              x = size.width - radius + (radius * 0.2f),
              y = radius + (radius * 1.93f)
          )
      )

      drawCircle(
          color = bubbleColor,
          radius = radius * 0.8f,
          center = Offset(
              x = size.width - radius + (radius * 0.2f),
              y = radius - (radius * 0.2f)
          )
      )

  })

When displaying this Composable over a White surface, remnants of the Card we covered can be slightly seen on the top right corner.

To fix it, we can wrap the entire Card into a Box and add a second Canvas as the last element, which covers that area with another drawRect and brings the gray circle on top of it.

Canvas(modifier = Modifier.size(cardSize), onDraw = {
    drawRect(
        color = backgroundColor,
        topLeft = Offset(x = size.width - (cardSize.value / 2f) - 7.5f, y = 0f),
        size = size / 5f
    )

    drawCircle(
        color = bubbleColor,
        radius = radius * 0.8f,
        center = Offset(
            x = size.width - radius + (radius * 0.2f),
            y = radius - (radius * 0.2f)
        )
    )
})

//...
Box {
        Card(
//...

And let’s also make our Composable customizable so that the background and the gray bubble can be easily adjusted to fit different styles and themes.

@Composable
fun CryptoCardBackground(
    cardBackground: Color = Color.Black,
    bubbleColor: Color = Color(0xFFf3f3f3),
    backgroundColor: Color = Color.White,
    cardSize: Dp = 150.dp,
) {

  ...

}

Coffee Break

Let’s take a moment to catch our breath and reflect on our progress. We’ve managed to handcraft our own custom UI by incorporating circles and rectangles, building upon the foundation of the Card component. The result is fantastic! Now, it’s time to introduce the final piece: the data.

To bring In the data we’ll use our handcrafted background an lay on top of It some Rows and Columns with Text.

To visually represent our Data I’ve created a data class that will serve as input for our Composable and has all the required fields It needs:

data class CryptoCardData(
    val name: String,
    val value: Float,
    val valueChange: Int,
    val currentTotal: Long,
    val icon: Int
)

Since our final Composable need to be able to support different background colors we need to introduce a style property that will be used across the composable to define text color, card fill and background.

enum class CryptoCardStyle {
    Dark, Light
}

Finally, right next to the change value (-18% in this image), there’s a small icon that highlights if the value is positive or negative. So, we need to introduce a small Composable that will handle this for us.

@Composable
private fun ChangeIcon(valueChange: Int = -18) {
    var iconModifier: Modifier = Modifier
    val tint: Color
    val contentDescription: String

    if (valueChange > 0) {
        tint = Color(0xFFFFFFFF)
        iconModifier = Modifier.rotate(180f)
        contentDescription = "Arrow Up"
    } else {
        tint = Color(0xFFa97d72)
        contentDescription = "Arrow Down"
    }

    Icon(
        modifier = iconModifier.size(17.dp),
        painter = painterResource(id = R.drawable.ic_arrow_bottom_left),
        contentDescription = contentDescription,
        tint = tint
    )
}

And after putting all these pieces together, here it is, our fully customized CryptoCard in action, running in an Android emulator.

If interested in the full implementation you may find It here: CryptoCard.kt

In an upcoming post, we’ll explore how we can easily update this to support a small animation when loading the data and also how to accurately bring any custom font into Compose.

I hope you learned something new today, and thank you for reading this far!