How to customize QLineEdit like Telegram InputField?

Rustamo

I'm keen on customizing QLineEdit like Telegram InputField.
Can any one guide me through?

Before focus
After focus

P.S.
I have tried to saw into Telegram src but it's really hard to read (

artwaw

@Rustamo Telegram's UI is, if I recall correctly, written in QML. What is your approach?

Rustamo

@artwaw I'm using Widgets. I'm aware that the key is to override paintEvent on subclassed QLineEdit. But dunno what to do next.

artwaw

@Rustamo You can override but, depending on how much you'd like to mimic to look of the original - which might be hard to do considering the differences between QML and Qt Widgets, you could attempt to insert actions with icons into leading and trailing position if the QLineEdit + apply custom stylesheet.

Rustamo

@artwaw I've added style for border and background color but the main problem is when focused placeholder text should animate to label at the top of QLineEdit

artwaw

@Rustamo If you just want to display placeholder as a label on the top - maybe setTooltip()?

Rustamo

@artwaw Perhaps I made mistake saying that placeholder needs to animate to QLabel. I saw solutions in QML where Text transforms or transitions using propertyanimations. Is it possible to the same sequence using widgets?

artwaw

@Rustamo I don't think it can be done out-of-the-box unless there is something in the Animation Framework (I never used it) https://doc.qt.io/qt-5/animation-overview.html