Android Fragment Animation for custom views - android

I can't seem to find an answer for my question on google or SO so let me try to explain it properly.
I have A Main Activity, which creates a Custom Fragment. This CustomFragment then contains several Custom "extended" Buttons (views) in which An ObjectAnimator is applied to them.
That ObjectAnimator does not update on the main thread (I'm assuming), even though isRunning() returns true. ObjectAnimator works perfectly fine inside of the CustomFragment, but when using it inside of the Extended Button class, it fails.
I'm thinking I need to be using runOnUiThread() or some other way to get it to run on the proper thread, but I haven't been able to find a good solution.
Here's some psuedocode:
public class TestButton extends Button{
private AnimatorSet as;
public TestButton(Context context, AttributeSet attrs){
super(context, attrs);
init();
}
private void init(){
ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(this, "alpha", 0.2f, 1.0f);
as = new AnimatorSet();
as.play(alphaAnimator);
as.setDuration(1000);
}
public void startAnimation(){
as.start();
//tried adding invalidate(); here but that didn't seem to fix it either
}
}
public class CustomFragment extends android.support.v4.app.Fragment implements Runnable {
private View root;
private ArrayList<TestButton> buttons;
public View onCreateView(LayoutInflater inflater, ViewGroup container, bundle SavedInstanceState){
root = inflater.inflate(R.layout.fraglayout, container, false);
initButtons();
return view;
}
private void initButtons(){
buttons = new ArrayList<TestButton>();
//Code here to initialize and find the buttons in the layout, this works properly
//so I won't define it here because it is long, the list does contain its members
//
}
private void startTest(View view){
//An actual "Button" controls this, and is called properly
//THE FOLLOWING WORKS PERFECTLY FINE
ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(view, "alpha", 0.2f, 1.0f);
alphaAnimator.setDuration(1000);
alphaAnimator.start();
//THIS DOES NOT WORK AT ALL, JUST CHANGES THE VIEW ONCE BUT ANIMATION DOESNT 'RUN'
for(TestButton b : buttons){
b.startAnimation();
}
}
#Override
public void run(){
root.postDelayed(this,1000);
}
}
It must be something with the threading, but I'm not sure what it could be.
Any help is appreciated,
Thanks
--- Edit ---
Okay, So I was just messing around with the thread and added a simple boolean to test whether or not to start the animations in the Fragment's Run() function. And it does work for animation, however this doesn't seem like the proper way to do it because I'm gonna have tons of booleans to check so there must be some other way to run a function on a thread, going back to runOnUiThread() But I'm not sure how to use it. This is what I did that works in premise, but isn't proper programming.
private void startTest(View view){
tester = true;
}
#Override
public void run(){
if(tester){
for(TestButton b : buttons)
b.startAnimation();
tester = false;
}
root.postDelayed(this,1000);
}
--- Edit 2 ---
This seems to work, and helped me out. If anyone else needs this in the future.

Following this guide, this seems to work perfectly.
public class TestButton extends Button{
private AnimatorSet as;
private Handler handler;
public TestButton(Context context, AttributeSet attrs){
super(context, attrs);
handler = new Handler(context.getMainLooper());
init();
}
private void init(){
//Does get called properly
ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(this, "alpha", 0.2f, 1.0f);
as = new AnimatorSet();
as.play(alphaAnimator);
as.setDuration(1000);
}
public void startAnimation(){
runOnUiThread(new Runnable(){
#Override
public void run(){
as.start();
}
});
as.start();
}
private void runOnUiThread(Runnable r){
handler.post(r);
}
}

Related

Android FrameLayout Child Negative Margin Odd Effect

I made a custom View that is used to show feedback in the UI (usually in response to an action being taken). When FeedbackView.showText is called, it will animate the View in for 2 seconds, and then animate it out. This is done using translationY.
If I apply a negative margin to it that is greater than its height the first time FeedbackView.showText is called it doesn't animate in correctly; it just appears (or in some cases doesn't display at all). Subsequent calls to FeedbackView.showText cause the correct animation.
In activity_main.xml below, the FeedbackView has a margin top of -36dp, which is greater than its height (when non-negated). If the margin top is changed to -35dp it animates correctly even the first time FeedbackView.showText is called.
Does anyone know why something like this would happen?
Romain Guy has said that it is OK to use negative margins on LinearLayout and RelativeLayout. My only guess is that they are not OK with FrameLayouts.
FeedbackView.java
public class FeedbackView extends FrameLayout {
public static final int DEFAULT_SHOW_DURATION = 2000;
private AtomicBoolean showing = new AtomicBoolean(false);
private AtomicBoolean animating = new AtomicBoolean(false);
private float heightOffset;
private Runnable animateOutRunnable = new Runnable() {
#Override
public void run() {
animateContainerOut();
}
};
public FeedbackView(Context context) {
super(context);
init();
}
public FeedbackView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public FeedbackView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public FeedbackView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
setAlpha(0);
}
public boolean isShowing() {
return showing.get();
}
public void showText(Context context, String text) {
removeCallbacks(animateOutRunnable);
heightOffset = getMeasuredHeight();
removeAllViews();
final TextView tv = new TextView(context);
tv.setGravity(Gravity.CENTER);
tv.setTextColor(Color.WHITE);
tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
tv.setText(text);
addView(tv);
if(!showing.getAndSet(true)) {
animateContainerIn();
}
else {
tv.setTranslationY(-getHeight());
tv.animate().translationY(0).start();
}
postDelayed(animateOutRunnable, DEFAULT_SHOW_DURATION);
}
private void animateContainerIn() {
if(animating.getAndSet(true)) {
animate().cancel();
}
ViewPropertyAnimator animator = animate();
long startDelay = animator.getDuration() / 2;
animate()
.alpha(1)
.setStartDelay(startDelay)
.start();
animate()
.translationY(heightOffset)
.setStartDelay(0)
.withEndAction(new Runnable() {
#Override
public void run() {
animating.set(false);
showing.set(true);
}
})
.start();
}
private void animateContainerOut() {
showing.set(false);
if(animating.getAndSet(true)) {
animate().cancel();
}
ViewPropertyAnimator animator = animate();
long duration = animator.getDuration();
animate()
.alpha(0)
.setDuration(duration / 2)
.start();
animate()
.translationY(-heightOffset)
.setDuration(duration)
.withEndAction(new Runnable() {
#Override
public void run() {
animating.set(false);
}
})
.start();
}
}
MainActivity.java
public class MainActivity extends Activity {
private FeedbackView feedbackView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
feedbackView = (FeedbackView) findViewById(R.id.feedback);
findViewById(R.id.show_feedback).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
feedbackView.showText(MainActivity.this, "Feedback");
}
});
}
}
activity_main.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#000"
android:clickable="true"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="90dp"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:background="#e9e9e9"/>
<negative.margin.FeedbackView
android:id="#+id/feedback"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_marginTop="-36dp"
android:background="#20ACE0"/>
</FrameLayout>
<Button
android:id="#+id/show_feedback"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:text="Show Feedback"/>
</LinearLayout>
My guess would be that the negative margin is not the direct cause of your animation failing.
You would probably achieve the same (undesired) effect - animation not being performed - if you set for example: layout_marginLeft to the value equal to the Activity width (so a positive value).
The problem is that your View is completely "outside" of the visible area therefore when your Activity is being created, the View is not being rendered right away. And running an animation on a View that has not been rendered yet, will not be performed.
More information (for example) here.
What you can do to fix it is:
Rebuild your layout in the way that your View is within the rendered area (so basically is within the visible area), but its visibility is set to View.INVISIBLE. At the start of the animation (use an AnimationListener or AnimatorListener or something ;) ) set its visibility to View.VISIBLE.
Rebuild your animation so it does not use ViewPropertyAnimator (the animate() method call), but an Animation Object. And start it on a different View (on one that you are sure has already been rendered) - for example on the View's ViewParent (which you can get with getParent()).
You can try (my guts tell me that should work, but you would need to test it) to set your layouts clipChildren and clipToPadding to false, forcing your views to be rendered even when outside of the visibile area. If you try that solution (and I think you should, because you won't have to change that much - just add android:clipChildren="false",android:clipToPadding="false" to all of your layouts in this Activity) please tell me if it worked.

How can I make a consecutive animation of buttons?

I have a few buttons on a grid. I need that this buttons are animations. The animation is very simple, I only want that this buttons change his color and return o his original color, like a "simon game".
So, my problem is the next:
I have been trying make this with AnimatorSet. I make my own class for the buttons :
class Button{
ObjectAnimator anim;
public Button button;
public int colorA;
public int colorB;
public Button(){};
};
And I have:
private Boton[] buttons;
buttons = new Boton[numButtons];
for(int i=0; i<numButtons; i++)
buttons[i] = new Boton();
After:
for(int i=0; i<numButtons; i++){
buttons[i].animacion=ObjectAnimator.ofFloat(buttons[i], "alpha", 1f, 1f);
buttons[i].animacion.setStartDelay(1000);
buttons[i].animacion.setDuration(2000);
buttons[i].animacion.addListener(new miAnimador(i));
}
Also, I defined my own Listener:
class miAnimador implements Animator.AnimatorListener{
int numBoton;
public miAnimador(int num){
numBoton=num;
}
public void onAnimationCancel(Animator paramAnonymousAnimator) {
}
#Override
public void onAnimationEnd(Animator animator) {
buttons[numBoton].button.setBackgroundColor(buttons[numBoton].colorA);
}
#Override
public void onAnimationRepeat(Animator animator) {
}
#Override
public void onAnimationStart(Animator animator) {
buttons[numBoton].button.setBackgroundColor(buttons[numBoton].colorB);
}
};
This is very powerful for me because I can have a vector of buttons and launching his animation when I want.
After I can make this: build a animatorSet with the sequence of animations that I want.
AnimatorSet s = new AnimatorSet();
final List<Animator>listaAnimaciones = new ArrayList<Animator>();
final List<Animator>AnimationsSequence = new ArrayList<Animator>();
AnimationsSequence.add(buttons[0].anim);
AnimationsSequence.add(buttons[1].anim);
//Add list
s.playSequentially(AnimationSequence);
s.setStartDelay(5000);
//Start animation
s.start();
Well, this work well, and I like the form of the AnimatorSet work, but the problem occur when I try animate the same buttons twice.
The exception is: "Circular dependencies cannot exist in AnimatorSet" and i don't understand why this happening.
Be that as it may, I need make this, and I was thinking that this is the best solution, but:
If this don't work, how can get this?
I accept any idea.
If you thinking that this is bad solution, please I would like to know your opinion.

View is not automatically being drawed when overriding dispatchDraw

I'm trying to mirror a LinearLayout.
To get this work, I extended LinerLayout to create my own View component.
This is what it looks like:
public class FlipLayout extends LinearLayout implements Runnable {
private boolean isMirroring = true;
private Handler handler;
public FlipLayout(Context context) {
super(context);
this.setWillNotDraw(false);
}
public FlipLayout(Context context, AttributeSet attr) {
super(context, attr);
this.setWillNotDraw(false);
handler = new Handler();
handler.postDelayed(this, 30);
}
#Override
protected void dispatchDraw(Canvas canvas) {
canvas.save();
if (isMirroring) {
canvas.rotate(180, getWidth() / 2, getHeight() / 2);
}
super.dispatchDraw(canvas);
canvas.restore();
}
#Override
public boolean dispatchTouchEvent(MotionEvent event) {
if (isMirroring)
event.setLocation(getWidth() - event.getX(),
getHeight() - event.getY());
return super.dispatchTouchEvent(event);
}
#Override
public void run() {
invalidate();
handler.postDelayed(this, 30);
}
}
That class is working well, but only when implementing the Runnable interface and by calling invalidate() every few milliseconds.
If I only rotate the canvas without invalidating the view, the changes of the child views are not drawn.
Now I'm wondering what's the reason for this behaviour and if theres a way to get it working without the Runnable/Handler implementation.
If I remove the line canvas.rotate(...) the changes of the child views are drawn correctly (this is for example a progressbar which is updating itself frequently.)
I hope someone can help!
Thanks so much.
Chris
It looks normal to me that changing a Gui dynamically would not update the screen. In any Gui framework, they require the programmer to manually request the redraw.
This is because if i change 10 items in my Gui, i don't want to redraw 10 times, but only once at the end. And the framework can't guess when i'm done refactoring the Gui. So i need to explicitely call a refresh method somehow.
Alternatively, you could invalidate you Gui directly when you're done rotating your stuff, and not in a separate thread.

Android onClick method doesn't work on a custom view

I've started working on an app. I build the menu yesterday but the onClick method doesn't work!
I created a class that extends View and called her MainMenuObject - that class is for any object in the main menu (buttons, logos etc). I've created a special class for them because I'm doing an animation when the menu starts. After I've built the MainMenuObject class I've built another class (OpeningTimesView) that extends View and will have all the buttons of the main menu in it, and will function as the main activity's layout.
Everything was good, the animation went very well and I wanted to put listeners on my buttons, so I've added an implemention of onClickListener to the OpeningTimesView class, and overrided the onClick method. Then I've added the listener to the buttons with setOnClickListener(this) and setClickable(true), but it doesn't work! I've tried everything! Please help me figure out what I'm doing wrong. I've added a toast to the onClick method that doesn't depend on any "if" but it's won't show neither.
(BTW is there any way to define the screen width and height as variable that all classes can access? it can't be static because you get the height and width from a display object but there must be another way)
this is the code:
public class OpeningTimesView extends View implements OnClickListener{
private MainMenuObjectView searchButton;
private MainMenuObjectView supportButton;
private MainMenuObjectView aboutButton;
private int screenWidth;
private int screenHeight;
public OpeningTimesView(Context context, Display dis) {
super(context);
this.screenWidth = dis.getWidth();
this.screenHeight = dis.getHeight();
searchButton = new MainMenuObjectView(context, 200, MovingMode.RIGHT, R.drawable.search, dis);
supportButton = new MainMenuObjectView(context, 400, MovingMode.LEFT, R.drawable.support, dis);
aboutButton = new MainMenuObjectView(context, 600, MovingMode.RIGHT, R.drawable.about, dis);
searchButton.setClickable(true);
supportButton.setClickable(true);
aboutButton.setClickable(true);
searchButton.setOnClickListener(this);
supportButton.setOnClickListener(this);
aboutButton.setOnClickListener(this);
}
#Override
public void onClick(View view){
Toast.makeText(getContext(), "Search button pressed", Toast.LENGTH_SHORT).show();
if(view == searchButton){
Toast.makeText(getContext(), "Search button pressed", Toast.LENGTH_SHORT).show();
}
else if(view == supportButton){
Toast.makeText(getContext(), "Support button pressed", Toast.LENGTH_SHORT).show();
}
else Toast.makeText(getContext(), "About button pressed", Toast.LENGTH_SHORT).show();
}
#Override
public void onDraw(Canvas canvas)
{
// Drawing the buttons
this.searchButton.onDraw(canvas);
this.aboutButton.onDraw(canvas);
this.supportButton.onDraw(canvas);
}
Thanks in advance, Elad!
I just had the same Problem - I created a custom view and when I registered a new Listener for it in the activity by calling v.setOnClickListener(new OnClickListener() {...}); the listener just did not get called.
In my custom view I also overwrote the public boolean onTouchEvent(MotionEvent event) {...} method. The problem was that I did not call the method of the View class - super.onTouchEvent(event). That solved the problem. So if you are wondering why your listener does not get called you have probably forgotten to call the superclass'es onTouchEvent method
Here is a simple example:
private static class CustomView extends View implements View.OnClickListener {
public CustomView(Context context) {
super(context);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event); // this super call is important !!!
// YOUR LOGIC HERE
return true;
}
#Override
public void onClick(View v) {
// DO SOMETHING HERE
}
}
Creating custom controls in Android can be tricky if you aren't comfortable with how the UI Framework operates. If you haven't already, I would recommend reading these:
http://developer.android.com/guide/topics/ui/declaring-layout.html
http://developer.android.com/guide/topics/ui/custom-components.html
http://developer.android.com/guide/topics/ui/layout-objects.html
Notice that when layouts are declared in XML the elements are nested. This creates a layout hierarchy that you must create your self when customizing a component using only Java code.
Most likely you are getting caught up in Android's touch hierarchy. Unlike some other popular mobile platforms, Android delivers touch events starting at the top of the View hierarchy and works its way down. The classes that traditionally occupy the higher levels of the hierarchy (Activity and Layouts) have logic in them to forward touches they don't themselves consume.
So, what I would recommend doing is changing your OpeningTimesView to extend a ViewGroup (the superclass of all Android layouts) or a specific layout (LinearLayout, RelativeLayout, etc.) and add your buttons as children. Right now, there does not seem to be a defined hierarchy (the buttons aren't really "contained" in the container, they're just members) which may be confusing the issue as to where events are really going.
The touches should more naturally flow down to the buttons, allowing your click events to trigger
You can take advantage of Android's layout mechanisms to draw your view instead of relying on drawing code to do all of that.
Pick a layout class to start with that will help you place your buttons in their FINAL locations. You can use the animation framework in Android or custom drawing code (like you have now) to animate them anyway you like up to that point. The location of a button and where that button is currently drawn are allowed to be very different if necessary, and that's how the current Animation Framework works in Android (prior to 3.0)...but that's a separate issue. You also have AbsoluteLayout, which allows you to place and replace objects anywhere you like...but be careful of how your app looks on all Android devices with this one (given the different screen sizes).
As to your second point about display info.
The simplest method is probably just to use Context.getResources().getDisplayMetrics() wherever you need it. Activity inherits from Context, so they can call this method directly. Views always have a Context you can access with getContext(). Any other classes you can just pass the Context as a parameter in construction (this is a common pattern in Android, you'll see many objects require a Context, mainly to access Resources).
Here's a skeleton example to jump start things. This just lines the three up horizontally once as a final location:
Public class OpeningTimesView extends LinearLayout implements OnClickListener {
private MainMenuObjectView searchButton;
private MainMenuObjectView supportButton;
private MainMenuObjectView aboutButton;
private int screenWidth;
private int screenHeight;
public OpeningTimesView(Context context) {
this(context, null);
}
//Thus constructor gets used if you ever instantiate your component from XML
public OpeningTimesView(Context context, AttributeSet attrs) {
super(context, attrs);
/* This is a better way to obtain your screen info
DisplayMetrics display = context.getResources().getDisplayMetrics();
screenWidth = display.widthPixels;
screenHeight = display.heightPixels;
*/
//This way works also, without needing to customize the constructor
WindowManager wm = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE);
Display dis = wm.getDefaultDisplay();
screenWidth = dis.getWidth();
screenHeight = dis.getHeight();
searchButton = new MainMenuObjectView(context, 200, MovingMode.RIGHT, R.drawable.search, dis);
supportButton = new MainMenuObjectView(context, 400, MovingMode.LEFT, R.drawable.support, dis);
aboutButton = new MainMenuObjectView(context, 600, MovingMode.RIGHT, R.drawable.about, dis);
//Even if they don't extend button, if MainMenuObjectView is always clickable
// this should probably be brought into that class's constructor
searchButton.setClickable(true);
supportButton.setClickable(true);
aboutButton.setClickable(true);
searchButton.setOnClickListener(this);
supportButton.setOnClickListener(this);
aboutButton.setOnClickListener(this);
//Add the buttons to the layout (the buttons are now children of the container)
setOrientation(LinearLayout.HORIZONTAL);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
addView(searchButton, params);
addView(supportButton, params);
addView(aboutButton, params);
}
#Override
public void onClick(View view){
Toast.makeText(getContext(), "Search button pressed", Toast.LENGTH_SHORT).show();
if(view == searchButton){
Toast.makeText(getContext(), "Search button pressed", Toast.LENGTH_SHORT).show();
}
else if(view == supportButton){
Toast.makeText(getContext(), "Support button pressed", Toast.LENGTH_SHORT).show();
}
else Toast.makeText(getContext(), "About button pressed", Toast.LENGTH_SHORT).show();
}
#Override
public void onDraw(Canvas canvas)
{
//Drawing the buttons
// This may only be necessary until they are in place, then just call super.onDraw(canvas)
this.searchButton.onDraw(canvas);
this.aboutButton.onDraw(canvas);
this.supportButton.onDraw(canvas);
}
}
You can customize this from there. Perhaps starting the buttons with visibility set to View.INVISIBLE until you animate them in with your drawing code or a custom Animation object, then making them visibile in their final resting place.
The key here, though, is the the layout is smart enough to know that when it receives a touch event it is supposed to forward it to the corresponding child. You can create a custom view without this, but you will have to intercept all touches on the container and do the math to determine which subview to manually forward the event to. If you truly can't make any layout manager work, this is your recourse.
Hope that Helps!
You can just call performClick() in onTouchEvent of your custom view.
Use this in you custom view:
#Override
public boolean onTouchEvent(final MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_UP){
return performClick();
}
return true;
}
I do this so:
public class YourView extends LinearLayout implements OnClickListener {
OnClickListener listener;
//... constructors
public void setOnClickListener(OnClickListener listener) {
this.listener = listener;
}
#Override
public void onClick(View v) {
if (listener != null)
listener.onClick(v);
}
}
You have to call setOnClickListener(this) in contructor(s) and implement View.OnClickListener on self.
In this way:
public class MyView extends View implements View.OnClickListener {
public MyView(Context context) {
super(context);
setOnClickListener(this);
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
setOnClickListener(this);
}
#Override
public void onClick(View v) {
Toast.makeText(getContext(), "On click.", Toast.LENGTH_SHORT).show();
}
}
I had the same problem. In my case I had a LinearLayout as a root element of my custom view, with clickable and focusable set to true, and the custom view tag itself (used in a fragment's layout) was also set to be clickable and focusable. Turns out that the only thing I had to do to get it working was to remove all the clickable and focusable attributes from within the XML :) Counter-intuitive, but it worked.
Implement the onClickListener in the MainMenuObjectView class, since those are the objects that will respond to clicks.
Another alternative would be to extend Button instead of View, because you are using only buttons in there
Update: Full example
This is the idea to implement it directly into the clickable views. There is a TestView class that extends View and overrides onDraw, as you need it to, and also responds to clicks. I left out any animation implementation as you have that part and it's not relevant to the ClickListener discussion.
I tested it in an Eclair emulator and it works as expected (a Toast message after a click).
file: Test.java
package com.aleadam.test;
import android.app.Activity;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.TextView;
public class Test extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);
TextView label = new TextView(this);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
label.setText("Click the circle!");
TestView testView = new TestView(this);
ll.addView(label, layoutParams);
ll.addView(testView, layoutParams);
setContentView(ll);
}
}
file: TestView.java
package com.aleadam.test;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;
public class TestView extends View implements OnClickListener {
Context context;
public TestView(Context context) {
super(context);
this.context = context;
setOnClickListener(this);
}
public void onClick(View arg0) {
Toast.makeText(context, "View clicked.", Toast.LENGTH_SHORT).show();
}
#Override
public void onDraw (Canvas canvas) {
super.onDraw(canvas);
this.setBackgroundColor(Color.LTGRAY);
Paint paint = new Paint (Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.RED);
canvas.drawCircle(20, 20, 20, paint);
}
}
If you need some clickable and some not clickable, you can add a constructor with a
boolean argument to determine whether the ClickListener is attached or not to the View:
public TestView(Context context, boolean clickable) {
super(context);
this.context = context;
if (clickable)
setOnClickListener(this);
}
I've got a solution!
It's not really a solution for this specific issue, but a whole new approach.
I sent this thread to somebody I know and he told me to use the Animation SDK the android has (like Wireless Designs mentioned), so instead of doing the main menu page with 4 classes, I'm doing it only with one class that extends Activity, and the Animation class offers many animation options.
I want to thank you both for helping me, you are great.
I'm adding the code if someone will encounter this thread with the same problem or something:
package elad.openapp;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.HapticFeedbackConstants;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.Toast;
public class OpeningTimes extends Activity implements OnClickListener{
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Disabling the title bar..
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
// Create the buttons and title objects
ImageView title = (ImageView)findViewById(R.id.title_main);
ImageView search = (ImageView)findViewById(R.id.search_button_main);
ImageView support = (ImageView)findViewById(R.id.support_button_main);
ImageView about = (ImageView)findViewById(R.id.about_button_main);
// Setting the onClick listeners
search.setOnClickListener(this);
support.setOnClickListener(this);
about.setOnClickListener(this);
setButtonsAnimation(title, search, support, about);
}
#Override
public void onClick(View v) {
if(v.getId()==R.id.search_button_main){
v.performHapticFeedback(HapticFeedbackConstants.LONG_PRESS);
startActivity(new Intent(this,SearchPage.class));
}
else if(v.getId()==R.id.support_button_main){
v.performHapticFeedback(HapticFeedbackConstants.LONG_PRESS);
Toast.makeText(this, "Coming soon...", Toast.LENGTH_LONG).show();
}
else if(v.getId()==R.id.about_button_main){
v.performHapticFeedback(HapticFeedbackConstants.LONG_PRESS);
Toast.makeText(this, "Coming soon...", Toast.LENGTH_LONG).show();
}
}
// Setting the animation on the buttons
public void setButtonsAnimation(ImageView title, ImageView search, ImageView support, ImageView about){
// Title animation (two animations - scale and translate)
AnimationSet animSet = new AnimationSet(true);
Animation anim = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f);
anim.setDuration(750);
animSet.addAnimation(anim);
anim = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, -1.0f, Animation.RELATIVE_TO_SELF, 0.0f);
anim.setDuration(750);
animSet.addAnimation(anim);
title.startAnimation(animSet);
// Search button animation
anim = new TranslateAnimation(Animation.RELATIVE_TO_SELF, -1.5f, Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f);
anim.setDuration(750);
search.startAnimation(anim);
// Support button animation
anim = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 1.5f, Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f);
anim.setDuration(750);
support.startAnimation(anim);
// About button animation
anim = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 3f, Animation.RELATIVE_TO_SELF, 0.0f);
anim.setDuration(750);
about.startAnimation(anim);
}
}
In my case I had a RelativeLayout as a parent in my custom view and the only way to make it work was to set focusable and clickable to true in the RelativeLayout and in the constructor of the custom view, after inflating the layout, add this:
View view = inflate(getContext(), R.layout.layout_my_custom_view, this);
view.findViewById(R.id.theparent).setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
performClick();
}
});
It is this easy:
public class FancyButton
extends FrameLayout
implements View.OnClickListener { ..
void yourSetupFunction(Context context, #Nullable AttributeSet attrs) {
..
super.setOnClickListener(this); // NOTE THE SUPER
}
OnClickListener consumerListener = null;
#Override
public void setOnClickListener(#Nullable OnClickListener l) {
consumerListener = l;
// DO NOT CALL SUPER HERE
}
#Override
public void onClick(View v) {
Log.i("dev","perform my custom functions, and then ...");
if (consumerListener != null) { consumerListener.onClick(v); }
}
implement View.OnClickListener, and hence have an
onClick(View v)
in setOnClickListener, "remember" the listener set from the outside world
set the actual listener to be us (using "super." ...)
in onClick do you custom stuff, and then call the outside world's onClick
just add callOnClick() to your onTouchEvent() method
public boolean onTouchEvent(MotionEvent event) {
.....YOURCODE.....
callOnClick();
return boolean;
}

Android: Change APIDemo example AnimateDrawable.java to have a ClickEvent-Handler

I love the API Demo examples from the Android webpage and used the AnimateDrawable.java to
get started with a WaterfallView with several straight falling images which works great. Now I like the images to stop when they are clicked. I found out that Drawables can't handle events so I changed AnimateDrawable and ProxyDrawable to be extended from View instead and added a Click-Event-Listener and Handler on the parent WaterfallView. The animation still works great, but the handler doesn't, probably because in AnimateDrawable the whole canvas is shifted when the drawabled are animated. How can I change that example so that I can implement an event handler? Or is there a way to find out where exactly my AnimateDrawables are in the view?
So the more general question is: How to add an Event Listener / Handler to an animated View?
Here are my changes to the example above:
AnimateView and ProxyView instead of AnimateDrawable and ProxyDrawable
ProxyView extended from View and all super calls changed to mProxy
I commented out mutate()
The context is still the main Activity which is passed down in the constructors
In the constructors of AnimateView setClickable(true) and setFocusable(true) are called
And here is the important source code of the parent/main WaterfallView:
public class WaterfallView extends View implements OnClickListener {
private Context mContext;
// PictureEntry is just a value object to manage the pictures
private Vector<PictureEntry> pictures = new Vector<PictureEntry>();
public WaterfallView(Context context) {
super(context);
mContext = context;
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_0)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_1)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_2)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_3)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_4)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_5)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_6)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_7)));
}
#Override
protected void onDraw(Canvas canvas) {
if(!setup) {
for(PictureEntry pic : pictures) pic.setAnimation(createAnimation(pic));
setup = true;
}
canvas.drawColor(Color.BLACK);
for(PictureEntry pic : pictures) pic.getAnimateView().draw(canvas);
invalidate();
}
private Animation createAnimation(PictureEntry picture) {
Drawable dr = picture.getDrawable();
dr.setBounds(0, 0, dr.getIntrinsicWidth(), dr.getIntrinsicHeight());
Animation an = new TranslateAnimation(0, 0, -1*dr.getIntrinsicHeight(), this.getHeight());
an.setRepeatCount(-1);
an.initialize(10, 10, 10, 10);
AnimateView av = new AnimateView(mContext, dr, an);
av.setOnClickListener(this);
picture.setAnimateView(av);
an.startNow();
return an;
}
#Override
public void onClick(View v) {
Log.i("MyLog", "clicked "+v);
}
}
Are you going to be clicking widgets(buttons, checkboxes, etc)? Or do you want to be able to click anywhere? I think you want the latter. So in that case you'll need this method:
#Override
public boolean onTouchEvent(MotionEvent event) {
// do stuff with your event
}
This method is ONLY called when the event is NOT handled by a view, so I think you may have to remove some of your onClickListener stuff. Refer to here for more info. And as always, experiment.

Categories

Resources