Awesome Open Source
Awesome Open Source

AvatarView

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

Gradle Codacy Badge Kotlin Kotlin GitHub license Say Thanks!

Built with by Vitor Hugo Schwaab and contributors

Samples

Example 1 Example 1
Example 1 Example 1

Supports initials if no image is provided:

Initials

Thanks to @anoop44

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

Badge

Thanks to @p1yu5h

Demo

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

Importing to Gradle

Make sure you have the JCenter repository.

  • 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"
}

Known issue with the 1.1.0 version

There's a known problem with the version 1.1.0 available on JCenter. Its aar file is basically empty, causing the class AvatarView to not be found. This was caused by enabling minify by mistake and was fixed right after. Please use the version 1.1.1 and be happy with that.

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

Example 1

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:

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.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Kotlin (59,757
Android (41,017
Hacktoberfest (33,731
Android Library (3,307
Kotlin Android (3,093
Widget (1,857
Android Ui (904
Kotlin Library (766
Progress Bar (689
Imageview (173
Related Projects