Develop Reference

Fade between images based on position of fragment

**All of the information below is with regards to the icons illustrated on the right side of the gif.
I have created a simple toolbar that has a button that changes the image based on the position of the fragment. Everything works fine, however, I can't seem to get the fading correctly. I want the images to fade nicely as the fragment changes. Right now, going from the center (position 1) to the left (position 0) has a nice fade. The icon changes from an equalizer to a chat icon. However, going back from left (position 0) to center (position 1) makes the image pop into frame (not a fade). Additionally the same is observed going from center (position 1) to the right (position 2) and vice versa. There is no fading in this case either.
I believe the issue is with the if else statements and the setAlpha.
Position 0 (Left side)
Position 1 (Center)
Position 2 (Right side)
Gif Demo (What current code does):
https://imgur.com/a/vNEJZAJ
Code:
public class TopVariableFunctionalityButtonView extends FrameLayout implements ViewPager.OnPageChangeListener {
// Initialize content
private ImageView mVariableFunctionalityButtonImageView;
private ImageView mVariableFunctionalityButtonBackgroundImageView;
private ArgbEvaluator mArgbEvaluator;
// Initialize color change
private int mCenterVariableFunctionalityButtonColor;
private int mSideVariableFunctionalityButtonColor;
private int mCenterVariableFunctionalityButtonBackgroundColor;
private int mSideVariableFunctionalityButtonBackgroundColor;
public TopVariableFunctionalityButtonView(#NonNull Context context) {
this(context, null);
}
public TopVariableFunctionalityButtonView(#NonNull Context context, #Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public TopVariableFunctionalityButtonView(#NonNull Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public void setUpWithViewPager(ViewPager viewPager) {
viewPager.addOnPageChangeListener(this);
mVariableFunctionalityButtonImageView.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
if (viewPager.getCurrentItem() == 2)
HomeActivity.openSettings(getContext());
}
});
}
private void init() {
LayoutInflater.from(getContext()).inflate(R.layout.view_top_variable_functionality_button, this, true);
// Initialize top variable functionality button image
mVariableFunctionalityButtonImageView = findViewById(R.id.view_top_variable_functionality_button_image_view);
// Initialize top variable functionality button image background
mVariableFunctionalityButtonBackgroundImageView = findViewById(R.id.view_top_variable_functionality_button_background_image_view);
// Set start color and end color for button icons
mCenterVariableFunctionalityButtonColor = ContextCompat.getColor(getContext(), R.color.white);
mSideVariableFunctionalityButtonColor = ContextCompat.getColor(getContext(), R.color.iconColor);
mCenterVariableFunctionalityButtonBackgroundColor = ContextCompat.getColor(getContext(), R.color.transparentSearch);
mSideVariableFunctionalityButtonBackgroundColor = ContextCompat.getColor(getContext(), R.color.secondaryColor);
// Evaluate the difference between colors
mArgbEvaluator = new ArgbEvaluator();
}
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (position == 0) {
// Change color of icons based on view
setColor(1 - positionOffset);
// Change variable button image
mVariableFunctionalityButtonImageView.setAlpha(1 - positionOffset);
mVariableFunctionalityButtonImageView.setBackgroundResource(R.drawable.ic_chat);
} else if (position == 1) {
// Change color of icons based on view
setColor(positionOffset + 1);
// Change variable button image
mVariableFunctionalityButtonImageView.setAlpha(positionOffset + 1);
mVariableFunctionalityButtonImageView.setBackgroundResource(R.drawable.ic_equalizer);
} else if (position == 2) {
// Change color of icons based on view
setColor(positionOffset + 1);
// Change variable button image
mVariableFunctionalityButtonImageView.setAlpha(positionOffset + 1);
mVariableFunctionalityButtonImageView.setBackgroundResource(R.drawable.ic_settings);
}
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
private void setColor(float fractionFromCenter) {
int variableFunctionalityButtonColor = (int) mArgbEvaluator.evaluate(fractionFromCenter,
mCenterVariableFunctionalityButtonColor, mSideVariableFunctionalityButtonColor);
int variableFunctionalityButtonBackgroundColor = (int) mArgbEvaluator.evaluate(fractionFromCenter,
mCenterVariableFunctionalityButtonBackgroundColor, mSideVariableFunctionalityButtonBackgroundColor);
mVariableFunctionalityButtonImageView.setColorFilter(variableFunctionalityButtonColor);
mVariableFunctionalityButtonBackgroundImageView.setColorFilter(variableFunctionalityButtonBackgroundColor);
}
}

