Upgrade to Google's new Material Design Library

wallabag / android-app

Android application to read your articles saved in your wallabag. You can also easily add new articles.

https://www.wallabag.org

GNU General Public License v3.0

490 stars 259 forks source link

Upgrade to Google's new Material Design Library #809

Open cognition9144 opened 5 years ago

cognition9144 commented 5 years ago

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 commented 5 years ago

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

cognition9144 commented 5 years ago

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.

Fortnightly

I guess inserting values with Material Theming will do.

Any suggestions are welcome.

cognition9144 commented 5 years ago

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 commented 5 years ago

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

msfjarvis commented 5 years ago

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

cognition9144 commented 5 years ago

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 commented 5 years ago

@silberzwiebel #114 any opinion on that?

msfjarvis commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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: Screenshot_20190823-195711_wallabag Screenshot_20190823-195609_wallabag Screenshot_20190823-195605_wallabag

Still needs a lot of tweaking to make nothing broken.

msfjarvis commented 5 years ago

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

cognition9144 commented 5 years ago

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: topappbars-behavior-scrolling-sameelevation

cognition9144 commented 5 years ago

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 commented 5 years ago

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/