feat: expenses grid display #156

abGit9 · 2024-02-25T04:30:11Z

This pull request makes the following changes:

Addresses issue #117

Adds feature where expenses can be viewed in a grid. Users can toggle between the default row format and grid format.

DennisBauer · 2024-02-25T18:04:17Z

Thanks for the PR!

DennisBauer · 2024-02-25T17:51:39Z

app/src/main/java/de/dbauer/expensetracker/MainActivity.kt

                        },
+                        actions = {
+                            // only creates toggling button if navigation is at home
+                            if (backStackEntry.value?.destination?.route == BottomNavigation.Home.route) {


I think it makes sense to have the toggle for both tabs Home and Upcoming. Probably also synchronizing the same option to use the same on both.

Sure that sounds good. Can I do that as part of a seperate PR?

Yes can also be done in a separate PR.

DennisBauer · 2024-02-25T17:53:47Z

app/src/main/java/de/dbauer/expensetracker/MainActivity.kt

            modifier = modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background,
        ) {
+            var isGridMode by remember { mutableStateOf(false) }


Right now we'll switch back to the default layout on ever app start, right? What do you think about persisting this toggle making sure we do not need to change it again after each app start?

Thats a good point, so right now on my android 14 , unless i close the app with the "close all" option in the recent apps screen, the previous layout state is maintained(stays in either grid or row format at last scrolled location ). Maybe its version dependent?

As long as you do not close the Activity completely but just put the app to the background the state is retained. But as soon as you close it or restart your device it will be lost.

I made this at least persistent for orientation changes. Saving this value in DataStore can be done as a follow up.

app/src/main/java/de/dbauer/expensetracker/MainActivity.kt

app/src/main/java/de/dbauer/expensetracker/ui/RecurringExpenseOverview.kt

DennisBauer · 2024-02-25T18:03:57Z

app/src/main/java/de/dbauer/expensetracker/ui/RecurringExpenseOverview.kt

                        ),
                    ),
                onItemClicked = {},
+                isGridMode = false,


Idea: Add a boolean PreviewParameter which allows you to generate a preview for both the normal and your grid mode:
https://developer.android.com/jetpack/compose/tooling/previews#preview-data

Implementing previews to streamline testing and debugging is a great idea. If it can be done quickly for this PR I'm all for it. But if not, do you think we should maybe do it as part of another pull request? Maybe just get this one merged and running. Just trying to modularize ours PRs as best I can...

That's quite easy to realize but also not a must for the PR.

You can achieve it by doing this:

private class GridLayoutParameterProvider : PreviewParameterProvider<Boolean> { override val values = sequenceOf(false, true) } @Preview() @Composable private fun RecurringExpenseOverviewPreview( @PreviewParameter(GridLayoutParameterProvider::class) isGridMode: Boolean ) { ... RecurringExpenseOverview( ... isGridMode = isGridMode ) }

I tried it out. It worked but the bottom of my screen was blocked out in white with a next button that didn't work. I'm getting by with just manually adding test items. Think I'll stick with that for now. But we should definetly implement something like this in the near future.

I added the suggestion I mode above and it works fine for me.

app/src/main/java/de/dbauer/expensetracker/ui/RecurringExpenseOverview.kt

DennisBauer · 2024-02-26T18:56:52Z

app/src/main/java/de/dbauer/expensetracker/MainActivity.kt

                                onItemClicked = {
                                    selectedRecurringExpense = it
                                },
-                                contentPadding =


Please keep the contentPadding it is important for the outside padding and to be able to scroll the cards at the bottom above the FloatingActionButton. Without the bottom padding of 88.dp the price of the last cards will be behind the plus button.

so this was an issued addressed in commit 2f34afb. I found that if i kept the padding there was stuttering when scrolling while display was filled or closed to filled with items. I can keep the padding intact( and have some stuttering when scrolling with an almost filled screen) or remove it but keep the last item coverd. Maybe there is another way to make sure the last item is not covered by the FAB. But stuttering stops once the number of items exceed
the display room. Here is a video with the padding intact.

Android.recording.-.26.Feb.2024.mp4

we can possible keep the padding now, and debug later it on. I observe it only occurs when the display is almost full or full.

Might have found a solution. Just pushed it...

