android animation incorrectly animating - java

I have a top level LinearLayout that has many children composed of a button followed by an invisible LinearLayout. When I press the button, I would like the contents of the LinearLayout to animate and press everything down smoothly. Instead what is happening is a big white space is instantly being carved out and then the LinearLayout animates into the empty space instead of everything being gracefully pushed down.
My onCreate method creates the massive LinearList plus all the children of each child LinearList. If you run this code you will see 20 buttons labled "Button X" where X is 0-19. When you click on a button indented buttons animate below (like a sub menu) but the next button in the form of "Button X+1" is immediately painted all the way down and not animated being pushed down.
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LinearLayout topll = (LinearLayout)findViewById(R.id.topll);
for(int i=0;i<20;i++)
{
Button b = new Button(this);
b.setText("Button"+String.format("%s", i));
b.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, 1f));
b.setOnClickListener(this);
topll.addView(b);
LinearLayout l = new LinearLayout(this);
l.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, 1f));
l.setVisibility(View.GONE);
l.setOrientation(LinearLayout.VERTICAL);
for(int k=0; k<10; k++)
{
Button b2 = new Button(this);
b2.setText("New Button"+String.format("%s", k));
LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, 1f);
p.setMargins(80, 0, 0, 0);
b2.setLayoutParams(p);
//b2.setOnClickListener(this);
l.addView(b2);
}
topll.addView(l);
}
}
And here is my method that gets called when a button is pushed...
#Override
public void onClick(View arg0)
{
LinearLayout topll = (LinearLayout)findViewById(R.id.topll);
for(int i=0;i<topll.getChildCount();i++)
{
if(topll.getChildAt(i) == arg0)
{
LinearLayout ll = (LinearLayout)topll.getChildAt(i+1);
if(ll.getVisibility() == View.GONE)
{
Animation animation = AnimationUtils.loadAnimation(this, R.anim.expanddown);
ll.setAnimation(animation);
animation.start();
ll.setVisibility(View.VISIBLE);
}
else
{
Animation animation = AnimationUtils.loadAnimation(this, R.anim.expandup);
ll.setAnimation(animation);
animation.start();
ll.setVisibility(View.GONE);
}
}
}
}
and finally my animation xml file
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:duration="1000"
android:startOffset="0"
android:fillAfter="false"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:toXScale="1.0"
android:pivotY="0%"/>
</set>

first of all use
ll.startAnimation(animation);
instead of :
ll.setAnimation(animation);
animation.start();
then use an animation listener and
animation.setAnimationListener(new AnimationListener() {
public void onAnimationStart(Animation anim)
{
};
public void onAnimationRepeat(Animation anim)
{
};
public void onAnimationEnd(Animation anim)
{
ll.setVisibility(View.VISIBLE);
// or what ever
};
});

Related

Animation doesn't end - Android