Coloring TextView during a certain time period Android

Is there a way to color text in TextView or something else in Android during certain time period. So it would start off with fully white text and then the coloring would move from left to right and fill it up during a certain duration.
So for example if the duration would be 10 then the whole line should be color in 10 seconds, but it should also move with the same pace.
Which would look something like this:
There is a way to do it on IOS with CATextLayer, but I haven't yet found a way to do it on Android.

I'm just creating a self-defined TextView in last year,here is my class
public class AKChangeColorTextView extends TextView {
public AKChangeColorTextView(Context context) {
this(context,null);
}
String TAG = "AKChangeColorTextView";
public AKChangeColorTextView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
RectF mRectF;
float mX;
float mY;
public AKChangeColorTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.BLUE);
PorterDuffXfermode mode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
mPaint.setXfermode(mode);
float x = 60;
float y = 10;
mY = 0;
mRectF = new RectF(x, y, x + 50, y + 50);
mTPaint = getPaint();
mX = 0;
}
Paint mPaint;
TextPaint mTPaint;
Bitmap shadowBitmap ;
Rect bounds = new Rect();
Canvas textCanvas;
#Override
protected void onDraw(Canvas canvas) {
// super.onDraw(canvas);
if (shadowBitmap == null) {
shadowBitmap = Bitmap.createBitmap(getMeasuredWidth(),getMeasuredHeight(), Bitmap.Config.ARGB_8888);
}
if (textCanvas == null) {
textCanvas = new Canvas(shadowBitmap);
}
textCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
if (mTPaint == null) {
mTPaint = getPaint();
}
String content = getText().toString();
mTPaint.getTextBounds(content,0,content.length(),bounds);
textCanvas.drawText(content,0,bounds.height(),mTPaint);
mRectF.set(colorLeft,mY,colorRight,mY+bounds.height()+10);
textCanvas.drawRect(mRectF,mPaint);
canvas.drawBitmap(shadowBitmap,0,0,null);
}
float colorLeft;
float colorRight;
public void setXOffset(float left,float right){
colorLeft = left;
colorRight = right;
invalidate();
}
}
my demo code:
class MainActivity : AppCompatActivity() {
val TAG = "MainActivity"
lateinit var countDownTimer:CountDownTimer
var currentOffsetx = 0
var textWidth = 0
var isIncrease = true
lateinit var txt:AKChangeColorTextView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(toolbar)
(findViewById<View>(R.id.tv_hello) as AKChangeColorTextView).apply{
txt = this
}
countDownTimer = object:CountDownTimer(300000,200){
override fun onFinish() {
}
override fun onTick(millisUntilFinished: Long) {
if (textWidth == 0) {
textWidth = txt.width
}
if (currentOffsetx <= textWidth) {
if (isIncrease) {
currentOffsetx += 10
currentOffsetx = min(currentOffsetx, textWidth)
} else {
currentOffsetx -= 10
currentOffsetx = max(currentOffsetx, 0)
}
}
if (currentOffsetx == textWidth) {
isIncrease = false
}else if (currentOffsetx == 0) {
isIncrease = true
}
txt.setXOffset(0f,currentOffsetx.toFloat())
Log.w(TAG,"check current tick:$millisUntilFinished,offsetx:$currentOffsetx,txtWidth:$textWidth")
}
}
countDownTimer.start()
}
}
my xml layout :
<com.example.administrator.myapplication.AKChangeColorTextView
android:id="#+id/tv_hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I Found a Love For Aolphn"
android:textColor="#000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
following is effect

There is a way to do this optimized, simple, smooth and beautiful: Vector Animated Drawables (API21+).
There are a lot of tutorials out there (for example this video) that show how you can make beautiful animations. Basically the steps are following:
create two SVG vector images of your text, one with normal color, the other one with
colored letters. You can do this easily in Adobe Illustrator for example.
Import both into shapeshifter.design.
Create an animation for the second (colored layer) by your liking.
Copy the resulting xml file into your drawables and you're done!
Good luck!

You can use a text spannable and Foreground Color Span and animate one character at a time

How to perform Zoom IN and OUT Smoothly and Zooming in specific Zoom location on a TEXTVIEW?

I am about to perform Zoom IN and OUT operations on a TextView which contains text. I am able to Zoom IN and OUT, but I need to make Zoom functions much Smoother(like Zooming a page in Chrome Browser). While performing Zoom-In and Zoom-Out operations (Using Pinch Zoom method), I am Zooming the Text content in a center aligned manner, I want to Zoom the content where I am Zooming in.
I am attaching the code done by me, kindly suggest a solution for me.
Here is my activity file:
public class ZoomTextView extends TextView {
private static final String TAG = "ZoomTextView";
private ScaleGestureDetector mScaleDetector;
private float mScaleFactor = 1.f;
private float defaultSize;
private float zoomLimit = 3.0f;
public ZoomTextView(Context context) {
super(context);
initialize();
}
public ZoomTextView(Context context, AttributeSet attrs) {
super(context, attrs);
initialize();
}
public ZoomTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initialize();
}
private void initialize() {
defaultSize = getTextSize();
mScaleDetector = new ScaleGestureDetector(getContext(), new ScaleListener());
}
/***
* #param zoomLimit
* Default value is 3, 3 means text can zoom 3 times the default size
*/
public void setZoomLimit(float zoomLimit) {
this.zoomLimit = zoomLimit;
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
#Override
public boolean onTouchEvent(#NonNull MotionEvent ev) {
super.onTouchEvent(ev);
mScaleDetector.onTouchEvent(ev);
return true;
}
/*Scale Gesture listener class,
mScaleFactor is getting the scaling value
and mScaleFactor is mapped between 1.0 and and zoomLimit
that is 3.0 by default. You can also change it. 3.0 means text
can zoom to 3 times the default value.*/
private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
#Override
public boolean onScale(ScaleGestureDetector detector) {
mScaleFactor *= detector.getScaleFactor();
mScaleFactor = Math.max(1.0f, Math.min(mScaleFactor, zoomLimit));
setTextSize(TypedValue.COMPLEX_UNIT_PX, defaultSize * mScaleFactor);
Log.e(TAG, String.valueOf(mScaleFactor));
return true;
}
} }
Here is my .xml file:
<noman.zoomtextview.ZoomTextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:text="#string/sample_string"/> </RelativeLayout>
Thanks in advance.

I think you should use magnifier, by this way
The magnifier can be programmatically used on an arbitrary view as follows:
View view = findViewById(R.id.view);
Magnifier magnifier = new Magnifier(view);
magnifier.show(view.getWidth() / 2, view.getHeight() / 2);
Here View can be replaced with TextView or Any specific view

I have worked on Zoom In/Out for a View which can have multiple child(any kind of view and textview is included).
My Project
I use ScaleX and ScaleY api to zoom the parent view.
private fun applyScaleAndTranslationToChild() {
child().scaleX = scaleFactor
child().scaleY = scaleFactor
child().pivotX = 0f // default is to pivot at view center
child().pivotY = 0f // default is to pivot at view center
child().translationX = translateX
child().translationY = translateY
}
above method is used to apply zoom in and out, and focus of zooming is also fixed.
I use ScaleGestureListener to get the scale (pinch gesture is captured by this)
inner class ScaleListner : ScaleGestureDetector.SimpleOnScaleGestureListener() {
override fun onScale(scaleDetector: ScaleGestureDetector?): Boolean {
val scaleFactor = scaleDetector!!.scaleFactor
setScaleAndTranslation(scaleFactor, scaleDetector.focusX, scaleDetector.focusY)
return true
}
override fun onScaleEnd(detector: ScaleGestureDetector?) {
super.onScaleEnd(detector)
setLayoutParamOfChild()
}
private fun setScaleAndTranslation(scaleFactor: Float, focusX: Float, focusY: Float) {
if (lastScaleFactor == 0f || Math.signum(scaleFactor) == Math.signum(lastScaleFactor)) {
val prevScale = this#ZoomView.scaleFactor
this#ZoomView.scaleFactor *= scaleFactor
this#ZoomView.scaleFactor = Math.max(MIN_ZOOM, Math.min(this#ZoomView.scaleFactor, MAX_ZOOM))
lastScaleFactor = scaleFactor
val adjustedScaleFactor = this#ZoomView.scaleFactor / prevScale
// added logic to adjust translateX and translateY for pinch/zoom pivot point
translateX += (translateX - focusX) * (adjustedScaleFactor - 1)
translateY += (translateY - focusY) * (adjustedScaleFactor - 1)
} else {
lastScaleFactor = 0f
}
isSingleTapConfirmed = false
}
}
Refer to my Question all details are here.
Android: Zooming EditText Android Issue in translation And Getting Touch event of childView when Placed outside parentView

If you don't mind adding another library, try the gesture view layout
more specifically, https://static.javadoc.io/com.alexvasilkov/gesture-views/2.5.2/com/alexvasilkov/gestures/views/GestureFrameLayout.html
basically you wrap your text view inside the GestureFrameLayout in the XML.
it'll automatically detect zoom, pinch and pan based on your fingers' position and gestures. no extra coding required out of the box (unless if you want to implement non-default functionality like rotation, crop etc)
the usage example is here https://github.com/alexvasilkov/GestureViews/wiki/Usage
<com.alexvasilkov.gestures.views.GestureFrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- GestureFrameLayout can contain only one child -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Layout content goes here -->
</FrameLayout>

Detecting a SwipeGesture on a ViewGroup and all its child views

I have a RelativeLayout that contains many child views with various touch events. I want to get notified when the user swipes anywhere on the parent RelativeLayout so I can update some UI while still letting the child views handle their own touch/drag events. What is the standard way of accomplishing this for Android?
I was thinking that I could put an overlay over all the views and have it detect swipe gestures and if it wasn't a swipe I could pass the touch event on to other views in the hierarchy. It doesn't seem like Android supports that sort of touch detection and once one view decides to see if a event is a certain gesture no other views will be able to see the events.
A swipe gesture consists of three touch events: ACTION_DOWN, ACTION_MOVE and ACTION_UP. You need to record all three events and then see if it was a swipe or not. If it was not a swipe then we would need to pass those events to other child views to see if it meets their criteria for the gesture they are looking for. If it is a swipe we would want to block the events from being sent to the child view. Just not sure if this is actually possible.
Update
Using the ideas of the users in the answers section I was able to write a layout that met my specification. This RelativeLayout just handles right and left swipes but could be added to to handle more directions. OnSwipeListener is just an interface with two methods void swipedLeft() and void swipedRight().
public class SwipeRelativeLayout extends RelativeLayout {
public OnSwipeListener mSwipeListener = null;
private static final int SWIPE_DISTANCE_THRESHOLD = 100;
private float mStartX = 0;
private float mStartY = 0;
private float mEndX = 0;
private float mEndY = 0;
public SwipeRelativeLayout(Context context) {
super(context);
}
public SwipeRelativeLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SwipeRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public SwipeRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
boolean handled = onTouchEvent(event);
if (event.getAction() == MotionEvent.ACTION_UP) return handled;
return false;
}
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
mStartX = event.getRawX();
mStartY = event.getRawY();
break;
}
case MotionEvent.ACTION_MOVE: {
float distanceX = event.getRawX() - mStartX;
float distanceY = event.getRawY() - mStartY;
if (Math.abs(distanceX) > Math.abs(distanceY) && Math.abs(distanceX) > SWIPE_DISTANCE_THRESHOLD) {
if (distanceX > 0) {
if (mSwipeListener != null) mSwipeListener.swipedRight();
} else {
if (mSwipeListener != null) mSwipeListener.swipedLeft();
}
return true;
}
return false;
}
}
return true;
}
}

When a touch event occurs it is first passed to the parent layout view and passed on to child view via onInterceptTouchEvent returning true or false. You want to override and intercept the touch events on the parent RelativeLayout and determine if you have seen a swipe gesture or not. If you have seen a swipe you want to return that you have handled it. In this case ACTION_UP is the end of a possible swipe and if your onTouchEvent handled the event then you can return true and the views below it will not get the finishing event and thus ignore their gestures.
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
boolean handled = onTouchEvent(event);
if (event.getAction() == MotionEvent.ACTION_UP) return handled;
return false;
}

Cannot get the invalidate statement to work

package com.game.crazyeights;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.view.MotionEvent;
import android.view.View;
import com.game.crazyeights.R;
public class TitleView extends View {
private Bitmap titleGraphic;
private Bitmap playButtonUp;
private Bitmap playButtonDown;
private boolean playButtonPressed;
private int screenH;
private int screenW;
public TitleView(Context context) {
super(context);
titleGraphic = BitmapFactory.decodeResource(getResources(), R.drawable.titlegraphic);
playButtonUp = BitmapFactory.decodeResource(getResources(), R.drawable.play_button_up);
playButtonDown = BitmapFactory.decodeResource(getResources(), R.drawable.play_button_down);
}
#Override
public void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
screenW = w;
screenH = h;
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(titleGraphic, (screenW-titleGraphic.getWidth())/2 , 0, null);
if (playButtonPressed) {
canvas.drawBitmap(playButtonDown, (screenW-playButtonUp.getWidth())/2, (int)(screenH*0.7), null);
} else {
canvas.drawBitmap(playButtonUp, (screenW-playButtonUp.getWidth())/2, (int)(screenH*0.7), null);
}
}
public boolean onTouchedEvent(MotionEvent event) {
int eventaction = event.getAction();
int X = (int)event.getX();
int Y = (int)event.getY();
switch (eventaction) {
case MotionEvent.ACTION_DOWN:
if (X > (screenW-playButtonUp.getWidth())/2 && X < (screenW-playButtonUp.getWidth())/2 + playButtonUp.getWidth() && Y > (int) (screenH*0.7) && Y < (int) (screenH*0.7) + playButtonUp.getHeight()) {
playButtonPressed = true;
}
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
playButtonPressed = false;
break;
}
invalidate();
return true;
}
}
Basically, I tried to put a invalidate at the end to redraw the screen to update the buttons state. What I mean by that is when the button is pressed down on it has a picture of it in a different state I wanna update to but, it doesn't do that when I use the invalidate. And when the user lets go of the button it updates back to the regular button state image..
If you didn't understand what I said above ill try to simplify it. I want the button to update its image when pressed down on, and to go back to its previous image when you stop pressing the button. I tried using invalidate but, it didn't work. Any idea here?

You should not place invalidate() at the end of the method. OnTouchedEvent() is fired every time you touch or move within that View.
Make sure that case within MotionEvent.ACTION_DOWN is called. I mean those boolean expressions are valid. Then call invalidate() at the end of that case.
Also I this this method is cumbersome and unnecessary. Instead you can use ImageView.
Good luck!