Why does CardView Shadow not update while being translated by x? - android

I'm using a MultiViewPager with 5 card views inside.
When the card comes from the side to the centre then once it hits the centre a darker shadow appears on the left and right of the card. The pop is really noticeable.
I was wondering if here is a way to gradually update the shadow.
Also if this helps I'm using PageTransformer to move the card up by its Y axis when it gets to the middle.

Related

Logic behind startScroll in scroller?

I don´t get the idea of startScroll() in this documentation.
It says:
Positive numbers will scroll the content to the left.
I don´t get it. If 0 is always on the left why scroll positive to the left? And if negative it will scroll to the right.
But why? It´s just so hard to wrap my head around it. What´s the logic behind it? Why make positive move to left?
In game and graphics programming 0 will always be either top-left or bot-left but it will always be on the left. So it will make sense to move to right with positive numbers and move to left with negative. But why is it different on startScroll?
I´m just asking cause I´m really curios as to why designed it like this.
To illustrate what is going on, see the drawing:
The top drawings show the coordinate system: (0,0) is on the top left, and positive directions are right (x coordinate) and down (y coordinate).
The bottom illustrations show the effect of the scroll as it appears as the "view port" is moving.
On the left is the position before the call to scroll
On the right is the position after the call to scroll by x=+2, y=+3
The the light blue rectangle is the screen "view port": the scroll method is actually moving this rectangle (the representation of the screen), and not the content. See it like a camera you look on the world through.
The red dot is just an element positioned on the view, and it is not moving. Look at it as the world you look at.
You can see that moving the "view port" in positive x an y directions result on the red dot appear to be moving up and left. Just like you move a camera to the right will make the world in the video move left.
You are in fact scrolling the view to right, which result the content view to be scrolled to left.
Having |A|B|C|, now scrolling by positive value will result a scroll to right, which scroll the actual content to left: |B|C| - A is not visible anymore, because it is considered as a content and is scrolled to left.
We can imagine a scroll in two different ways. One is that the window is moving and the other is that the content is moving. According to the Android's documentation of getScrollX()
Return the scrolled left position of this view. This is the left edge of the displayed part of your view. You do not need to draw any pixels farther left, since those are outside of the frame of your view on screen.
it is clear that Android prefers the content respective scroll rather than window respective one. In content respective scrolls
Positive numbers will scroll the content to the left.
Not only startScroll(), other methods like View.scrollBy(), View.scrollTo(), etc. work with the same idea.
If you ask "which is more natural imagination, content respective or window respective?", I will say "I don't know".
Your Container View is fixed on your screen. When you scroll to right, the right items keeps flowing towards left. Thus, when you do
scroller.startScroll (int 2 /*startX */,
int startY,
int dx,
int dy,
int duration);
makes your content will scroll to the left.
Scroller is actually the horizontal or vertical side bar, which appear when there is a scrolling gesture. Think about movement in respect to scroller and observe it's behaviour in an app. You will understand why it's implement so. You are currently thinking in respect to touch position, causing the confusion.

Create a transparent expanding circle transition animation from one layout to another on swipe

When the user holds down on the screen, it should become transparent by their finger so that they can see the other layout beneath. When they continue holding down their finger and swipe, I'd like to create a transition where the transparency spreads outward from their initial holding location until the upper layout is gone and only the layout underneath is left.
Here are examples of the effect I'm looking to create:
I'm not concerned about the fancy movement of the purple / red squares; I'm just looking to find out how to create the swipe transition between the two layouts.
It seems like using android.R.anim.fade_in and android.R.anim.fade_out would get close to the desired effect but it would be missing the expanding circle centered on the user's finger and the transition would happen all at once instead of the intended effect of giving a peak when just held down and performing the transition only after a swipe.
you can use this npm
react-native-expanding-circle-transition
https://github.com/alexbrillant/react-native-expanding-circle-transition

Android - custom view and animation

I am experimenting with Views in Android and am trying to create a custom 'widget'. What I want to do is create a portion of a circle with an indicator at 12'o clock. I'd then like to to swipe over the circle and when I do, I'd like to see the indicator move to left or right corresponding to a swipe to the left or the right.
I have looked up a number of sources however I am unsure of how to draw an 'indicator' within the arc. In addtion, what needs to be done to animate the arc ? Can this be achieved without OpenGL ?
I am aware of the circlular progress bar and I believe the problem is quite similar, however I didn't have to add a marker inside the circle.
Here is an image of the screen shot of the View I would like to recreate:
This approach would work,Creating a View with rounded corners and position it to bottom to make it seem like arc

Implementing wheel shaped interface navigation tool

I am interested in implementing a user interface navigation control mechanism based on a wheel shaped device (or pie chart shaped or circle shaped) in my Android app.
I would like only half of the wheel to be visible at any time. That is, only the top half of the wheel should be visible since the bottom half should be below the border of the screen. The user can then turn the 'half wheel' to show options hidden by the screen border. The visible top half should then be divided into three parts like a pie chart, so the user can press either one of them to invoke some action. The following pic should explain (it is an example with seven (A-G) options).
http://imgur.com/lNu1F
The rotation itself should not be hard, but I am having a hard time understanding how to position the wheel so that half of it is outside the actual screen. I am thinking that loading the entire wheel (but hiding half of it) is best, since that is that graphics I have and it will also allow a smooth animation when the user swipes to show some other options. How can I make Android show the wheel in this way?
Also. Any comment on how to implement the 'swipe along the wheel shape' would be appreciated.
Thank you.
So for the wheel - you are hving trouble knowing how to position the wheel because you are using XML to align you objects and would like to use something like "Align Object Center To Bottom" which does not exist.
Here is one approach that might work fine: Mask the wheel view.
Is it possible to mask a View in android?
As for swipe the wheel along, I would register the wheel to take touche events, and use only the horizontal componenet of move events to apply to the rotation of the wheel. This setup is common in audio software that uses knobs.
However if you want to have it stick to the users finger in a more realistic fashion, you will need to do the following:
When the user first touches the wheel, calculate the angle from the wheel center to the finger.
Every time the finger moves, check the angle from the wheel center to the finger - and rotate the wheel the amount that the angle has changed from the last touch event.
The formula for getting the angle between two points is this:
Float angleInRadians = Math.atan2(point1.y-point2.y, point1.x-point2.x);

Android: How to make position of View match the visual representation after animation

I am currently trying to animate a card game using an AnimationSet of Translate and Rotate animations. Although I am using setFillAfter(true) and see the card visibly move and stay in it's new position, the actual position of the ImageView is still at it's old location.
In the Google documentation it says:
Note: Regardless of how your animation may move or resize, the bounds of the View that holds your animation will not automatically adjust to accommodate it. Even so, the animation will still be drawn beyond the bounds of its View and will not be clipped. However, clipping will occur if the animation exceeds the bounds of the parent View.
This means that all of my old onClickListeners, etc are still being associated with the old position rather than the newly updated visual representation, and any new animation applied to the View occur from the initial spot, not the newly located one.
What is the best way to get the effect that I seek (a card sliding from my hand to the center of the screen, which is a different LinearLayout, and then in a later sequence sliding from that spot off the screen)?
I know what I seek is possible as the people at bytesequencing.com have accomplished this smooth animation effect in their android game "Hearts! (free)" which I discovered in the market.
Thanks!

Categories

Resources