I have Floating action menu and I use this library to make it 'com.github.clans:fab:1.6.1' Now I need change my icon when I click on it. I have some icon, and when I click on menu I need to transform it to another icon(icon plus). Is it possible?
This is my xml:
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/menu3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
fab:menu_icon="#drawable/ic_float_cards"
android:layout_margin="16dp"
fab:menu_animationDelayPerItem="0"
fab:menu_colorNormal="#color/event_background"
fab:menu_colorPressed="#color/fab_colorPressed"
fab:menu_colorRipple="#color/fab_colorRipple"
fab:menu_labels_maxLines="2"
fab:menu_labels_ellipsize="end">
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_dial_fill"
fab:fab_label="Пополнить"
style="#style/MenuButtonsSmall.Green" />
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_dial_pay"
fab:fab_label="Оплатить"
style="#style/MenuButtonsSmall.Yellow" />
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_dial_outcome"
fab:fab_label="Перевести"
style="#style/MenuButtonsSmall.Red" />
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_dial_income"
fab:fab_label="Запрос перевода"
style="#style/MenuButtonsSmall.DarkPink" />
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_dial_send"
fab:fab_label="Сообщение"
style="#style/MenuButtonsSmall.Purple" />
</com.github.clans.fab.FloatingActionMenu>
At first icon is ic_float_cards, but when I click it should be isic_float_cross
If you have some ideas tell me please)
This does the job and will also revert to the original icon.
final FloatingActionMenu fab = (FloatingActionMenu) findViewById(R.id.menu3);
fab.setOnMenuToggleListener(new FloatingActionMenu.OnMenuToggleListener() {
#Override
public void onMenuToggle(boolean opened) {
int drawableId;
if (opened) {
drawableId = R.drawable.ic_float_cross;
} else {
drawableId = R.drawable.ic_float_cards;
}
Drawable drawable = getResources().getDrawable(drawableId);
fab.getMenuIconView().setImageDrawable(drawable);
}
});
There is a better solution which includes cross-fade animation between icon drawables. It can be found in the sample Clans' application here.
This is the code which does the job:
final FloatingActionMenu fabMenu = ...;
AnimatorSet set = new AnimatorSet();
View menuIconView = fabMenu.getMenuIconView();
ObjectAnimator scaleOutX = ObjectAnimator.ofFloat(menuIconView, "scaleX", 1.0f, 0.2f);
ObjectAnimator scaleOutY = ObjectAnimator.ofFloat(menuIconView, "scaleY", 1.0f, 0.2f);
ObjectAnimator scaleInX = ObjectAnimator.ofFloat(menuIconView, "scaleX", 0.2f, 1.0f);
ObjectAnimator scaleInY = ObjectAnimator.ofFloat(menuIconView, "scaleY", 0.2f, 1.0f);
scaleOutX.setDuration(50);
scaleOutY.setDuration(50);
scaleInX.setDuration(150);
scaleInY.setDuration(150);
scaleInX.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
fabMenu.getMenuIconView().setImageResource(fabMenu.isOpened()
? R.drawable.ic_float_cross : R.drawable.ic_float_cards);
}
});
set.play(scaleOutX).with(scaleOutY);
set.play(scaleInX).with(scaleInY).after(scaleOutX);
set.setInterpolator(new OvershootInterpolator(2));
fabMenu.setIconToggleAnimatorSet(set);
Related
I need to implement a circular reveal animation after the transition between 2 fragments is finished so that the ImageButton (android:id="#+id/update_profile_pic") will be revealed with a nice animation
The problem is that it doesn't work as it should:
setEnterSharedElementCallback(new SharedElementCallback() {
Handler handler = new Handler();
#Override
public void onSharedElementEnd(List<String> sharedElementNames,
List<View> sharedElements,
List<View> sharedElementSnapshots) {
handler.postDelayed(new Runnable() {
#Override
public void run() {
update_profile_pic.setVisibility(View.GONE);
// get the center for the clipping circle
int cx = update_profile_pic.getWidth() / 2;
int cy = update_profile_pic.getHeight() / 2;
// get the final radius for the clipping circle
float finalRadius = (float) Math.hypot(cx, cy);
// create the animator for this view (the start radius is zero)
Animator anim = ViewAnimationUtils.createCircularReveal(update_profile_pic, cx, cy, 0f, finalRadius);
// make the view visible and start the animation
update_profile_pic.setVisibility(View.VISIBLE);
anim.start();
}
}, 600);
}
});
When I try this animation in a button click listener, the button needs to be clicked twice to make the animation work
The layout is like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_simple_two"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".FragmentB"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.mikhaellopez.circularimageview.CircularImageView
android:id="#+id/profile_picture"
android:clickable="false"
android:src="#drawable/roni"
app:civ_border_color="#color/fadedText"
app:civ_border_width="0.1dp"
android:layout_width="260dp"
android:layout_height="260dp"
android:layout_margin="18dp"
android:transitionName="#string/simple_fragment_transition"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
android:scaleType="centerInside"
android:elevation="3dp"
android:layout_margin="26dp"
android:id="#+id/update_profile_pic"
android:src="#drawable/ic_menu_camera"
android:background="#drawable/round_button"
android:backgroundTint="#color/colorAccent"
app:layout_anchor="#id/profile_picture"
app:layout_anchorGravity="bottom|right|end"
android:visibility="gone"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Any help?
try to set visibility of your ImageButton to invisible instead of gone initially.
I am creating Countdown app. i finished all codes and its all working pretty fine but i am new to android animation. I need to apply below animation to my app. i tried use slide in/out but it is not working good i also tried few other animation but nothing is same as compared below animation.
once play button pressed a timer starts then once again pressed a pause button comes and a textView under pause icon which we have current countdown time. if again pressed the count start again. I am only looking for animation all other codes i have already done.
i have a ImageButton which shows icon each timer user press play/pause and TextView which shows countdown timer and another TextView which shows current timer when user press pause button.Is there anyway i can implement this animation to app?
So Any help would be appropriated as i am new to android animations. Thanks!
Here is xml:
<FrameLayout
android:layout_width="228dp"
android:layout_height="228dp"
android:layout_marginTop="7dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:id="#+id/circlea"
android:visibility="visible"
android:background="#drawable/circle">
<ImageButton
android:layout_width="142dp"
android:layout_height="142dp"
android:layout_marginTop="43dp"
android:layout_marginBottom="43dp"
android:layout_marginLeft="43dp"
android:id="#+id/play"
android:background="#000"
android:layout_marginRight="43dp"
android:src="#mipmap/icon"
android:visibility="visible" />
<TextView
android:layout_width="134dp"
android:layout_height="73dp"
android:text=""
android:textColor="#FFFFFF"
android:textSize="55sp"
android:layout_marginTop="78dp"
android:layout_marginStart="48dp"
android:id="#+id/countText"
android:fontFamily="sans-serif-light"
android:background="#000"
android:visibility="invisible" />
<TextView
android:layout_marginTop="180dp"
android:layout_marginLeft="90dp"
android:text=""
android:id="#+id/pusetext"
android:textSize="24sp"
android:textColor="#1EFFFFFF"
android:layout_width="61dp"
android:layout_height="32dp" />
</FrameLayout>
java:
//some code
super.onCreate(savedInstanceState);
play=(ImageButton)findViewById(R.id.play);
pausetext=(TextView) findViewById(R.id.pusetext);
CountText=(TextView)findViewById(R.id.countText);
play.OnClickListener startListener = new View.OnClickListener() {//first public void onClick( View v ){
play.setVisibility(View.INVISIBLE);
CountText.setVisibility(View.VISIBLE);
ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY", -(CountText.getTop() + CountText.getHeight()), 0);
slideDownAnimTextView.start();
}
CountText.setOnClickListener
public void onClick( View v ){//pause click
play.setVisibility(View.VISIBLE);
ObjectAnimator slideDownAnimPlayButton = ObjectAnimator.ofFloat(play, "translationY", -(play.getTop() + play.getHeight()), 0);
ObjectAnimator scaleDownAnimTextViewX = ObjectAnimator.ofFloat(CountText, "scaleX", 1f, 0.5f);
ObjectAnimator scaleDownAnimTextViewY = ObjectAnimator.ofFloat(CountText, "scaleY", 1f, 0.5f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(1000);
animatorSet.playTogether(slideDownAnimPlayButton,scaleDownAnimTextViewX,scaleDownAnimTextViewY);
animatorSet.start();
}
play.setOnClickListener
public void onClick(View view) {resume click
play.setVisibility(View.INVISIBLE);
CountText.setVisibility(View.VISIBLE);
}
CountText.setOnClickListener(new View.OnClickListener() //pause click agine
#Override
public void onClick(View view) {
//some code
You can use the HTextView library to achieve the first part of the animations(showing the text).
Then, use ObjectAnimators to slide and scale the text down, and to slide the play button down (Use AnimatorSet to play them all together).
Here's a sample code (you should, of course, change the values according to your needs) -
ObjectAnimator slideDownAnimPlayButton = ObjectAnimator.ofFloat(play, "translationY", -(CountText.getTop()), 0);
ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY",0, (CountText.getTop() ));
ObjectAnimator scaleDownAnimTextViewX = ObjectAnimator.ofFloat(CountText, "scaleX", 1f, 0.5f);
ObjectAnimator scaleDownAnimTextViewY = ObjectAnimator.ofFloat(CountText, "scaleY", 1f, 0.5f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(1000);
animatorSet.playTogether(slideDownAnimPlayButton,slideDownAnimTextView,scaleDownAnimTextViewX,scaleDownAnimTextViewY);
animatorSet.start();
Edit: Seeing your new code now, the problem with the first text animation is that you call it from onCreate(), so the View hasn't been drawn yet, meaning he does not have valid Height or Top parameters.
You can solve it by giving your animation a small delay, or using a ViewTreeObserver. See the following examples -
Starting your animation with a delay -
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY", -(CountText.getTop() + CountText.getHeight()), 0);
slideDownAnimTextView.start();
}
}, 300);
Or, perhaps the better way, use a ViewTreeObserver -
CountText.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
CountText.getViewTreeObserver().removeOnGlobalLayoutListener(this);
ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY", -(CountText.getTop() + CountText.getHeight()), 0);
slideDownAnimTextView.start();
}
});
I am having problem in animation of a single list item. how can i get the flip view upon click on the single item and get the detail on back of the item?
Create your list row item as below
<RelativeLayout
android:id="#+id/rellay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true" >
<TextView
android:id="#+id/back"
android:layout_width="300dp"
android:layout_height="200dp"
android:background="#drawable/linearlayoutshape"
android:gravity="center"
android:text="BACK"
android:textAppearance="#android:style/TextAppearance.Large"
/>
<TextView
android:id="#+id/front"
android:layout_width="300dp"
android:layout_height="200dp"
android:background="#drawable/linearlayoutshape"
android:gravity="center"
android:text="FRONT"
android:textAppearance="#android:style/TextAppearance.Large" />
In this case i used to textView as Front and Back.
Now inside your adapter add this method..
public void flip(final View front, final View back, final int duration)
{
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {
AnimatorSet set = new AnimatorSet();
set.playSequentially(
ObjectAnimator.ofFloat(front, "rotationY", 90).setDuration(duration / 2),
ObjectAnimator.ofInt(front, "visibility", View.GONE).setDuration(0),
ObjectAnimator.ofFloat(back, "rotationY", -90).setDuration(0),
ObjectAnimator.ofInt(back, "visibility", View.VISIBLE).setDuration(0),
ObjectAnimator.ofFloat(back, "rotationY", 0).setDuration(duration / 2));
set.start();
} else
{
front.animate().rotationY(90).setDuration(duration / 2)
.setListener(new AnimatorListenerAdapter()
{
#Override
public void onAnimationEnd(Animator animation) {
front.setVisibility(View.GONE);
back.setRotationY(-90);
back.setVisibility(View.VISIBLE);
back.animate().rotationY(0).setDuration(duration / 2).setListener(null);
}
});
}
}
Now on click of row item just call flip method like
flip(txtFront, txtBack, DURATION);
It will add the flip animation and make txtBack visible and hide the txtFront
i should to do like at the picture.Buttons have to change with animations. It must be like circle horizontal scroll view.When i press button "3" - "1" - moved to position "2", "2" moved with animation to position "3". Please give me some ideas, how can i perform it?
Try this..
STEP 1:
Create 4 Button's dummy_btn,btn_1,btn_2,btn_3 in xml like below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center" >
<Button
android:id="#+id/dummy_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Button"
android:visibility="gone" />
<Button
android:id="#+id/btn_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:id="#+id/btn_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Button 2" />
<Button
android:id="#+id/btn_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Button 3" />
</LinearLayout>
STEP 2:
Declear the Button's in Global variables like below
Button btn_1,btn_2,btn_3,dummy_btn;
Initialize Button's like below
btn_1 = (Button) findViewById(R.id.btn_1);
btn_2 = (Button) findViewById(R.id.btn_2);
btn_3 = (Button) findViewById(R.id.btn_3);
dummy_btn = (Button) findViewById(R.id.dummy_btn);
STEP 3:
btn_1 ClickListener like below
btn_1.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
// Get all currently displaying text of Button
final String btn_1_string = btn_1.getText().toString().trim();
final String btn_2_string = btn_2.getText().toString().trim();
final String btn_3_string = btn_3.getText().toString().trim();
// First Button Left to Right Animation
TranslateAnimation anim = new TranslateAnimation(0f, 200f, 0f, 0f);
anim.setDuration(2000);
btn_1.startAnimation(anim);
// Second Button Left to Right Animation
anim = new TranslateAnimation(0f, 200f, 0f, 0f);
anim.setDuration(2000);
btn_2.startAnimation(anim);
// Third Button Left to Right Animation
anim = new TranslateAnimation(0f, 200f, 0f, 0f);
anim.setDuration(2000);
btn_3.startAnimation(anim);
btn_3.setVisibility(View.INVISIBLE);
dummy_btn.setText(btn_3.getText().toString().trim());
// Dummy Button Left to Right Animation for like marquee animation
dummy_btn.setVisibility(View.VISIBLE);
anim = new TranslateAnimation(-200f, 0f, 0f, 0f);
anim.setDuration(2000);
dummy_btn.startAnimation(anim);
// After 2000 Millis displaying text
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
#Override
public void run() {
btn_2.setText(btn_1_string);
btn_3.setText(btn_2_string);
btn_1.setText(btn_3_string);
btn_3.setVisibility(View.VISIBLE);
dummy_btn.setVisibility(View.GONE);
}
}, 2000);
}
});
and the remaining two Button ClickListener
btn_2.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
btn_1.performClick();
}
});
btn_3.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
btn_1.performClick();
}
});
hi im wanting to know how to scale animate a logo and move its position?
i have an if statement that runs some checks and then when its done i want it to scale down an image view (logo) and move it up.
heres my layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/bg_default" >
<ImageView
android:id="#+id/su_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="34dp"
android:src="#drawable/su_logo"
android:contentDescription="#string/cd_su_logo"/>
<ImageView
android:id="#+id/su_shirts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/su_shirts"
android:contentDescription="#string/cd_su_shirts" />
</RelativeLayout>
heres my java
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_initialsetup);
preChecks();
}
public void preChecks(){
//check for internet connection
//check version
String curVersion = getResources().getString(R.string.app_versionCode);
int curVer = Integer.parseInt(curVersion);
String LiveVersion = "100";
int liveVer = Integer.parseInt(LiveVersion);
if(curVer < liveVer) Log.v("setup", "There is a new version");
else {
//scale animation
}
}
You can do that by applying ScaleAnimation and TranslateAnimation together in AnimationSet
// Scaling
Animation scale = new ScaleAnimation(fromXscale, toXscale, fromYscale, toYscale, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
// 1 second duration
scale.setDuration(1000);
// Moving up
Animation slideUp = new TranslateAnimation(fromX, toX, fromY, toY);
// 1 second duration
slideUp.setDuration(1000);
// Animation set to join both scaling and moving
AnimationSet animSet = new AnimationSet(true);
animSet.setFillEnabled(true);
animSet.addAnimation(scale);
animSet.addAnimation(slideUp);
// Launching animation set
logo.startAnimation(animSet);