Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to Google's new Material Design Library #809

Open
cognition9144 opened this issue Aug 20, 2019 · 14 comments · May be fixed by #820
Open

Upgrade to Google's new Material Design Library #809

cognition9144 opened this issue Aug 20, 2019 · 14 comments · May be fixed by #820

Comments

@cognition9144
Copy link

cognition9144 commented Aug 20, 2019

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
Copy link
Member

di72nn commented Aug 20, 2019

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

@cognition9144
Copy link
Author

cognition9144 commented Aug 20, 2019

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
Copy link
Author

cognition9144 commented Aug 20, 2019

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
Copy link
Author

BTW, it's based on #803

@msfjarvis
Copy link

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

@cognition9144
Copy link
Author

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
Copy link
Member

di72nn commented Aug 22, 2019

@silberzwiebel #114 any opinion on that?

@msfjarvis
Copy link

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
Copy link
Contributor

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
Copy link
Author

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
Copy link

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

@cognition9144
Copy link
Author

cognition9144 commented Aug 23, 2019

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
Copy link
Author

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
Copy link
Author

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants