I want to move an ImageView to the center of a Button. For doing so, I use the following code:
var leftPos = mButtonView.left.toFloat()
var rightPos = mButtonView.right.toFloat()
var topPos = mButtonView.top.toFloat()
var bottomPos = mButtonView.bottom.toFloat()
var centerX = (leftPos + rightPos)/2
var centerY = (topPos + bottomPos)/2
var soultoX = ObjectAnimator.ofFloat(mContentView, "x", centerX).apply {
duration = 1000
}
var soultoY = ObjectAnimator.ofFloat(mContentView, "y", centerY).apply {
duration = 1000
}
fun soulToButton() = AnimatorSet().apply {
play(soultoX).with(soultoY)
start()
}
On calling soulToButton(), instead of moving to the expected point in the middle of mButtonView, mContentView moves to the upper left corner of the screen. Any idea why?
I think the problem is - finding the coordinates/size of an Android View during screen construction. To get the coordinates/size of a View as soon as it is known, attach a listener to its ViewTreeObserver.
For example:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val buttonView = btn
val contentView = img
object : ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
contentView.viewTreeObserver.removeOnGlobalLayoutListener(this)
var leftPos = buttonView.left.toFloat()
var rightPos = buttonView.right.toFloat()
var topPos = buttonView.top.toFloat()
var bottomPos = buttonView.bottom.toFloat()
var centerX = (leftPos + rightPos - contentView.width) / 2
var centerY = (topPos + bottomPos - contentView.height) / 2
var soultoX = ObjectAnimator.ofFloat(contentView, "x", centerX).apply {
duration = 1000
}
var soultoY = ObjectAnimator.ofFloat(contentView, "y", centerY).apply {
duration = 1000
}
fun soulToButton() = AnimatorSet().apply {
play(soultoX).with(soultoY)
start()
}
soulToButton()
}
}.run {
contentView.viewTreeObserver.addOnGlobalLayoutListener(this)
}
}
Related
what I want to achieve
what I have
I want to show icons on the xAxis above time but line chart takes icon and places them on the value where temperature is shown. I have searched a lot but could not find the answer. Any help would be appreciated. I have tried a lot of things but all in vein.
private fun setTempChart(hour: ArrayList<Hour>, id: String) {
val entries: MutableList<Entry> = ArrayList()
for (i in hour.indices) {
val code = hour[i].condition.code
val icon =
if (hour[i].is_day == 1) requireActivity().setIconDay(code) else requireActivity().setIconNight(
code
)
entries.add(Entry(i.toFloat(), sharedPreference.temp?.let {
hour[i].temp_c.setCurrentTemperature(
it
).toFloat()
}!!))
}
val dataSet = LineDataSet(entries, "")
dataSet.apply {
lineWidth = 0f
setDrawCircles(false)
setDrawCircleHole(false)
isHighlightEnabled = false
valueTextColor = Color.WHITE
setColors(Color.WHITE)
valueTextSize = 12f
mode = LineDataSet.Mode.CUBIC_BEZIER
setDrawFilled(true)
fillColor = Color.WHITE
valueTypeface = typeface
isDrawIconsEnabled
setDrawIcons(true)
valueFormatter = object : ValueFormatter() {
override fun getFormattedValue(value: Float): String {
return String.format(Locale.getDefault(), "%.0f", value)
}
}
}
val lineData = LineData(dataSet)
chart.apply {
description.isEnabled = false
axisLeft.setDrawLabels(false)
axisRight.setDrawLabels(false)
legend.isEnabled = false
axisLeft.setDrawGridLines(false)
axisRight.setDrawGridLines(false)
axisLeft.setDrawAxisLine(false)
axisRight.setDrawAxisLine(false)
setScaleEnabled(false)
data = lineData
setVisibleXRange(8f, 8f)
animateY(1000)
xAxis.apply {
setDrawAxisLine(false)
textColor = Color.WHITE
setDrawGridLines(false)
setDrawLabels(true)
position = XAxis.XAxisPosition.BOTTOM
textSize = 12f
valueFormatter = MyAxisFormatter(hour, id)
isGranularityEnabled = true
granularity = 1f
labelCount = entries.size
}
}
}
I am using MPAndroidChart library
There isn't a nice built-in way to draw icons like that, but you can do it by making a custom extension of the LineChartRenderer and overriding drawExtras. Then you can get your icons from R.drawable.X and draw them on the canvas wherever you want. There is some work to figure out where to put them to line up with the data points, but you can copy the logic from drawCircles to find that.
Example Custom Renderer
inner class MyRenderer(private val context: Context,
private val iconY: Float,
private val iconSizeDp: Float,
chart: LineDataProvider,
animator: ChartAnimator,
viewPortHandler: ViewPortHandler)
: LineChartRenderer(chart, animator, viewPortHandler) {
private var buffer: FloatArray = listOf(0f,0f).toFloatArray()
override fun drawExtras(c: Canvas) {
super.drawExtras(c)
val iconSizePx = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,
iconSizeDp,
resources.displayMetrics
)
// get the icons you want to draw
val cloudy = ContextCompat.getDrawable(context, R.drawable.cloudy)
val sunny = ContextCompat.getDrawable(context, R.drawable.sunny)
if( cloudy == null || sunny == null ) {
throw RuntimeException("Missing drawables")
}
// Determine icon width in pixels
val w = iconSizePx
val h = iconSizePx
val dataSets = mChart.lineData.dataSets
val phaseY = mAnimator.phaseY
for(dataSet in dataSets) {
mXBounds.set(mChart, dataSet)
val boundsRange = mXBounds.range + mXBounds.min
val transformer = mChart.getTransformer(dataSet.axisDependency)
for(j in mXBounds.min .. boundsRange) {
val e = dataSet.getEntryForIndex(j) ?: break
buffer[0] = e.x
buffer[1] = iconY * phaseY
transformer.pointValuesToPixel(buffer)
if( !mViewPortHandler.isInBoundsRight(buffer[0])) {
break
}
if( !mViewPortHandler.isInBoundsLeft(buffer[0]) ||
!mViewPortHandler.isInBoundsY(buffer[1])) {
continue
}
// Draw the icon centered under the data point, but at a fixed
// vertical position. Here the icon "sits on top" of the
// specified iconY value
val left = (buffer[0]-w/2).roundToInt()
val right = (buffer[0]+w/2).roundToInt()
val top = (buffer[1]-h).roundToInt()
val bottom = (buffer[1]).roundToInt()
// Alternately, use this to center the icon at the
// "iconY" value
//val top = (buffer[1]-h/2).roundToInt()
//val bottom = (buffer[1]+h/2).roundToInt()
// Use whatever logic you want to select which icon
// to use at each position
val icon = if( e.y > 68f ) {
sunny
}
else {
cloudy
}
icon.setBounds(left, top, right, bottom)
icon.draw(c)
}
}
}
}
Using the Custom Renderer
val iconY = 41f
val iconSizeDp = 40f
chart.renderer = MyRenderer(this, iconY, iconSizeDp,
chart, chart.animator, chart.viewPortHandler)
(other formatting)
val chart = findViewById<LineChart>(R.id.chart)
chart.axisRight.isEnabled = false
val yAx = chart.axisLeft
yAx.setDrawLabels(false)
yAx.setDrawGridLines(false)
yAx.setDrawAxisLine(false)
yAx.axisMinimum = 40f
yAx.axisMaximum = 80f
val xAx = chart.xAxis
xAx.setDrawLabels(false)
xAx.position = XAxis.XAxisPosition.BOTTOM
xAx.setDrawGridLines(false)
xAx.setDrawAxisLine(false)
xAx.axisMinimum = 0.5f
xAx.axisMaximum = 5.5f
xAx.granularity = 0.5f
val x = listOf(0,1,2,3,4,5,6)
val y = listOf(60,65,66,70,65,50,55)
val e = x.zip(y).map { Entry(it.first.toFloat(), it.second.toFloat())}
val line = LineDataSet(e, "temp")
line.setDrawValues(true)
line.setDrawCircles(false)
line.circleRadius = 20f // makes the text offset up
line.valueTextSize = 20f
line.color = Color.BLACK
line.lineWidth = 2f
line.setDrawFilled(true)
line.fillColor = Color.BLACK
line.fillAlpha = 50
line.mode = LineDataSet.Mode.CUBIC_BEZIER
line.valueFormatter = object : ValueFormatter() {
override fun getFormattedValue(value: Float): String {
return "%.0f F".format(value)
}
}
chart.data = LineData(line)
chart.description.isEnabled = false
chart.legend.isEnabled = false
Gives the desired effect
I'm currently working in a custom view, basically its a draggable view that has a pulse effect. In fact I achieved the effect that I want but I it has performance issues.
I don't know if it can be seen well in the gif but at first the effect runs without problems and then it shows performance issues.
Here is my class
class BalanceAndFadeView #JvmOverloads constructor(...) : FrameLayout(...) {
// The thumb view is the draggable view
private var thumb: ImageView
// These are for the pulsing effect
private var pulseView: ImageView
private var pulseView2: ImageView
private var selectedPoint: Point = Point()
private val animators = arrayListOf<Animator>()
private var animatorsSet = AnimatorSet()
private var centerX = 0f
private var centerY = 0f
init {
// Here I create and add the views to the root view
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
centerX = w * 0.5f
centerY = h * 0.5f
animationStart()
}
override fun onTouchEvent(event: MotionEvent): Boolean {
return when (event.actionMasked) {
MotionEvent.ACTION_DOWN,
MotionEvent.ACTION_MOVE,
MotionEvent.ACTION_UP -> {
val snapPoint = Point(event.x.toInt(), event.y.toInt())
selectedPoint = snapPoint
setCoordinate(snapPoint.x, snapPoint.y)
true
}
else -> {
false
}
}
}
fun setCoordinate(x: Int, y: Int) {
// Sets the thumb view coordinates to create the draggable view effect
thumb.x = x - thumb.measuredWidth * 0.5f
thumb.y = y - thumb.measuredHeight * 0.5f
// These animators are for the pulsing effect to translate to the center of the view
// I want the start point of the translation to update with the position
// of the thumb view, so I need it to be a dynamic animation
val translationXAnimator =
ObjectAnimator.ofFloat(pulseView, "TranslationX", x.toFloat() - centerX, 0f)
.apply {
repeatCount = ObjectAnimator.INFINITE
repeatMode = ObjectAnimator.RESTART
startDelay = 0
}
val translationYAnimator =
ObjectAnimator.ofFloat(pulseView, "TranslationY", y.toFloat() - centerY, 0f)
.apply {
repeatCount = ObjectAnimator.INFINITE
repeatMode = ObjectAnimator.RESTART
startDelay = 0
}
val translationXAnimator2 = ObjectAnimator.ofFloat(...).apply { ... }
val translationYAnimator2 = ObjectAnimator.ofFloat(...).apply { ... }
animatorsSet.playTogether(
... // adds new animators
)
// Since I run this method every time the touch event it's troggered,
// the performance gets worse every time I touch the screen
animatorsSet.start()
// But if I call animatorsSet.end() and then animatorsSet.start()
// the pulsing effect does not work as expected since the animation stops
// but in terms of performance it's just normal
}
// These animators are for the pulsing effect
private fun animationStart() {
val scaleXAnimator = ObjectAnimator.ofFloat(pulseView, "ScaleX", 1f, 6f).apply {
repeatCount = ObjectAnimator.INFINITE
repeatMode = ObjectAnimator.RESTART
startDelay = 0
}
animators.add(scaleXAnimator)
val scaleYAnimator = ObjectAnimator.ofFloat(pulseView, "ScaleY", 1f, 6f).apply {
repeatCount = ObjectAnimator.INFINITE
repeatMode = ObjectAnimator.RESTART
startDelay = 0
}
animators.add(scaleYAnimator)
val alphaAnimator = ObjectAnimator.ofFloat(pulseView, "Alpha", 1f, 0f).apply {
repeatCount = ObjectAnimator.INFINITE
repeatMode = ObjectAnimator.RESTART
startDelay = 0
}
animators.add(alphaAnimator)
val scaleXAnimator2 = ObjectAnimator.ofFloat( ... ).apply { ... }
animators.add(scaleXAnimator2)
val scaleYAnimator2 = ObjectAnimator.ofFloat( ... ).apply { ... }
animators.add(scaleYAnimator2)
val alphaAnimator2 = ObjectAnimator.ofFloat( ... ).apply { ... }
animators.add(alphaAnimator2)
animatorsSet.playTogether(animators)
animatorsSet.interpolator = LinearInterpolator()
animatorsSet.duration = 1000
animatorsSet.start()
}
}
I hope you can help me or recommend me a better approach
I have initialized my List in the function below in MainActivitywith DataPoint(data class in GraphView)
MainActivity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
var graph_view = GraphView(this)
graph_view.setData(generateRandomDataPoints())
}
fun generateRandomDataPoints(): List<GraphView.DataPoint> {
val random = Random()
return (0..20).map {
GraphView.DataPoint(it, random.nextInt(50) + 1)
}
}
}
GraphView
private val dataSet = arrayListOf<DataPoint>()
private var xMin = 0
private var xMax = 0
private var yMin = 0
private var yMax = 0
private val dataPointPaint = Paint().apply {
color = Color.BLACK
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
Log.e("D SIze", dataSet.size.toString())
for(i in 0 until dataSet.size){
val realX = dataSet[i].xVal.toRealX()
val realY = dataSet[i].yVal.toRealY()
Log.e("TAG", realX.toString())
Log.e("TAG", realY.toString())
Log.e("TAG", "NOT BEingf claeed")
canvas.drawCircle(realX, realY, 17f, dataPointPaint)
}
}
fun setData(newDataSet: List<DataPoint>) {
Log.e("TAG", newDataSet.size.toString())
xMin = newDataSet.minByOrNull { it.xVal }?.xVal ?: 0
xMax = newDataSet.maxByOrNull { it.xVal }?.xVal ?: 0
yMin = newDataSet.minByOrNull { it.yVal }?.yVal ?: 0
yMax = newDataSet.maxByOrNull { it.yVal }?.yVal ?: 0
dataSet.clear() // clear if any point are entered
dataSet.addAll(newDataSet) // add all points fro newDataSet
for(i in 0 .. dataSet.size-1){
Log.e("!!!!", dataSet[i].toString() )
}
invalidate()
}
private fun Int.toRealX() = toFloat() / xMax * width
private fun Int.toRealY() = toFloat() / yMax * height
data class DataPoint(
val xVal: Int,
val yVal: Int)
}
All of my logs work as expected and print's what is expected.
But when onDraw() is called from the invalidate() in the setData() function the log at the start returns 0. Which is why the for loop in onDraw() is never called and no points dots are being printed to the canvas?
I do not know why as all my other logs show that the data has been added for example the for loop in setData() prints
DataPoint(xVal=1, yVal=20)
DataPoint(xVal=3, yVal=37)
DataPoint(xVal=4, yVal=39)
....
Why is this and how can I solve it please?
I'm implementing a custom view which draws some kind ProgressBar view, taking two views as parameters (origin and destination). Like this:
This is the complete class:
class BarView #JvmOverloads constructor(context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0) : View(context, attrs, defStyleAttr) {
private var valueAnimator: ObjectAnimator? = null
private lateinit var path: Path
private val pathMeasure = PathMeasure()
private var pauseProgress: Int = dip(40)
var progress = 0f
set(value) {
field = value.coerceIn(0f, pathMeasure.length)
invalidate()
}
private var originPoint: PointF? = null
private var destinationPoint: PointF? = null
private val cornerEffect = CornerPathEffect(dip(10).toFloat())
private val linePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
style = Paint.Style.STROKE
strokeWidth = dip(10f).toFloat()
color = ContextCompat.getColor(context, android.R.color.darker_gray)
pathEffect = cornerEffect
}
override fun draw(canvas: Canvas) {
super.draw(canvas)
if (progress < pathMeasure.length) {
val intervals = floatArrayOf(progress, pathMeasure.length - progress)
val progressEffect = DashPathEffect(intervals, 0f)
linePaint.pathEffect = ComposePathEffect(progressEffect, cornerEffect)
}
canvas.drawPath(path, linePaint)
}
object PROGRESS : Property<BarView, Float>(Float::class.java, "progress") {
override fun set(view: BarView, progress: Float) {
view.progress = progress
}
override fun get(view: BarView) = view.progress
}
private fun startAnimator() {
valueAnimator = ObjectAnimator.ofFloat(this, PROGRESS, 0f, pathMeasure.length).apply {
duration = 500L
interpolator = LinearInterpolator()
}
setPauseListener()
valueAnimator!!.start()
}
fun resume() {
valueAnimator!!.resume()
}
fun reset() {
startAnimator()
}
fun setPoints(originView: View, destinationView: View) {
originPoint = PointF(originView.x + originView.width / 2, 0f)
destinationPoint = PointF(destinationView.x + destinationView.width / 2, 0f)
setPath()
startAnimator()
}
private fun setPath() {
path = Path()
path.moveTo(originPoint!!.x, originPoint!!.y)
path.lineTo(destinationPoint!!.x, destinationPoint!!.y)
pathMeasure.setPath(path, false)
}
private fun setPauseListener() {
valueAnimator!!.addUpdateListener(object : ValueAnimator.AnimatorUpdateListener {
override fun onAnimationUpdate(valueAnimator: ValueAnimator?) {
val progress = valueAnimator!!.getAnimatedValue("progress") as Float
if (progress > pauseProgress) {
valueAnimator.pause()
this#BarView.valueAnimator!!.removeUpdateListener(this)
}
}
})
}
}
What im trying to do is to pause the animation at a specific progress, 40dp in this case:
private fun setPauseListener() {
valueAnimator!!.addUpdateListener(object : ValueAnimator.AnimatorUpdateListener {
override fun onAnimationUpdate(valueAnimator: ValueAnimator?) {
val progress = valueAnimator!!.getAnimatedValue("progress") as Float
if (progress > pauseProgress) {
valueAnimator.pause()
this#BarView.valueAnimator!!.removeUpdateListener(this)
}
}
})
}
But the animations have different speeds since the views have different path lengths, and all of them have to finish in 500ms. They are not pausing at the same distance from the origin:
I tried switching from a LinearInterpolator to a AccelerateInterpolator, to make the start of the animation slower, but i'm still not satisfied with the results.
The next step for me, would be to try to implement a custom TimeInterpolator to make the animation start speed the same no matter how long the path is on each view, but I cannot wrap my head arrow the maths to create the formula needed.
valueAnimator = ObjectAnimator.ofFloat(this, PROGRESS, 0f, pathMeasure.length).apply {
duration = 500L
interpolator = TimeInterpolator { input ->
// formula here
}
}
Any help with that would be well received. Any suggestions about a different approach. What do you think?
1) As I mentioned I would use determinate ProgressBar and regulate bar width by maximum amount of progress, assigned to certain view
2) I would use ValueAnimator.ofFloat with custom interpolator and set progress inside it
3) I would extend my custom interpolator from AccelerateInterpolator to make it look smthng like this:
class CustomInterpolator(val maxPercentage: Float) : AccelerateInterpolator(){
override fun getInterpolation(input: Float): Float {
val calculatedVal = super.getInterpolation(input)
return min(calculatedVal, maxPercentage)
}
}
where maxPercentage is a fraction of view width (from 0 to 1) you bar should occupy
Hope it helps
I've created class that extends PopupView in Kotlin, and trying to animate it's appearing with CircleReveal library. Here is function of my class
fun show(root: View) {
showAtLocation(root, Gravity.CENTER, 0, 0)
val cx = (mainView.left + mainView.right) / 2
val cy = (mainView.top + mainView.bottom) / 2
val dx = Math.max(cx, mainView.width - cx)
val dy = Math.max(cy, mainView.height - cy)
val finalRadius = Math.hypot(dx.toDouble(), dy.toDouble()).toFloat()
with (ViewAnimationUtils.createCircularReveal(mainView, cx, cy, 0f, finalRadius)) {
interpolator = AccelerateDecelerateInterpolator()
duration = 1500
start()
}
}
That code gives me following error
java.lang.IllegalStateException: Cannot start this animator on a detached view!
at android.view.RenderNode.addAnimator(RenderNode.java:817)
at android.view.RenderNodeAnimator.setTarget(RenderNodeAnimator.java:300)
at android.view.RenderNodeAnimator.setTarget(RenderNodeAnimator.java:282)
at android.animation.RevealAnimator.<init>(RevealAnimator.java:37)
at android.view.ViewAnimationUtils.createCircularReveal(ViewAnimationUtils.java:53)
at io.codetail.animation.ViewAnimationUtils.createCircularReveal(ViewAnimationUtils.java:74)
at io.codetail.animation.ViewAnimationUtils.createCircularReveal(ViewAnimationUtils.java:39)
Class initialization
class MemberMenu(ctx: Context, val member: Member): PopupWindow(ctx), View.OnClickListener {
val mainView: View
init {
contentView = LayoutInflater.from(ctx).inflate(R.layout.member_menu_layout, null)
mainView = contentView.findViewById(R.id.member_menu_view)
val size = Helpers.dipToPixels(ctx, 240f)
width = size; height = size
setBackgroundDrawable(ColorDrawable())
isOutsideTouchable = true
isTouchable = true
}
.......
Not sure, if it's correct solution, but I just moved that code to OnAttachStateChangeListener
fun show(root: View) {
showAtLocation(root, Gravity.CENTER, 0, 0)
backgroundView.addOnAttachStateChangeListener(this)
}
override fun onViewAttachedToWindow(v: View?) {
if (v==null) return
with(ViewAnimationUtils.createCircularReveal(v, 500, 500, 0f, 500f)) {
interpolator = AccelerateDecelerateInterpolator()
duration = 2500
start()
}
} override fun onViewDetachedFromWindow(v: View?) {}
Same crash I was getting, and even same library i am using, the problem was the device has its Don't keep activity flag ON, that is why it's crashing.
Solution
Goto-->Settings-->Developer Option-->Don't Keep Activity(Make it Turn OFF)
NOTE: Developer option path may vary with devices
Hope it will help you.