VoiceRipple
About
Voice Record Button that has ripple effect with users voice. Calculation of decibels from max amplitude by using the following:
power_db = 20 * log10(amp / amp_ref)
Main method consists the following:
if (THRESHOLD >= 0) {
if (rippleRadius - THRESHOLD >= powerDb + MIN_RADIUS || powerDb + MIN_RADIUS >= rippleRadius + THRESHOLD) {
rippleRadius = powerDb + MIN_RADIUS;
backgroundRadius = (int) (rippleRadius * backgroundRippleRatio);
} else {
// if decreasing velocity reached 0, it should simply match with ripple radius
if (((backgroundRadius - rippleRadius) / rippleDecayRate) == 0) {
backgroundRadius = rippleRadius;
} else {
backgroundRadius = backgroundRadius - ((backgroundRadius - rippleRadius) / rippleDecayRate);
}
}
invalidate();
}
The approximated decibel power of the sound is used to animate the button's ripple effect.
Demo
Implement
repositories {
jcenter()
}
dependencies {
compile "info.kimjihyok:voice-ripple-record-button:${voice-ripple-button-version}"
}
XML Setup
<info.kimjihyok.ripplelibrary.VoiceRippleView
android:id="@+id/voice_ripple_view"
android:layout_width="200dp"
android:layout_height="200dp"
app:rippleColor="@color/colorPrimary"/>
Setter for view and android recorder related setup
voiceRipple = (VoiceRippleView) findViewById(R.id.voice_ripple_view);
// set view related settings for ripple view
voiceRipple.setRippleColor(ContextCompat.getColor(this, R.color.colorPrimary));
voiceRipple.setRippleSampleRate(Rate.LOW);
voiceRipple.setRippleDecayRate(Rate.HIGH);
voiceRipple.setBackgroundRippleRatio(1.4);
// set recorder related settings for ripple view
voiceRipple.setMediaRecorder(new MediaRecorder());
voiceRipple.setOutputFile(audioFile.getAbsolutePath());
voiceRipple.setAudioSource(MediaRecorder.AudioSource.MIC);
voiceRipple.setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP);
voiceRipple.setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB);
Setter for recording status related setup
// set inner icon for record and recording
voiceRipple.setRecordDrawable(ContextCompat.getDrawable(this, R.drawable.record), ContextCompat.getDrawable(this, R.drawable.recording));
voiceRipple.setIconSize(30);
// change recording status when clicked
voiceRipple.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (voiceRipple.isRecording()) {
voiceRipple.stopRecording();
} else {
try {
voiceRipple.startRecording();
} catch (IOException e) {
Log.e(TAG, "startRecording() error: ", e);
}
}
}
});
Stop and Destory
// It is required to stop VoiceRippleView at onStop and to destory at onDestory to prevent memory leak and unexpected
@Override
protected void onStop() {
super.onStop();
voiceRipple.onStop();
}
@Override
protected void onDestroy() {
super.onDestroy();
voiceRipple.onDestroy();
}