In header
my NavigationView
I have created a ImageButton
that when you click on it, it changes the menu that appears in the NavigationView
. This task works perfectly, but I want that when this is clicked ImageButton
, the image inside it rotates 90º and when you click again, it returns to the original position. All this with an animation.
The final result would be the following:
I have tried to create it in the following way, but there is no way to make it work.
A small point to note is that I think the problem arises when you introduce the animation inside the event onClick()
, because outside the said event, it works perfectly.
nav_header.xml
: It's the one header
from NavigationView
.
<?xml version="1.0" encoding="utf-8"?>
<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="180dp"
android:background="@color/colorPrimary"
android:gravity="bottom"
android:orientation="vertical"
android:padding="16dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<TextView
android:id="@+id/admin"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:textSize="16sp"
android:text="Administración"
android:textColor="@android:color/white"
android:textStyle="bold"
android:layout_weight="1"/>
<ImageButton
android:layout_width="match_parent"
android:layout_gravity="bottom"
android:layout_height="30dp"
android:id="@+id/select_menu"
android:src="@drawable/arrow_bottom"
android:layout_weight="5"
android:background="@color/colorPrimary"/>
</LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private DrawerLayout drawerLayout;
private NavigationView navView;
private View header;
private ImageButton selectMenu;
private TextView admin;
private Animation left_90, bottom_90;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
navView = (NavigationView) findViewById(R.id.nav_view);
left_90 = AnimationUtils.loadAnimation(this, R.anim.rotate_90left);
bottom_90 = AnimationUtils.loadAnimation(this, R.anim.rotate_90bottom);
if (navView != null) {
header = navView.getHeaderView(0);
selectMenu = (ImageButton) header.findViewById(R.id.select_menu);
admin = (TextView) header.findViewById(R.id.admin);
selectMenu.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (admin.getText().equals("Administración")){
v.startAnimation(left_90);
navView.getMenu().clear();
navView.inflateMenu(R.menu.nav_menu_admin);
admin.setText("Volver");
} else if (admin.getText().equals("Volver")) {
v.startAnimation(bottom_90);
navView.getMenu().clear();
navView.inflateMenu(R.menu.nav_menu_study);
admin.setText("Administración");
}
}
});
selectItemNavigationView(navView);
selectItem(navView.getMenu().getItem(0));
}
}
}
rotate_90left.xml
: This file will apply the 90º clockwise rotation effect:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90"
android:duration="1000"/>
</set>
rotate_90bottom.xml
: This file will apply the 90º counterclockwise rotation effect:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<rotate
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="0"
android:duration="1000"/>
</set>
Well, look, in my personal case I no longer use XML animations because since version 4.X you can use the ViewPropertyAnimator ones. An example of rotation with this property is as follows:
Where "view" would be the ImageButton you want to rotate.
Within
onClick()
uses :
Y
namely: