I was looking at animating the VectorDrawables I currently use in my BottomNavigationView when a tab is selected like in this Material Product Study for the Owl app. However unlike for the Toolbar view when I get the icon using MenuItem.getIcon(), cast it to AnimatedVectorDrawable and call the animate() method, there is no animation.
I was wondering if there is anything I could do to achieve this, if this will be likely included in the stable Material Components library or if I am better off creating a custom view extending the BottomNavigationView class.
we can animate the bottomnavigationview icon using below code:
bottomNavigationId.menu.getItem(i).icon =
AnimatedVectorDrawableCompat.create(this, R.drawable.ic_settings_active_avd)
val anim = bottomNavigationId.menu.getItem(i).icon as Animatable
anim.start()
but this is not working api > 24
So, better approach is create an AnimatedStateListDrawable where the AVD is the transition used into android:state_checked="true". Then you can just set this as the drawable on the MenuItem and it will run the AVD when the item is selected.
Eg:
<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:targetApi="16">
<item android:id="#+id/state_on"
android:drawable="#drawable/ic_settings_active"
android:state_checked="true"/>
<item android:id="#+id/state_off"
android:drawable="#drawable/ic_settings_inactive"/>
<transition
android:drawable="#drawable/ic_settings_active_avd"
android:fromId="#id/state_off"
android:toId="#id/state_on" />
</animated-selector>
Use this animated state list drawable as icon in menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/item_settings_fragment"
android:icon="#drawable/anim_settings"
android:title="#string/settings"
app:showAsAction="always" />
...
</menu>
Checkout below link for complete understanding bottomnavigationview with animated drawables
https://medium.com/#naththeprince/delightful-animations-in-android-d6e9c62a23d3
It's currently not possible to use animated icons with BottomNavigationView. We have had this feature request submitted internally, but have deprioritized work on it.
If you would like to help add support we'd gladly accept a pr at https://github.com/material-components/material-components-android
Make an animated vector drawable by using Shape Shifter
Add this line in build.gradle(Module:app)
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
Make Drawable selector file - selector_search.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:targetApi="16">
<item
android:id="#+id/state_on"
android:drawable="#drawable/avd_search"
android:state_checked="true" />
<item
android:id="#+id/state_off"
android:drawable="#drawable/icon_search" />
<transition
android:drawable="#drawable/avd_search"
android:fromId="#id/state_off"
android:toId="#id/state_on" />
</animated-selector>
avd search is animated vector drawable file
icon_search is normal drawable file
Use this drawable selector file as icon in menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/navigation_search"
android:icon="#drawable/selector_search"
android:title="#string/search"
/>
</menu>
Enjoy
Related
I want to change navigation drawer icons, i am trying below code in Menu.xml file. But it showing only black icon.
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".Welcome"
tools:showIn="navigation_view">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_kirtan"
android:icon="#drawable/point_red"
android:title="XYZ"/>
</group>
Expected output -
Please help me...!
Add below line in Activity class...
mNavigationView.setItemIconTintList(null);
Try to add color like this :
<item
android:id="#+id/nav_kirtan"
android:icon="#drawable/point_red"
android:title="XYZ"
android:tint="#color/redColor"
/>
or you can also do
mNavigationView.setItemIconTintList(null);
This disables all state based tinting.
I have a toolbar
There is a overflow that displays options in menu
On click of menu item, How to achieve a ripple animation
menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menuEventsTodayId"
android:title="#string/menu_events_today" />
<item android:id="#+id/menuUpcomingEventsId"
android:title="#string/menu_upcoming_events" />
<item android:id="#+id/menuSignOutId"
android:title="#string/menu_sign_out" />
</menu>
I tried with:
<item android:id="#+id/menuEventsTodayId"
android:background="?attr/actionBarItemBackground"
android:title="#string/menu_events_today" />
Its not working, How to properly achieve it
Just add the background as ?attr/selectableItemBackground. It will automatically give ripple on Android 5+
You can use following for android version above lollipop:
android:foreground="?attr/selectableItemBackground"
for prelollipop devices, you can use following:
compile 'com.balysv:material-ripple:1.0.2'
You need to define a separate style for your toolbar in the 'values' folder then add the following items to it:
<item name="selectableItemBackground">?android:selectableItemBackground</item>
<item name="android:colorControlHighlight">#color/ripple_material_dark</item>
Note:- As you can check this Link. ?android:selectableItemBackground is only properties which makes this animation.
API 21+:
android:background="?android:attr/selectableItemBackgroundBorderless"
API <21:
android:background="?android:attr/selectableItemBackground"
How is it possible?
I know the solution that uses "?attr/API_dependent_theme_reference" like this. This doesn't work for App Widget layout, unfortunately.
Also, I know the solution uses style="..." for the view and multiple style definitions in values and values-v21 folders. But looking for a way to directly assign the background property (especially as Android, unfortunately, don't support assigning multiple styles like CSS: class="style1 style2 etc"!).
You can have two custom drawables
drawable/backround_name.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="?android:attr/selectableItemBackground"
</layer-list>
and
drawable-v21/backround_name.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="?android:attr/selectableItemBackgroundBorderless"
</layer-list>
What is the proper method to use the new VectorDrawable in the toolbar?
I tried to use the app:srcCompat element as illustrated below, but nothing showed up.
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
app:srcCompat="#drawable/ic_clear"
app:showAsAction="ifRoom" />
</menu>
I have my own toolbar layout using android.support.v7.widget.Toolbar and Android Support Library v23.2 on JB (16).
Turns out it's quite easy.
Say, you have vector drawable vd_trash_24dp.
Describing MenuItem one cannot address VectorDrawable directly with android:icon. It seems ignoring app:srcCompat also.
But. As all we know ;)
AppCompat does support loading vector drawables when they are
referenced in another drawable container such as a StateListDrawable,
InsetDrawable, LayerDrawable, LevelListDrawable, and RotateDrawable
Let's try it, should we?
Create StateListDrawable vd_test_vd
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/vd_trash_24dp" />
</selector>
than
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<item android:id="#+id/menu_action_filter"
android:title="#string/menu_action_filter"
android:icon="#drawable/vd_test_vd"
android:orderInCategory="100"
app:showAsAction="always"/>
</menu>
street magic indeed.
Yes, one could try and set drawable at runtime with MenuItem.setIcon(). But who need that %)
I would like to change the expanded and default icon of my Expandable List View.
I did some research how to do this and found this question.
I think I did it just as it is described there.
I have 2 icons, the first is called defaulticon.png and the second one expandedicon.png. Bother are located in the drawable folder (not in drawable-hdpi).
My list view declaration looks like this:
<ExpandableListView
android:id="#+id/expandableListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:groupIndicator="#drawable/groupindicator">
</ExpandableListView>
The groupindicator is an xml file also located in the drawable folder and looks like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/defaulticon" android:state_empty="true"/>
<item android:drawable="#drawable/expandedicon" android:state_expanded="true"/>
</selector>
However the icons do not change. The default icon from the list view disappears and instead there is no icon.
Are there any restrictions with the resources (how big the resources can me (both are 160x160), where they have to be located,...).
I am testing the app on my S3 running Android 4.1.2.
Cheers
Change your icon size to 32 X 32, put your icon in drawable-mdpi and then try this code
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/expandedicon" android:state_expanded="true"/>
<item android:drawable="#drawable/defaulticon"/>
</selector>
First of all, resize your image to 24*24 and then copy it to the drawable-mdpi folder in Android. After that, copy and paste this code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/abc"android:state_empty="true"></item>
<item android:drawable="#drawable/downarrow" ></item>
</selector>