Enhance design to conform with Material Design guidelines

[kaine119]

Coming from this GCI 2016 task: https://codein.withgoogle.com/dashboard/task-instances/5984010633216000/

Hi, I'd like to revamp the UI to conform with Material Design guidelines.

A few questions:

• What is this app mainly designed to do? What's its main focus?
• Is there a minimum Android version I need to support? I'm not entirely sure, but some UX libraries for Material aren't compatible with older versions of Android

Thanks!

[pa1pal]

@kaine119 the objective of Phimpme is to share images to many social networks right from the app.
The project was very old some improvements done on the features so not every feature is working. No improvement was done on the design part yet. The objective of this task is to learn the material design guidelines and concepts of sizes and densities. The minimum android version is 4.0. So first clone the app run in your system and see what possible changes you can. Discuss it here and start working.

[kaine119]

@pa1pal: I'd like to replace the TabHost navigation bar currently used with a nav drawer. I'll most likely do this with the DrawerLayout class from the Support Library to keep backwards compatibility.

I'm currently having issues figuring out how the navbar works currently; I understand that whenever a user selects a different tab the content layout is replaced, but I'm not sure how exactly it works.

The DrawerLayout class lets you put arbitrary layouts in the content frame (behind the drawer) and the drawer itself. The drawer is typically a NavigationView or a ListView that lets you run some code whenever an item in the list is selected. I'm presuming that, with this system, said code would be to replace the main frame layout with a corresponding layout. How would I do this, and how would I replace the TabHost with this system? Please advise.

Thanks!

[pa1pal]

@kaine119 nice progress. TabActivity is deprecated but not the TabHost that's why it is still working fine. In Tabhost you can add your Activities on a tab and directly using callback functions show then onClick. Here is the link in the code.

In this app, we want a bottom navigation drawer for which you have to change a lot of things because they do fragment transaction which we can't use right now. In Design support library version 25.0.0 BottomNavigationView introduced. Look into some similar third party libraries which we can use with activities without changing much code.

[pa1pal]

Try doing Drawer layout as bottom view. Search you will get some tutorials. Or use BottomNavigationview with activities. Add the bottomview code in every activity and change using listners.

[kaine119]

@pa1pal: I think I'll use the BottomNavigationView. Drawers are supposed to come out from the side, according to the spec. Moving to BottomNavigationView also has the benefit of moving the tab options to a menu resource, which (hopefully) can be reused in case the navigation library changes.

To clarify, are tabs changed by starting an intent for the corresponding class? because as far as I can tell, intents put into spec.setContent() are activated when the tab is selected. Is this correct?

[pa1pal]

Yes, @kaine119 your are correct :+1: If you are not familiar you can see the documentation of any function by ctrl+click on it inside Android Studio.

[kaine119]

@pa1pal There also seem to be two different map tabs with the same icon: OpenStreetMap and GalleryMap. Which is to be used?

Also, I'll be updating some of the icons, should I get rid of the old ones or do I need to keep them there?

[pa1pal]

Use OpenStreetMap because of maps v1 API it is of no use. Skip it for now. Use 4 activities.

[kaine119]

How's this? The icons expand when you select them. The grey area in the background will be the content.

[kaine119]

@pa1pal: Launching a new activity with intents draws over the navigation bar. Apart from the camera, would it be better just to convert the activities to fragments, then swap them out as needed?

[kaine119]

@pa1pal I'm done! PR #24