Android EditText: Smooth expanding animation when new line is started

Question

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.

It looks like they have a complete custom content view and they draw everything themselves and they have implemented a custom animation with the Animator APIs. Take a look at [ChatActivity](https://raw.githubusercontent.com/TelegramOrg/Telegram-Android/master/TMessagesProj/src/main/java/org/telegram/ui/ChatActivity.java) and the `checkAnimation` method. — peshkira, Mar 10 '22 at 10:12

Sambhav Khandelwal · Answer 1 · 2022-03-19T14:53:38.757

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;

        }

    });

Adding this doesn't change something for me. I have the EditText wrapped in a LinearLayout and added `android:animateLayoutChanges="true"` to that LinearLayout. It doesn't add the animation. — mathematics-and-caffeine, Mar 10 '22 at 10:49
How do I notice a new line being started? `KEYCODE_ENTER` isn't enough when a line is filled and a new one is started automatically. Also, this is missing the flip side, when a new line is removed and the EditText must shrink. — mathematics-and-caffeine, Mar 19 '22 at 10:37

score 0 · Answer 2 · answered Mar 20 '22 at 05:07

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

Android EditText: Smooth expanding animation when new line is started

2 Answers2

Edit

Edit