In my app, I have a button to show a drop-down menu, inside of that menu we have some options, one of this is "flip A coin",
the purpose of this option is to flip a coin easy animation, that animation appears inside a textView, and show a head-side or a tail-side of a coin instead of the text in the textView.
I have two problems:
The animation doesn't work how I want, it should appear in 1 second a coin instead of the text inside the textView, it stays there and after 2 seconds he disappears, but after the disappearance, the coin image come back inside the textView, it shouldn't reappear.
This is not a real question for a problem but more an optional question like "you know how to do that?". I 'don't know how to create a flip animation with a coin multiple rotations.
XML drop down menu:
<item
android:id="#+id/flipacoin"
android:title="#string/flipACoin" />
<item
android:id="#+id/rolladice"
android:title="#string/rollADice" />
<item
android:id="#+id/imagebackground"
android:title="#string/changeImage" />
JAVA code that calls the animation function:
#Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.flipacoin:
flipACoin();
return true;
case R.id.rolladice:
Toast.makeText(this,"TODO roll a dice",Toast.LENGTH_SHORT).show();
return true;
case R.id.imagebackground:
Toast.makeText(this,"TODO image background",Toast.LENGTH_SHORT).show();
return true;
default:
return false;
}
}
JAVA animation function:
public void flipACoin(){
coin.setText(null); //this is for remove the text inside the textView
coin.setBackground(RANDOM.nextFloat() > 0.5f ? getResources().getDrawable(R.drawable.tails) : getResources().getDrawable(R.drawable.heads));
Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setInterpolator(new DecelerateInterpolator());
fadeIn.setDuration(1000);
Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setInterpolator(new AccelerateInterpolator());
fadeOut.setStartOffset(2000);
fadeOut.setDuration(1000);
AnimationSet animation = new AnimationSet(false);
animation.addAnimation(fadeIn);
animation.addAnimation(fadeOut);
coin.setAnimation(animation);
}
When You set background at the beginning it just stays after animation. To set back text and background to null You can add Animation listener. Below is sample application which does it:
public class MainActivity extends AppCompatActivity
{
TextView coin;
Random RANDOM;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RANDOM = new Random();
coin = findViewById(R.id.coin);
(findViewById(R.id.click)).setOnClickListener(new View.OnClickListener()
{
#Override
public void onClick(View view)
{
flipACoin();
}
});
}
public void flipACoin()
{
coin.setText(null);
coin.setBackground(ResourcesCompat.getDrawable(getResources(),
RANDOM.nextFloat() > 0.5f ? R.drawable.ic_launcher_background : R.drawable.ic_launcher_foreground,
null
));
Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setInterpolator(new DecelerateInterpolator());
fadeIn.setDuration(1000);
Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setInterpolator(new AccelerateInterpolator());
fadeOut.setStartOffset(2000);
fadeOut.setDuration(1000);
AnimationSet animation = new AnimationSet(false);
animation.addAnimation(fadeIn);
animation.addAnimation(fadeOut);
// listener, it will execute function when animation starts/ends/repeats
animation.setAnimationListener(new Animation.AnimationListener()
{
#Override
public void onAnimationStart(Animation animation)
{
Log.d("MyTag", "onAnimationStart:");
}
#Override
public void onAnimationEnd(Animation animation) // when animation ends, set text and background to null
{
Log.d("MyTag", "onAnimationEnd:");
coin.setBackground(null);
coin.setText("Default");
}
#Override
public void onAnimationRepeat(Animation animation)
{
Log.d("MyTag", "onAnimationRepeat:");
}
});
coin.setAnimation(animation);
}
}
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<Button
android:id="#+id/click"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click"
/>
<TextView
android:id="#+id/coin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Default"
/>
</androidx.appcompat.widget.LinearLayoutCompat>

Getting a view's index in a LinearLayout

So I have a LinearLayout set up in my XML file, and I dynamically add a bunch of CardViews to it through code upon startup of my activity. How can I make it so that when I click on any of the CardViews, I am able to obtain its position?
I tried setting up on an onClickListener for the LinearLayout, as well as an OnClickLIstener for each individual card, but couldn't find a way to obtain the index of the card that was clicked.
I'd really like to know where to put the onClickListener, and how to obtain the position that was clicked so that I can start a new activity based on what was clicked.
Here is my code:
private LinearLayout sLinearLayout;
private CardView[] cardViews;
private Workout[] workouts;
private ViewGroup.LayoutParams params;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.saved_workouts);
Intent intent = getIntent();
Parcelable[] parcelableArrayExtra = intent.getParcelableArrayExtra(MainActivity.EXTRA_WORKOUTS);
workouts = new Workout[parcelableArrayExtra.length];
System.arraycopy(parcelableArrayExtra, 0, workouts, 0, parcelableArrayExtra.length);
sLinearLayout = findViewById(R.id.viewList);
// Set the CardView layoutParams
params = new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT
);
populateCardViews();
populateLayout();
}
//TODO: this method will populate the linear layout, filling the list.
private void populateLayout() {
for (CardView cardView : cardViews) {
sLinearLayout.addView(cardView);
}
}
//TODO: this method will fill up the CardViews array with an array of workouts.
private void populateCardViews() {
cardViews = new CardView[workouts.length];
for(int i = 0; i < workouts.length; i++) {
CardView card = new CardView(this);
card.setClickable(true);
card.setLayoutParams(params);
// Set CardView corner radius
card.setRadius(9);
// Set cardView content padding
card.setContentPadding(15, 15, 15, 15);
// Set a background color for CardView
card.setCardBackgroundColor(Color.BLUE);
// Set the CardView maximum elevation
card.setMaxCardElevation(50);
// Set CardView elevation
card.setCardElevation(25);
// Initialize a new TextView to put in CardView
TextView tv = new TextView(this);
tv.setLayoutParams(params);
tv.setText("Workout WorkTime: " + workouts[i].getWorkTime());
tv.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 30);
tv.setTextColor(Color.WHITE);
card.setTag(workouts[i].getWorkTime());
card.addView(tv);
cardViews[i] = card;
}
}
I think you can setOnClickListener for each individual card. The index of clicked card is i
for (int i = 0; i < workouts.length; i++) {
...
final int finalI = i;
card.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Log.i("TAG", "You click at card: " + finalI);
}
});
}
I not good to add so much layout programmatically. You can use a recycler view and an adapter to show a list of items. You can read this: https://developer.android.com/guide/topics/ui/layout/recyclerview
By the way, in your case: when you create a Cardview, just add onClickListener to it and the index of your Cardview is the index of it in Cardview list.
CardView cardView = new CardView(this);
cardView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//handle click here
}
});
See if this works.
cardview.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
int index = linearLayout.indexOfChild(v);
}
});

