Question 59555 in Telegram API Question posted in
A comprehensive official documentation can be found here.

Android EditText: Smooth expanding animation when new line is started – Telegram API

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.

Telegram EditText

My EditText

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.

Tags:

2

Answers


  1. 0

    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;

        }

    });
    Login or Signup to reply.
  2. 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 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search