Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Implement Google-Play-Music like animation (3 bar spectrum beside playlist item)

I want to implement something like this. So that I can have control over its color, number of bars, speed, etc.

Below is the animation that is shown next to the item that is currently playing in the Google-Play-Music app.

I will play this in a similar manner: next to the currently playing song in a music app.

enter image description here

like image 622
Ashkan Sarlak Avatar asked Sep 14 '15 12:09

Ashkan Sarlak


1 Answers

There is a library called Mini Equalizer Library for Android which provides this functionality.

1

You need to add the view to your layout:

<es.claucookie.miniequalizerlibrary.EqualizerView
    xmlns:custom="http://schemas.android.com/apk/res-auto"
        android:id="@+id/equalizer_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        custom:foregroundColor="@color/link_text_material_light"
        custom:animDuration="3500"/>

In order to start the animation, use this code:

EqualizerView equalizer = (EqualizerView) findViewById(R.id.equalizer_view);
equalizer.animateBars(); // Whenever you want to tart the animation
equalizer.stopBars(); // When you want equalizer stops animating

Also, there is another library called AndroidVuMeter which seems to have more options.

2

Just add the view to your layout.

<io.gresse.hugo.vumeterlibrary.VuMeterView
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingBottom="40dp"
    android:id="@+id/vumeter"
    vumeter:stopSize="5dp"
    vumeter:speed="10"
    vumeter:blockNumber="5"
    vumeter:blockSpacing="20dp"
    vumeter:backgroundColor="#33b5e5"
    vumeter:startOff="false"/>
like image 164
Yoav Sternberg Avatar answered Oct 23 '22 05:10

Yoav Sternberg