Android add EditText dynamically

at the click of the button, I want to create EDITTEXT dynamically and display them vertically. I have this code but it just creates one EditText. Where am I wrong? Thanks for your help.
private LinearLayout containerLayout;
static int totalEditTexts = 0;
private Button button;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.add_category);
containerLayout = (LinearLayout)findViewById(R.id.relative1);
button = (Button)findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
totalEditTexts++;
EditText editText = new EditText(getBaseContext());
containerLayout.addView(editText);
editText.setGravity(Gravity.LEFT);
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) editText.getLayoutParams();
layoutParams.width = LinearLayout.LayoutParams.MATCH_PARENT;
layoutParams.setMargins(23, 34, 0, 0);
editText.setLayoutParams(layoutParams);
editText.setTag("EditText" + totalEditTexts);
}
});
}
Your example works perfectly if your add_category.xml were to look like this:
https://gist.github.com/akodiakson/9d37e3e48d0798d106c3
So I'm guessing your Activity layout might be a little bit off.

Not doing Animations and Moving to the next screen

I'm going through the Sams Android Development book, and I put an animation code and a code to move it to the next screen. I tested it on my phone and the AVD and it's not working. Here's the code:
public class QuizSplashActivity extends QuizActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.splash);
TextView logo1 = (TextView) findViewById(R.id.TextViewTopTitle);
Animation fade1 = AnimationUtils.loadAnimation(this, R.anim.fade_in);
logo1.startAnimation(fade1);
TextView logo2 = (TextView) findViewById(R.id.BottomView1);
Animation fade3 = AnimationUtils.loadAnimation(this, R.anim.fade_in);
logo1.startAnimation(fade3);
Animation spinin= AnimationUtils.loadAnimation(this, R.anim.custom_anim);
LayoutAnimationController controller = new LayoutAnimationController(spinin);
TableLayout table = (TableLayout) findViewById(R.id.TableLayout01); {
for (int i = 0; i < table.getChildCount(); i++) {
TableRow row = (TableRow) table.getChildAt(i);
row.setLayoutAnimation(controller);
}
}
Animation fade2 = AnimationUtils.loadAnimation(this, R.anim.custom_anim);
fade2.setAnimationListener(new AnimationListener() {
public void onAnimationEnd(Animation animation){
startActivity(new Intent(QuizSplashActivity.this, QuizMenuActivity.class));
QuizSplashActivity.this.finish();
}
public void onAnimationStart(Animation a) { }
public void onAnimationRepeat(Animation a) { }
});
}
#Override
protected void onPause() {
super.onPause();
TextView logo1= (TextView) findViewById(R.id.TextViewTopTitle);
logo1.clearAnimation();
TextView logo2= (TextView) findViewById(R.id.BottomView1);
logo2.clearAnimation();
}
}
`
Please help, I want to move onto the next chapter.
Again, if I run this code, the animation doesn't run and the app doesn't move onto the next screen.
Thanks
First of all, onAnimationEnd of fade2 is where you start your next Activity but I don't see you using it anywhere.
I think you've got confused about which views you want to animate and which animations to use here:
TextView logo1 = (TextView) findViewById(R.id.TextViewTopTitle);
Animation fade1 = AnimationUtils.loadAnimation(this, R.anim.fade_in);
logo1.startAnimation(fade1); // <----- is this right?
TextView logo2 = (TextView) findViewById(R.id.BottomView1);
Animation fade3 = AnimationUtils.loadAnimation(this, R.anim.fade_in);
logo1.startAnimation(fade3); // <----- and this one?
Also, onAnimationEnd is not reliable. You can take a look at setRepeatCount() and setRepeatMode() and play around with those but there are multiple bugs with them and worse, those bugs vary between Android version.
Instead, you can use a delayed Runnable to do your "post animation" work:
new Handler().postDelayed(new Runnable() {
public void run() {
view.clearAnimation(); // <--- whichever view you are animating
startActivity(new Intent(QuizSplashActivity.this, QuizMenuActivity.class));
QuizSplashActivity.this.finish();
}
}, fade2.getDuration());
This runnable will be delayed for however long fade2 is set to animate for. When it fires, it clears the current animation and starts the activity.
Good luck!

Android Button Doesn't Respond After Animation

I have a basic animation of a button after it is pressed currently in my application. After the button finishes animating, I can no longer click on it. It doesn't even press with an orange highlight.
Any help?
Here's my code:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
animation = new AnimationSet(true);
animation.setFillAfter(true);
Animation translate = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 5.0f);
translate.setDuration(500);
animation.addAnimation(translate);
LayoutAnimationController controller = new LayoutAnimationController(animation, 0.25f);
generate = (Button)findViewById(R.id.Button01);
generate.setOnClickListener(new View.OnClickListener(){
public void onClick(View v){
keyFromTop();
}
});
}
public void keyFromTop(){
generate.setAnimation(animation);
}
Animations affect only the drawing of widgets, which means after the animation is done, your button is still at its previous location. You need to manually update the layout parameters of your button if you want to move it to the new location. Also, your AnimationSet and your AnimationController are useless.
If you want to be able to click the button after the animation is complete, you have to manually move the component.
Here's an example of a translate animation applied to a button:
public class Test2XAnimation extends Activity {
private RelativeLayout buttonContainer;
private Button button;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button = (Button) this.findViewById(R.id.button1);
buttonContainer = (RelativeLayout) button.getParent();
}
public void startTapped(View view) {
animateButton(200, 100);
}
public void buttonTapped(View view) {
Toast.makeText(this, "tap", Toast.LENGTH_SHORT).show();
}
private RelativeLayout.LayoutParams params;
private CharSequence title;
private void animateButton(final int translateX, final int translateY) {
TranslateAnimation translate = new TranslateAnimation(0, translateX, 0,
translateY);
translate.setDuration(1500);
translate.setAnimationListener(new AnimationListener() {
public void onAnimationEnd(Animation animation) {
buttonContainer.removeView(button);
button = new Button(Test2XAnimation.this);
button.setText(title);
button.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
buttonTapped(button);
}
});
params.leftMargin = translateX + params.leftMargin;
params.topMargin = translateY + params.topMargin;
params.rightMargin = 0 + params.rightMargin;
params.bottomMargin = 0 + params.bottomMargin;
button.setLayoutParams(params);
buttonContainer.addView(button);
}
public void onAnimationRepeat(Animation animation) {
}
public void onAnimationStart(Animation animation) {
params = (RelativeLayout.LayoutParams) button.getLayoutParams();
title = button.getText();
}
});
button.startAnimation(translate);
}
}
The method startTapped() is triggered when a user clicks a button in the UI. The other button moves by (200,100). At the end, I remove the old one and create a new one, thenaI add it to the parent view. You can see that buttonTapped() is called after the animation.
A suggestion: you can use NineOldAndroids project if you want to support both the new and the old way of animating a component, then you can check the OS version and run this code only on Gingerbread and lower versions.
I really struggled with shuffling layout params to make the "real" button match up to its animated location. I finally succeeded by using this approach. I extended ImageButton and overrode getHitRect:
#Override
public void getHitRect(Rect outRect) {
Rect curr = new Rect();
super.getHitRect(curr);
outRect.bottom = curr.bottom + 75;
outRect.top = curr.top + 75;
outRect.left = curr.left;
outRect.right = curr.right;
}
Then, I could use this button in the troublesome view:
<com.sample.YPlus75ImageButton a:id="#+id/....
It's worth noting that all of this changes for 3.0.

Categories

Resources