Fix placeholder layouts not being visible + background color consistency

[ivan-avalos]

Hey! I noticed that the placeholders were not showing in the app, because they were colored using ?attr/colorSurface, which blended in perfectly with the background. I fixed it using ?attr/colorSurfaceContainerHigh instead, the same color I used for cover placeholders. I also applied that color to the blank squares that show before the covers load.

There's something else I noticed, by the way. When fetching things such as playlists, which are initially null, the client first returns an empty array twice, before returning the actual playlists. This results in the placeholders not showing (View.GONE) before the playlists load.

libraryViewModel.getPlaylistSample(getViewLifecycleOwner()).observe(getViewLifecycleOwner(), playlists -> {
    Log.d("LibraryFragment", (playlists != null) ? playlists.toString() : "null");
    // ...
});

Here are the logs. Please check the timestamps.

2023-09-08 11:16:09.588  null
2023-09-08 11:16:09.610  []
2023-09-08 11:16:09.858  []
2023-09-08 11:16:21.543  [com.cappielloantonio.tempo.subsonic.models.Playlist@8d788d, com.cappielloantonio.tempo.subsonic.models.Playlist@1057a42, com.cappielloantonio.tempo.subsonic.models.Playlist@ba15a53, com.cappielloantonio.tempo.subsonic.models.Playlist@c6aef90, com.cappielloantonio.tempo.subsonic.models.Playlist@7e61089]

[CappielloAntonio]

Hi @ivan-avalos I'm trying to set the colors as suggested by the Google documentation regarding the Material3, so as not to have inconsistencies with other parts of the system.

One thing I'd like to fix is the differentiation between folder and directory, so I would need the placeholder icon of an open folder. Can I ask you how you generated the placeholders?

My problem is viewportWidth and viewportHeight:

android:viewportWidth="960" android:viewportHeight="960"

[ivan-avalos]

Hi @ivan-avalos I'm trying to set the colors as suggested by the Google documentation regarding the Material3, so as not to have inconsistencies with other parts of the system.

That's okay, but it doesn't mean there shouldn't be any contrast when it's necessary.

One thing I'd like to fix is the differentiation between folder and directory, so I would need the placeholder icon of an open folder. Can I ask you how you generated the placeholders?

I can do that, but it would probably be a separate pull request.

I generated them by hand. I had Android Studio generate the bare icons, then I imported them into https://shapeshifter.design and exported them as SVG, added a background and padding in Inkscape, imported them into https://shapeshifter.design again, and exported them as XML drawables.

My problem is viewportWidth and viewportHeight:

Where is that?

[CappielloAntonio]

The icon I would like to add is the following. I usually use https://fonts.google.com to search for icons and import them in the correct style.

If it's not too much trouble, could you create a placeholder similar to those created previously? It's fine with a separate pull request too.

Thanks so much, really!

ic_placeholder_directory.zip

[ivan-avalos]

I honestly didn't know about the new "Material Symbols" (replacing the old "Material Icons") released last year. I was out of date for a year!

https://material.io/blog/introducing-symbols