I always look forward to learning new things, and this time Jetpack Compose was the thing I decided to learn. Usually, I use Google Sheets to keep track of my income/expenses so I decided to build an app, using Compose, that would do the same. In this article, I’ll show the mistakes I made and how I built some of the customized components that were used in the project. Home Background Banner I was looking for inspiration and came across some other apps that used this curved background, so I decided to use it for the home header. This component is pretty simple, we basically have the curved background and the rest of the content above it. What makes this a little bit more complicated is the fact that the background height is not static, I made it so it adapts to the content that’s being displayed above it. First I started by creating a custom shape that has the curvature I wanted. To do that, I extended and used do draw it. I arrived at these numbers by trial and error, you can change them if you want your shape to look different. GenericShape cubicTo class SemiOvalShape : Shape by GenericShape(builder = { size, _ ->
    lineTo(size.width, 0f)
    relativeLineTo(0f, size.height * 0.8f)
    cubicTo(
        x1 = size.width * .7f,
        y1 = size.height,
        x2 = size.width * .3f,
        y2 = size.height,
        x3 = 0f,
        y3 = size.height * 0.8f
    )
}) After I had the custom shape, I created the header component. @Composable
private fun HomeHeader(
    ...
) {
    Box {
        val density = LocalDensity.current
        // How big the curved section of the box is
        val backgroundBottomPadding = 96.dp
        // How much spacing you have between the content inside your box and the content placed below it
        val bottomSpacer = 16.dp
        // Set to 264.dp initilly just so the calculatation below doesn't result in a negative number
        var boxHeight by remember { mutableStateOf(264.dp) }
        val contentTopPadding by remember {
            derivedStateOf { boxHeight - backgroundBottomPadding + bottomSpacer }
        }

        Column(
            modifier = Modifier
                .fillMaxWidth()
                // Code that draws the curved background
                .background(remember {
                    Brush.verticalGradient(listOf(Purple40, Purple20))
                }, remember {
                    SemiOvalShape()
                })
                .padding(horizontal = 16.dp)
                .onSizeChanged {
                    boxHeight = with(density) { it.height.toDp() }
                }
        ) {
            ... // The content that's shown inside the box goes here (Welcome Back, Income/Expenses)
          
            Spacer(modifier = Modifier.height(backgroundBottomPadding))
        }

        Box(
            modifier = Modifier
                .padding(top = contentTopPadding)
                .fillMaxWidth()
        ) {
            ... // The content that's shown below the box goes here (Add Expense, Add Income, ...)
        }
    }
} Next: I defined some variables to set how big the spacing between components should be, you can tweak them if needed. Then, I calculated , this is what makes the box adaptable to different content sizes. contentTopPadding After that I added the Column that draws the curved background, its children are drawn inside the box (Welcome back and Income/Expenses). Below that, I added the Box that hosts the content shown below the curved background (Grid menu). In the image below you can see I added another component and the box resized itself correctly. Selection Button Animation This is a simple filter that uses a box in the background to indicate which option is currently selected. There are 3 things happening here: The box width changes The box position changes The corner radius changes (take a look at the inner corners when only 1 option is selected) We use to easily animate dp values. Unfortunately, that’s not possible for corner shapes so we have to create a new shape every time the radius changes. animateDpState val selectionOffsetX by animateDpAsState(
    targetValue = if (selected == CategoryType.EXPENSE) halfBoxWidth else 0.dp,
)
val selectionWidth by animateDpAsState(
    targetValue = if (selected == null) boxWidth else halfBoxWidth,
)
val leftCornerRadius by animateDpAsState(
    targetValue = when (selected) {
        CategoryType.EXPENSE -> 0.dp
        else -> 4.dp
    }
)
val rightCornerRadius by animateDpAsState(
    targetValue = when (selected) {
        CategoryType.INCOME -> 0.dp
        else -> 4.dp
    }
)
val selectionShape by remember {
    derivedStateOf {
        RoundedCornerShape(
            topStart = leftCornerRadius,
            bottomStart = leftCornerRadius,
            topEnd = rightCornerRadius,
            bottomEnd = rightCornerRadius,
        )
    }
} Then, we just need to define the components, and Compose handles for all the animation. I liked the way this button turned out, given its simplicity. Box(modifier = modifier.width(boxWidth)) {
    // this is the background that moves to hightlight what's currently selected
    Box( 
        modifier = Modifier
            .offset(x = selectionOffsetX)
            .width(selectionWidth)
            .height(buttonHeight)
            .background(Purple20, selectionShape)
    )

    Row {
        Button(
            modifier = Modifier
                ...
                .clickable(
                    // remove ripple from button
                    interactionSource = remember { MutableInteractionSource() },
                    indication = null,
                    onClick = { onSelected(...) }
                )
        )
        Button(
            modifier = Modifier
                ...
                .clickable(
                    interactionSource = remember { MutableInteractionSource() },
                    indication = null,
                    onClick = { onSelected(...) }
                )
        )
    }
} Vertical/Horizontal Scroll I have a sheet that shows how much I spent by category by month, that’s pretty easy to visualize when you’re using a big screen but for mobile devices, I had to come up with a different approach. I don’t like landscape mode so I didn’t even consider that as an option here. What I ended up doing was making everything scrollable, but the months and categories are fixed. val verticalScroll = rememberScrollState()
val horizontalScroll = rememberScrollState()

Row(
    modifier = Modifier.horizontalScroll(horizontalScroll)
) {
    ... // Oct/22, Sep/22, ...
}

Column(
    modifier = Modifier
        .verticalScroll(verticalScroll)
) {
    // Food, Gym, Car, Subscriptions
}

Column(
    modifier = Modifier
        .verticalScroll(verticalScroll)
        .horizontalScroll(horizontalScroll)
) {
    // 563, 212, 525, 222, 662, 12, 661, ...
} If you take another look at the video above, you can see that whenever I scroll the main content, the other parts are also scrolled. I discovered that it’s possible to use the same multiple times, I had no idea this would work but by using the same I can get all components to be synchronized. ScrollState ScrollState If you want to see how I built this whole component, you can take a look at this . file All the code for this project is available in this . repository PS: I’m far from being an expert in Compose. This article shows how I built these components using the knowledge I had at the time, meaning that this is not necessarily the most performant code nor the simplest way to do a certain thing. If you know of anything that could be improved, please let me know in the comments. Also published here. Cover photo by on Markus Winkler Unsplash

This story contains new, firsthand information uncovered by the writer.

Improve Your Code Quality With These Useful Kotlin Extensions for Android 

How to Build a Language Learning App with Compose – Part 1

How I Built a Budget Tracker with Jetpack Compose

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Ditch the Notification and Show an Activity on Your Android Lock Screen Instead

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

Ditch the Notification and Show an Activity on Your Android Lock Screen Instead

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps