How to move text upwards on the screen every time a button is pressed

Question

I want to develop a chatting application for android. It will receive messages from the controller on the site. For this i have started designing a GUI. After practicing and

Answer 1

I tried to change the appearance a little bit. I wanted send, receive button and textinput at the bottom and label on top of it. And found that text starts to display from some height above the text input box and buttons. I need it to be displayed right above the buttons and text input box immediately. And in my code, text for both send and receive buttons are getting displayed on left hand side. Please tell me why it is so.
Here is the .kv file
: size_hint_x : None size_hint_y : None pos : 0,0 text_size: self.width, None height: self.texture_size[1] halign: 'left' valign: 'middle'

     <CustomButton@Button>:
          font_size : 25
          size_hint : 0.1,0.1

     <MyWidget>:
          GridLayout:
              #size : root.width, root.height
              #orientation : 'horizontal'
              #pos:100,100
              cols:1
              row:3

              RecycleView:
                  id: rv
                  viewclass: 'ChatBox'

                  RecycleBoxLayout:
                      default_size_hint: 1, None
                      orientation: 'vertical'

              BoxLayout:
                  TextInput:
                      hint_text: 'type here'
                      id : txt
                      multiline : True
                      size_hint : .5,.1
                      #pos : 0,0
                  CustomButton:
                      text: 'Receive'
                      on_press : root.send_txt()
                      #pos : 10,0
                  CustomButton:
                      text: 'Send'
                      on_press : root.send_txt()
                      #pos : 20,0    

Apart from that, when screen gets filled with the text and moved upwards completely, all the text disappears and if we again send or receives new text, it doesn't appear on the screen. Sir please tell me how to solve this issue. Thanking you.

Answer 2

Chat App - Suggestion

Kivy Label » Text alignment and wrapping

• Declare a custom widget with inheritance of Label widget so that you can control the text alignment i.e. left for text sent, and right for text received.

Snippets - kv file

<CustomLabel@Label>:
    size_hint_y: None
    text_size: self.width, None
    height: self.texture_size[1]
    halign: 'left'
    valign: 'middle'

Kivy RecycleView

• Replace Label: with RecycleView:
• Use CustomLabel as the viewclass
• Append text sent or text received to RecycleView's data

Snippets - kv file

RecycleView:
    id: rv
    viewclass: 'CustomLabel'

    RecycleBoxLayout:
        default_size_hint: 1, None
        orientation: 'vertical'

Kivy RecycleView » data

The view is generatad by processing the data, essentially a list of dicts, and uses these dicts to generate instances of the viewclass as required.

data

The data used by the current view adapter. This is a list of dicts whose keys map to the corresponding property names of the viewclass.

data is an AliasProperty that gets and sets the data used to generate the views.

Snippets - Py file

    def display_txt(self):
        self.ids.rv.data.append({'text': self.ids.txt.text, 'halign': 'left'})
        self.ids.txt.text = ''

Example

main.py

from kivy.app import App
from kivy.uix.screenmanager import Screen
from kivy.lang import Builder


class SMS(Screen):
    def send_txt(self):
        self.ids.rv.data.append({'text': self.ids.txt.text, 'halign': 'left'})
        self.ids.txt.text = ''

    def receive_txt(self):
        self.ids.rv.data.append({'text': self.ids.txt.text, 'halign': 'right'})
        self.ids.txt.text = ''


Builder.load_file("main.kv")


class MyApp(App):
    def build(self):
        return SMS()


if __name__ == "__main__":
    MyApp().run()

main.kv

<ChatBox@Label>:
    size_hint_y: None
    text_size: self.width, None
    height: self.texture_size[1]
    halign: 'left'
    valign: 'middle'

<SMS>:
    GridLayout:
        cols : 1

        BoxLayout:
            size_hint: 1, 0.1
            Button:
                text : 'Send'
                on_press : root.send_txt()
            Button:
                text : 'Receive'
                on_press : root.receive_txt()

        TextInput:
            hint_text : 'Write here'
            id : txt
            size_hint : .8 , .1
            pos : 0 ,0

        RecycleView:
            id: rv
            viewclass: 'ChatBox'

            RecycleBoxLayout:
                default_size_hint: 1, None
                orientation: 'vertical'

Output