So my problem is, I use animation to resize text in text view and move it a bit. When I resize the LinearLayout Layout text is clipping to half if it's long text how can I stay in bound so to not clip my text when I resize the LinearLayout
Text view is in Liner layout and parent is Constrant layout.
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/cons1">
<TextView
android:id="#+id/t1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:fontFamily="#font/poppins"
android:text="How to make french toast"
android:textColor="#color/black"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/cons1" />
</LinearLayout>
Scroll view listener to change on scrolling
scrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
boolean isStart = false;
#Override
public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
if (scrollY > 0 && !isStart) {
recipeTitle.startAnimation(animZoomOut);
slideView(layout2, layout2.getHeight(), layout2.getHeight() / 2);
isStart = true;
} else if (scrollY <= 0) {
slideView(layout2, layout2.getHeight(), layout2.getHeight() * 2);
recipeTitle.startAnimation(animZoomIn);
isStart = false;
}
}
});
Method to resize textview,
public static void slideView(View view,
int currentHeight,
int newHeight) {
ValueAnimator slideAnimator = ValueAnimator
.ofInt(currentHeight, newHeight)
.setDuration(1000);
/* We use an update listener which listens to each tick
* and manually updates the height of the view */
slideAnimator.addUpdateListener(animation1 -> {
Integer value = (Integer) animation1.getAnimatedValue();
view.getLayoutParams().height = value.intValue();
view.requestLayout();
});
/* We use an animationSet to play the animation */
AnimatorSet animationSet = new AnimatorSet();
animationSet.setInterpolator(new AccelerateDecelerateInterpolator());
animationSet.play(slideAnimator);
animationSet.start();
}
anim xml files
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.5"
android:toYScale="0.5">
</scale>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%p" android:fromYDelta="0%p"
android:toXDelta="-28%p" android:toYDelta="-28%p"
android:duration="1000"
android:fillAfter="true" />
I have tried to make the image rounded inside the Gridview but it appears as shown below. Please help me to solve this issue
Here is the code that I have tried:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if(convertView == null){
imageView = new ImageView(mContext);
imageView.setBackgroundResource(R.drawable.shape);
GridLayout.LayoutParams param =new GridLayout.LayoutParams();
param.height = 300;
param.width = 300;
imageView.setLayoutParams(param);
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setPadding(16,16,16,16);
}else{
imageView = (ImageView) convertView;
}
imageView.setImageResource(image[position]);
return imageView;
}
The below is the shape.xml file that I have added:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Background Color -->
<solid android:color="#ffffff" />
<!-- Border Color -->
<stroke android:width="1dp" android:color="#000000" />
<!-- Round Corners -->
<corners android:radius="50dp" />
</shape>
You can use CircleImageView library to do it easily and you will find examples in the read me or if you want to create your own version you can read the library code and learn from it to improve your own version
I always use these two libraries for Round Image View
implementation 'de.hdodenhof:circleimageview:3.1.0'
implementation 'com.makeramen:roundedimageview:2.3.0'
Example of circleimageview
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imageProfile"
android:layout_width="#dimen/_80sdp"
android:layout_height="#dimen/_80sdp"
app:civ_border_color="#color/textPrimary"
app:civ_border_width="#dimen/_1sdp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textChangeBio" />
Example of RoundedImageView
<com.makeramen.roundedimageview.RoundedImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/imageView1"
android:src="#drawable/photo1"
android:scaleType="fitCenter"
app:riv_corner_radius="30dip"
app:riv_border_width="2dip"
app:riv_border_color="#333333"
app:riv_mutate_background="true"
app:riv_tile_mode="repeat"
app:riv_oval="true" />
you can also set custom radius in RoundImageView
How to hide/show view when scrolling up/down android like Foodpanda app
I want to hide/show view (linear or relative layout) when ScrollView is up/down like this above gif.
But my app I do not use Recyclerview or list view (just textview).
How can I create it?
Thanks!
Add scroll listener to the RecylerView
If the user is scrolling down - then start translation animation UPWARDS
If the user is scrolling up - then start translation animation DOWNWARDS
Anim translation UPWARDS:- (trans_upwards.xml)
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromYDelta="0%p"
android:toYDelta="100%p"
android:duration="300"
/>
</set>
Anim translation DOWNWARDS:-(trans_downwards.xml)
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromYDelta="100%p"
android:toYDelta="0%p"
android:duration="300"
/>
</set>
Add scroll listener to recyclerView (and also do a checking)
boolean check_ScrollingUp = false;
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
if (dy > 0) {
// Scrolling up
if(check_ScrollingUp)
{
YourView.startAnimation(AnimationUtils.loadAnimation(context,R.anim.trans_downwards));
check_ScrollingUp = false;
}
} else {
// User scrolls down
if(!check_ScrollingUp )
{
YourView
.startAnimation(AnimationUtils
.loadAnimation(context,R.anim.trans_upwards));
check_ScrollingUp = true;
}
}
}
#Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
}
});
Could anyone tell me how they have got RotateDrawable to work whether it be from code or XML or both? The documentation on animating Drawables is pretty poor and animation only seems to work for images. I want to be able to animate all drawables. When i tried to get a RotateDrawble from XML is just causes an exception. What is the correct function to find a RotateDrawable from XML?
here's a nice solution for putting a rotated drawable for an imageView:
Drawable getRotateDrawable(final Bitmap b, final float angle) {
final BitmapDrawable drawable = new BitmapDrawable(getResources(), b) {
#Override
public void draw(final Canvas canvas) {
canvas.save();
canvas.rotate(angle, b.getWidth() / 2, b.getHeight() / 2);
super.draw(canvas);
canvas.restore();
}
};
return drawable;
}
usage:
Bitmap b=...
float angle=...
final Drawable rotatedDrawable = getRotateDrawable(b,angle);
root.setImageDrawable(rotatedDrawable);
another alternative:
private Drawable getRotateDrawable(final Drawable d, final float angle) {
final Drawable[] arD = { d };
return new LayerDrawable(arD) {
#Override
public void draw(final Canvas canvas) {
canvas.save();
canvas.rotate(angle, d.getBounds().width() / 2, d.getBounds().height() / 2);
super.draw(canvas);
canvas.restore();
}
};
}
also, if you wish to rotate the bitmap, but afraid of OOM, you can use an NDK solution i've made here
You have to animate the "level" property, where 0 is the start value and 10000 is the end value.
The below example animates from start to finish, you can reverse the animation easily with this method.
final RotateDrawable rotateDrawable = ...
ObjectAnimator.ofInt(rotateDrawable, "level", 0, 10000).start();
I would like to add a full example of animating a progress icon on ImageView, it is based on Mark Hetherington answer.
So my animation looks as follows:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="-360"
android:duration="100"
android:drawable="#drawable/ic_loop_black_24dp"
/>
icon comes from https://material.io/icons/
then my layout contains an ImageView as follows:
<ImageView
android:id="#+id/progress"
android:layout_marginTop="0dp"
android:layout_marginLeft="-3dp"
android:layout_width="30dp"
android:layout_height="30dp"
android:visibility="gone"
android:scaleType="fitCenter"
android:background="#drawable/progress_anim"
android:layout_gravity="center_horizontal|center_vertical"
/>
and finally in code when I need to show animation I do:
RotateDrawable rotateDrawable = ((RotateDrawable)progressImage.getBackground());
ObjectAnimator anim = ObjectAnimator.ofInt(rotateDrawable, "level", 0, 10000);
anim.setDuration(1000);
anim.setRepeatCount(ValueAnimator.INFINITE);
anim.start();
RotateDrawable does not seem to be animated. Instead, you have to use setLevel to change the rotation of the drawable.
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/your_drawable"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
And set the level will rotate the drawable:
final ImageView image = (ImageView)findViewById(R.id.imageView1);
final RotateDrawable drawable = (RotateDrawable)image.getDrawable();
drawable.setLevel(500);
The following code returns a Drawable wrapper that rotates another Drawable programmatically:
Drawable rotateDrawable(Drawable d, final float angle) {
// Use LayerDrawable, because it's simpler than RotateDrawable.
Drawable[] arD = {
d
};
return new LayerDrawable(arD) {
#Override
public void draw(Canvas canvas) {
canvas.save();
canvas.rotate(angle);
super.draw(canvas);
canvas.restore();
}
};
}
I haven't worked with a RotateDrawable, but if you're simply trying to animate rotation on a graphic, you don't need it. Drawables with a 'level' like RotateDrawable are meant to convey information rather than animate views.
The following code rotates an ImageView around its center:
ImageView myImageView = (ImageView)findViewById(R.id.my_imageview);
AnimationSet animSet = new AnimationSet(true);
animSet.setInterpolator(new DecelerateInterpolator());
animSet.setFillAfter(true);
animSet.setFillEnabled(true);
final RotateAnimation animRotate = new RotateAnimation(0.0f, -90.0f,
RotateAnimation.RELATIVE_TO_SELF, 0.5f,
RotateAnimation.RELATIVE_TO_SELF, 0.5f);
animRotate.setDuration(1500);
animRotate.setFillAfter(true);
animSet.addAnimation(animRotate);
myImageView.startAnimation(animSet);
Since you're trying to use Almero's Android Gesture Detectors, I decided to do the same in order to find an appropriate solution:
public class MainActivity extends Activity {
private RotateGestureDetector mRotateDetector;
private float mRotationDegrees = 0.f;
private static final float ROTATION_RATIO = 2;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRotateDetector = new RotateGestureDetector(getApplicationContext(), new RotateListener());
}
#Override
public boolean onTouchEvent(MotionEvent event) {
mRotateDetector.onTouchEvent(event);
return super.onTouchEvent(event);
}
private class RotateListener extends RotateGestureDetector.SimpleOnRotateGestureListener {
#Override
public boolean onRotate(RotateGestureDetector detector) {
mRotationDegrees -= detector.getRotationDegreesDelta();
ImageView v = (ImageView) findViewById(R.id.imageView);
// For NineOldAndroids library only!
ViewHelper.setRotation(v, mRotationDegrees * ROTATION_RATIO);
// For HONEYCOMB and later only!
v.setRotation(mRotationDegrees * ROTATION_RATIO);
return true;
}
}
}
It works fine for me (I'm able to rotate the ImageView with two-finger rotation gesture.
NOTE: Don't forget to chose appropriate rotation method call. I commented both of them to draw your attention.
ROTATION_RATIO is just a multiplier to speed-up a rotation response on my fingers movement.
You can use any rotation axis (setRotation(), setRotationX() and setRotationY()) methods for a View.
To enable support of this code on Android devices with API Level lower than 11 (pre-Honeycomb devices) you may want to engage NineOldAndroid library.
You could manually call RotatedDrawable.setLevel() to rotate the drawable, or you could read the code of ProgressBar, the indeterminate drawable is a LayerDrawable whose children were RotatedDrawable, like this one:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:drawable="#drawable/spinner_48_outer_holo"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="1080" />
</item>
<item>
<rotate
android:drawable="#drawable/spinner_48_inner_holo"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="720"
android:toDegrees="0" />
</item>
</layer-list>
The rotate animation was driven by ProgressBar's onDraw method.
This is a good working example. Param duration is used to animate it.
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="4000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="720" >
<shape
android:innerRadius="20dp"
android:shape="ring"
android:thickness="4dp"
android:useLevel="false" >
<size
android:height="48dp"
android:width="48dp" />
<gradient
android:centerY="0.5"
android:endColor="#android:color/white"
android:startColor="#00ffffff"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
If you want to rotate drawable forever you can use animated-rotate tag in drawable xml like this.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<animated-rotate android:drawable="#drawable/ic_refresh" android:pivotX="50%" android:pivotY="50%" />
</item>
</selector>
Currently I'm trying to implement something in my app where I really don't know where to start.
Have a look at this little image:
You can find the app in play store here: https://play.google.com/store/apps/details?id=com.imano.euro2012.row
In my app, I have a listview and when i tap on an item I want to slide in the black activity in to about 3/4. In that activity I want to have some llistview item specific options.
Any one knows how to solve this?
Solution:
Thanks to Imran-Khan I got it working.
But I think this code is not perfect. I'm not sure if the width and height calculation in the first half of the showPopup() method is correct. And in my solution the popup has on the bottom and on the right a little margin. I don't know right now why this happens. Maybe someone can help...
Here is what I did so far:
First I added the method showpopup(long selectedItem) to my listview:
lv_timer.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parentView, View childView, int position, long id) {
showPopup(id);
}
});
and the method itself:
private void showPopup(long selectedItem) {
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
int popupWidth = (width / 4) * 3;
int popupHeight = height;
LinearLayout viewGroup = (LinearLayout) findViewById(R.id.ll_timer_prop);
LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View layout = layoutInflater.inflate(R.layout.timer_properties, viewGroup);
final PopupWindow popup = new PopupWindow(this);
popup.setContentView(layout);
popup.setWidth(popupWidth);
popup.setHeight(popupHeight);
popup.setFocusable(true);
popup.showAtLocation(layout, Gravity.NO_GRAVITY, width - (width / 4 * 3), 0);
TextView tv_item = (TextView) layout.findViewById(R.id.tv_item);
tv_item.setText("Clicked Item ID: " + selectedItem);
}
This is working fine for me.
for the slide in part I've found this thread: PopupWindow animation not working
I added
popup.setAnimationStyle(R.style.AnimationPopup);
before the showAtLocation() call, created a res/anim directory an created two XML files in it: popup_show.xml and popup_hide.xml
popup_show.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0.0" android:toXScale="1.0"
android:fromYScale="1.0" android:toYScale="1.0"
android:pivotX="100%" android:pivotY="0%"
android:duration="#android:integer/config_shortAnimTime"
/>
<alpha
android:interpolator="#android:anim/decelerate_interpolator"
android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="#android:integer/config_shortAnimTime"
/>
</set>
popup_hide.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="1.0" android:toXScale="0.0"
android:fromYScale="1.0" android:toYScale="1.0"
android:pivotX="100%" android:pivotY="0%"
android:duration="#android:integer/config_shortAnimTime"
/>
<alpha
android:interpolator="#android:anim/decelerate_interpolator"
android:fromAlpha="1.0" android:toAlpha="0.0"
android:duration="#android:integer/config_shortAnimTime"
/>
</set>
You can create this view using custom PopupWindow
see this tutorial for Creating Custom PopupWindow
How to create popups in Android
You can use QuickAction For such behaviour, Like shown on third screen
Edit
Sorry I have not paid attention for the fact that you want a sliding from right to left effect, But I think you can try to customise slidindrawer in Android API to make slide from right to left.
Funny, I'm actually looking at the same problem right now.
I've found this topic:
Android Facebook style slide
Some nice examples in there.