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();
}