I want to make my android screen "flash" white temporarily (only once). It needs to be long enough that the user will be able to tell that the screen did in fact turn white.
The user will land on a screen, which will flash white after 5 seconds, then display the original screen again (possibly fading from white).
What would be the best way to do this? Right now I am creating a rectangle that takes up the entire screen and programatically showing and hiding it.
Add a foreground by creating an overlaying (match_parent size) ImageView and set android:src to a white drawable.
Set the visibility of this view to android:visibility="gone".
When you want to show the white flash, I recommend an animation to fade the white flash in and display it.
This is a basic animation which will fade in an ImageView's drawable. The fade out will be the reverse of this.
public static void FadeIn(final ImageView v,
final int begin_alpha, final int end_alpha, int time,
final boolean toggleVisibility) {
if (Integer.valueOf(android.os.Build.VERSION.SDK_INT) >= android.os.Build.VERSION_CODES.JELLY_BEAN)
v.setImageAlpha(begin_alpha);
else
v.setAlpha(begin_alpha);
if (toggleVisibility) {
if (v.getVisibility() == View.GONE)
v.setVisibility(View.VISIBLE);
else
v.setVisibility(View.GONE);
}
Animation a = new Animation() {
#Override
protected void applyTransformation(float interpolatedTime,
Transformation t) {
if (interpolatedTime == 1) {
if (Integer.valueOf(android.os.Build.VERSION.SDK_INT) >= android.os.Build.VERSION_CODES.JELLY_BEAN)
v.setImageAlpha(end_alpha);
else
v.setAlpha(end_alpha);
if (toggleVisibility) {
if (v.getVisibility() == View.GONE)
v.setVisibility(View.VISIBLE);
else
v.setVisibility(View.GONE);
}
} else {
int new_alpha = (int) (begin_alpha + (interpolatedTime * (end_alpha - begin_alpha)));
if (Integer.valueOf(android.os.Build.VERSION.SDK_INT) >= android.os.Build.VERSION_CODES.JELLY_BEAN)
v.setImageAlpha(new_alpha);
else
v.setAlpha(new_alpha);
v.requestLayout();
}
}
#Override
public boolean willChangeBounds() {
return true;
}
};
a.setDuration(time);
v.startAnimation(a);
}
You could, instead of creating a new view, use the android:foreground property if you're using a framelayout and toggle the opacity from 0 (transparent) to 1 (opaque). (NB. For the first method, when the flash view is visible, you won't be able to interact with any elements under it, which makes this a better option than a FrameLayout with a foreground property). This is harder to implement, however.
Related
I'm developing simple drawing application and I was wondering if it is possible to add visible pointer when touching canvas? What I mean is something similar to mouse indicator on PC. The reason for that is - when using eraser it is not visible where exactly your touch is registered and with the pointer, it would help (especially when using finger touch, because the pen is quite precise). I've tried with other similar topics but none of them answered the question.
taken from this pos :
How to programmatically enable "show touches" option in Android?
• enable show touches:
Settings.System.putInt(context.getContentResolver(),
"show_touches", 1);
• To disable show touches:
Settings.System.putInt(context.getContentResolver(),
"show_touches", 0);
Remember to add android.permission.WRITE_SETTINGS to your Manifest.
EDIT:
here is a DrawView.java that implements View.OnTouchListener and defines multiple draw modes. however it lacks the indicators.
in main activity inside setListener for the DrawView you override onStartDrawing method: here you can decide whether or not to show an indicator and how to style it depending on DrawView's current mode ( pen ,eraser etc ) and on the other interface methodes move the indicator if its visible and hide it when drawing ends. check the code:
mDrawView.setOnDrawViewListener(new DrawView.OnDrawViewListener() {
#Override public void onStartDrawing() {
canUndoRedo();
// decide whether or not to show an
// indicator and style it depending on
// mDrawView's attributes and current drawing mode
setIndicator(mDrawView.getDrawingMode(),mDrawView.getDrawWidth());
}
#Override
public void onMove(MotionEvent motionEvent) {
if(isIndicatorVisible){
indicatorView.animate()
.x(motionEvent.getX())
.y(motionEvent.getY())
.setDuration(0)
.start();
}
}
#Override public void onEndDrawing() {
canUndoRedo();
//hide indicator here
if (isIndicatorVisible){
indicatorView.setVisibility(View.GONE);
isIndicatorVisible = false;
}
}
here is the edits that i add to DrawView.java :
defined new interface method void onMove(MotionEvent motionEvent)
public interface OnDrawViewListener {
void onStartDrawing();
void onEndDrawing();
void onClearDrawing();
void onRequestText();
void onMove(MotionEvent motionEvent); // added this method
}
called the new method inside onToch:
case MotionEvent.ACTION_MOVE:
onDrawViewListener.onMove(motionEvent); // added this line
mDrawMoveHistory.get(mDrawMoveHistory.size() - 1).setEndX(motionEvent.getX()).setEndY(motionEvent.getY());
if (mDrawingTool == DrawingTool.PEN || mDrawingMode == DrawingMode.ERASER) {
mDrawMoveHistory.get(mDrawMoveHistory.size() - 1).getDrawingPathList()
.get(mDrawMoveHistory.get(mDrawMoveHistory.size() - 1).getDrawingPathList().size() - 1)
.lineTo(motionEvent.getX(), motionEvent.getY());
}
invalidate();
break;
here's setIndicator method :
private void setIndicator(DrawingMode drawingMode, int drawWidth) {
if (drawingMode == DrawingMode.ERASER){
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(drawWidth, drawWidth);
indicatorView.setLayoutParams(params);
GradientDrawable border = new GradientDrawable();
border.setStroke(1, 0xFF000000); //black border with full opacity
if(Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
indicatorView.setBackgroundDrawable(border);
} else {
indicatorView.setBackground(border);
}
indicatorView.setVisibility(View.VISIBLE);
isIndicatorVisible = true;
}
}
I have an animation that slides across the screen, while the animation is playing I want it to disapear if it has been clicked!
I have tried to use OnClickListener() and also OnClickMethods, both only work after the animation has finished playing!
TranslateAnimation animation = new TranslateAnimation(answer, answer, 0, height * -1); // xfrom , xto, y from,y to
animation.setDuration(5000);
Floater0.startAnimation(animation);
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
if (AdPlayer0.isPlaying()) {
answer = rn.nextInt(width) + 1; //useless
TranslateAnimation animation0 = new TranslateAnimation(answer, answer, 0, height * -1); // xfrom , xto, y from,y to
animation0.setDuration(5000);
animation0.setFillEnabled(true);
Floater1.startAnimation(animation0);
Floater1.setVisibility(View.VISIBLE);
Floater0.startAnimation(animation);
}
}
});
I was reading the answer here and something interesting was mentioned:
Animations do NOT effect the 'physical' location of the views on screen. If you want it to actually move then you need to adjust the properties of the view.
I have now tested the above quote, and it seems to be true! I have also looked into how to adjust the position properties of the view after the animation has ended, however I want to change its position before an animation has ended(While its playing)!
Any suggestions for a work around? ideally I would want to change the physical position of the view while the animation is played!
A TranslationAnimation only moves the pixels on the screen, so an OnClickListener does not animate with it. Use ViewPropertyAnimator instead and set an OnClickListener then it should work.
The code would look something like this :
Floater1.animate().setDuration(5000).translationX(answer).translationY(height * -1);
Check out all the available methods in the docs.
Edit/Update :
.translationX(float toX)
means -> animate the view to this point on the x axis.
The animation always starts at the current position of the view, so you don't need a fromX. There are also other methods which you can use :
.translationXBy(float byX)
.translationYBy(float byY)
With these you can translate the view BY the float value, and not TO a certain point on the screen.
I'm writing a simple app that implements a material design compliant nav drawer as described by this Stack post: https://stackoverflow.com/a/27153313/1621380
The ScrimInsetsFrameLayout works great and everything is dandy until I attempt to programmatically change the color of the status bar. My app uses the Palette API to change the toolbar and status bar color dynamically.
I'm using the property animation api to animate the toolbar and it works great! but I try to do the same animation on the statusbar and it doesn't seem to want to animate. Here's an example
Here is the code for my animator:
public static void fadeStatusBar(final DrawerLayout layout, Integer from, Integer to) {
if(android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), from, to);
colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animator) {
layout.setStatusBarBackgroundColor((Integer) animator.getAnimatedValue());
}
});
colorAnimation.start();
}
}
Note: That same code is fading the toolbar, so its proven to work.
My question is; does anyone know of a way to get a smooth transition when using DrawerLayout.setStatusBarBackgorundColour()?
Note: I have used the Window method window.setStatusBarColor() method, and it animates fine but breaks the "transparent statusbar" when the NavDrawer is pulled in.
As advised #adneal's comment on my original question the answer was to invalidate the view during the animation.
DrawerLayout calculates the top inset and draws the status bar background itself. So, you just need to make a call to View.invalidate to force it to redraw while the animation is being updated. #adneal
I've updated my code to this
ValueAnimator colorAnimation = ValueAnimator.ofArgb(from, to);
colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animator) {
layout.invalidate();
layout.setStatusBarBackgroundColor((Integer) animator.getAnimatedValue());
}
});
colorAnimation.start();
For anyone wondering why this worked, I found this stack post enlightening: When it's necessary to execute invalidate() on a View?
you can do this Easily like below:
1 - set your statusbar color to transparent by using this:
<item name="colorPrimaryDark">#android:color/transparent</item>
2 - define application's view to change it background:
View root = *A_view_on_the_activity*.getRootView();
3 - then add this function to your project:
private void color_change(final View view,int from_color,int to_color){
final float[] from = new float[3],
to = new float[3];
String hexColor_from = String.format("#%06X", (0xFFFFFF & from_color));
String hexColor_to = String.format("#%06X", (0xFFFFFF & to_color));
Color.colorToHSV(Color.parseColor(hexColor_from), from); // from
Color.colorToHSV(Color.parseColor(hexColor_to), to); // to
ValueAnimator anim = ValueAnimator.ofFloat(0, 1); // animate from 0 to 1
anim.setDuration(600); // for 300 ms
final float[] hsv = new float[3]; // transition color
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){
#Override public void onAnimationUpdate(ValueAnimator animation) {
// Transition along each axis of HSV (hue, saturation, value)
hsv[0] = from[0] + (to[0] - from[0])*animation.getAnimatedFraction();
hsv[1] = from[1] + (to[1] - from[1])*animation.getAnimatedFraction();
hsv[2] = from[2] + (to[2] - from[2])*animation.getAnimatedFraction();
view.setBackgroundColor(Color.HSVToColor(hsv));
}
});
anim.start();
}
4 - and then change the hole application's background color animation by using the function that Written above:
color_change(root, from_color, to_color);
On my app I have an ImageView which I turned into a Bitmap for editing. I need to detect which pixels on the ImageView were touched by the user. In addition, if the user draws a line with his finger, I need to know all the pixels that were touched in order to change them. How do I detect which pixels were touched?
Ok Jonah, here are some directions for you.
I guess you want that blending effect to react quickly to user input so first thing you'd better go for a custom SurfaceView instead of a ImageView because it is more suitable for drawing high frame rate animations required in 2D action games and animations. I strongly recommend you to read this guide; giving special attention to the part about the use of SurfaceView, before going any further. You will basically need to create a class that extends SurfaceView and implements SurfaceHolder.Callback. This view will then be responsible to listen for user touch events and to render the frames to animate the blending effect.
Take a look at following code as a reference:
public class MainView extends SurfaceView implements SurfaceHolder.Callback {
public MainView(Context context, AttributeSet attrs) {
super(context, attrs);
SurfaceHolder holder = getHolder();
holder.addCallback(this); // Register this view as a surface change listener
setFocusable(true); // make sure we get key events
}
#Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
// Check if the touch pointer is the one you want
if (event.getPointerId(event.getActionIndex()) == 0) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// User touched screen...
case MotionEvent.ACTION_CANCEL:
// User dragged his finger out of the view bounds...
case MotionEvent.ACTION_UP:
// User raised his finger...
case MotionEvent.ACTION_MOVE:
// User dragged his finger...
// Update the blending effect bitmap here and trigger a frame redraw,
// if you don't already have an animation thread to do it for you.
return true;
}
return false;
}
/*
* Callback invoked when the Surface has been created and is ready to be
* used.
*/
public void surfaceCreated(SurfaceHolder holder) {
// You need to wait for this call back before attempting to draw
}
/*
* Callback invoked when the Surface has been destroyed and must no longer
* be touched. WARNING: after this method returns, the Surface/Canvas must
* never be touched again!
*/
public void surfaceDestroyed(SurfaceHolder holder) {
// You shouldn't draw to this surface after this method has been called
}
}
Then use it on the layout of your "drawing" activity like this:
<com.xxx.yyy.MainView
android:id="#+id/main_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
To draw to this surface you need the following code:
Canvas c = null;
try {
c = mSurfaceHolder.lockCanvas(null);
synchronized (mSurfaceHolder) {
if (c != null)
c.drawBitmap(blendingImage, 0, 0, null); // Render blending effect
}
} catch (Exception e) {
Log.e("SurfaceView", "Error drawing frame", e);
} finally {
// do this in a finally so that if an exception is thrown
// during the above, we don't leave the Surface in an
// inconsistent state
if (c != null) {
mSurfaceHolder.unlockCanvasAndPost(c);
}
}
A fully functional example would be impractical to put in an answer so I recommend you to download the Lunar Lander sample game from Google for a full working example. Note however, that you won't need a game animation thread (although it won't hurt having one), like the one coded in the Lunar Lander sample, if all you need is the blending effect. The purpose of that thread is to create a game loop in which game frames are constantly generated to animate objects that may or may not depend on user input. In your case, all you need is to trigger a frame redraw after processing each touch event.
EDIT: The following code are fixes to get the code you've provided in the comments, working.
Here are the changes to MainActivity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// put pics from drawables to Bitmaps
Resources res = getResources();
BitmapDrawable bd1 = (BitmapDrawable) res.getDrawable(R.drawable.pic1);
// FIX: This block makes `operation` a mutable bitmap version of the loaded resource
// This is required because immutable bitmaps can't be changed
Bitmap tmp = bd1.getBitmap();
operation = Bitmap.createBitmap(tmp.getWidth(), tmp.getHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(operation);
Paint paint = new Paint();
c.drawBitmap(tmp, 0f, 0f, paint);
BitmapDrawable bd2 = (BitmapDrawable) res.getDrawable(R.drawable.pic2);
bmp = bd2.getBitmap();
myView = new MainView(this, operation, bmp);
FrameLayout preview = (FrameLayout) findViewById(R.id.preview);
preview.addView(myView);
}
...
Here are the changes to the MainView class:
public class MainView extends SurfaceView implements Callback {
private SurfaceHolder holder;
private Bitmap operation;
private Bitmap bmp2;
private boolean surfaceReady;
// took out AttributeSet attrs
public MainView(Context context, Bitmap operation, Bitmap bmp2) {
super(context);
this.operation = operation;
this.bmp2 = bmp2;
holder = getHolder(); // Fix: proper reference the instance variable
holder.addCallback(this); // Register this view as a surface change
// listener
setFocusable(true); // make sure we get key events
}
// Added so the blending operation is made in one place so it can be more easily upgraded
private void blend(int x, int y) {
if (x >= 0 && y >= 0 && x < bmp2.getWidth() && x < operation.getWidth() && y < bmp2.getHeight() && y < operation.getHeight())
operation.setPixel(x, y, bmp2.getPixel(x, y));
}
// Added so the drawing is now made in one place
private void drawOverlays() {
Canvas c = null;
try {
c = holder.lockCanvas(null);
synchronized (holder) {
if (c != null)
c.drawBitmap(operation, 0, 0, null); // Render blending
// effect
}
} catch (Exception e) {
Log.e("SurfaceView", "Error drawing frame", e);
} finally {
// do this in a finally so that if an exception is thrown
// during the above, we don't leave the Surface in an
// inconsistent state
if (c != null) {
holder.unlockCanvasAndPost(c);
}
}
}
#Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
if (!surfaceReady) // No attempt to blend or draw while surface isn't ready
return false;
// Check if the touch pointer is the one you want
if (event.getPointerId(event.getActionIndex()) == 0) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// User touched screen. Falls through ACTION_MOVE once there is no break
case MotionEvent.ACTION_MOVE:
// User dragged his finger...
blend((int) event.getX(), (int) event.getY());
}
// Update the blending effect bitmap here and trigger a frame
// redraw,
// if you don't already have an animation thread to do it for you.
drawOverlays();
return true;
}
return false;
}
/*
* Callback invoked when the Surface has been created and is ready to be
* used.
*/
public void surfaceCreated(SurfaceHolder holder) {
surfaceReady = true;
drawOverlays();
}
/*
* Callback invoked when the Surface has been destroyed and must no longer
* be touched. WARNING: after this method returns, the Surface/Canvas must
* never be touched again!
*/
public void surfaceDestroyed(SurfaceHolder holder) {
// You shouldn't draw to this surface after this method has been called
surfaceReady = false;
}
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height) {
// TODO Auto-generated method stub
}
}
This code works for me. I just hope I didn't forget anything =:)
Let me know if you still have trouble, ok?
So the answer to this is that you're going to have to be a little clever, but it really shouldn't be so bad. Instead of posting all the code to do what you want to do, I'll give you a link here and an explanation.
So by managing the touch events of an application, you can figure out the average coordinates of a touch event. Using that information you can determine the center of all the pixels touched and continue to track that as a line is drawn with the finger. To track a straight line use the
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_UP:
clauses to determine the start and end of the line. If you want to track a line that is not straight and drawn, you're going to need a little more tracking using
case MotionEvent.ACTION_MOVE:
and that should get you fairly started. You may need a little bit of logic to deal with the fact that you will be drawing a very thin line and I suspect that's not quite what you're going for. Maybe it is though. Either way this should be a good place to get started.
EDIT
In regards to your first comment, here is a link you can use for an example. I have to make a small disclaimer though. To get all of the pieces to work together correctly, it may not seem that simple at first. I assure you that this is one of the simplest examples and breaks the tutorial into sections.
For what you would like to do, I think you'll want to pay particular attention to section 2 (no to be confused with step 2):
2. Facilitate Drawing
I suggest this because it shows different ways to use information form the TouchEvent. The things included in section 1 will explain a little bit about the environment to setup displaying a TouchEvent's captured data whereas section 3 is mostly about aesthetics. This may not directly answer your question, but I suspect it will get you where you need to be.
Happy coding! Leave a comment if you have any questions.
Im having some issues with the Android onGestureListener, I have 3 Linear Layouts sitting next to each other horizontally in a Linear Layout, the Linear Layout position is set to the middle Layout onCreate, the middle layout also contains a listview inside of it, what I would like to happen is when I swipe left or right the layout moves, this seems to not pick up the gestures when I attempt to swipe left or right on the Linear Layout with the listview inside of it, but if I swipe right or left on the other views that dont have anything in them it picks up the gesture and the view animates accordingly, has anyone had this issue before or have an idea how to fix it? any help will go a long way thanks
#Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
return gestureDetector.onTouchEvent(event);
}
SimpleOnGestureListener simpleOnGestureListener = new SimpleOnGestureListener() {
#Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
float sensitvity = 50;
if ((e1.getX() - e2.getX()) > sensitvity) {
slideLeft();
} else if ((e2.getX() - e1.getX()) > sensitvity) {
slideRight();
}
return true;
}
};
private void slideRight() {
if (swipeDirection > -1) {
if (swipeDirection == 0) {
layoutContainer.animate().translationX(theDistance - 0)
.setDuration(500);
} else {
//go to home
layoutContainer.animate().translationX(0).setDuration(500);
}
swipeDirection--;
}
}
private void slideLeft() {
if (swipeDirection < 1) {
if (swipeDirection == 0) {
layoutContainer.animate().translationX(0 - theDistance)
.setDuration(500);
} else {
layoutContainer.animate().translationX(0).setDuration(500);
}
swipeDirection++;
}
}
The ListView itself has a gesture listener built in already (for scrolling the list), and possibly it also has an onItemClickListener on the individual items in the list. It can be that this interferes with your swipe behavior of the whole layout.
The solution explained here by Pinhassi has worked best for me so far:
Android Swipe on List
probably you will need to expand on the onItemClickListener of your ListView and include the swipe detector mentioned above. Also, putting #Override in front of the line where you declare the onItemClick might be needed to override the listview listeners. That way, you will maintain clickable list items and you can perform swipes on them.