Upgrade to Google's new Material Design Library

[cognition9144]

As described here, Google has moved to the new material design library for a period, which is much prettier. But wallabag still uses the legency one.

It's easy to do the migration. Simply doing some text replacement as described in the article above does the trick. If necessary, I can do a pr.

[di72nn]

Migration to AndroidX is being done in #803 (not merged yet), themes are not changed though.

[cognition9144]

Yes, it's because we're not using the @style/ThemeOverlay.MaterialComponents style but a customized one. I'm going to investigating how to integrate the new style into Wallabag.

After that, I'll try to make Wallabag mimic the Fortnightly news app example showed in the Material Design guideline, which I personally believe is a good example for text-centric apps.

I guess inserting values with Material Theming will do.

Any suggestions are welcome.

[cognition9144]

Migration is done as per the guide. It looks more modern to me and has smooth transition animation. I'm tweaking colors, layouts, and fonts to make it look more consistent.

[cognition9144]

BTW, it's based on https://github.com/wallabag/android-app/pull/803

[msfjarvis]

I wanted to pursue this after my current PR was merged, glad to see someone else has taken initiative already 👍

[cognition9144]

I realize that some customizations require refactorization. The first problem is whether it is necessary to have a "full-screen mode", which hides the top app bar. There is no such API in AndroidX library.

As scrolling effectively hides the app bar, I wounder if it's possible that we simply remove this feature.

[di72nn]

@silberzwiebel #114 any opinion on that?

[msfjarvis]

I realize that some customizations require refactorization. The first problem is whether it is necessary to have a "full-screen mode", which hides the top app bar. There is no such API in AndroidX library.

As scrolling effectively hides the app bar, I wounder if it's possible that we simply remove this feature.

You can simply switch to having an AppBarLayout with a nested Toolbar be the supportActionBar and a .NoActionBar parent theme. Since AppBarLayout is a view, you can call View.setVisibility on it to remedy this problem.

[silberzwiebel]

As scrolling effectively hides the app bar, I wounder if it's possible that we simply remove this feature.

@silberzwiebel #114 any opinion on that?

Go ahead and feel free to remove it. I'm not using it anyway, because I was missing the "favorite" button below the article (so I had to disable fullscreen every 4th article or so). Plus, my implementation wasn't fully functional. If there is any way to have a proper fullscreen, I'd be glad to use it (but I'd need a "favorite" button below the article, then ;) ).

[cognition9144]

As scrolling effectively hides the app bar, I wounder if it's possible that we simply remove this feature.

@silberzwiebel #114 any opinion on that?

Go ahead and feel free to remove it. I'm not using it anyway, because I was missing the "favorite" button below the article (so I had to disable fullscreen every 4th article or so). Plus, my implementation wasn't fully functional. If there is any way to have a proper fullscreen, I'd be glad to use it (but I'd need a "favorite" button below the article, then ;) ).

Not sure if I will fix it (it takes no effect currently). A Favorite button sounds a good idea and not hard to implement (although fullscreen mode may leaves no exit). I'm not working on that anyway.

And here are some screenshots for current process:

Still needs a lot of tweaking to make nothing broken.

[msfjarvis]

Looking great! Is there a WIP branch somewhere on GitHub that I can use? I'd love to help speed this along.

[cognition9144]

Looking great! Is there a WIP branch somewhere on GitHub that I can use? I'd love to help speed this along.

Here is a nearly usable version: https://github.com/xcffl/wallabag-android/tree/xcffl/ui-refresh

Broken parts:

• Settings: haven't implement sub-fragments that are recommended by the new standard
• Connection Wizard: the content of the second step disappears...
• The navigation drawer should have been look like this, but the colorPrimary is not overwritten by the theme's navigationViewStyle (Widget.Fortnightly.NavigationView under ./wallabag-android/app/src/main/res/values/styles.xml:
• Article: I'm trying to implement a collapsing tool bar layout such that long titles are wrapped as required in MD Guideline
• Only the Light theme is tested. Some hacks are applied, such as all themes inherits .NoActionBar variant. Dark theme inherits .DayNight which is not appropriate. Haven't read the new Dark Theme documentation throughout.

I'm also trying to make the lists look like this:

[cognition9144]

I find that https://material.io/resources/build-a-material-theme/#how-to-using-android-studio gives a good template to build up a material theme.

[cognition9144]

Most problems are fixed.

In terms of the current Settings implementation being deprecated, it's not supported by MD. So I'm refactoring it. Hope it won't have many conflicts against others' PR. https://developer.android.com/guide/topics/ui/settings/