Animating custom view jumping when being shown - java

I have a custom view which is a constraint layout and a couple of TextView and EditViews.
On my activity I want to show and hide the custom view based on a Switch being on/off. The same custom view is used on multiple Switches for different parts of capturing some data.
The logic in the switch to make the relevant custom VISIBLE or GONE view works without an issue when I just use the CustomViewName.setVisibility(View.VISIBLE) and CustomViewName.setVisibility(View.GONE) - instead of the ShowOrHideView routine below.
I'm trying to make it look better so instead of the custom view just appearing or disappearing it appears by sliding up/down from the switch (height from 0 to it's expected height), or disappears (expected height to 0).
Replacing the CustomViewName.setVisibility in the switch with a call to the function below to show or hide depending on the Switch being on/off:
Switch On to show the custom view (ignore the hard coded sizes for the example here)
ShowOrHideView(CustomViewName,0,100);
Switch Off to hide the custom view:
ShowOrHideView(CustomViewName,100,0);
private void ShowOrHideView(View parView, int parCurrentHeight,int parNewHeight) {
ValueAnimator mySlideAnimator = ValueAnimator
.ofInt(parCurrentHeight, parNewHeight)
.setDuration(2000); /// 2000 for debug only
mySlideAnimator.addUpdateListener(animation1 -> {
Integer value = (Integer) animation1.getAnimatedValue();
parView.getLayoutParams().height = value.intValue();
parView.requestLayout();
});
mySlideAnimator.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(#NonNull Animator parAnimator) {
}
#Override
public void onAnimationEnd(#NonNull Animator parAnimator) {
// If zero at the end of the animation then the view is being hidden
if (parView.getLayoutParams().height == 0) {
parView.setVisibility(View.GONE);
}
}
#Override
public void onAnimationCancel(#NonNull Animator parAnimator) {}
#Override
public void onAnimationRepeat(#NonNull Animator parAnimator) {}
});
if (parCurrentHeight == 0){
parView.setVisibility(View.VISIBLE);
}
AnimatorSet myAnimationSet = new AnimatorSet();
myAnimationSet.setInterpolator(new AccelerateDecelerateInterpolator());
myAnimationSet.play(mySlideAnimator);
myAnimationSet.setStartDelay(1000); // Delayed start for debug only
myAnimationSet.start();
}
The hiding of the custom view works OK with it correctly being set to GONE so the space is no longer there.
But when showing the custom view, the height correctly gets set in the animation, but there's an initial "blip" where the whole custom view gets shown before it then appears as height with 0 up to height of 100.
Any ideas how to make the custom view appear with the height getting larger (to make it appear nicely) and avoid the "blip" where it briefly shows the whole view before the animation? In my example I've temporarily put the setStartDelay(1000) to prove to myself the custom view appears fully when view becomes VISIBLE, then when the animation starts the custom view appears as if the height is 0 to 100
Thanks

Related

How to refresh layout/context from list adapter (I think this is what i need)

Im having a bug that i cant understand the reason and how to resolve it. I belive that is a problem of layout/view/context refresh but i dont know.
I have a cell from a listView(I prefer recyclerView but the project has years) and in the corner of the cell i have a button to show more options. Programatically it just make an element View.GONE and another element View.VISIBLE.
I will attach code in a moment
To this button i setted too a listener that when i tap on it it do the opposite of below mentioned. It shows some elements and hide an entire LinearLayout from the cell. The elements are showed BUT the LinearLayout keeps on the screen like bugged. If i tap anywhere it disappears and if i try to tap on it it disappears too. Its like the view of that linear got bugged and keep in there like a ghost view. I will shop some pictures.
The cell normally at the beginning: https://imgur.com/1BjK0KP
The cell after i press the entire view to show the LinearLayout at the bottom of the cell: https://imgur.com/eONSptW
The cell after i press the arrow of the corner to hide the LinearLayout. Here it shows the view bugged https://imgur.com/jrT0qxV
The cell after i tap anywhere else https://imgur.com/XD1jN7U
public void expandView(View view){
final View cellView = view;
final LinearLayout editLinear = (LinearLayout) view.findViewById(R.id.cart_edit);
editLinear.setVisibility(View.VISIBLE);
final TextViewFont countText = (TextViewFont) view.findViewById(R.id.itemCount);
countText.setVisibility(View.GONE);
final TextViewFont total = (TextViewFont) view.findViewById(R.id.itemTotal);
final ImageView imageViewArrow = (ImageView) view.findViewById(R.id.cart_edit_image);
imageViewArrow.setImageDrawable(context.getResources().getDrawable(R.drawable.icon_arrow_up));
//notifyDataSetChanged();
imageViewArrow.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
countText.setVisibility(View.VISIBLE);
editLinear.setVisibility(View.GONE);
imageViewArrow.setImageDrawable(context.getResources().getDrawable(R.drawable.icon_arrow_down));
}
});
First of all, you don't need to store context because in View you have the method view.getContext().
I recommend this article:
https://possiblemobile.com/2013/06/context/
On the other hand, ensure that you don't have a ghost view that is overlapping your image view.

