Material UI Redesign

[BioHaZard1]

Hi @rovo89, I had some free time so I thought I'd redesign/materialize the XposedInstaller. Once I'm finished I'll submit a pull request then you can choose if you want to pull or not. I've added some screenshots below so you can see where I'm at with the redesign.

I read before that you're not really a fan of the navigation draw, not sure if this is still the case. However, I could add an option to either show the navigation drawer or the toolbar spinner. Everyone has their own preference I guess.

Edit: Also I was going to add an option to define a default launch view e.g. Downloads, Modules etc

[wbedard]

FWIW...I like it. It's as simple and clean as the original and, of course, sports the updated look of other apps on Android 5.x. The only thing that many users might want to see added is a dark/black theme. It certainly looks like a good effort so far! [Updated...removed the bit about supporting older versions of Android....]

[BioHaZard1]

I've got all themes working now.

[rovo89]

Looks good to me. :) Also the navigation drawer looks nice, we could get rid of the dropdown completely (no option required).

I'll be happy to merge it once you're ready, although it might take me some time. I always try to make sure to review every single line of the changes to ensure that it fits with regard to code quality, compatibility and style. So if you have the chance to split your changes up into several commits that touch only certain areas, please do that. Also please follow the existing code style, e.g. no trailing whitespace, correct indention etc. If all of these things are good right from the start, it's much easier to merge than if I have to make those adjustments myself.

Oh, and do you also test this on older Android versions? We don't necessarily need material design there, but it should at least be functional.

[BioHaZard1]

Awesome, well I've moved everything over to AppCompat. From what I'm aware that supports everything down to API 7. I'll do some testing on older devices, everything should work fine. I generally create a commit once I change, fix or add something so it should be nice and easy to merge or refactor if necessary.

Edit: Just compiled a build using API 7, no build errors, everything seems good so far.

[GermainZ]

Shouldn't the icons and text have the same color (white would be best IMO)? I'm aware some Google apps do it this way, but AFAIK the guidelines seem to indicate the contrary which is more consistent and makes more sense to me. Love it otherwise.

On Mon, Aug 03, 2015 at 8:16 PM, BioHaZard1 < [email protected] [[email protected]] > wrote: I've got all themes working now.

screenshot 3 aug 2015 18_09_36 [https://cloud.githubusercontent.com/assets/5918419/9043206/c70f2370-3a0b-11e5-95bd-f2274e6771f6.png] [https://cloud.githubusercontent.com/assets/5918419/9043206/c70f2370-3a0b-11e5-95bd-f2274e6771f6.png]

— Reply to this email directly or view it on GitHub [https://github.com/rovo89/XposedInstaller/issues/292#issuecomment-127335384] .[https://github.com/notifications/beacon/ACxRlUmEtBBMfaj7naAA2LiiXee_ZUw2ks5oj5mKgaJpZM4FkADb.gif]

[BioHaZard1]

Yeah, I've changed that, I personally prefer white too.

[BioHaZard1]

Right, I think everything is done now. Just got to make sure all the images resources are present for the different screen densities and I'll create a pull request. Unless you just want to pull the commits from my fork?

[rovo89]

I think I'll pick them one by one from your repository. Thanks! Please give me some time though, there are a few more bugs that I'm currently looking at.

[BioHaZard1]

Just pushed everything to my repository, I've tried to follow your coding style as must as I can. I haven't changed any of your 'util' classes, they should remain the same. I've pushed all of the code to a new branch called 'material'. There is no rush, take as much time as you need.

https://github.com/BioHaZard1/XposedInstaller/tree/material

Screens of the final version:

[hjmodi]

Its really awesome..I've just tested on my device as well I posted a version of it with additional commits by DVDAndroid in forums of my device.. Many users used it and loved it also..

And I've also got some reviews and reports..

1. Some colors( the purple one in navigation drawer especially) are not proper in Dark theme( its not visible)

2. The navigation drawer is laggy especially on Logs fragment( I have tested it on my Android one 1st Gen having 1 GB RAM)

For first one I've fixed on my fork. This second one is major one but it can be solved using the spinner loading dialog just like play store so that navigation drawer just complete transition without having to wait for fragment to be loaded.

There are few more things about it and I'll consider to report you as soon as I find more to make sure that this merge will be Perfect for being official.

[hjmodi]

@rovo89 I've fixed ( thanks to DVDAndroid) almost all issues as users reported( 3k to 5k users used it on my device's local forum) and also added some features ( swipe to refresh, colorchooser etc again thanks to DVDAndroid) The only problem they have now is translation. So hope you merge it ASAP. All commits are on my local fork. And again it's well tested and approved by users( They were actually awaiting this( and your approval) desperately).

[rovo89]

Phew. I finally wanted to start merging this, but I'm already stuck when looking at the huge amount of changes. I guess I'll use your changes as template and copy parts of them manually.

[BioHaZard1]

Yeah, that's probably the best move. When you release it here are the changes I made:

• Full materiel UI redesign.
• Navigation drawer
• Toolbar
• All new icons
• CardViews
• Removed Welcome screen
• The option to select a default view at launch
• Ripple effect on touch
• Snackbars

Feel free to use the screenshots above to show the new design.

[rovo89]

A few questions I have so far:

• You have replaced some fragments by activities. I'm wondering whether it would make sense to do this for all fragments (except download details). I'm looking at the Google I/O 2014 app as a template as well and this is what they use. Do you see any disadvantages? The only thing I see it that It might be good to keep some fragements for displaying them on one screen for tables. Not sure if this could also be achieved with activities.
• What's the toolbar about? Isn't that simply the action bar?
• Could there be issues due to the missing images for lower resolutions?
• Didn't we have CardViews before?

[hjmodi]

For question on resolution, I've also had searched about ( don't exactly remember where I was got the answer but ) the answer was:

Lower resolution are not anymore used much because most of the phones now have big display compared to displays on Old devices that's why it's not anymore used. And some mechanism is also there so that for devices with lower resolutions images will be resized from higher resolutions directly.

[BioHaZard1]

• Sure, you could use activities with the navigation drawer however this might somewhat over complicate things. For example, you’d need to have multiple navigation drawers for each activity. Obviously this would require a little more coding but in the end I can’t seen any advantages of doing it this way. In fact, I’ve never seen any app do it this way. All of Google’s other apps do it the same way I did it.
• Did you mean tablets? if so, do you have a specific way you would like the app to look on tablets. Note: from what I am aware you can only have one activity on the screen at any one time. So, fragments are the way to go for dynamic layouts.
• A Toolbar is essentially an ActionBar on steroids, it’s classed as view instead of being bound by the applications decor. So this can be placed anywhere inside the interface, you could also have multiple toolbars too. We need it too for the navigation drawer to work correctly.
• Not really, if the image resource isn’t found/available it will move to the next resource density folder until the resource is found.
• Not really, it was just drawable shaped like a card :). I added the native android cardview, so for devices with API 21 (Lollipop) and higher the shadows are drawn dynamically. If you look on a lighter background you can see the shadow properly. Also a shadow is cast around the whole card to give depth/elevation from the main view.

If there is anything else, or you would like me to explain things better or more in-depth just let me know.

[rovo89]

however this might somewhat over complicate things

Well, in the I/O app, they have added the navdrawer to the base activity that all other activities inherit from. As far as I understood, this would be needed for the settings activity anyway, or how did you solve that?

All of Google’s other apps do it the same way I did it.

I didn't check in detail, I just noticed that Gmail seems to have different activities as well.

Note: from what I am aware you can only have one activity on the screen at any one time. So, fragments are the way to go for dynamic layouts.

Yes, that's what I thought. Would definitely be good to stay flexible.

[BioHaZard1]

Oh, I see, well you could do it like I did with the settings activity. Essentially, you keep fragment as it is, then you create an activity e.g. SettingsActivity. This adds the settings fragment to a container within the settings activity layout. That way you can launch the fragments as activity via the navigation draw, but as the fragment still exist you can simply add multiple fragments to a single layout for tablets. So it's kind of best of worlds really as you can keep everything dynamic. With XDA One (currently helping with development) I created a floating activity for tablets, this would look good with the DownloadActivity on Xposed.

Note: the activity would look just like it currently does, however it would just float. So you could make the Navigation draw static (always open) for tablets and then show the floating DownloadActivity when the user presses a module.

[ArionMiles]

@BioHaZard1 I'd like to make a design suggestion:

You can drop the left-side pull out navigation bar and utilise a Bottom Bar Navigation they introduced at this year's I/O. Although the material design guidelines say we must use top 3-5 top level destinations in the bottom nav bar, we can have the Framework, Modules, Download, Support, Logs in the bottom bar and you can put a link for the "About" section in the Framework window (since there's a little space on that window which remains unoccupied).

You can avoid using the labels on the bottom nav bar below the icons since it'd be crowded, and only use the icons.

Here are the guidlines: https://material.google.com/components/bottom-navigation.html