Android Studio Examples

100+ tutorials, source code, and examples to help you develop creative and technical skills.

Android Studio - How to create a Progress bar with NEON Effect

colors.xml

/* Code From Learnoset - Learn Coding Online.
    Download Learnoset App from PlayStore to learn coding,
    projects, algorithms, error handling
 */

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <color name="neon_body">#00B8D4</color>
    <color name="neon_glow">#CC00B8D4</color>
</resources>

activity_main.xml

/* Code From Learnoset - Learn Coding Online.
    Download Learnoset App from PlayStore to learn coding,
    projects, algorithms, error handling
 */

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    tools:context=".MainActivity">

    <com.learnoset.neonprogressbar.MaterialNeonProgressBar
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"/>

</RelativeLayout>

AnimatorCreator.java

/* Code From Learnoset - Learn Coding Online.
    Download Learnoset App from PlayStore to learn coding,
    projects, algorithms, error handling
 */

package com.learnoset.neonprogressbar;

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.graphics.Path;
import android.view.animation.Interpolator;
import android.view.animation.LinearInterpolator;
import androidx.core.view.animation.PathInterpolatorCompat;

public class AnimatorCreator {

    private static final int SWEEP_DURATION = 1333;
    private static final int ROTATION_DURATION = 6665;
    private static final float END_ANGLE_MAX = 360;
    private static final float START_ANGLE_MAX = END_ANGLE_MAX - 1;
    private static final int ROTATION_END_ANGLE = 719;

    public AnimatorCreator() {

    }

    public static Animator create(AnimatorTargetInterface targetInterface){

        AnimatorSet animatorSet = new AnimatorSet();

        Animator startAngleAnimator = createStartAngleAnimator(targetInterface);
        Animator endAngleAnimator = createEndAngleAnimator(targetInterface);
        Animator rotationAnimator = createRotationAnimator(targetInterface);

        animatorSet.playTogether(startAngleAnimator, endAngleAnimator, rotationAnimator);

        return animatorSet;
    }

    private static Animator createStartAngleAnimator(AnimatorTargetInterface targetInterface){

        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(targetInterface, targetInterface.START_ANGLE, 0f, START_ANGLE_MAX);
        objectAnimator.setDuration(SWEEP_DURATION);
        objectAnimator.setRepeatCount(ValueAnimator.INFINITE);
        objectAnimator.setRepeatMode(ValueAnimator.RESTART);
        objectAnimator.setInterpolator(createStartInterpolator());

        return objectAnimator;
    }

    private static Animator createEndAngleAnimator(AnimatorTargetInterface targetInterface){

        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(targetInterface, targetInterface.END_ANGLE, 0f, END_ANGLE_MAX);
        objectAnimator.setDuration(SWEEP_DURATION);
        objectAnimator.setRepeatCount(ValueAnimator.INFINITE);
        objectAnimator.setRepeatMode(ValueAnimator.RESTART);
        objectAnimator.setInterpolator(createEndInterpolator());

        return objectAnimator;
    }

    private static Animator createRotationAnimator(AnimatorTargetInterface targetInterface){

        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(targetInterface, targetInterface.ROTATION, 0f, ROTATION_END_ANGLE);
        objectAnimator.setDuration(ROTATION_DURATION);
        objectAnimator.setRepeatCount(ValueAnimator.INFINITE);
        objectAnimator.setRepeatMode(ValueAnimator.RESTART);
        objectAnimator.setInterpolator(new LinearInterpolator());

        return objectAnimator;
    }

    private static Interpolator createStartInterpolator(){

        Path path = new Path();

        path.cubicTo(0.3f, 0f, 0.1f, 0.75f, 0.5f, 0.85f);
        path.lineTo(1f, 1f);
        return PathInterpolatorCompat.create(path);
    }

    private static Interpolator createEndInterpolator(){

        Path path = new Path();

        path.lineTo(0.5f, 0.1f);
        path.cubicTo(0.7f, 0.15f, 0.6f, 0.75f, 1f, 1f);

        return PathInterpolatorCompat.create(path);
    }

    interface AnimatorTargetInterface{

        String START_ANGLE = "startAngle";
        String END_ANGLE = "endAngle";
        String ROTATION = "rotation";

        void setStartAngle(float startAngle);

        void setEndAngle(float endAngle);

        void setRotation(float rotation);
    }
}

MaterialNeonProgressBar.java

/* Code From Learnoset - Learn Coding Online.
    Download Learnoset App from PlayStore to learn coding,
    projects, algorithms, error handling
 */

package com.learnoset.neonprogressbar;

import android.animation.Animator;
import android.content.Context;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.View;

import androidx.annotation.Nullable;
import androidx.core.content.res.ResourcesCompat;

