A circular Image View with a lot of perks. Including progress animation and highlight state with borders and gradient color.
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea Added: Bintray & JCenter Sep 21, 2018
app Implement CI (#4) Oct 26, 2018
avvylib Implement CI (#4) Oct 26, 2018
gradle/wrapper Initial Commit Sep 21, 2018
pics Add GIF samples Oct 18, 2018
.gitignore Initial Commit Sep 21, 2018
.travis.yml Implement CI (#4) Oct 26, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Sep 22, 2018
LICENSE Initial commit Sep 21, 2018
LICENSE.txt Initial Commit Sep 21, 2018
README.md Fix BubbleSeekBar link in README Nov 19, 2018
build.gradle Implement CI (#4) Oct 26, 2018
gradle.properties Initial Commit Sep 21, 2018
gradlew Initial Commit Sep 21, 2018
gradlew.bat Initial Commit Sep 21, 2018
settings.gradle Initial Commit Sep 21, 2018

README.md

AvatarView

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

Build Status Gradle Codacy Badge Kotlin GitHub license

Samples

Example 1 Example 1
Example 1 Example 1

Demo

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

Importing to Gradle

Add this to your module's build.gradle file

repositories {
    maven { url "https://dl.bintray.com/vitorhugods/AvatarView" }
}

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

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"/>

You can personalize it in Kotlin:

        avatarView.apply {
            isAnimating = false
            borderThickness = 18 //Currently px
            highlightBorderColor = Color.GREEN
            highlightBorderColorEnd = Color.CYAN
            numberOfArches = 0
            totalArchesDegreeArea = 80
        }

Or, in Java:

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

Special Thanks

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

Libraries used in the demo app:

License

Copyright 2018 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.