Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. General talk
  3. Qt 6
  4. How to customize QLineEdit like Telegram InputField?
Forum Updated to NodeBB v4.3 + New Features

How to customize QLineEdit like Telegram InputField?

Scheduled Pinned Locked Moved Unsolved Qt 6
11 Posts 3 Posters 1.0k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • RustamoR Offline
    RustamoR Offline
    Rustamo
    wrote on last edited by Rustamo
    #1

    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 (

    artwawA 1 Reply Last reply
    0
    • RustamoR 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 (

      artwawA Offline
      artwawA Offline
      artwaw
      wrote on last edited by
      #2

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

      For more information please re-read.

      Kind Regards,
      Artur

      1 Reply Last reply
      0
      • RustamoR Offline
        RustamoR Offline
        Rustamo
        wrote on last edited by Rustamo
        #3

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

        artwawA 1 Reply Last reply
        0
        • RustamoR 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.

          artwawA Offline
          artwawA Offline
          artwaw
          wrote on last edited by
          #4

          @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.

          For more information please re-read.

          Kind Regards,
          Artur

          1 Reply Last reply
          0
          • RustamoR Offline
            RustamoR Offline
            Rustamo
            wrote on last edited by Rustamo
            #5

            @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

            artwawA 1 Reply Last reply
            0
            • RustamoR 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

              artwawA Offline
              artwawA Offline
              artwaw
              wrote on last edited by
              #6

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

              For more information please re-read.

              Kind Regards,
              Artur

              1 Reply Last reply
              0
              • RustamoR Offline
                RustamoR Offline
                Rustamo
                wrote on last edited by
                #7

                @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?

                artwawA 1 Reply Last reply
                0
                • RustamoR 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?

                  artwawA Offline
                  artwawA Offline
                  artwaw
                  wrote on last edited by
                  #8

                  @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

                  For more information please re-read.

                  Kind Regards,
                  Artur

                  1 Reply Last reply
                  0
                  • RustamoR Offline
                    RustamoR Offline
                    Rustamo
                    wrote on last edited by
                    #9

                    @artwaw Actually, Telegram is written in pure QWidgets

                    artwawA 1 Reply Last reply
                    0
                    • A Offline
                      A Offline
                      arun-holoplot
                      wrote on last edited by
                      #10

                      @Rustamo

                      here is a nice project which has a lot of customized widgets.

                      https://github.com/Wanderson-Magalhaes/PyBlackBox_Qt_Widgets_PySide6_Or_PyQt6_v1.0.0

                      hope it helps to get some idea about styling QLineEdit.

                      more tutorials can be found here -> https://www.youtube.com/c/WandersonIsMe/featured

                      1 Reply Last reply
                      0
                      • RustamoR Rustamo

                        @artwaw Actually, Telegram is written in pure QWidgets

                        artwawA Offline
                        artwawA Offline
                        artwaw
                        wrote on last edited by
                        #11

                        @Rustamo said in How to customize QLineEdit like Telegram InputField?:

                        Actually, Telegram is written in pure QWidgets

                        Ok, I might be wrong.
                        On macOS, when you inspect the bundle, it appears to be Swift anyway.

                        For more information please re-read.

                        Kind Regards,
                        Artur

                        1 Reply Last reply
                        0

                        • Login

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved