We Keep Coding

Android DrawerLayout icon animation

I'm trying to animate the icons in my DrawerLayout using an AnimationDrawable. I created a new project selecting Navigation Drawer Activity as the main activity. I created an animation from a set of XML files and the animation runs in the previewer in Android Studio. I set the animation XML as the icon on the menu item and add a DrawerListener.onDrawerOpened(View V) that gets the menu item, gets its icon and calls start() as described here https://developer.android.com/guide/topics/graphics/drawable-animation. This seemed pretty straightforward to implement but also too simple which is why I wasn't too surprised when it didn't work. It just shows the first image in the series and never changes to the other images. If I run the app in the debugger I see that the icon is indeed an AnimationDrawable and that the icon's instance variables mAnimating and mRunning change from false to true when I call start() on it. Obviously there is something more I need to be doing but I don't know what. I did notice that the icon's mAnimationRunnable is set to null and I'm guessing this might have something to do with it.
Animation ld.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item android:drawable="#drawable/ic_untitled_1" android:duration="500" />
<item android:drawable="#drawable/ic_untitled_2" android:duration="500" />
<item android:drawable="#drawable/ic_untitled_3" android:duration="500" />
<item android:drawable="#drawable/ic_untitled_4" android:duration="500" />
<item android:drawable="#drawable/ic_untitled_5" android:duration="500" />
<item android:drawable="#drawable/ic_untitled_6" android:duration="500" />
<item android:drawable="#drawable/ic_untitled_7" android:duration="500" />
<item android:drawable="#drawable/ic_untitled_8" android:duration="500" />
</animation-list>
Drawer activity_main_drawer.xml
<?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:showIn="navigation_view">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ld"
android:title="#string/menu_home" />
<item
android:id="#+id/nav_settings"
android:icon="#drawable/ic_menu_gallery"
android:title="#string/menu_settings" />
<item
android:id="#+id/nav_timers"
android:icon="#drawable/ic_menu_slideshow"
android:title="#string/menu_timers" />
</group>
</menu>
Main layout activity_main.xml
<androidx.drawerlayout.widget.DrawerLayout 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"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
android:id="#+id/app_bar_main"
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>
Main activity onCreate MainActivity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
com.company.databinding.ActivityMainBinding binding = ActivityMainBinding.inflate(getLayoutInflater());
setContentView(binding.getRoot());
setSupportActionBar(binding.appBarMain.toolbar);
DrawerLayout drawer = binding.drawerLayout;
NavigationView navigationView = binding.navView;
// Passing each menu ID as a set of Ids because each
// menu should be considered as top level destinations.
mAppBarConfiguration = new AppBarConfiguration.Builder(R.id.nav_home, R.id.nav_settings, R.id.nav_timers).setOpenableLayout(drawer).build();
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment_content_main);
NavigationUI.setupActionBarWithNavController(this, navController, mAppBarConfiguration);
NavigationUI.setupWithNavController(navigationView, navController);
binding.drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
#Override
public void onDrawerSlide(#NonNull View drawerView, float slideOffset) {
}
#Override
public void onDrawerOpened(View drawerView) {
((AnimationDrawable)navigationView.getMenu().getItem(0).getIcon()).start();
}
#Override
public void onDrawerClosed(#NonNull View drawerView) {
((AnimationDrawable)navigationView.getMenu().getItem(0).getIcon()).stop();
}
#Override
public void onDrawerStateChanged(int newState) {
}
});
}

