AvatarView

A circular Image View with a lot of perks. Including progress animation and highlight state with borders and gradient color.

Samples

Supports initials if no image is provided:

Thanks to @anoop44

Supports a badge, for "online/offline" status or other use cases:

Thanks to @p1yu5h

Demo

Watch the video or clone the repo and build the demo app

Gradle setup

Make sure you have the MavenCentral in your list of repositories.

• Kotlin DSL build.gradle.kts

dependencies {
    implementation("xyz.schwaab:avvylib:1.2.0")
}

• Or, Groovy build.gradle

dependencies {
    implementation "xyz.schwaab:avvylib:1.2.0"
}

Usage

Just add this to your XML:

    <xyz.schwaab.avvylib.AvatarView
        android:layout_width="128dp"
        android:layout_height="128dp"
        app:avvy_border_color="@color/grey400"
        app:avvy_border_highlight_color="#ff5900"
        app:avvy_border_highlight_color_end="#bf15bc"
        app:avvy_border_thickness="2dp"
        app:avvy_border_thickness_highlight="3dp"
        app:avvy_distance_to_border="5dp"
        app:avvy_highlighted="true"
        app:avvy_loading_arches="5"
        app:avvy_loading_arches_degree_area="90"/>

Add the name initials as fallback:

        app:avvy_text="Avatar View"                 //will show up as AV
        app:avvy_text_size="42sp"
        app:avvy_text_color="#ccc"

Add the badge if you want:

        app:avvy_show_badge="true"                  //Default = false
        app:avvy_badge_radius="18dp"
        app:avvy_badge_stroke_width="2dp"
        app:avvy_badge_stroke_color="@color/white"
        app:avvy_badge_position="BOTTOM_RIGHT"      //Default value

You can personalize it in Kotlin:

        avatarView.apply {
            isAnimating = false
            borderThickness = 18
            highlightBorderColor = Color.GREEN
            highlightBorderColorEnd = Color.CYAN
            numberOfArches = 0
            totalArchesDegreeArea = 80
            text = "Avatar View"
            showBadge = true
            badgePosition = BadgePosition.TOP_LEFT
        }

Or, in Java:

        avatarView.setAnimating(false);
        avatarView.setBorderThickness(18);
        avatarView.setHighlightBorderColor(Color.GREEN);
        avatarView.setHighlightBorderColorEnd(Color.CYAN);
        avatarView.setNumberOfArches(0);
        avatarView.setTotalArchesDegreeArea(80);

Custom Animations

Create an AvatarViewAnimationOrchestrator, passing at least one AvatarViewAnimator.

The setupAnimators are the first running, and they run in reverse when animation is stopping. They should not repead infinitely, so the progressAnimators can start. The progressAnimators can run indefinitely.

You don't need to use both setup and progress, just one is enough. But, by having the setup having a finite duration, and reversible, it allows for a smoother animation stop.

Example:

    val archesExpansion = object: AvatarViewAnimator{
        override val baseAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
            duration = 500L
            interpolator = DecelerateInterpolator()
        }
    
        override fun onValueUpdate(animatorInterface: AvatarView.AnimatorInterface) {
            val animatedValue = baseAnimator.animatedValue as Float
            animatorInterface.updateAnimationState { currentState ->
                currentState.copy(archesExpansionProgress = animatedValue)
            }
        }
    }
    val bouncingRotation = object : AvatarViewAnimator {
        override val baseAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
            repeatCount = ValueAnimator.INFINITE
            duration = 3000L
            interpolator = BounceInterpolator()
        }
    
        override fun onValueUpdate(animatorInterface: AvatarView.AnimatorInterface) {
            val animatedValue = baseAnimator.animatedValue as Float
            animatorInterface.updateAnimationState { currentState ->
                currentState.copy(rotationProgress = animatedValue)
            }
        }
    }

    avatarView.animationOrchestrator = AvatarViewAnimationOrchestrator(archesExpansion, bouncingRotation) 

Check the sample app for the full source code.

Special Thanks

The roundness of the drawables based on Henning Dodenhof's Circle ImageView

Libraries used in the demo app:

• QuadFlask Color Picker
• Bubbleseekbar

License

Copyright 2020 Vitor Hugo D. Schwaab

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.