Ripple effect on custom navigation drawer - android

I'm developing my first app providing to it the new material look. I'm a bit lost with this so I'm following some tutorials to implement things like Toolbar, Navigation Drawer, etc. I have to say that I'm doing it providing compatibility to pre-lollipop android versions, so I'm using support libraries.
What concers to my question, is that I have just implemented the Navigation Drawer following one of this tutorials and using the following libraries for compatibility:
support.v4.widget.DrawerLayout
support.v7.widget.RecyclerView
I think that the code implementation is too long to put it here, so I'll provide the link to this tutorial, I have done it exactly as is said here.
My problem is that, when I select one item from the navigation drawer's row, it perfectly opens it correspondant frament, but, it doesn't show any ripple effect, or simply any touch effect, when touching it. Something like this:
I have taken a look to some other tutorials, for example, to the one to which belongs the attached gif, to see if they use any method or implementation to provide that efect to the touch, but nothing is implemented to get that effect, just the onclick method.
So, what's wrong with this code, and how could I modify it, or what could I add to get that effect?

As you are using appcompat you can add this to the XML for your navigation drawer item android:background="?attr/selectableItemBackground".
This should provide the ripple effect on Lollipop devices and a fallback grey highlight for older devices.

Related

How to get a seamless transition from app bar to status bar

So I'm currently trying to migrate an app to use Material 3 consistently. Previously it was stiched together without any real design concept. Now I want to actually look like something to take serious.
One thing I haven't been able to figure out is how to give the status bar the same color as the title bar. Currently it looks like this:
The official documentation however lists the seamless version in the "What's new" section:
I'm currently using a LinearLayout with the Theme.Material3.DayNight theme (without any modifications for now) and from what I was able to learn from the documentation I need to make use of components like MaterialToolbar inside a AppBarLayout inside a CoordinatorLayout so everything works as intended. I tried doing that and the scrolling and lifting now works as described in the documentation, but the color of the status bar remains unchanged unfortunately.
I'm not sure at this point if my expectations are wrong or if my code is. I believe that there has to be a built-in mechanism that automatically adjusts the status bar's colour to dynamically match the one of the app bar. I might be wrong though and the material-components-android expects me to implement the logic myself. In any case, could someone point me towards an example implementation where this transition is seamless? This way I could modify my code to implement this behaviour.
I'm currently using com.google.android.material:material:1.5.0 in case this is relevant to the problem.
Thanks in advance!

Android Navigation Drawer should be centralized vertically

I have made my navigation drawer and it is working all fine , it is according to new design rules. but now I have a problem and after a couple of search I have found no note over it so far. So I end up with asking question here.
What I have done so far is some thing like
the picture shows you the demo , How ever I have made some thing like this its just the demo to give you people hint about what is header in the navigation drawer and where my menu items list lies
You can clearly see that there is a header in the navigation drawer and the menu item list beneath it .
Problem 1
now do to some reasons I have deleted the header , but my menu Items goes upwards to the top starting point. I know I can give margin up , but this is not the good way
Is there any good way I can just centralized them vertically ? I am wondering How to do it , Please Help me .
and Problem 2 is , I want to minimize the distance and margin between the menu items and menu icons in navigation drawer How to do this. I have not seen any of the discussion over it.
Please help me in solving both problems.
On screenshot you attached to your question, the navigation drawer doesn't look fine and according to the new desing rules :-/
Just have a look at the official guide: https://www.google.com/design/spec/patterns/navigation-drawer.html
Luckly for you nowdays we are provided by Google with Android Design Support Library that helps us with creating Navigation View (that replaces Navigation Drawer)
Here are links for you:
official documentation, always a good read: https://developer.android.com/reference/android/support/design/widget/NavigationView.html
nicely written blog post about Navigation View: http://antonioleiva.com/navigation-view/
and last but not least, sample app using new Android Design Library: https://github.com/antoniolg/MaterializeYourApp
I know it's not the answer you were looking for, like "just change true to false in the line number 10" but stay assured that using official Navigation View is a way to go in modern Android world.
You can use the new NavigationView from the Android Design Support Library in making your navigation drawer. NavigationView make s creating material design-compliant navigation drawer.
You can read about it at http://android-developers.blogspot.com/2015/05/android-design-support-library.html
Read these three articles
Take a look at this code
Use the design support library

Material sidebar icon animation (e.g. Gmail)

I am investigating if there is a 15+ API to implement sidebar icon transitions as displayed on the video by google:
http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B0NGgBg38lWWRm5QODB0bk95SUE/patterns-loadingimages-loading-070901_Load_Add_Animation_xhdpi_002.mp4
If I use the classic ObjectAnimator.fromFloat() the code will be huge and cumbersome.
Is there a way to reposition the items with a reasonable length of code?
Use the following library with sample.
https://github.com/neokree/MaterialNavigationDrawer
You will get the perfect result as you want

How to get the files necessary for a floating action button?

All across the internet and several Stack Overflow pages, there are detailed instructions for the implementation of Floating Action Buttons, but nobody explains where I might be able to acquire the icon myself. Is everyone creating his own action buttons for his UI, or is there a downloadable library somewhere I have yet to discover?
Please link and explain!
Google doesn't provide any code for it, but it should be pretty basic to build yourself.
If you'd prefer to use a library for it, I use this one by shamanland: floating-action-button. You can change the color and icon displayed, and have it auto-hide when the user is scrolling.
There's another popular library by futuresimple here: android-floating-action-button. It includes support for sub-actions with text labels, and two button sizes, but won't give you auto-hiding on scrolling. I think I started with this one and switched to shamanland's, but I don't remember why.
I am creating Floating Action Button and shadow with .xml files as explained here and using icons from icons8.com, it has Android Lollipop specific icons.

What is the new slide-menu that apps like 4sq and G+ are using recently?

well, I am working with an slide-menu library a couple of months ago (https://github.com/jfeinstein10/SlidingMenu), but I'm having trouble working with it since I'm using a Map fragment and I have this error: How to remove black cover on top of sliding menu?
I have worked with some workarounds about how to "solve" this issue, but anyways, in some phones doesn't look that fine. So I was wondering about changing slide-menu library, and then I saw 4sq and G+ changing theirs. About a month ago, for example, G+ used to look like this: How did Google manage to do this? Slide ActionBar in Android application
And 4sq like this: ActionBar and sliding out menu in android, but now they changed (to the same slide menu library I guess) and look like this:
You can see here that 4sq app changed the menu most likely because they suffered same issue with the map fragment.
As you can see, now slide menu goes OVER the view, and it has 3 horizontal tiny bars that hints the user to tap on it in order to discover a menu. Those bars shrink and expand when expanding/colapsing the menu.
I remember once I saw someone here in stackoverflow referencing this library, It's just I can't remember the name of the library neither the question I read it from.
This is the new DrawerLayout class in the support library. There's an entire page devoted to setting it up here.
To get more informations about practices, design or navigation, check this page.

Categories

Resources