[Android] Mina – A Modern Android App

[codejockie]

I sent in a new update for publishing with version number 1.15.711. This update contains fixes and improvement not limited to the following changes:

• Fixed credentials login
• Fixed SRS subject type text overflow @Shelley
• Fixed reviews forecast bar text overflow @skaldebane @Yuserys
• Fixed wrap up session question skip bug @Yuserys
• Fixed Japanese font weight inconsistencies @skaldebane
• Changed search bar and search button shape
• Fixed full screen search swipe to go back bug @Yuserys
• Removed profile avatar animation on opening profile
• Subject mnemonic markup highlight now in 3D-like form
• Fixed pronunciation audio not showing for the katakana variant in subject info

@Yuserys in light of the notifications you mentioned, I made a tweak to it that I never got around to testing but the idea is when you have the app in foreground notifications are paused until you leave the app. Again, this wasn’t tested so please let me know if you notice any change or if notifications break in general.

@skaldebane about the font weight inconsistency, I don’t get the issue on my devices but tested with them regardless and with the emulators I have. Please let me know if they are fixed when you get this version.

I may or may not have fixed all the bugs reported in the last couple of days. Please let me know of any that wasn’t fixed.

Aside: I will be going on that break I never got to.

[TexasToast97]

I just discovered this thread. Hi!

I am interested in becoming a tester (I’ve been using WK for a few years, lvl 31), however please be aware my skills and knowledge are lacking when it comes to technology.

I see you’re about to go on a break (as am I) so please reply whenever it is convenient for you if you would like to include me as a tester

[codejockie]

Hi @TexasToast97, happy to have you. I’d love to add you as a tester but want you to know the first public release of the app will be available in the next few days. Let me know if you want to wait for that or not. If no, I will go ahead and add you so you can start using the app as a tester – all I need from you is to add your email to this sheet below:

@codejockie

Wani Internal Testers - Google Sheets?

[TexasToast97]

That’s exciting that it’s going to be publicly released!!

If it’s ok, I will wait and use it then. Will you still be wanting feedback on the app and is this to place to submit it at? I’d still like to be helpful if I can.

Thank you so much!

[codejockie]

The first open testing release is now available. You can join with this link https://play.google.com/store/apps/details?id=com.codejockie.wani.internal. With this release, everyone can join to download the app.

@TexasToast97

Will you still be wanting feedback on the app and is this to place to submit it at?

Yes, you can submit any feedback here. Thank you.

For existing testers, you can simply update the version you are currently running with this. The version number is 1.16.733. In the case you are unable to update, please let me know.

[skaldebane]

Congrats on the public release!

Here’s a few minor issues I’ve found here and there in the latest release:

• The highlighted text is looking quite wrong:
  

  
  
  There’s some extra padding to the right, and the vertical misalignment is very visible (is it aligned with baseline by any chance?).

• This is a little too crammed:
  

  

• In the review forecast, I guess not drawing the number at all if the bar is too small might make things better. You can use the text measurer to check that, and maybe rely on a canvas for the whole thing.
  

  
  
  Also, I’m unsure what’s going on in Tuesday’s 5:00 am bar in the screenshot, the blue bar is slightly taller, the number doesn’t match the bar, etc…
  Another screenshots where the numbers are very crammed:
  
  

That’s all!

One more thing

One feature I still miss is the Patterns of Use above context sentences… unfortunately there’s no API for that, but it’s possible to fetch the HTML for the item (from www.wanikani.com/{type}/{item}) and parse them out directly from there. I can draft an implementation of that if you find this a good idea.

Obviously to not DDOS WK’s servers, this should probably be on-demand (i.e. only load when the user opens the lesson / review info), and probably be cached for later use. That way it’s the same amount of requests that the user would’ve done if they’re on the main website (probably less when it comes to reviews).

[codejockie]

@skaldebane

Congrats on the public release!

@skaldebane

There’s some extra padding to the right, and the vertical misalignment is very visible (is it aligned with baseline by any chance?).

This might be an issue with smaller device width as I can’t reproduce it on any of my devices. Here is a screenshot on my end (subject screen – can’t show a lesson slide for same subject since I have already taken it)