I'll check this on the weekend when I have a bit more time, there should be a solution for this scrolling issue.

DennisBauer · 2024-02-27T17:06:52Z

Looks good so far. I'll look into the remaining issues you mentioned on the weekend. If the changes are ready from your side please squash your commits to remove the fix commits.

…and default

Can raise the last expense item above FAB by either applying bottom padding or using a Spacer. Bottom padding leads to stuttering when scrolling. Here, Spacer is used without side effects.

… in data

abGit9 · 2024-03-02T00:29:30Z

Looks good so far. I'll look into the remaining issues you mentioned on the weekend. If the changes are ready from your side please squash your commits to remove the fix commits.

The scrolling issue seems to be resolved on my end. Commits have been squashed and rebased. Unless there is anything else you want to address for this PR I'm good to go.

Because of the AnimatedContent in RecurringExpenseOverview the list is reset and scrolled back to the top. To make sure the scroll state matches that we need to reset it here. It make the TopAppBar use the surface color again. This is a workaround which can hopefully removed in the near future.

The size still works to get 2 column layout on a 4.6 inch phone.

Add night mode preview

abGit9 · 2024-03-02T21:04:11Z

Thanks for merging. I will work on adding a grid option to Upcoming Payments.

abGit9 added 2 commits February 24, 2024 18:45

Feat: creates action button and state for grid toggling

7e16853

Feat: creates staggered grid of expenses

188353d

abGit9 changed the title ~~Feat: expenses grid display~~ feat: expenses grid display Feb 25, 2024

DennisBauer reviewed Feb 25, 2024

View reviewed changes

DennisBauer added the feature New feature or request label Feb 25, 2024

DennisBauer reviewed Feb 26, 2024

View reviewed changes

app/src/main/java/de/dbauer/expensetracker/ui/RecurringExpenseOverview.kt Outdated Show resolved Hide resolved

DennisBauer reviewed Feb 26, 2024

View reviewed changes

app/src/main/java/de/dbauer/expensetracker/ui/RecurringExpenseOverview.kt Outdated Show resolved Hide resolved

DennisBauer reviewed Feb 26, 2024

View reviewed changes

abGit9 added 8 commits March 1, 2024 15:20

Feat: implements an animation when toggling between grid of expenses …

2185d16

…and default

Feat: enhances visibility of bottom expense item so not covered by FAB

b7babdc

Can raise the last expense item above FAB by either applying bottom padding or using a Spacer. Bottom padding leads to stuttering when scrolling. Here, Spacer is used without side effects.

Style: correct format violations identified by ktlint check

3be573e

Refactor: externalizes strings

126cbd9

Refactor: consolidates redundant code from conditional block

fc0b985

Feat: grid will adapt number of columns to screen width of device

45e4d76

Feat: adds condition that expense description be displayed if defined…

56fa93d

… in data

Feat: adjusts padding inside Grid Recurring Expense Card

492f087

abGit9 force-pushed the feature_expenses_grid_display branch from 445ee44 to 492f087 Compare March 2, 2024 00:14

DennisBauer added 5 commits March 2, 2024 20:24

Make grid layout flag persistent on orientation changes

26d6eed

Fix bottom padding in expense overview

9c3a86e

Increase min size for elements in grid view

fa01a9b

The size still works to get 2 column layout on a 4.6 inch phone.

Add preview for grid view

db8851c

Add night mode preview

DennisBauer force-pushed the feature_expenses_grid_display branch from 141ce45 to db8851c Compare March 2, 2024 19:24

DennisBauer merged commit 19e07f2 into DennisBauer:main Mar 2, 2024

abGit9 mentioned this pull request Mar 4, 2024

feat: upcoming payments grid #159

Merged

abGit9 mentioned this pull request Mar 23, 2024

feat: persist scroll state #170

Merged

feat: expenses grid display #156

feat: expenses grid display #156

Uh oh!

Conversation

abGit9 commented Feb 25, 2024

Uh oh!

DennisBauer commented Feb 25, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DennisBauer Feb 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DennisBauer commented Feb 27, 2024

Uh oh!

abGit9 commented Mar 2, 2024

Uh oh!

abGit9 commented Mar 2, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

DennisBauer Feb 26, 2024 •

edited

Loading