I haven't been able to make the AnimationDrawable start() as a menu icon but it does start if I display it in an ImageView in the navigation header. So I manually animated it myself. Here is my MenuIconAnimator class. I still use a DrawerListener and in onDrawerOpened(View drawerView) I create an instance of my animator class passing it the menu item and then I call start() on it. This swaps the menu icon based on the parameters setup in the animation XML. And then in onDrawerClosed(#NonNull View drawerView) I call the method stopThread() on the MenuIconAnimator and the thread stops.
Here are the relevant DrawerListener methods. menuIconAnimator is an instance variable on my activity class.
#Override
public void onDrawerOpened(View drawerView) {
menuIconAnimator = new MenuIconAnimator(navigationView.getMenu().getItem(0));
menuIconAnimator.start();
}
#Override
public void onDrawerClosed(#NonNull View drawerView) {
menuIconAnimator.stopThread();
}
Here is my MenuIconAnimator class.
package com.leridiandynamics.smartrecirculationcontrol2.ui;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Looper;
import android.view.MenuItem;
public class MenuIconAnimator extends Thread{
Boolean running=true;
MenuItem menuItem;
public MenuIconAnimator(MenuItem menuItem){
this.menuItem = menuItem;
}
public void stopThread(){
running = false;
}
public void run() {
// Get the icon that is set on the menuItem. This is an AnimationDrawable.
// Hold onto it while we manually animate each frame by setting the frame
// drawable as the menuItem icon.
AnimationDrawable animationDrawable = ((AnimationDrawable)menuItem.getIcon());
Handler mainHandler = new Handler(Looper.getMainLooper());
while (running) {
try {
// loop through each frame setting it as the icon on the menu item and then sleep
// the thread for the duration of the frame.
for (int i=0; i<animationDrawable.getNumberOfFrames();i++){
Drawable drawable = animationDrawable.getFrame(i);
mainHandler.post(() -> menuItem.setIcon(drawable));
sleep(animationDrawable.getDuration(i));
if (!running) break;
}
} catch (InterruptedException e) {
e.printStackTrace();
}
}
// restore the original animationDrawable on the menuItem so it is available the next time
// the MenuIconAnimator is called.
mainHandler.post(() -> menuItem.setIcon(animationDrawable));
}
}
UPDATE: It seems that if you have the animation running too quickly the menu is not very responsive to user input. Maybe that is why animation doesn't work on the menu items out of the box.
UPDATE 2: I have discovered that if the menu item's icon is changed while the user is tapping the menu item, the tap does not register. Finger touch, icon change, finger release...the menu item selection does not register.
UPDATE 3: This does not appear to be a viable solution to making AnimationDrawable work on a MenuItem. When the icon is changed the entire menu appears to redraw and any touch events are reset. I submitted an issue with Google regarding AnimationDrawable not animating on a MenuItem. https://issuetracker.google.com/issues/226640828 Will see if this gets addressed.

App crashes when using TransitionDrawable

I want to transition the color of my background when a button is clicked but my app seems to crash once I press the button. The button runs the TransitionDrawable code. I have set my background to the drawable folder containing the transition.Could anyone help me? Thank you very much!
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void colourChangeButton(View view) {
final TransitionDrawable transition = (TransitionDrawable) view.getBackground();
transition.startTransition(1000);
}
}
Here are my drawable files that define the colours:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#2575fc"></color>
</item>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#ff0844"></color>
</item>
</selector>
Here is my transition drawable file :
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/blue_background"></item>
<item android:drawable="#drawable/pink_background"></item>
</transition>

You are almost there!
You need to set the transition drawable as the background of your view.
Let's say your activity's layout xml is called activity_main.xml and your
transition drawable file is called transition.xml.
In the root layout of your activity_main.xml:
<LinearLayout
...
id="#+id/main_layout"
background="#drawable/transition">
<Button
id="#+id/start_transition_button"
... />
...
In MainActivity.java:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewGroup layout = (ViewGroup) findViewById(R.id.main_layout);
TransitionDrawable transition = (TransitionDrawable) layout.getBackground();
Button button = (Button) findViewById(R.id.start_transition_button);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
transition.startTransition(500);
}
}
}
}
Here is a good post about it:
https://proandroiddev.com/transitiondrawable-small-gems-of-the-android-framework-4dcdd3c83319

Menu action items goes to overflow menu