Also, there is no additional padding in the code other than the one included in the highlighted text.

@skaldebane

This is a little too crammed:

Will look into it.

@skaldebane

In the review forecast, I guess not drawing the number at all if the bar is too small might make things better. You can use the text measurer to check that, and maybe rely on a canvas for the whole thing

Yes, that would be a way to handle it.

@skaldebane

Also, I’m unsure what’s going on in Tuesday’s 5:00 am bar in the screenshot, the blue bar is slightly taller, the number doesn’t match the bar, etc…

The idea is if the text is too longer than the available space for rendering text it gets clipped.

@skaldebane

One feature I still miss is the Patterns of Use above context sentences… unfortunately there’s no API for that, but it’s possible to fetch the HTML for the item (from www.wanikani.com/{type}/{item}) and parse them out directly from there. I can draft an implementation of that if you find this a good idea.

I would like to go the “no fetch/parse” route if possible. You are the second person requesting this, so I will have to look into where WaniKani gets the info from (originally thought it was Jisho, but I was wrong). You can whip up an implementation and I’ll have a look. By the way, don’t WK require you to be logged in to access subjects?

[skaldebane]

@codejockie

This might be an issue with smaller device width as I can’t reproduce it on any of my devices.

Trust me, my screen is really not small
I also tried reducing the system screen zoom from the default to the smallest, and the issue persists.
Since you’re not seeing the issue, maybe this has something to do with Android 12 in particular? or my system font? Not sure honestly, all my experiments were on Compose Desktop… I will experiment with this on my phone and different emulators and get back to you.

@codejockie

I would like to go the “no fetch/parse” route if possible. You are the second person requesting this. I will have to look into where WaniKani gets the info from (originally thought it was Jisho, but I was wrong).

Yeah that would be much better if you can figure out the source of the data.

@codejockie

You can whip up an implementation and I’ll have a look. By the way, don’t WK require you to be logged in to access subjects?

Sure! WaniKani doesn’t seem to require login for subjects at all. Tried accessing the pages in private browsing, and they load without any problems (including from paid levels).

Crabigator is very generous, long live Crabigator

[codejockie]

@skaldebane

Trust me, my screen is really not small
I also tried reducing the system screen zoom from the default to the smallest, and the issue persists.
Since you’re not seeing the issue, maybe this has something to do with Android 12 in particular? or my system font? Not sure honestly, all my experiments were on Compose Desktop

Could you show me how to get Compose Desktop setup on my end?

[skaldebane]

You can use the JetBrains wizard at https://kmp.jetbrains.com/ to generate a project.

Only select desktop for a JVM-only project (which is simpler to work with).

[codejockie]

I misunderstood your earlier response. I thought you were running the app on something that wasn’t a phone – Compose Desktop. Haha

[skaldebane]

Ahh not really

I was simply going to run my initial implementation code on mobile to see if there’s any issues with inline content on my end (and try your app on different emulators to see if I can reproduce this).

[codejockie]

For the latest update (now open testing) here is what’s new:

• Fixed bleeding edges in lessons slide
• UI fixes for lessons slides
• Round corners for new unlocks, critical items and burned items lists on the dashboard
• Navigation drawer can now only be opened with the Menu icon, once open swipe left or tap an area outside of the drawer to close it
• Full screen search keyboard should now show “Done” or a checkmark
• The avatar should now show a progress indicator whenever a background work is ongoing. This can be short bursts like on returning to the dashboard or during audio downloading if you selected to download audios during onboarding.

Additionally, since this is now open test, the app launcher icon should now have a white on a pink background. The version number in About should no longer show “-internal”.

[Yuserys]

Found a little bug: While the app correctly detects vacation mode, it still sends notifications while in vacation mode.

[skaldebane]

Okay tried running on Android 10 emulator… And it looked perfectly fine:

Thinking more about it, I got extremely weirded out, because what on earth could be causing this?
There’s only 3 things that could affect the result this bad:

