0
336
ViewsAndroid EditText: Smooth expanding animation when new line is started
I have noticed that Telegram has a smooth animation in their chat EditText when a new line is inserted / started.
Below I have two GIFs. The first is Telegram, the second is my app.
How can you achieve such an animation effect?
I tried to google it, but I didn't find anything. I know Telegram is open source, I tried to find out from their GitHub, but I couldn't find what gives the EditText this smooth animation.
2 answers
Answer question0
It is very easy. I too added it in my chat app and it works like a charm. In your root layout, add this line:
android:animateLayoutChanges="true"
This will animate all the changes happening in the layout.
Edit
If that does not help, you can do this.
userIdInput.setOnKeyListener(new View.OnKeyListener() {
public boolean onKey(View v, int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_ENTER) {
ValueAnimator anim = ValueAnimator.ofInt(edMESSAGE.getHeight() - 40, edMESSAGE.getHeight() + 40)
.setDuration(500);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
edMESSAGE.getLayoutParams().height = (int)animation.getAnimatedValue();
edMESSAGE.requestLayout();
}
});
anim.start();
}
return false;
}
});
You can call this method in onKeyListener and when the new line key is pressed, this code can be called.
Edit
Sometimes, while entering the text, it goes to new line. For animation this, we can do this:
chatInputET.addTextChangedListener(new TextWatcher() {
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
String string = s.toString();
if (string.length() > 0 && string.charAt(string.length() - 1) == '\n') {
ValueAnimator anim = ValueAnimator.ofInt(edMESSAGE.getHeight() - 40, edMESSAGE.getHeight() + 40)
.setDuration(500);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
edMESSAGE.getLayoutParams().height = (int)animation.getAnimatedValue();
edMESSAGE.requestLayout();
}
});
anim.start();
}
}
});
And for the backspace key, you can do this:
inputMessage.setOnKeyListener(new View.OnKeyListener() {
public boolean onKey(View v, int keyCode, KeyEvent event) {
String string = inputMessage.getText().toString();
if ((keyCode == KeyEvent.KEYCODE_DEL && (string.length() > 0 && string.charAt(string.length() - 1)) {
ValueAnimator anim = ValueAnimator.ofInt(edMESSAGE.getHeight() + 40, edMESSAGE.getHeight() - 40)
.setDuration(500);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
edMESSAGE.getLayoutParams().height = (int)animation.getAnimatedValue();
edMESSAGE.requestLayout();
}
});
anim.start();
}
return false;
}
});
0
If the above answer does not work, you can use this:
binding.message.addTextChangedListener(new TextWatcher() {
int linesCount = 0;
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if (s.toString().length() == 0){
binding.message.getLayoutParams().height = defEditTextHeight;
linesCount = binding.message.getLineCount();
return;
}
if (linesCount == 0){
linesCount = binding.message.getLineCount();
binding.message.getLayoutParams().height = defEditTextHeight;
return;
}
if (linesCount < binding.message.getLineCount()) {
ValueAnimator anim = ValueAnimator.ofInt(binding.message.getHeight(), binding.message.getHeight() + 60)
.setDuration(250);
anim.addUpdateListener(animation -> {
binding.message.getLayoutParams().height = (int) animation.getAnimatedValue();
binding.message.requestLayout();
});
anim.start();
}else if( linesCount > binding.message.getLineCount()){
ValueAnimator anim = ValueAnimator.ofInt(binding.message.getHeight(), binding.message.getHeight() - 60)
.setDuration(250);
anim.addUpdateListener(animation -> {
binding.message.getLayoutParams().height = (int) animation.getAnimatedValue();
binding.message.requestLayout();
});
anim.start();
}
linesCount = binding.message.getLineCount();
}
@Override
public void afterTextChanged(Editable s) {
}
});
Where defEditTextHeight is the default height of the edit text fetched like this:
defEditTextHeight = binding.message.getHeight();
Hope It helps 🙂