Programmatic changes to a view aren't applied

I made a list that's loaded with Contact friends and the user can select them by tapping on them. If a person is selected, the listitem's backgorund changes colour, if deselected, the bg colouring goes away.
Problem is, when I call my method on an OnClickListener, it's fine.
When I however call it in a loop to colour already selected friends (e.g. when revisiting the list), it doesn't do the colouring.
The loop that goes through the elements to call colorize if needed:
for (int i = 0; i < adapter.getCount();i++){
ContactFriend cf = (ContactFriend) adapter.getItem(i);
View v = getViewByPosition(i,listView);
colorizeFriendBg(v, cf);
adapter.notifyDataSetChanged();
}
note I do the exact same in the listener and it works fine there.
And the colorizer:
private void colorizeFriendBg(View v, ContactFriend friend){
if(friend.isSelected()){
v.setBackgroundColor(0x993399ff);
}else{
v.setBackgroundColor(0x00000000);
}
v.invalidate();
}
This issue is quite strange and I have no idea what to do in order to make it right. The whole bunch is called from onActivityCreated, if that matters.
Edit:
I debugged it of course and the code runs and should change the colour, not running isn't the issue.
Edit again:
here's the listener implementation:
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
ContactFriend fr = (ContactFriend) adapter.getItem(position);
addToSelected(fr);
//TODO: make it switch some BG colour when clicked. use getViewByPosition.
View v = getViewByPosition(position,listView);
colorizeFriendBg(v,fr);
adapter.notifyDataSetChanged();
}
});
what type of item View are you getting from the Adapter?
that View could / should implement colorize() and color itself;
for example: v.colorize(contact.isSelected()) to switch colors.
or with Android Data-Binding XML (where the viewModel is an instance of Contact):
<data class="com.acme.databinding.ContactViewHolderBinding">
<variable name="viewModel" type="com.acme.model.Contact"/>
</data>
...
android:backgroundColor="#{viewModel.isSelected ? R.color.MAGENTA : R.color.BLACK}"
class Contact just would require a getter and a setter for property isSelected.
one actually can also bind event handlers, which would be an alternate approach.
You need to call invalidate() on your view to make the color changes visible.
invalidate() forces a redraw with the new colors.

Android - how to return to original screen view after setContentView(img)

I have written an app which has a screen view containing a thumbnail that I want to expand to full screen view (with pan and zoom) when I click it.
The large view with pan an zoom works fine, but I want to return to the original view when I click the large image.
final TouchImageView imgBig = new TouchImageView(Dashboard.this);
final ImageView img = (ImageView) findViewById(R.id.graph);
final Bitmap bitmap = result.getImage();
img.setImageBitmap(bitmap);
img.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
imgBig.setImageBitmap(bitmap);
imgBig.setMaxZoom(4f);
setContentView(imgBig);
imgBig.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// What do I need to do here to return to original thumbnail screen view?
}
});
}
});
Have tried a number of things without success!
Just the original setContentView(R.layout.main) will set it back.
It might be better to have an ImageView in the layout xml and set its image and show and hide it. Otherwise you are stuck with just one view which may be limiting.
When you do a setContentView its initializing your activity with that content. So if you want to just put something on top of it you could just have a hidden view. In your layout xml code make an image view that sits on top of all the other views. Then set its visibility="gone" so its hidden.
Then in your onClick instead of calling setContentView just set the image bitmap like you do and call imgBig.setVisibility(View.Gone or View.Visible) to show or hide your big image.
Another possibility is to have 2 activities. And call startActivity to show your big image and then finish to go back to the other activity like it was.
Another possibility is to use fragments, but that probably more involved.

Custom horizontal scroll animation to track finger on view in android