1. Density: I tried changing this, but on my device it still looked broken, and on the emulator it still looked fine… and I generally made sure to handle it properly in my implementation, so having it break is a bug somewhere.
2. System font: I do have a custom font on my main device, but your app uses its own font everywhere, so… nah?
3. Font scale: This is independent of density, as it only affects text. Wait, I never checked this. Never even changed it while implementing this…

So tried changing the font scale on the emulator, and voila:

Basically the reason for this is that I’ve changed the text scale from “Default” to “Large” on my phone (and then totally forgot about it). This is probably also the reason why my screenshots may have felt a bit crammed, like a small phone
(since very few people tweak font scale, this was probably a good stroke of luck so this gets fixed early xD)

Anyways, I’ll try playing with the implementation and figure out which parts need changing. I’ve made sure to use density-aware conversions, but since there’s text I probably should’ve relied on TextUnit instead of Dp when converting to/from pixels in certain places, which would make use of text scale and convert properly. Will post updates on the Gist.

Update: The original implementation doesn’t seem to have this issue:

Note the font scale at the bottom. I guess this has something to do with the adjustments you made to fix alignment? Can’t tell much without the code.

[codejockie]

That’s good to know, I will fix it.

[codejockie]

@skaldebane

Basically the reason for this is that I’ve changed the text scale from “Default” to “Large” on my phone (and then totally forgot about it). This is probably also the reason why my screenshots may have felt a bit crammed, like a small phone

Font scaling – a pain in the butt.

@skaldebane

Update: The original implementation doesn’t seem to have this issue:

It does have the same issue unfortunately.

[skaldebane]

@codejockie

It does have the same issue unfortunately.

After some dabbling on Android… I think I got it.
.toSp() is what I use to convert Dp into TextUnit for the placeholder height and width, in a font-scaling-aware fashion.
On desktop, its implementation is as simple as value / fontScaling.
The Android implementation however… a quick peak will tell you that it’s not that trivial:

Damn, it’s using non-linear font scaling… which applies after any scale higher than 1.03f (i.e. it’s always applied; for reference, my phone has 1.1f font scaling).

This was introduced in a recent Android version (12 or 13 iirc?), and as the name suggests this scales non-linearly depending on the text size (in our case the Dp value).
The aim is to scale small text more and scale bigger text a lot less (so big titles don’t become huge and look broken, as they’re already readable enough).

It also explains why we see the effect outsized in the width but not much in the height.

The fix is simple: do a simple division like Compose Desktop’s toSp():

val placeholder = with(density) {
    Placeholder(
        width = ((placeholderSize.width + 8.dp).value / fontScale).sp,
        height = ((placeholderSize.height + 2.dp).value / fontScale).sp,
        placeholderVerticalAlign = PlaceholderVerticalAlign.Center
    )
}

This works well across any font scale / density.

---

Collocations:

@codejockie

You can whip up an implementation and I’ll have a look.

Made a quick implementation of the HTML parsing for collocations (patterns of use):

It’s a very simple implementation, using the Ksoup library to parse the data into classes. This doesn’t include UI, that should be simple enough.

Full code in Gist.

[codejockie]

@skaldebane

On desktop, its implementation is as simple as value / fontScaling.

This right here explains the inconsistency between the desktop and mobile. I recall having to avoid toSp() for some reason in the project and doing conversions just like it is done for the desktop because of issues like this. Thank you

@skaldebane

It’s a very simple implementation, using the Ksoup library to parse the data into classes. This doesn’t include UI, that should be simple enough.

Cool, will have a look. This might just be a trigger to overhaul lessons and reviews item info.

[codejockie]

I fixed a couple of issues in the past few days since the last update.

• Adding a note or synonyms does not reflect in the UI during lessons – @Yuserys @skaldebane
• Fixed other UI issues @skaldebane mentioned
• Fixed the notifications so when on vacation non is sent
• Reduced the size of the characters for lessons and reviews when on a large device
• Fixed an issue where recent mistakes stay on past the 24 hours limit
• Fixed a bug in the validator for long dash

In addition to the fixes, the app should now show error messages where previously it didn’t.

Colours are not final

I changed the reviews breakdown on the reviews card so a badge with the breakdown versus having both shown (only seen when that option is turned on in settings)

The aforementioned are now available in the published version 1.17.752.