Implement Material 3 "pill" component

[seadowg]

Blocked by #5760

The "pill" component appears to exist in several places in Material 3's own spec (this table for instance), but doesn't seem to have been explicitly called out or implemented. It also appears in Google Maps.

This PR provides an implementation of the component that should adapt appropriately to shape, typography and color theming.

What has been done to verify that this works as intended?

Verified manually.

Why is this the best possible solution? Were any other approaches considered?

For code reviewers: the shape theming was the most complex here and involved some reverse engineering of the implementation of several Material components. In short, I ended up building a ShapeAppearanceModel with the theme's shapeAppearanceCornerSmall attribute and then used that to create a MaterialShapeDrawable that I could change the color on and set as the component's background. I'm not 100% sure this is correct™️, so it'd be worth doing some quick research to see if you agree with me. There are some docs on this (here), but they seemed to be more aimed at customising the shapes at a theme level and I didn't personally get much from them.

How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?

This is just a visual change to the "complete" and "incomplete" pill on drafts, so verifying that they look correct is all that's needed really.

Before submitting this PR, please make sure you have:

• run ./gradlew checkAll and confirmed all checks still pass OR confirm CircleCI build passes and run ./gradlew connectedDebugAndroidTest locally.
• verified that any code or assets from external sources are properly credited in comments and/or in the about file.
• verified that any new UI elements use theme colors. UI Components Style guidelines

[alyblenkin]

@seadowg - looking good! I think the spacing is working well - it doesn't feel too squished. I think it will be easier to scan when we remove the form icon, but that can come later.

A few design tweaks:

"Complete" pill

• Let's use the light blue. In figma, I'm using the same blue as the banner because it’s still a neutral colour.
• And try using the simple check icon
• Use our black text instead of white

"Incomplete" Pill

• We should use a light grey. We don't want it to be alarming if they have a list of red incomplete forms.
• I'm using the M3 Neutral 90 (#E6E1E5), but if we have another similar grey already, we could use that.
• Rule icon
• Use our black text instead of white

[seadowg]

@alyblenkin this is good for another look! The colors had to be hacked in as this release isn't using Material 3 yet so I we should revise this again when we merge into v2023.4.

[alyblenkin]

Looks great! The blue I'm using in figma must be darker because the grey pill really stands out here. Let's make the grey lighter so the contrast isn't so stark between the two. Could we try #ECECEC or the grey we use for the main menu buttons?

[seadowg]

@alyblenkin I don't why I didn't just use that color to begin with actually! I've updated it.

[grzesiek2010]

If the tint color is black it doesn't make sense to use white here right it's confusing. It should be black in both places.

[seadowg]

This is actually something I realise I'm really unclear on. Given we might have an icon appear in multiple places where it needs different tints, should we have multiple vector assets with different tints or just have one that's a default black (or probably ?colorOnSurface)? It seems from this and the other comments you'd lean towards the former?

[grzesiek2010]

I think if it's used in only one place like here we can directly set the only color that's used in the XML file and don't think about it but generally yeah I think the first option is what I prefer.

[seadowg]

Ah I think I always need to set it programmatically anyway as otherwise I can't have a default tint in pill.xml as it'll always override the one in the drawable. For now, I'll keep the setIconTint calls and make the icons use ?colorOnSurface as their default (which makes more sense than hardcoding black I think). Let me know if that doesn't sound right to you!

[dbemke]

I started testing and there was a crash after tapping "Finalize all forms" in a form with pull data. Is PR #5775 included in CircleCi apk?

[seadowg]

@dbemke I've rebased so the latest changes from v2023.3.x are included

[dbemke]

It seems that something changed in the dark mode. In the end screen "You will not be able to make edits..." has the light mode background although in the app the dark mode. I checked if it's connected with opposite modes device vs app but this doesn't seem to be the case (device dark mode, app dark mode- the issue occurs). I also checked the store version and I wasn't able to reproduce it there.
Steps to reproduce:

1. In Settings set dark theme of the app.
2. Open any form and go to the end screen.
   
   It also occurs in the banner about editing finalized forms.
   

[seadowg]

@dbemke that's fixed!

[dbemke]

In the form map geopoints saved as drafts are points not pins. Finalized and sent geopoints are pins as expected. I haven't checked Google maps and Mapbox because of the CircleCi apk. The issue doesn't occur in the store version.

[seadowg]

@dbemke does it occur on v2023.3.x? I haven't touched any maps code here.

[dbemke]

I checked 2023.3.x 07d4688 and it occurs there too. So I'll file a separate issue.

[dbemke]

Tested with Success!

Verified on device with Android 10

Verified cases:

• the new pill in Drafts
• "Finalize all forms” for different forms
• filtering drafts
• dark and light mode
• quick checks in the app and widgets

[srujner]

Tested with Success!

Verified on device with Android 13