I'm inflating a layout to show it on the screen.
Now I want to move that layout partially off screen. I tried that using .animate().translationX(-500) on the inflated layout. It moved off screen exactly how I wanted it to look:
Before:
After:
But now I have the problem that the area which the layout originally occupied is not clickable (e.g. can't swipe between homescreens, only works outside the blue marked area).
How can I solve that, so blue area is clickable after moving, but the remaing area of the layout (red area) could still register clicks (e.g. if I wanted to move it back in with an onClickListener)?
I think I have to work with updateViewLayout() function of the windowManager, but I don't know what I should change regarding the parameters.
Edit 1:
Here is the code. The translation is triggered by the button:
overlay.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#d8ff0000"
android:weightSum="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="245dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Lorem ipsum "
android:id="#+id/textView6"
android:layout_marginLeft="10dp" />
<Button
android:layout_width="55dp"
android:layout_height="wrap_content"
android:text="X"
android:id="#+id/button"
android:layout_gravity="center_horizontal|top"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/textView6"
android:layout_marginStart="27dp" />
</RelativeLayout>
</LinearLayout>
Service which inflates the layout:
OverlayService.java
public class FloatingMenu extends Service{
private WindowManager wm;
private LinearLayout ll;
private boolean isPushedToSide = true;
#Nullable
#Override
public IBinder onBind(Intent intent) {
return null;
}
#Override
public void onCreate() {
super.onCreate();
wm = (WindowManager) getSystemService(WINDOW_SERVICE);
ll = new LinearLayout(this);
LinearLayout.LayoutParams llParameters = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
ll.setBackgroundColor(Color.argb(50, 255, 255, 255));
ll.setLayoutParams(llParameters);
final WindowManager.LayoutParams parameters = new WindowManager.LayoutParams(WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.TYPE_PHONE, WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE, PixelFormat.TRANSLUCENT);
parameters.gravity = Gravity.LEFT | Gravity.TOP;
LayoutInflater li = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
ll = (LinearLayout) li.inflate(R.layout.overlay, null);
final Button b = (Button) ll.findViewById(R.id.button);
b.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (isPushedToSide) {
ll.animate().translationX(0);
isPushedToSide = false;
}else {
ll.animate().translationX(-450);
isPushedToSide = true;
}
}
});
wm.addView(ll, parameters);
}
}
Edit 2:
While continuing my research I found out that .animate().translationX() only moves the position where the view is rendered and not the view itself. That also explains why after using .animate().translationX() the onclick event still gets triggered at the same position as before "moving" the layout.
Now I need to find a way to move the actual view to my desired position combining with an animation. Any ideas how to do that?
Edit 3:
I found a lot of posts with similar problems and if I'm right the solution to the problem is using ObjectAnimator instead of .animate().translationX().
I tried replacing that part in my code, so that the onClickListener now looks like this:
b.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (isPushedToSide) {
//ll.animate().translationX(0);
ObjectAnimator.ofFloat(ll, "translationX", 0).setDuration(250).start();
isPushedToSide = false;
}else {
//ll.animate().translationX(-450);
ObjectAnimator.ofFloat(ll, "translationX", -450).setDuration(250).start();
isPushedToSide = true;
}
}
});
ll is the LinearLayout I have inflated, containing the Lorem ipsum text and Button.
Again the animation itself works fine, but behaves still the same way. I still need to click the original position of the button to fire the onClickListener and the blue area is still not clickable.
Edit 4:
Was trying out the suggestion to use.invalidate() to update the actual position. However it didn't work. I'm not sure if used it correct though.
b.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (isPushedToSide) {
//ll.animate().translationX(0);
ObjectAnimator.ofFloat(ll, "translationX", 0).setDuration(250).start();
ll.invalidate();
isPushedToSide = false;
}else {
//ll.animate().translationX(-450);
ObjectAnimator.ofFloat(ll, "translationX", -450).setDuration(250).start();
ll.invalidate();
isPushedToSide = true;
}
}
});
I also tried changing the x value of LayoutParams and calling wm.updateViewLayou(ll, updatedParameters), which worked fine. When I moved the overlay 100px to the right, the area which triggers onClickListener also gets pushed 100px to the right. The problem is that I was only able to move the overlay within the boundaries of the actual screen and what I need is to move it off screen. Tied negative values, but that didn't work either.
What I essentially need is a drawer navigation but with a limited height (at least that's I think what I need). Gonna see if I can get something to work properly that way.
Edit 5:
Corrected my code so that .inflate() gets called when the animation has finished, but it still behaves the same way:
ObjectAnimator anim = ObjectAnimator.ofFloat(ll, "translationX", 0).setDuration(250);
anim.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animator) {}
#Override
public void onAnimationEnd(Animator animator) {
b.invalidate();
text.invalidate();
frame.invalidate();
ll.invalidate();
}
#Override
public void onAnimationCancel(Animator animator) {}
#Override
public void onAnimationRepeat(Animator animator) {}
});
anim.start();
I also recorded two .gifs showing the problem. I set the gravity to CENTER on the second one.
I think easy way to solve that problem is animate changing property "width" instead translate your layout.
hope it helps
I asked the creator of the guide I used for creating such SYSTEM_ALERT_WINDOW windows and he helped me out.
Here is the code:
public class Fw extends Service {
private WindowManager wm;
private boolean isPushedToSide = true;
#Nullable
#Override
public IBinder onBind(Intent intent) {
return null;
}
WindowManager.LayoutParams parameters;
Button b;
View inflating_layout;
LayoutInflater li;
ValueAnimator animator;
#Override
public void onCreate() {
super.onCreate();
wm = (WindowManager) getSystemService(WINDOW_SERVICE);
li = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
inflating_layout = li.inflate(R.layout.overlay, null);
b = (Button) inflating_layout.findViewById(R.id.button);
parameters = new WindowManager.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.TYPE_PHONE, WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, PixelFormat.TRANSLUCENT);
parameters.gravity = Gravity.LEFT | Gravity.TOP;
isPushedToSide = true;
b.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (isPushedToSide) {
isPushedToSide = false;
animator = ValueAnimator.ofInt(parameters.x, parameters.x-450);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
updateView(inflating_layout, val);
}
});
animator.setDuration(250);
animator.start();
} else {
animator = ValueAnimator.ofInt(parameters.x, parameters.x+450);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
updateView(inflating_layout, val);
}
});
animator.setDuration(250);
animator.start();
isPushedToSide = true;
}
}
});
wm.addView(inflating_layout, parameters);
}
public void updateView(View view, Integer x) {
if (view != null) {
if (x != null) parameters.x = x;
wm.updateViewLayout(view, parameters);
}
}
}
Now everything seems to work fine. Only the sliding animation is flickering a bit at the border of the screen. With a slower speed e.g. .setDuration(2500) that doesn't happen. I don't know if it's because of the emulator or another reason.
Related
I have an Android app with a Service to Overlay a button on Android (like Facebook chat bubble).
I want to show a layout (overlay.xml) when the user click on the icon but I can't show the layout with the good dimension.
This is my result :
This is my OverlayShowingService.class :
public class OverlayShowingService extends Service {
private WindowManager windowManager;
private ImageView chatHead;
private Boolean _enable = true;
#Override
public IBinder onBind(Intent intent) {
_enable=false;
return null;
}
#Override
public void onCreate() {
super.onCreate();
windowManager = (WindowManager) getSystemService(WINDOW_SERVICE);
chatHead = new ImageView(this);
chatHead.setImageResource(R.mipmap.ic_launcher);
final WindowManager.LayoutParams params = new WindowManager.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT,
WindowManager.LayoutParams.TYPE_PHONE,
WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
PixelFormat.TRANSLUCENT);
params.gravity = Gravity.TOP | Gravity.LEFT;
params.x = 0;
params.y = 100;
windowManager.addView(chatHead, params);
chatHead.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
LayoutInflater layoutInflater = (LayoutInflater)getBaseContext()
.getSystemService(LAYOUT_INFLATER_SERVICE);
View popupView = layoutInflater.inflate(R.layout.overlay, null);
final PopupWindow popupWindow = new PopupWindow(popupView,
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
popupWindow.update();
Button btnDismiss = (Button)popupView.findViewById(R.id.dismiss);
Button endService= (Button) popupView.findViewById(R.id.endService);
endService.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
stopSelf();
Toast.makeText(getApplicationContext(), "Service Terminated", Toast.LENGTH_LONG).show();
}
});
btnDismiss.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
Toast.makeText(getApplicationContext(), "Popup Terminated", Toast.LENGTH_LONG).show();
popupWindow.dismiss();
_enable=true;
}
});
if(_enable){
popupWindow.showAsDropDown(chatHead, 50, -30);
_enable=false;
}
else if(!_enable) {
Log.d("FALSE", "FALSE");
}
}
});
try {
chatHead.setOnTouchListener(new View.OnTouchListener() {
private WindowManager.LayoutParams paramsF = params;
private int initialX;
private int initialY;
private float initialTouchX;
private float initialTouchY;
#Override public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
initialX = paramsF.x;
initialY = paramsF.y;
initialTouchX = event.getRawX();
initialTouchY = event.getRawY();
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_MOVE:
paramsF.x = initialX + (int) (event.getRawX() - initialTouchX);
paramsF.y = initialY + (int) (event.getRawY() - initialTouchY);
windowManager.updateViewLayout(chatHead, paramsF);
break;
}
return false;
}
});
} catch (Exception ignored) {}
}
#Override
public void onDestroy() {
super.onDestroy();
if (chatHead != null) windowManager.removeView(chatHead);
}
}
This is the layout overlay.xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:orientation="vertical"
android:layout_margin="5dp"
android:background="#545454">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="It's a PopupWindow"
android:textSize="40sp"
android:textColor="#ffffff" />
<Button
android:id="#+id/dismiss"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dismiss Popup"
android:textColor="#ffffff" />
<Button
android:id="#+id/endService"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Finish Service"
android:textColor="#ffffff" />
</LinearLayout>
Edit: This is an alternate approach that mimics a popup window. I have kept the first answer with a altert dialog approach after the following explanation and code. Either way will work, but this new way may be preferable since it looks more like a popup window.
This approach simply adds the overlay.xml layout into a view that is place on the screen just like the chatHead view is.
OverlayShowingService.java
public class OverlayShowingService extends Service {
private WindowManager windowManager;
private ImageView chatHead;
private Boolean _enable = true;
#Override
public IBinder onBind(Intent intent) {
_enable = false;
return null;
}
#Override
public void onCreate() {
super.onCreate();
windowManager = (WindowManager) getSystemService(WINDOW_SERVICE);
chatHead = new ImageView(this);
chatHead.setImageResource(R.mipmap.ic_launcher);
final WindowManager.LayoutParams params = new WindowManager.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT,
WindowManager.LayoutParams.TYPE_PHONE,
WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
PixelFormat.TRANSLUCENT);
params.gravity = Gravity.TOP | Gravity.LEFT;
windowManager.addView(chatHead, params);
chatHead.post(new Runnable() {
#Override
public void run() {
params.x = (int) chatHead.getBottom() + 50;
params.y = (int) chatHead.getRight() - 30;
}
});
chatHead.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View arg0) {
LayoutInflater layoutInflater = (LayoutInflater) getBaseContext()
.getSystemService(LAYOUT_INFLATER_SERVICE);
final View popupView = layoutInflater.inflate(R.layout.overlay, null);
final PopupWindow popupWindow = new PopupWindow(popupView,
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
popupWindow.update();
Button btnDismiss = (Button) popupView.findViewById(R.id.dismiss);
Button endService = (Button) popupView.findViewById(R.id.endService);
endService.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
windowManager.removeViewImmediate(popupView);
stopSelf();
Toast.makeText(getApplicationContext(), "Service Terminated", Toast.LENGTH_LONG).show();
}
});
btnDismiss.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View arg0) {
Toast.makeText(getApplicationContext(), "Popup Terminated", Toast.LENGTH_LONG).show();
// popupWindow.dismiss();
windowManager.removeViewImmediate(popupView);
_enable = true;
}
});
if (_enable) {
windowManager.addView(popupView, params);
// popupWindow.showAsDropDown(chatHead, 50, -30);
_enable = false;
} else if (!_enable) {
Log.d("FALSE", "FALSE");
}
}
});
try {
chatHead.setOnTouchListener(new View.OnTouchListener() {
private WindowManager.LayoutParams paramsF = params;
private int initialX;
private int initialY;
private float initialTouchX;
private float initialTouchY;
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
initialX = paramsF.x;
initialY = paramsF.y;
initialTouchX = event.getRawX();
initialTouchY = event.getRawY();
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_MOVE:
paramsF.x = initialX + (int) (event.getRawX() - initialTouchX);
paramsF.y = initialY + (int) (event.getRawY() - initialTouchY);
windowManager.updateViewLayout(chatHead, paramsF);
break;
}
return false;
}
});
} catch (Exception ignored) {
}
}
#Override
public void onDestroy() {
super.onDestroy();
if (chatHead != null) windowManager.removeView(chatHead);
}
}
The first approach using an alert dialog.
Your code works as-is for API 21 and below. Something changed with API 22 that is prohibiting what you want to do.
I think the primary issue is with the popup and the service environment. I have modified your code to use an AlertDialog with the type TYPE_SYSTEM_ALERT. Although the styling is not what you want, it does work otherwise. You may be able to get it to style differently if you play with it a little.
Another alternative would be to start an activity from your service. An activity-based approach will present you with a more pliable (and forgiving) environment to do what you want with the UI. (This is not as straight-forward as one may think.)
Below is the code that works as a system-level alert. Here is a screen shot.
OverlayShowingService
chatHead.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View arg0) {
final AlertDialog alertDialog = new AlertDialog.Builder(arg0.getContext(),
R.style.Theme_AppCompat_Dialog_Alert).create();
LayoutInflater layoutInflater = (LayoutInflater) getBaseContext()
.getSystemService(LAYOUT_INFLATER_SERVICE);
final View popupView = layoutInflater.inflate(R.layout.overlay, null);
alertDialog.getWindow().setType(WindowManager.LayoutParams.TYPE_SYSTEM_ALERT);
alertDialog.setView(popupView);
Button btnDismiss = (Button) popupView.findViewById(R.id.dismiss);
Button endService = (Button) popupView.findViewById(R.id.endService);
endService.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
alertDialog.dismiss();
stopSelf();
Toast.makeText(getApplicationContext(), "Service Terminated", Toast.LENGTH_LONG).show();
}
});
btnDismiss.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View arg0) {
Toast.makeText(getApplicationContext(), "Popup Terminated", Toast.LENGTH_LONG).show();
alertDialog.dismiss();
}
});
alertDialog.show();
}
});
As I stated in my first answer, you are having this issue with API 22 and later. Your code works OK for API 21 and earlier.
You are running afoul of changes made to PopupWindow in API level 22. See this documentation.
Fix issue #17789629: PopupWindow overlaps with navigation bar.
The Lollipop release introduced a feature that allowed
apps to extend under the navigation bar. This also means
any popup window that is anchored to the bottom of its
parent window will overlap with the navigation bar if the
parent window is extending underneath the navigation bar.
This change introduces a new window flag
(FLAG_LAYOUT_ATTACHED_IN_DECOR) that allows the app to
specify if the popup window should be attached to the decor
frame of the parent window thereby avoiding an overlap
with the screen decorations.
By default the flag is set on SDK version LOLLIPOP_MR1 or
greater and cleared on lesser SDK versions.
You can turn off this flag with the setAttachedInDecor method of PopupWindow.
Add the following code to OverlayShowingService.java after popupWindow.update() in the OnClickListener and you should be good to go.
// Turn off this functionality introduced in API 22.
// See documentation for FLAG_LAYOUT_ATTACHED_IN_DECOR in
// WindowManager.LayoutParams
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {
popupWindow.setAttachedInDecor(false);
}
I am trying to make a game where in the start menu, when a button is clicked, a story event will be happening. There will be different stories when the button is clicked depending on the character the player is using,so I don't want to make a billion different activities/fragments for the stories.
I have two layouts that I want to switch within the same activity.
To switch from layout 1 to layout 2, I tried to add layout 2 to layout 1, and also tried ViewFlipper , but when I try to switch from Layout 1 to layout 2, the TextView in layout 2 says "New text" first before turning into what I want it to say. The textbox, which is supposed to be at the bottom, appears at the top first and then jumps to the bottom
I've also tried using threads to have layout 2 preload but that just messes up layout 2. So what should I do?
Here is my class for the story
public class Story extends FrameLayout {
String[][] story;
int H;
int W;
int L;
int index =0;
TextView text;
ImageView character;
View v;
Story(Context context,String[][]story,int length){
super(context);
this.story=story;
this.L = length;
init(context);
}
public void init(Context context) {
LayoutInflater l = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = l.inflate(R.layout.story, this, true);
final RelativeLayout.LayoutParams textParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
final FrameLayout.LayoutParams imageParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
text = (TextView) v.findViewById(R.id.story);
character = (ImageView) v.findViewById(R.id.chara);
final RelativeLayout textBox = (RelativeLayout) v.findViewById(R.id.textbox);
textBox.post(new Runnable() {
#Override
public void run() {
H = textBox.getHeight();
W = textBox.getWidth();
textParams.setMargins(W / 12, H / 8, W / 10, H / 8);
text.setLayoutParams(textParams);
text.setText(story[index][0]);
}
});
v.post(new Runnable() {
#Override
public void run() {
int h = v.getHeight();
imageParams.setMargins(W / 7 * 2, h / 10, 0, H / 3);
character.setLayoutParams(imageParams);
character.setImageResource(Integer.parseInt(story[index][1]));
}
});
}
}
XML for the story
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/chara"
android:scaleType="fitStart"
android:adjustViewBounds="true"
/>
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textbox"
android:layout_gravity="bottom">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/vntextbox"
android:adjustViewBounds="true"
android:scaleType="fitEnd">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/story" />
</RelativeLayout>
</merge>
For each character, they have a method that returns their story, eg for a particular character :
public class Player extends ImageView {
Context context;
Player (Context context){
super(context);
this.context=context;
}
public Story getIntro(){
int normal = R.drawable.normal;
int serious = R.drawable.serious;
int happy = R.drawable.happy;
final int length = 8;
String[][] story = // a story
final Story s = new Story(context, story, l);
s.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//do some stuff
}
});
return s;
}
}
And here is where the story is used
public class StartMenu extends AppCompatActivity {
#Override
protected void onCreate(final Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.startmenu);
final RelativeLayout r = (RelativeLayout)findViewById(R.id.startscreen);
final Button b =new Button(this);
b.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//here I want to do something like this: (doesn't work due to problems described above)
Player p = new Player(StartMenu.this);
Story s = p.getIntro();
r.removeAllViews();
r.addView(s);
}
});
Try to leave the text space empty on your .xml and just fill it when you're creating the activity (if it is dynamic). It will solve the text change flick.
About the two layouts, search about Fragments.
We want a Meter animation in TextView
To make it a little more interesting, I want each digit come from top to bottom or bottom to top ?
Right now I using listview for achieving this, I have also tried with TextSwitcher but its have a limitation of two child only.
I'm using getListView().smoothScrollToPosition(0...3...6...6...n);
Is there a simple way of doing this? because right now , we need to maintain 3 ListView and Adapter as well for maintaining this.
Please refer link to more understand this question
Display StopWatch Timer animated like the petrol pump meter using NSTimer
ListView's might be good enough solution, but I've implemented it with a custom View (FrameLayout), which contains inside 2 TextViews, which are animating based on the value changes:
The idea of code is very basic:
You pass to setValue desired value;
If it's bigger than current one - start animation from from bottom to top (and vice versa) to increment/decrement current value by 1. Here, we animating two TextViews to replace each other;
In AnimationEnd listener, check if we reached desired value - if not - do one more run (recursively);
public class DigitTextView extends FrameLayout {
private static int ANIMATION_DURATION = 250;
TextView currentTextView, nextTextView;
public DigitTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public DigitTextView(Context context) {
super(context);
init(context);
}
private void init(Context context) {
LayoutInflater.from(context).inflate(R.layout.digit_text_view, this);
currentTextView = (TextView) getRootView().findViewById(R.id.currentTextView);
nextTextView = (TextView) getRootView().findViewById(R.id.nextTextView);
nextTextView.setTranslationY(getHeight());
setValue(0);
}
public void setValue(final int desiredValue) {
if (currentTextView.getText() == null || currentTextView.getText().length() == 0) {
currentTextView.setText(String.format(Locale.getDefault(), "%d", desiredValue));
}
final int oldValue = Integer.parseInt(currentTextView.getText().toString());
if (oldValue > desiredValue) {
nextTextView.setText(String.format(Locale.getDefault(), "%d", oldValue-1));
currentTextView.animate().translationY(-getHeight()).setDuration(ANIMATION_DURATION).start();
nextTextView.setTranslationY(nextTextView.getHeight());
nextTextView.animate().translationY(0).setDuration(ANIMATION_DURATION).setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {}
#Override
public void onAnimationEnd(Animator animation) {
currentTextView.setText(String.format(Locale.getDefault(), "%d", oldValue - 1));
currentTextView.setTranslationY(0);
if (oldValue - 1 != desiredValue) {
setValue(desiredValue);
}
}
#Override
public void onAnimationCancel(Animator animation) {}
#Override
public void onAnimationRepeat(Animator animation) {}
}).start();
} else if (oldValue < desiredValue) {
nextTextView.setText(String.format(Locale.getDefault(), "%d", oldValue+1));
currentTextView.animate().translationY(getHeight()).setDuration(ANIMATION_DURATION).start();
nextTextView.setTranslationY(-nextTextView.getHeight());
nextTextView.animate().translationY(0).setDuration(ANIMATION_DURATION).setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {}
#Override
public void onAnimationEnd(Animator animation) {
currentTextView.setText(String.format(Locale.getDefault(), "%d", oldValue + 1));
currentTextView.setTranslationY(0);
if (oldValue + 1 != desiredValue) {
setValue(desiredValue);
}
}
#Override
public void onAnimationCancel(Animator animation) {}
#Override
public void onAnimationRepeat(Animator animation) {}
}).start();
}
}
}
And it's XML:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="48dp"
android:layout_height="56dp"
android:padding="8dp"
android:background="#drawable/rounded_blue_rect">
<TextView
android:id="#+id/currentTextView"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:gravity="center"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/nextTextView"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:layout_gravity="center"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
And it's very easy to use:
Add to layout:
<klogi.com.myapplication.DigitTextView
android:id="#+id/digitTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
And set Value in code:
DigitTextView digitTextView = (DigitTextView) findViewById(R.id.digitTextView);
digitTextView.setValue(5);
Upd:
Another option to use, from what I see, is to set up a bit customized NumberPicker
I hope, it helps!
Ever since Robinhood won the Material design awards they have open sourced there custom TextView just like you are describing.
Check out Robinhood's Ticker library
This code performs the same animation where number rolldown from top to bottom.
Rolling-TextView-Animation
You can also use a handler to get the desired effect. Using this, you won't have to make any custom views.
Create a function handleTextView which takes in initialValue, finalValue and targetTextview as arguments. The method is-
private void handleTextView(int initialValue, int finalValue, final TextView targetTextview) {
DecelerateInterpolator decelerateInterpolator = new DecelerateInterpolator(1f);
final int newInitialValue = Math.min(initialValue, finalValue);
final int newFinalValue = Math.max(initialValue, finalValue);
final int difference = Math.abs(finalValue - initialValue);
Handler handler = new Handler();
for (int count = newInitialValue; count <= newFinalValue; count++) {
//Time to display the current value to the user.
int time = Math.round(decelerateInterpolator.getInterpolation((((float) count) / difference)) * 100) * count;
final int finalCount = ((initialValue > finalValue) ? initialValue - count : count);
handler.postDelayed(new Runnable() {
#Override
public void run() {
targetTextview.setText(finalCount.toString());
}
}, time);
}
}
UPDATE:
Option 2- You can use a value animator as well-
private void handleTextView(int initialValue, int finalValue, final TextView textview) {
ValueAnimator valueAnimator = ValueAnimator.ofInt(initialValue, finalValue);
valueAnimator.setDuration(1500);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
textview.setText(valueAnimator.getAnimatedValue().toString());
}
});
valueAnimator.start();
}
By using this method we do not need to do any math.
I want to set a touch event on an animated view and then stop the animation on touching view.
Here is my activity code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
touch_me = (TextView) findViewById(R.id.touch_me);
touch_me.setOnTouchListener(new OnTouchMeListener());
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int fromX = size.x;
int fromY = size.y;
int toX = (-1) * view.getWidth();
TranslateAnimation animation = new TranslateAnimation(fromX, -100, 0, 0);
animation.setDuration(6000);
animation.setRepeatCount(5);
animation.setFillAfter(true);
touch_me.startAnimation(animation);
}
Here is my class listener:
public class OnTouchMeListener implements View.OnTouchListener{
#Override
public boolean onTouch(View v, MotionEvent event) {
touch_me.clearAnimation();
return true;
}
}
The problem is that the onTouch is detected only on the initial position(in XML file) of the view
Can anyone help me please ?
ok, here's the problem.
the view animation you are using is from older system and it only simulates the animation, not move the positioning of the view. so when you touch the area where the view has moved, there is no reading on your touch so it gets ignored. but if you touch the area of the original position of the view, it will fire the touchevent callback method and cancel the animation per your code.
there are several approach to solve this.
one is this by calling onlayout and relocating the view each time there is a change in the animation by calling the view's onlayout method.
Button is not clickable after TranslateAnimation
or another is to change the view's touch area by using touchdelegate class
http://cyrilmottier.com/2012/02/16/listview-tips-tricks-5-enlarged-touchable-areas/
but i think these two options aren't very good approaches to your problem.
i would go with this third option:
use propertyanimation instead. it's different from older system in that it updates the values needed for changes instead of doing the actual animation. the actual animation is done inside the update method with your own algorithm.
http://developer.android.com/guide/topics/graphics/prop-animation.html
here is example:
ValueAnimator animTranslation = ValueAnimator.ofFloat(valueStart, valueEnd);
animTranslation.setDuration(300);
animTranslation.removeAllUpdateListeners();
animTranslation.removeAllListeners();
animTranslation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
myView.setRotation(currValue - (Float) animation.getAnimatedValue());
}
}
});
animRotation2.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
Problem
I'm trying to animate the ListView header height. I can get the animation right, but after the animation completes the ListView flickers.
Tried and failed
Use AnimationSet.setFillAfter() without changing the layout params. The animation works fine, but when you start scrolling the list, header jumps back to original position.
Use AnimationSet.setFillAfter() with new layout params applied at onAnimationEnd(). After the animation ends the header jumps to twice the required height (animated height plus the height set in layout params). When you start scrolling the list, header snaps to the required height.
Code
if (mSearchAdapter.getCount() > 0 && mListView.getChildAt(0) == mHeaderPlaceholder) {
Log.i(TAG, "Animating list view to make room for info bar");
AnimationSet slideAnimation = new AnimationSet(true);
TranslateAnimation translate = new TranslateAnimation(0, 0, 0, newHeight);
translate.setDuration(mInfoBarAnimationDuration);
translate.setInterpolator(new DecelerateInterpolator());
slideAnimation.addAnimation(translate);
slideAnimation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
isAnimatingViewTransition = true;
}
#Override
public void onAnimationEnd(Animation animation) {
isAnimatingViewTransition = false;
final AbsListView.LayoutParams layoutParams = (AbsListView.LayoutParams) mHeaderPlaceholder.getLayoutParams();
layoutParams.height = newHeight;
mHeaderPlaceholder.setLayoutParams(layoutParams);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
mListView.startAnimation(slideAnimation);
} else {
Log.i(TAG, "Adjusting list view header to make room for info bar");
mHeaderPlaceholder.getLayoutParams().height = newHeight;
}
I think the flicker can be avoided by listening for and overriding the events onPreDraw() or onGlobalLayout() of the ViewTreeObserver of the ListView. But I don't know exactly how I can achieve it.
Any help is much appreciated!
Instead of animating ListView header I opted to used ValueAnimator to achieve the same effect. Here is code:
if (mSearchAdapter.getCount() > 0 && mListView.getChildAt(0) == mHeaderPlaceholder) {
ValueAnimator mSlideListViewAnimator = ObjectAnimator.ofInt(from, to);
mSlideListViewAnimator.setDuration(mInfoBarAnimationDuration);
mSlideListViewAnimator.setInterpolator(new DecelerateInterpolator());
mSlideListViewAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
Integer animatedYValue= (Integer) animation.getAnimatedValue();
final AbsListView.LayoutParams layoutParams = (AbsListView.LayoutParams) mHeaderPlaceholder.getLayoutParams();
layoutParams.height = animatedYValue;
mHeaderPlaceholder.requestLayout();
}
});
mSlideListViewAnimator.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
isAnimatingViewTransition = true;
}
#Override
public void onAnimationEnd(Animator animation) {
isAnimatingViewTransition = false;
}
});
mSlideListViewAnimator.start();
} else {
Log.i(TAG, "Adjusting list view header to make room for info bar");
mHeaderPlaceholder.getLayoutParams().height = newHeight;
}