public class MaterialNeonProgressBar extends View implements AnimatorCreator.AnimatorTargetInterface {

    private static final float BODY_STROKE_WIDTH = 12f;
    private static final float GLOWING_MULTIPLIER = 2;
    private static final float BLUE_MULTIPLIER = 1.5f;

    private float mPaddingPx;
    private  Paint mBodyPaint;
    private Paint mGlowingPaint;
    private RectF mBounds;

    private float mStartAngle;
    private float mEndAngle = 270;

    private float mRotation;

    private Animator mAnimator;

    public MaterialNeonProgressBar(Context context) {
        super(context);
        init();
    }

    public MaterialNeonProgressBar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MaterialNeonProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @Override
    public void setStartAngle(float startAngle) {
        mStartAngle = startAngle;
        invalidate();
    }

    @Override
    public void setEndAngle(float endAngle) {
        mEndAngle = endAngle;
        invalidate();
    }

    @Override
    public void setRotation(float rotation) {
        mRotation = rotation;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {


        if(!mAnimator.isRunning()){
            mAnimator.start();
        }

        float start = mRotation + mStartAngle;
        float sweep = mEndAngle - mStartAngle;

        canvas.drawArc(mBounds, start, sweep, false, mGlowingPaint);
        canvas.drawArc(mBounds, start, sweep, false, mBodyPaint);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mBounds.set(mPaddingPx, mPaddingPx, w - mPaddingPx, h - mPaddingPx);
    }

    private static Paint createBodyPaint(Context context, float strokeWidth){

        int bodyColor = ResourcesCompat.getColor(context.getResources(), R.color.neon_body, null);

        Paint bodyPaint = new Paint();

        bodyPaint.setAntiAlias(true);
        bodyPaint.setColor(bodyColor);
        bodyPaint.setStrokeWidth(strokeWidth);
        bodyPaint.setStyle(Paint.Style.STROKE);
        bodyPaint.setStrokeJoin(Paint.Join.ROUND);
        bodyPaint.setStrokeCap(Paint.Cap.ROUND);

        return bodyPaint;
    }

    private static Paint createGlowingPaint(Context context, float strokeWidth, float blurMaskRadius){

        int glowColor = ResourcesCompat.getColor(context.getResources(), R.color.neon_glow, null);

        Paint glowPaint = new Paint();

        glowPaint.setAntiAlias(true);
        glowPaint.setColor(glowColor);
        glowPaint.setMaskFilter(new BlurMaskFilter(blurMaskRadius, BlurMaskFilter.Blur.NORMAL));
        glowPaint.setStrokeWidth(strokeWidth);
        glowPaint.setStyle(Paint.Style.STROKE);
        glowPaint.setStrokeJoin(Paint.Join.ROUND);
        glowPaint.setStrokeCap(Paint.Cap.ROUND);

        return glowPaint;
    }

    private static float convertDpToPx(float valueDp, Context context){

        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();

        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, valueDp, displayMetrics);
    }
    private void init(){

        setLayerType(View.LAYER_TYPE_SOFTWARE, null);

        float bodyStrokeWidthPx = convertDpToPx(BODY_STROKE_WIDTH, getContext());

        float glowStrokeWidth = bodyStrokeWidthPx * GLOWING_MULTIPLIER;
        float blueRadiusPx = bodyStrokeWidthPx * BLUE_MULTIPLIER;

        mPaddingPx = glowStrokeWidth / 2 + blueRadiusPx;

        mBodyPaint = createBodyPaint(getContext(), bodyStrokeWidthPx);
        mGlowingPaint = createGlowingPaint(getContext(), glowStrokeWidth, blueRadiusPx);

        mBounds = new RectF();
        mAnimator = createAnimator();
    }

    private Animator createAnimator(){
        return AnimatorCreator.create(this);
    }
}

MainActivity.java

/* Code From Learnoset - Learn Coding Online.
    Download Learnoset App from PlayStore to learn coding,
    projects, algorithms, error handling
 */

package com.learnoset.neonprogressbar;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Output

Projects with Source Code + Video Tutorials

You can download our Java and Android Studio Projects with Source Code and Video Tutorials.

How-to-create-Modern-Login-and-Register-screen-in-Android-Studio-|-Material-UI-Design-|-Part---06
How to create Modern Login and Register screen in Android Studio | Material UI Design | Part - 06
Settings-and-Profile-page-UI-design-in-Android-Studio-with-Example-and-Source-Code
Settings and Profile page UI design in Android Studio with Example and Source Code
Simple-Calculator-App-for-Android------------------
----------
Simple Calculator App for Android

If you have any Questions or Queries
You can mail us at info.learnoset@gmail.com

Follow us to learn Coding and get in touch with new Technologies.