I am using pinch zoom to just horizontaly zoom my custom view. It works fine, but the outside scroll view is not resizing with its content, and there are ugly blank space arround the view.
My Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<AbsoluteLayout
android:id="#+id/wrapper"
android:layout_width="wrap_content"
android:layout_height="0px"
android:layout_weight="1">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:fillViewport="true"
android:id="#+id/scrollview">
<Auda.WaveFormView
android:id="#+id/waveform"
android:layout_height="fill_parent"
android:layout_width="2000dp"
android:layout_weight="1" />
</HorizontalScrollView>
</AbsoluteLayout>
<LinearLayout
style="#style/ToolbarBackground"
android:layout_width="fill_parent"
android:layout_height="62dip"
android:gravity="center">
<ImageButton
android:id="#+id/play"
android:layout_width="71dip"
android:layout_height="52dip"
android:layout_marginTop="6dip"
android:layout_marginBottom="6dip"
style="#android:style/MediaButton"
android:src="#android:drawable/ic_media_play" />
</LinearLayout>
My zooming code
ScaleAnimation scaleAnimation = new ScaleAnimation(1f / prevScale, 1f / mScale, 1, 1, 0, 0);
scaleAnimation.Duration = 0;
scaleAnimation.FillAfter = true;
this.view.StartAnimation (scaleAnimation);
Although your view is now (for example) drawn on half of the screen, it is really still occupying the full screen. You can verify this by adding a ClickListener to the view and trying to press the blank area you marked.
To solve this, you can add an AnimationListener to your ScaleAnimation. In the onAnimationEnd, simply update the LayoutParams of your Auda.WaveFormView. For example:
ScaleAnimation scaleAnimation = new ScaleAnimation(1f / prevScale, 1f / mScale, 1, 1, 0, 0);
scaleAnimation.Duration = 0;
scaleAnimation.FillAfter = true;
this.view.StartAnimation (scaleAnimation);
//after your are done with your animation
//set the animation listener
scaleAnimation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationEnd(Animation animation) {
//this might not be the right logic
//especially that you are using scales relative to prevScale
this.view.getLayoutParams().width = v.getWidth() / mScale;
}
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
});
Try to change the layout width to fill_parent instead of wrap content
Related
Is there any way to hide a view without flickering its above view?
I am trying to hide a View below MapView. Once I set its visibility to GONE, MapView flickers. As I have to add more markers dynamically, couldn't able to keep MapView and bottomView in FrameLayout, since the bottomView will hide those markers in small size screens.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true">
<com.myapp.widgets.MapPlacePicker
android:id="#+id/lay_fr_map_inc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/options_layout" />
<LinearLayout
android:id="#+id/options_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:animateLayoutChanges="true"
android:background="#FFFFFF"
android:orientation="vertical"
android:visibility="visible">
<com.myapp.widgets.FontTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Please select a location!!"
android:textAppearance="#android:style/TextAppearance.Small" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.aigestudio.wheelpicker.WheelPicker
android:id="#+id/main_option_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="0.5"
app:wheel_atmospheric="true"
app:wheel_curved="false"
app:wheel_item_space="15dp"
app:wheel_item_text_color="#ffafafaf"
app:wheel_item_text_size="12dp"
app:wheel_selected_item_text_color="#color/colorPrimary"
app:wheel_visible_item_count="3" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Output:
I have also tried TranslationAnimation, but no luck. Its showing more gray space than before.
int fromY = (visibility == View.GONE) ? 0 : optionLayout.getHeight();
int toY = (visibility == View.GONE) ? optionLayout.getHeight() : 0;
if (visibility == View.VISIBLE) {
optionLayout.setVisibility(visibility);
}
TranslateAnimation animate = new TranslateAnimation(
0, // fromXDelta
0, // toXDelta
fromY, // fromYDelta
toY); // toYDelta
animate.setDuration(1000);
animate.setInterpolator(new AccelerateDecelerateInterpolator());
//animate.setFillAfter(false);
animate.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
if (visibility == View.GONE)
optionLayout.setVisibility(visibility);
optionLayout.clearAnimation();
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
optionLayout.startAnimation(animate);
I don't see any flickering in that animation; if you want to avoid the vertical resizing behavior of lay_fr_map_inc then you can just remove this attribute:
android:layout_above="#+id/options_layout"
...and maybe make the height match_parent. Then, lay_fr_map_inc will stay full height, but the bottom portion will be hidden by options_layout when it appears (instead of scooting upwards).
Don't forget to change the map padding when you do this, so you don't obscure the Google logo (which is a violation of the rules): setPadding()
I tried with scaling but while scaling layouts inside are shrinking,
Can anyone explain how to animate a layout without shrinking
need to scale letterLayout from a little bit above the parent bottom to top
Animation anim = new ScaleAnimation(
1f, 1f, // Start and end values for the X axis scaling
startScale, endScale, // Start and end values for the Y axis scaling
Animation.RELATIVE_TO_SELF, 0f, // Pivot point of X scaling
Animation.RELATIVE_TO_SELF, 1f); // Pivot point of Y scaling
anim.setFillAfter(false); // Needed to keep the result of the animation
anim.setDuration(1000);
v.startAnimation(anim);
Layout code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sample.LaunchScreenActivity">
<ImageView
android:layout_marginTop="195dp"
android:layout_marginLeft="26dp"
android:src="#drawable/ic_envelope_back"
android:layout_width="308dp"
android:layout_height="327dp" />
<RelativeLayout
android:id="#+id/letterLayout"
android:layout_width="284dp"
android:layout_height="451dp"
android:layout_marginLeft="38dp"
android:layout_marginTop="19dp">
<RelativeLayout
android:id="#+id/logo_layout"
android:layout_width="284dp"
android:layout_height="236dp"
android:background="#ff33">
<ImageView
android:layout_centerInParent="true"
android:src="#drawable/ic_logo_launch_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout
android:background="#ff3344"
android:layout_below="#id/logo_layout"
android:layout_width="284dp"
android:layout_height="215dp">
<Button
android:layout_width="160dp"
android:layout_height="41dp"
android:layout_marginTop="30dp"
android:layout_centerHorizontal="true"
android:background="#FC5D2D"
android:text="brinblox_login"
android:textColor="#ffff"/>
</RelativeLayout>
</RelativeLayout>
<FrameLayout
android:layout_marginTop="316dp"
android:layout_width="308dp"
android:layout_height="206dp"
android:layout_marginLeft="26dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_envelope_front"/>
</FrameLayout>
</RelativeLayout>
I would suggest you to use a Value animator like this and change the margins of the RelativeLayout:
final RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) relativeLayout.getLayoutParams();
ValueAnimator va = ValueAnimator.ofInt(initialMargin, finalMargin);
int mDuration = 3000; //in millis
va.setDuration(mDuration);
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
params.setMargins((int)animation.getAnimatedValue(),(int)animation.getAnimatedValue(),(int)animation.getAnimatedValue(),(int)animation.getAnimatedValue());
relativeLayout.setLayoutParams(params);
}
}
);
va.start();
Hope this helps.
I would like to make an animation similar to what we can find in the Play Store: https://www.youtube.com/watch?v=B5hBViIzw5Y
I already know how to have shared element between activities and how to make circular reveal, but I'm struggling to do everything in order!
Here is where I am so far, the effect is not so bad, but after the circular reveal (to hide the item) there is a little time before it starts the intent.
My item :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="2dp">
<RelativeLayout
android:id="#+id/secondary_back"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorPrimary"
android:visibility="gone">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:visibility="visible">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/shared_element"
android:transitionName="shared"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/shared_color"
android:visibility="gone"/>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/primary_back"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#drawable/ripple_background_rounded">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_image"
android:layout_width="85dp"
android:layout_height="85dp"
app:civ_border_width="3dp"
app:civ_border_color="#color/colorPrimary"/>
</LinearLayout>
<TextView
android:id="#+id/card_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:textColor="#android:color/black"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:paddingTop="24dp"
android:paddingBottom="24dp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
and my function to launch everything :
private void launchAnimation(View v, final int position) {
// previously visible view
final View myView = v.findViewById(R.id.primary_back);
final View background = v.findViewById(R.id.secondary_back);
// my shared element
final CircleImageView sharedElement = (CircleImageView) v.findViewById(R.id.shared_element);
// get the center for the clipping circle
int cx = myView.getWidth() / 2;
int cy = myView.getHeight() / 2;
// get the initial radius for the clipping circle
float initialRadius = (float) Math.hypot(cx, cy);
// create the animation (the final radius is zero)
final Animator anim =
ViewAnimationUtils.createCircularReveal(background, cx, cy, initialRadius, 0);
// fade in background
final Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setInterpolator(new DecelerateInterpolator()); //add this
fadeIn.setDuration(200);
final Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setInterpolator(new AccelerateInterpolator()); //and this
fadeOut.setDuration(200);
// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
}
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
background.setVisibility(View.GONE);
Intent intent = new Intent(context, ResultActivity.class);
// Pass data object in the bundle and populate details activity.
intent.putExtra(ResultActivity.EXTRA_POSITION, position);
ActivityOptionsCompat options = ActivityOptionsCompat.
makeSceneTransitionAnimation(activity, sharedElement, "shared");
activity.startActivity(intent, options.toBundle());
}
});
background.setVisibility(View.VISIBLE);
background.startAnimation(fadeIn);
myView.startAnimation(fadeOut);
fadeIn.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
anim.start();
}
#Override
public void onAnimationEnd(Animation animation) {
myView.setVisibility(View.GONE);
sharedElement.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
If someone knows how to simplify this animation that would be so helpful. Thanks a lot.
For everyone who might want to make this kind of animation, I found an article about this exact transition.
At the end of this article there is the project archive who helped me a lot to make it work.
I have a layout like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="25dp"
android:paddingRight="25dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:background="#drawable/logo" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView ... />
<EditText ... />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView ... />
<EditText ... />
</LinearLayout>
</LinearLayout>
<Button ... />
</LinearLayout>
I want to fade out the ImageView and move the second (inner) LinearLayout up (near the top of the screen) when the keyboard comes up and then do the opposite when the keyboard goes back down.
How can I achieve this?
Use TranslateAnimation class to animate your view.
Animation slide = new TranslateAnimation(fromX,toX,fromY,toY);
slide.setDuration(300);//here you can set your own duration of animation in ms.
yourView.startAnimation(slide);
You can also override some callbacks.
slide.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
There is no direct way of finding out whether android softkey pad is opne or not . But you can do a work around and calculate the size diff between your activity's view root and the window size. There are many ways to do it, one way that i found was this:
final View activityRootView = findViewById(R.id.activityRoot);
activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int heightDiff = activityRootView.getRootView().getHeight() - activityRootView.getHeight();
if (heightDiff > 100) { // if more than 100 pixels, its probably a keyboard...
... do something here
}
}
});
I would to set dinamically the TextView height with an ObjectAnimator.
This is the code:
if(condition){
height = 136;
}else{
height = 0;
}
ObjectAnimator animator = ObjectAnimator.ofInt(
mText,
"height",
height
).setDuration(400);
animator.start();
This works, somwhere, but it doesn't set the TextView height to 0, but about 80px.
Why?
To hide and show textview, It is not good practice to set its heights instead do this:
textview.setVisibility(View.GONE);
OR
textview.setVisibility(View.INVISIBLE);
View.GONE This view is invisible, and it doesn't take any space for layout purposes.
View.INVISIBLE This view is invisible, but it still takes up space for layout purposes.
To make it Visible again, use
textview.setVisibility(View.VISIBLE);
EDITED
To hide view with animation,
ObjectAnimator anim = ObjectAnimator.ofFloat(view, "alpha", 0.0f);
anim.addListener(new AnimatorListener() {
...
#Override
public void onAnimationEnd(Animator animation) {
animDrawable.stop()
}
...
});
anim.setDuration(300).start();
This will gradually fade your view and hide it with animation.
If you want to hide the TextView with animation, use below code
ViewPropertyAnimator mTextAnimator = myTextView.animate()
.scaleY(0f)
.setListener(new Animator.AnimatorListener() {
public void onAnimationStart(Animator animation) {}
public void onAnimationRepeat(Animator animation) {}
public void onAnimationCancel(Animator animation) {}
public void onAnimationEnd(Animator animation) {
myTextView.setVisibility(View.GONE);
}
})
.setDuration(400);
mTextAnimator.start();
To show TextView with animation, use
mTextAnimator = myTextView.animate()
.scaleY(1f)
.setListener(null)
.setDuration(400);
mTextAnimator.start();
I assume you are trying to hide it by setting height to 0? If this is the case, why not use .setVisibility(View.GONE)?
If you have other views depending on its location then use setVisibility(View.INVISIBLE). Otherwise use setVisibility(View.GONE).
In my .xml file, I used android:visibility="gone". Originally I had this:
<TextView
android:id="#+id/labelReachable"
android:layout_width="wrap_content"
android:gravity="left"
android:textSize="15dp"
android:layout_marginTop="10dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:text="Reachability"></TextView>
<ImageView
android:background="#drawable/bar_dark"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:id="#+id/insertPings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical" >
</LinearLayout>
I wanted to make those elements invisible and not take any space for layout purposes. I simply used android:visibility="gone" to have this:
<TextView
android:id="#+id/labelReachable"
android:layout_width="wrap_content"
android:gravity="left"
android:textSize="15dp"
android:layout_marginTop="10dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:visibility="gone"
android:text="Reachability"></TextView>
<ImageView
android:background="#drawable/bar_dark"
android:layout_width="fill_parent"
android:visibility="gone"
android:layout_height="wrap_content"/>
<LinearLayout
android:id="#+id/insertPings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:visibility="gone"
android:orientation="vertical" >
</LinearLayout>