Right now I am implementing a feature where I need to animate any ImageView in the app to full screen when it is clicked. And when back it hit, a reverse animation will be applied to restored the ImageView to original position. The ImageView can be anywhere in the view tree. To simplify the description, consider this layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/image1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"/>
<ImageView
android:id="#+id/image2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginTop="100dp"
android:src="#mipmap/ic_launcher"/>
<FrameLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="100dp"
android:layout_gravity="center">
<ImageView
android:id="#+id/image3"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"/>
</FrameLayout>
</LinearLayout>
And the corresponding kotlin file:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
findViewById<View>(R.id.image2).setOnClickListener {
it.animate().scaleX(5.0f).scaleY(5.0f).setDuration(5000L).start()
}
findViewById<View>(R.id.image3).setOnClickListener {
it.animate().scaleX(5.0f).scaleY(5.0f).setDuration(5000L).start()
}
}
}
Here when we click image2 or image3 we want it to scale up. However the result is not what we want. For image2 it will be covered by image3 after scaling up. For image3 it will simply be clipped:
image2 covered by image3
image3 clipped
What's the right way to temporarily bring the ImageView to front?
Try this it would help you
class BottomNavigationExample : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_bottom_navigation_example)
findViewById<View>(R.id.image2).setOnClickListener {
it.animate().scaleX(5.0f).scaleY(5.0f).setDuration(5000L).start()
setElevation(it)
}
findViewById<View>(R.id.image3).setOnClickListener {
it.animate().scaleX(5.0f).scaleY(5.0f).setDuration(5000L).start()
setElevation(it)
}
}
fun setElevation(view: View) {
ViewCompat.setElevation(image1, 0f);
ViewCompat.setElevation(image2, 0f);
ViewCompat.setElevation(image3, 0f);
ViewCompat.setElevation(view, 5f);
}
}
You can use something like this..
class MainActivity : FragmentActivity() {
private var currentAnimator: Animator? = null
private var shortAnimationDuration: Int = 0
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val thumbView: View = findViewById(R.id.thumb_button_1)
val thumbView2: View = findViewById(R.id.thumb_button_2)
thumbView.setOnClickListener { zoomImageFromThumb(thumb_button_1, R.drawable.image1) }
thumbView2.setOnClickListener { zoomImageFromThumb(thumb_button_2, R.drawable.girls2) }
shortAnimationDuration = resources.getInteger(android.R.integer.config_shortAnimTime)
}
private fun zoomImageFromThumb(thumbView: View, imageResId: Int) {
currentAnimator?.cancel()
val expandedImageView: ImageView = findViewById(R.id.expanded_image)
expandedImageView.setImageResource(imageResId)
val startBoundsInt = Rect()
val finalBoundsInt = Rect()
val globalOffset = Point()
thumbView.getGlobalVisibleRect(startBoundsInt)
findViewById<View>(R.id.container)
.getGlobalVisibleRect(finalBoundsInt, globalOffset)
startBoundsInt.offset(-globalOffset.x, -globalOffset.y)
finalBoundsInt.offset(-globalOffset.x, -globalOffset.y)
val startBounds = RectF(startBoundsInt)
val finalBounds = RectF(finalBoundsInt)
val startScale: Float
if ((finalBounds.width() / finalBounds.height() > startBounds.width() / startBounds.height())) {
// Extend start bounds horizontally
startScale = startBounds.height() / finalBounds.height()
val startWidth: Float = startScale * finalBounds.width()
val deltaWidth: Float = (startWidth - startBounds.width()) / 2
startBounds.left -= deltaWidth.toInt()
startBounds.right += deltaWidth.toInt()
} else {
// Extend start bounds vertically
startScale = startBounds.width() / finalBounds.width()
val startHeight: Float = startScale * finalBounds.height()
val deltaHeight: Float = (startHeight - startBounds.height()) / 2f
startBounds.top -= deltaHeight.toInt()
startBounds.bottom += deltaHeight.toInt()
}
thumbView.alpha = 0f
expandedImageView.visibility = View.VISIBLE
expandedImageView.pivotX = 0f
expandedImageView.pivotY = 0f
currentAnimator = AnimatorSet().apply {
play(
ObjectAnimator.ofFloat(
expandedImageView,
View.X,
startBounds.left,
finalBounds.left
)
).apply {
with(
ObjectAnimator.ofFloat(
expandedImageView,
View.Y,
startBounds.top,
finalBounds.top
)
)
with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X, startScale, 1f))
with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_Y, startScale, 1f))
}
duration = shortAnimationDuration.toLong()
interpolator = DecelerateInterpolator()
addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator) {
currentAnimator = null
}
override fun onAnimationCancel(animation: Animator) {
currentAnimator = null
}
})
start()
}
expandedImageView.setOnClickListener {
currentAnimator?.cancel()
currentAnimator = AnimatorSet().apply {
play(ObjectAnimator.ofFloat(expandedImageView, View.X, startBounds.left)).apply {
with(ObjectAnimator.ofFloat(expandedImageView, View.Y, startBounds.top))
with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X, startScale))
with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_Y, startScale))
}
duration = shortAnimationDuration.toLong()
interpolator = DecelerateInterpolator()
addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator) {
thumbView.alpha = 1f
expandedImageView.visibility = View.GONE
currentAnimator = null
}
override fun onAnimationCancel(animation: Animator) {
thumbView.alpha = 1f
expandedImageView.visibility = View.GONE
currentAnimator = null
}
})
start()
}
}
}
}
layout
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageButton
android:id="#+id/thumb_button_1"
android:layout_width="100dp"
android:layout_height="75dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:background="#color/colorWhite"
android:contentDescription="#null"
android:scaleType="centerInside"
android:src="#drawable/image1" />
<ImageButton
android:id="#+id/thumb_button_2"
android:layout_width="100dp"
android:layout_height="75dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:background="#color/colorWhite"
android:contentDescription="#null"
android:scaleType="centerInside"
android:src="#drawable/girls2" />
</LinearLayout>
<ImageView
android:id="#+id/expanded_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#null"
android:visibility="invisible" />
Related
I've created a basic layout in Android in my activity_main.xml for what will eventually be a custom view for a button. It is a relative view with three circles stacked on top of eachother inside it aligned in the centre. The circles change size when the user interacts with them.
I now want to replicate the whole thing purely in Kotlin code, as it will be loaded using data in a database.
I can't figure it out. Heres the manifest...
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/myContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/button3"
android:layout_width="400dp"
android:layout_height="400dp"
android:layout_centerInParent="true"
app:srcCompat="#drawable/circle"
app:tint="#E60505" />
<ImageView
android:id="#+id/button2"
android:layout_width="400dp"
android:layout_height="400dp"
android:layout_centerInParent="true"
app:srcCompat="#drawable/circle"
app:tint="#FFB700" />
<ImageView
android:id="#+id/button1"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentRight="false"
android:layout_centerInParent="true"
app:srcCompat="#drawable/circle" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Then in Kotlin, all I can find about is LayoutParams for width and height, but where do I set all this stuff for the Relative Layout?
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
which I presume I want to do something like:
class MyContainer : RelativeLayout () {
var button1 = MyButtonClass(someArgs)
var button2 = MyButtonClass(someArgs)
var button3 = MyButtonClass(someArgs)
init {
/// can't find out how to do this bit in Kotlin...
///something like....
this.layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT
this.layoutConstraintBottomToBottomOf = PARENT
this.layoutConstraintHorizontalBias = 0.5
///etc...
//then add the circle buttons
this.addView(button3)
this.addView(button2)
this.addView(button1)
}
}
Am I even vagueley on the right track? Any pointers would be really appreciated.
EDIT: Following first answer, I can set layout attributes, but my app is just blank when i try to reproduce my original manifest tree in code. Have I applied this correctly?
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val appContainer = findViewById<ConstraintLayout>(R.id.appContainer)
var buttonContainer = ButtonContainer(this.applicationContext)
appContainer.addView(buttonContainer)
}
}
class ButtonContainer (context: Context) : RelativeLayout(context) {
var button1 = CustomButton(context)
val buttonLayoutParams by lazy { ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.WRAP_CONTENT, ConstraintLayout.LayoutParams.WRAP_CONTENT).apply {
bottomToBottom = ConstraintLayout.LayoutParams.PARENT_ID
startToStart = ConstraintLayout.LayoutParams.PARENT_ID
topToTop = ConstraintLayout.LayoutParams.PARENT_ID
endToEnd = ConstraintLayout.LayoutParams.PARENT_ID
horizontalBias = 0.5F
}
}
override fun onFinishInflate() {
super.onFinishInflate()
this.layoutParams = buttonLayoutParams
this.addView(button1)
}
}
class CustomButton(context: Context) : ImageView(context) {
val layoutParams by lazy { RelativeLayout.LayoutParams(60, 60).apply {
addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE)
}
}
override fun onFinishInflate() {
super.onFinishInflate()
setLayoutParams(layoutParams)
setBackgroundResource(squibcircle)
}
}
You need to cast LayoutParams as ConstraintLayout.LayoutParams to set those properties like below
class ButtonContainer(context: Context) : RelativeLayout(context) {
var button1 = CustomButton(context)
val buttonLayoutParams by lazy { ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.WRAP_CONTENT, ConstraintLayout.LayoutParams.WRAP_CONTENT).apply {
bottomToBottom = ConstraintLayout.LayoutParams.PARENT_ID
startToStart = ConstraintLayout.LayoutParams.PARENT_ID
topToTop = ConstraintLayout.LayoutParams.PARENT_ID
endToEnd = ConstraintLayout.LayoutParams.PARENT_ID
horizontalBias = 0.5F
}
}
override fun onFinishInflate() {
this.layoutParams = buttonLayoutParams
this.addView(button1)
}
}
I am new to Android TV apps development.
My issue is I have one or more of app's screens cut off from the right when open the side menu.
I tried going through Google's Android TV Documentation but couldn't find a clue on it.
Here you can see attached image.
Here is my code for show/hide side menu for my TV app:
private fun showSideMenu() {
val sideMenuWidth = mSideMenuView.width
mSideMenuAnimator = ObjectAnimator.ofFloat(mSideMenuView, "translationX", 0f)
mSideMenuAnimator?.addListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator?) {
mSideMenuAnimator = null
mSideMenuView.visibility = View.VISIBLE
hideMenuText()
mSideMenuView.requestFocus()
mContainer.clearFocus()
}
override fun onAnimationEnd(animation: Animator?) {
}
override fun onAnimationRepeat(animation: Animator?) {
}
override fun onAnimationCancel(animation: Animator?) {
}
})
mSideMenuAnimator?.duration = SIDE_MENU_ANIMATION_DURATION_MILLIS
val containerAnimator = ObjectAnimator.ofFloat(mContainer, "translationX", sideMenuWidth * 1f)
containerAnimator.duration = SIDE_MENU_ANIMATION_DURATION_MILLIS
val animatorSet = AnimatorSet()
animatorSet.play(mSideMenuAnimator).with(containerAnimator)
animatorSet.start()
}
private fun hideSideMenu() {
val sideMenuWidth = mSideMenuView.width
mSideMenuAnimator = ObjectAnimator.ofFloat(mSideMenuView, "translationX", -sideMenuWidth * 1f)
mSideMenuAnimator?.addListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator?) {
mSideMenuView.clearFocus()
mContainer.requestFocus()
}
override fun onAnimationEnd(animation: Animator?) {
mSideMenuAnimator = null
mSideMenuView.visibility = View.INVISIBLE
// Give focus control to current fragment
mCurrentFragment?.onReceiveFocus()
showMenuText()
}
override fun onAnimationRepeat(animation: Animator?) {
}
override fun onAnimationCancel(animation: Animator?) {
}
})
mSideMenuAnimator?.duration = SIDE_MENU_ANIMATION_DURATION_MILLIS
val containerAnimator = ObjectAnimator.ofFloat(mContainer, "translationX", 0f)
containerAnimator.duration = SIDE_MENU_ANIMATION_DURATION_MILLIS
val animatorSet = AnimatorSet()
animatorSet.play(mSideMenuAnimator).with(containerAnimator)
animatorSet.start()
}
Here is my design for the side menu:
<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:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.myapp.widget.SideMenuView
android:id="#+id/view_side_menu"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:translationX="-220dp"
android:visibility="invisible" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/text_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="25dp"
android:layout_marginTop="25dp"
android:drawablePadding="4dp"
android:background="#drawable/background_side_menu_indicator"
android:drawableEnd="#drawable/icon_side_menu"
android:focusable="false"
android:text="MENU"
app:primaryForegroundColor="false"
style="#style/Text.SideMenuIndicator"
tools:ignore="RelativeOverlap" />
I would appreciate any clue about this issue.
I'm trying to add a preview to my seekbar on my exoplayer just like in youtube or plex (see the image below)
I've found this library but it isn't up-to-date yet.
I already have the image per frame but I don't know how to integrate them in my Exoplayer, I'm looking for either a tutorial or explanation where I should begin because I'm kind of lost there.
I've found Timebar.onScrubListener while browsing the exoplayer doc. I'm guessing I'll be using these 3 listeners to fetch the position of the scrub and display the corresponding image.
UPDATE: The library is up-to-date as of May 2020 so you can use it directly.
I'll leave code below for those who don't want to use the library.
After searching and adapting it to my needs I found a way by looking at how previewSeekBar was doing and I ended up using the same thing so here it is:
My sprite is composed of 10 columns and 6 rows, each square represent 1 second
GlideTransformation
private const val MAX_LINES = 6
private const val MAX_COLUMNS = 10
private const val THUMBNAILS_EACH = 1000 // milliseconds
private const val ONE_MINUTE = 60000 // one minute in millisecond
class GlideThumbnailTransformation(position: Long) : BitmapTransformation() {
private val x: Int
private val y: Int
init {
// Remainder of position on one minute because we just need to know which square of the current miniature
val square = position.rem(ONE_MINUTE).toInt() / THUMBNAILS_EACH
y = square / MAX_COLUMNS
x = square % MAX_COLUMNS
}
override fun transform(pool: BitmapPool, toTransform: Bitmap, outWidth: Int, outHeight: Int): Bitmap {
val width = toTransform.width / MAX_COLUMNS
val height = toTransform.height / MAX_LINES
return Bitmap.createBitmap(toTransform, x * width, y * height, width, height)
}
override fun updateDiskCacheKey(messageDigest: MessageDigest) {
val data: ByteArray = ByteBuffer.allocate(8).putInt(x).putInt(y).array()
messageDigest.update(data)
}
override fun hashCode(): Int {
return (x.toString() + y.toString()).hashCode()
}
override fun equals(other: Any?): Boolean {
if (other !is GlideThumbnailTransformation) {
return false
}
return other.x == x && other.y == y
}
}
Activity
val thumbnailUrl = "https://bitdash-a.akamaihd.net/content/MI201109210084_1/thumbnails/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.jpg"
exo_progress.addListener(object : TimeBar.OnScrubListener {
override fun onScrubMove(timeBar: TimeBar, position: Long) {
previewFrameLayout.visibility = View.VISIBLE
val targetX = updatePreviewX(position.toInt(), exoPlayer.duration.toInt())
previewFrameLayout.x = targetX.toFloat()
GlideApp.with(scrubbingPreview)
.load(thumbnailUrl)
.override(Target.SIZE_ORIGINAL,Target.SIZE_ORIGINAL)
.transform(GlideThumbnailTransformation(position))
.diskCacheStrategy(DiskCacheStrategy.RESOURCE)
.into(scrubbingPreview)
}
override fun onScrubStop(timeBar: TimeBar, position: Long, canceled: Boolean) {
previewFrameLayout.visibility = View.INVISIBLE
}
override fun onScrubStart(timeBar: TimeBar, position: Long) {}
})
private fun updatePreviewX(progress: Int, max: Int): Int {
if (max == 0) { return 0 }
val parent = previewFrameLayout.parent as ViewGroup
val layoutParams = previewFrameLayout.layoutParams as MarginLayoutParams
val offset = progress.toFloat() / max
val minimumX: Int = previewFrameLayout.left
val maximumX = (parent.width - parent.paddingRight - layoutParams.rightMargin)
// We remove the padding of the scrubbing, if you have a custom size juste use dimen to calculate this
val previewPaddingRadius: Int = dpToPx(resources.displayMetrics, DefaultTimeBar.DEFAULT_SCRUBBER_DRAGGED_SIZE_DP).div(2)
val previewLeftX = (exo_progress as View).left.toFloat()
val previewRightX = (exo_progress as View).right.toFloat()
val previewSeekBarStartX: Float = previewLeftX + previewPaddingRadius
val previewSeekBarEndX: Float = previewRightX - previewPaddingRadius
val currentX = (previewSeekBarStartX + (previewSeekBarEndX - previewSeekBarStartX) * offset)
val startX: Float = currentX - previewFrameLayout.width / 2f
val endX: Float = startX + previewFrameLayout.width
// Clamp the moves
return if (startX >= minimumX && endX <= maximumX) {
startX.toInt()
} else if (startX < minimumX) {
minimumX
} else {
maximumX - previewFrameLayout.width
}
}
private fun dpToPx(displayMetrics: DisplayMetrics, dps: Int): Int {
return (dps * displayMetrics.density).toInt()
}
XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_gravity="bottom"
android:layoutDirection="ltr"
android:background="#CC000000"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingTop="4dp"
android:orientation="horizontal"
android:id="#+id/controlsLayout"
app:layout_constraintBottom_toBottomOf="parent">
<ImageButton android:id="#id/exo_prev"
style="#style/ExoMediaButton.Previous"/>
<ImageButton android:id="#id/exo_rew"
style="#style/ExoMediaButton.Rewind"/>
<ImageButton android:id="#id/exo_repeat_toggle"
style="#style/ExoMediaButton"/>
<ImageButton android:id="#id/exo_play"
style="#style/ExoMediaButton.Play"/>
<ImageButton android:id="#id/exo_pause"
style="#style/ExoMediaButton.Pause"/>
<ImageButton android:id="#id/exo_ffwd"
style="#style/ExoMediaButton.FastForward"/>
<ImageButton android:id="#id/exo_next"
style="#style/ExoMediaButton.Next"/>
</LinearLayout>
<TextView android:id="#id/exo_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:includeFontPadding="false"
android:textColor="#FFBEBEBE"
app:layout_constraintBottom_toTopOf="#id/controlsLayout"
app:layout_constraintStart_toStartOf="parent"/>
<FrameLayout
android:id="#+id/previewFrameLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:background="#drawable/video_frame"
android:padding="2dp"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="#+id/exo_progress"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.25"
tools:visibility="visible">
<ImageView
android:id="#+id/scrubbingPreview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
</FrameLayout>
<com.google.android.exoplayer2.ui.DefaultTimeBar
android:id="#id/exo_progress"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="26dp"
app:layout_constraintBottom_toBottomOf="#id/exo_position"
app:layout_constraintEnd_toStartOf="#id/exo_duration"
app:layout_constraintStart_toEndOf="#+id/exo_position"
app:layout_constraintTop_toTopOf="#+id/exo_position"/>
<TextView android:id="#id/exo_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:includeFontPadding="false"
android:textColor="#FFBEBEBE"
app:layout_constraintBaseline_toBaselineOf="#id/exo_position"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
drawable/video_frame
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#android:color/white" />
<solid android:color="#android:color/black" />
</shape>
there might be some improvement to make so feel free to comment
Similar to the attachment in this issue, my button's corner shadows look pretty dodgy. But with a custom edge and rounded corner treatment, the button seems to lose elevation and there is no ripple / click effect. Any idea on what I have done wrong?
Material version is 1.1.0-alpha07
class CurvedEdgeTreatment (private val size: Float) : EdgeTreatment(), Cloneable {
public override fun clone(): EdgeTreatment {
return super<EdgeTreatment>.clone()
}
override fun getEdgePath(length: Float, center: Float, interpolation: Float, shapePath: ShapePath) {
shapePath.quadToPoint(center, -size * interpolation, length, 0f)
}
}
class ButtonActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_button)
val shapeAppearanceModel = ShapeAppearanceModel().apply {
setAllCorners(RoundedCornerTreatment(12.dpToPx(resources.displayMetrics).toFloat()))
setAllEdges(CurvedEdgeTreatment(3.dpToPx(resources.displayMetrics).toFloat()))
}
val backgroundDrawable = MaterialShapeDrawable(shapeAppearanceModel).apply {
setTint(ContextCompat.getColor(this#ButtonActivity, R.color.color_secondary))
shadowCompatibilityMode = SHADOW_COMPAT_MODE_ALWAYS
elevation = 12f
setUseTintColorForShadow(true)
paintStyle = Paint.Style.FILL
}
raisedContainedButton.background = backgroundDrawable
}
fun Int.dpToPx(displayMetrics: DisplayMetrics): Int = (this * displayMetrics.density).toInt()
fun Int.pxToDp(displayMetrics: DisplayMetrics): Int = (this / displayMetrics.density).toInt()
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:gravity="center"
android:orientation="vertical">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
android:clipChildren="false"
android:clipToPadding="false">
<com.google.android.material.button.MaterialButton
android:id="#+id/raisedContainedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a button la la la la la la"/>
</FrameLayout>
</LinearLayout>
I want do this but with Collapsing toolbar layout or display the logo and title in toolbar after scroll.
<!-- Toolbars -->
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/background_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/background_1"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"/>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/avatar_image"
android:layout_width="#dimen/circular_image_avatar"
android:layout_height="#dimen/circular_image_avatar"
android:gravity="center"
android:scaleType="centerCrop"
android:src="#drawable/ic_placerholder"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:transitionName="image_toolbar"/>
<TextView
android:id="#+id/profile_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name title"
android:textAlignment="center"
android:layout_marginTop="#dimen/item_padding_top_bottom"
android:gravity="center"
style="#style/titleText_toolbar"
android:layout_below="#+id/avatar_image"
android:transitionName="title_toolbar"/>
<TextView
android:id="#+id/profile_subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Subtitle"
android:textAlignment="center"
android:gravity="center"
style="#style/captionText_toolbar"
android:layout_below="#+id/profile_title" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin">
<!-- avatar image and title, subtitle -->
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Please help me
I have preperead two amaizing avatar collapsing demo samples with approach that doesn’t use a custom CoordinatorLayoutBehavior!
To view my samples native code: "Collapsing Avatar Toolbar Sample"
To read my "Animation Collapsing Toolbar Android" post on Medium.
demo 1 demo 2
Instead of use use a custom CoordinatorLayoutBehavior i use an OnOffsetChangedListener which comes from AppBarLayout.
private lateinit var appBarLayout: AppBarLayout
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_demo_1)
...
appBarLayout = findViewById(R.id.app_bar_layout)
/**/
appBarLayout.addOnOffsetChangedListener(
AppBarLayout.OnOffsetChangedListener { appBarLayout, i ->
...
/**/
updateViews(Math.abs(i / appBarLayout.totalScrollRange.toFloat()))
})
}
Demo 1
in updateViews method avatar changes the size and changes avatar’s X, Y position translation in first demo.
private fun updateViews(offset: Float) {
...
/* Collapse avatar img*/
ivUserAvatar.apply {
when {
offset > avatarAnimateStartPointY -> {
val avatarCollapseAnimateOffset = (offset - avatarAnimateStartPointY) * avatarCollapseAnimationChangeWeight
val avatarSize = EXPAND_AVATAR_SIZE - (EXPAND_AVATAR_SIZE - COLLAPSE_IMAGE_SIZE) * avatarCollapseAnimateOffset
this.layoutParams.also {
it.height = Math.round(avatarSize)
it.width = Math.round(avatarSize)
}
invisibleTextViewWorkAround.setTextSize(TypedValue.COMPLEX_UNIT_PX, offset)
this.translationX = ((appBarLayout.width - horizontalToolbarAvatarMargin - avatarSize) / 2) * avatarCollapseAnimateOffset
this.translationY = ((toolbar.height - verticalToolbarAvatarMargin - avatarSize ) / 2) * avatarCollapseAnimateOffset
}
else -> this.layoutParams.also {
if (it.height != EXPAND_AVATAR_SIZE.toInt()) {
it.height = EXPAND_AVATAR_SIZE.toInt()
it.width = EXPAND_AVATAR_SIZE.toInt()
this.layoutParams = it
}
translationX = 0f
}
}
}
}
to find avatarAnimateStartPointY and avatarCollapseAnimationChangeWeight (for convert general offset to avatar animate offset):
private var avatarAnimateStartPointY: Float = 0F
private var avatarCollapseAnimationChangeWeight: Float = 0F
private var isCalculated = false
private var verticalToolbarAvatarMargin =0F
...
if (isCalculated.not()) {
avatarAnimateStartPointY =
Math.abs((appBarLayout.height - (EXPAND_AVATAR_SIZE + horizontalToolbarAvatarMargin)) / appBarLayout.totalScrollRange)
avatarCollapseAnimationChangeWeight = 1 / (1 - avatarAnimateStartPointY)
verticalToolbarAvatarMargin = (toolbar.height - COLLAPSE_IMAGE_SIZE) * 2
isCalculated = true
}
Demo 2
avatar change his size and than animate move to right at one moment with top toolbar text became to show and moving to left.
You need to track states: TO_EXPANDED_STATE changing, TO_COLLAPSED_STATE changing, WAIT_FOR_SWITCH.
/*Collapsed/expended sizes for views*/
val result: Pair<Int, Int> = when {
percentOffset < ABROAD -> {
Pair(TO_EXPANDED_STATE, cashCollapseState?.second ?: WAIT_FOR_SWITCH)
}
else -> {
Pair(TO_COLLAPSED_STATE, cashCollapseState?.second ?: WAIT_FOR_SWITCH)
}
}
Create animation for avatar on state switch change:
result.apply {
var translationY = 0f
var headContainerHeight = 0f
val translationX: Float
var currentImageSize = 0
when {
cashCollapseState != null && cashCollapseState != this -> {
when (first) {
TO_EXPANDED_STATE -> {
translationY = toolbar.height.toFloat()
headContainerHeight = appBarLayout.totalScrollRange.toFloat()
currentImageSize = EXPAND_AVATAR_SIZE.toInt()
/**/
titleToolbarText.visibility = View.VISIBLE
titleToolbarTextSingle.visibility = View.INVISIBLE
background.setBackgroundColor(ContextCompat.getColor(this#Demo2Activity, R.color.color_transparent))
/**/
ivAvatar.translationX = 0f
}
TO_COLLAPSED_STATE -> {
background.setBackgroundColor(ContextCompat.getColor(this#Demo2Activity, R.color.colorPrimary))
currentImageSize = COLLAPSE_IMAGE_SIZE.toInt()
translationY = appBarLayout.totalScrollRange.toFloat() - (toolbar.height - COLLAPSE_IMAGE_SIZE) / 2
headContainerHeight = toolbar.height.toFloat()
translationX = appBarLayout.width / 2f - COLLAPSE_IMAGE_SIZE / 2 - margin * 2
/**/
ValueAnimator.ofFloat(ivAvatar.translationX, translationX).apply {
addUpdateListener {
if (cashCollapseState!!.first == TO_COLLAPSED_STATE) {
ivAvatar.translationX = it.animatedValue as Float
}
}
interpolator = AnticipateOvershootInterpolator()
startDelay = 69
duration = 350
start()
}
...
}
}
ivAvatar.apply {
layoutParams.height = currentImageSize
layoutParams.width = currentImageSize
}
collapsingAvatarContainer.apply {
layoutParams.height = headContainerHeight.toInt()
this.translationY = translationY
requestLayout()
}
/**/
cashCollapseState = Pair(first, SWITCHED)
}
To view my samples native code: "Collapsing Avatar Toolbar Sample"
I think these type of animations can be achieved easily using MotionLayout. I have implemented sample collapsing layout using MotionLayout here. You can modify it for your use case. Simple change the start and end constraints.