You will have to forgive me, because I am still pretty new to android development. For my android app, I am staying to create a custom menu and place on the tool bar with the java code in a base activity that is extended by the other activities. But for some reason, the menu buttons are hiding in the overflow menu even though there is more than enough room for them to be showing. I feel like my code is correct, but I need to add a reference to something somewhere else that I am missing. Thanks in advance!
Current toolbar appearance
BaseActivity.java
public abstract class BaseActivity extends AppCompatActivity {
private Toolbar toolBar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(getLayoutResource());
toolBar = (Toolbar) this.findViewById(R.id.toolbar);
if (toolBar != null) {
setSupportActionBar(toolBar);
if (getSupportActionBar() != null) {
setDisplayHomeEnabled(true);
}
}
}
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main_menu, menu);
return true;
}
protected abstract int getLayoutResource();
public void setDisplayHomeEnabled(boolean b) {
if (getSupportActionBar() != null) {
getSupportActionBar().setDisplayHomeAsUpEnabled(b);
}
}
#Override
public void setTitle(CharSequence title) {
toolBar.setTitle(title);
}
#Override
public void setTitle(int titleId) {
toolBar.setTitle(titleId);
}
public Toolbar getToolBar() {
return toolBar;
}
}
toolbar.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextColor="#android:color/white"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
</LinearLayout>
main_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/menu_settings"
android:title="Settings"
android:icon="#android:drawable/ic_menu_preferences"
android:showAsAction="always"/>
<item
android:id="#+id/menu_search"
android:title="Search"
android:showAsAction="always"
android:icon="#android:drawable/ic_menu_search"
android:actionViewClass="android.widget.SearchView"/>
</menu>

In your main_menu.xml file, add an 'app' tag for showAsAction as I have done below. It worked for me. See if that works for you too.
<?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/menu_settings"
android:title="Settings"
android:icon="#android:drawable/ic_menu_preferences"
app:showAsAction="always"/>
<item
android:id="#+id/menu_search"
android:title="Search"
app:showAsAction="always"
android:icon="#android:drawable/ic_menu_search"
android:actionViewClass="android.widget.SearchView"/>
</menu>

Toolbar icons not appearing in AppCompat Activity

I am trying to add toolbar to my app but somehow it is not working. Neither title not action icons are appearing. Even " : " menu is also not appearing. Here are my codes:
Style.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
Menu_main.xml:
<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"
tools:context="com.example.vaibhav.thirdeye.MainActivity">
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
<item android:id="#+id/next"
android:title="#string/next"
android:orderInCategory="200"
android:icon="#drawable/next_arrow"
app:showAsAction="always"/>
</menu>
content_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/back_splash"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.example.vaibhav.thirdeye.MainActivity"
tools:showIn="#layout/activity_main"
app:theme="#style/AppTheme.NoActionBar">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
MainActivity.java:
public class MainActivity extends AppCompatActivity {
public static final String EXTRA_MESSAGE = "com.example.vaibhav.thirdeye.MESSAGE";
Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Adding Custom toolbar
toolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.next_arrow);
toolbar.setTitle("ThirdEye");
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main,menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
switch (id){
case R.id.action_settings:
Toast settings = Toast.makeText(this, "Voila!", Toast.LENGTH_SHORT);
settings.show();
case R.id.next:
Toast next = Toast.makeText(this, "Voila!", Toast.LENGTH_SHORT);
next.show();
}
return true;
}
}
app_bar.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/icon_size"
android:background="#color/colorPrimary">
</android.support.v7.widget.Toolbar>
Output Screenshot:
Any helps????

Remove extra toolbars in your MainActivity's activity_main.xml layout, it will solve your problems.

layer-list and ClipDrawable

I have a problem with a simple piece, and I can't understand what is going wrong. What is the problem here? It should be simple.
I'm trying to do a 2-layer layer-list with one layer as a clip. Here is clip_source.xml which I made by instructions:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/img_spare"/>
<item android:id="#+id/clip">
<clip
android:clipOrientation="horizontal"
android:drawable="#drawable/img_filled"
android:gravity="left" />
</item>
</layer-list>
The Activity is simple :
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView img = (ImageView) findViewById(R.id.imageView1);
LayerDrawable ld= (LayerDrawable) getResources().getDrawable(R.drawable.clip_source);
ClipDrawable cd=(ClipDrawable) ld.findDrawableByLayerId(R.id.clip);
cd.setLevel(4000);
//((ClipDrawable) ld.findDrawableByLayerId(R.id.clip)).setLevel(4000);
img.setImageDrawable(ld);
}
}
cd.setLevel(4000) (or if I try getLevel()) crashes everything with an unknown Exception. Is there a simple way to fix this?