So this is not a tecnical question with code but more on some thoughts. I am new to android developing and because of that I am not completely familiar with a lot of what it has to offer.
I have a list of items on the screen and you can scroll up and down to view the different items.
My issue came up when I decided to have the items be able to slide left and right to reveal a settings like panal with a few optons below them(each item has its own settings below it, not a setting screen for all items kind of deal). I looked around for different ways to do this but cant seem to find one that works. What I am thinking so far is to have a HorizonalScrollView with my item in it with the setting menu to the left or right off the screen, but when I put my text area in the HorizonalScrollView, it only takes up half the screen, so I can fit two side by side, not what I wanted and the end result wont be what I imagined. I really would like a solution that allows for the setting to be under the item, so when you push it out of the way it reveals the settings.
Is there a better way or should I just continue trying to make my HorizonalScrollView work, any guides or thought on how I could go about this would be greatly appreciated.
Went though my apps to see if I could find one that has something similar, gmail app has it. Here is a link to an image that gives you an idea, after you slide the item to the side it brings up an undo or archive buttons in the place of the item as if they were hiding under the list item you swiped away
it's quite an interesting topic this question. And be prepared to do a certain amount of custo stuff.
First of all, drop the HorizonalScrollView, I don't think it will help you. The layout of each item should be something like this (pseudo-code, you can build the XML yourself =] ):
FrameLayout
RelativeLayout id:topContent background:someSolidColor
// inside this RelativeLayout, the stuff that is visible on the ListView
RelativeLayout id:bottomContent
// inside this RelativeLayout, the stuff that is behind the content
/FrameLayout
that way you will be literally putting one thing on top of the other. Also note that the topContent have a background with a solid color. If you do not specify any background, both RelativeLayouts will be visible. Also note that I used RelativeLayout, just because I like them, and I like their flexibility, but this will depend on the content of your list view and your settings.
And now is when things get fun, you'll need a GestureDetector to detect the finger sliding and you'll use that value to generate a margin offset on the id:topContent.
You can create a TouchListener like this:
public class MySlideListener extends View.OnTouchListener{
private View v;
private GestureDetector gestureDetector;
public MySlideListener (View v){
this.v = v;
gestureDetector = new GestureDetector(v.getContext(), myGestureListener);
}
public boolean onTouch (View v, MotionEvent event){
return gestureDetector.onTouchEvent(event);
}
private SimpleOnGestureListener myGestureListener = new SimpleOnGestureListener(){
#Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY){
// now here we make the view scroll
MarginLayoutParams lp = (MarginLayoutParams) view.getLayoutParams();
lp.leftMargin = distanceX;
lp.rightMargin = -distanceX;
// You might need to call view.requestLayout();
// but first give it a try without it
// This part of the method for processing the horizontal
// offset can (and should) be further developed to add some
// 'snap-in' or transparency functionality to make the whole
// concept work better.
// But this code should give you a proof of concept on how to deal with stuff.
// The important part is that now you have a call back that have access
// to the view during onScroll.
// Also might be necessary to enable/disable the bottomContent view
// in order for it to be not clickable whilst not visible.
return true;
}
}
}
and then set a new of those listeners for each topContent of your ListView (probably inside the getView from the adapter) with topContentView.setOnTouchListener(new MySlideListener(topContentView));
Please keep in mind that I typed all this code by heart and is 100% untested!
edit:
The above code is the correct direction, but it's a 100% untested thing.
Now the code below, I've just compiled, tested, and this code works!
This class is also a bit more efficient as you can create only one and apply the same instance to all the items created on your adapter. You can see it's getting the view to scroll on the touch event.
public class MySlideListener implements View.OnTouchListener {
private View view;
private ListView listView;
private GestureDetector gestureDetector;
public MySlideListener(ListView lv) {
listView = lv;
gestureDetector = new GestureDetector(lv.getContext(), myGestureListener);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
view = v;
gestureDetector.onTouchEvent(event);
return true;
}
private SimpleOnGestureListener myGestureListener = new SimpleOnGestureListener() {
private int origLeft, origRight;
public boolean onDown(MotionEvent e) {
MarginLayoutParams lp = (MarginLayoutParams) view.getLayoutParams();
origLeft = lp.leftMargin;
origRight = lp.rightMargin;
return true;
};
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
listView.requestDisallowInterceptTouchEvent(true);
MarginLayoutParams lp = (MarginLayoutParams) view.getLayoutParams();
lp.leftMargin = (int) (origLeft + (e2.getRawX() - e1.getRawX()));
lp.rightMargin = (int) (origRight - (e2.getRawX() - e1.getRawX()));
view.requestLayout();
return true;
};
};
}

When in the Activity life cycle are UI elements available to be measured?

I am defining some animations based on the inflated dimensions of some UI controls. What is the earliest point in the Activity life cycle I can tap into to know when the UI elements have been sized and I can query them for their dimensions?
Right after you set the Content of you Activity via the setContentView() method is the earliest I've been able to grab information from my widgets (size, text and others).
Per Rich's request:
You can determine when the width and height by using the GlobalLayoutListener like so:
final View myView = findViewById(R.id.id_of_view);
ViewTreeObserver vto = myView.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int viewHeight = myView.getHeight();
int viewWidth = myView.getWidth();
// Do what you want with the width and height
ViewTreeObserver obs = myView.getViewTreeObserver();
obs.removeGlobalOnLayoutListener(this);
}
});
Full (better) answer: How to retrieve the dimensions of a view?
If you want to drill down to the point that widget have JUST been placed you have to extend each widget you want to monitor.
Then override onDraw method and capture if that view has been drawn one time
private boolean imVisible=false;
public boolean imVisible() {
return imVisible;
}
#Override
protected void onDraw(Canvas canvas) {
if(!imVisible){
imVisible=true;
}
super.onDraw(canvas);
}
Then you can do a for loop to the widgets of interest and you know they are drawn at their position with dimentions.
A far better solution is when the onDraw gets called the first time fire a listener that is drawn. You have to set an array of listeners that watch the progress of the widgets. That way the exact moment that the last widget is on the screen... you know it.

Categories

Resources