Android Example Expand the Eddittext row for row like WhatsApp

Hello, after 3 days work on it, it is finished.

The goal was to expand the Eddittextbox automatically like WhatsApp here:
Screenshot_20170910-212445.jpg

And i want to share my Code with you, to save time for other.

in this tutorial I use the following components:
2 ImageViews (for the photo and send button)
1 Edittext (for user input)
1 Panel (in this Panel is the Edtitext, but not the 2 ImageViews)

We need this library:
StringUtils
IME
JavaObject

Open the Manifest Editor and Add following:
B4X:
'contentdetail is the Module how the main module.
SetActivityAttribute(contentdetail, android:windowSoftInputMode, adjustResize|stateHidden)

Here my code:

B4X:
Sub Globals
'libs.
    Dim su As StringUtils
    Dim imeglobal As IME
'components
    Private txb_content As EditText
    Private pnl_ground As Panel
    Private takephoto As ImageView
    Private img_send As ImageView
'Value
    Dim pnltop As Int

End Sub

Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout("frm_contentdetail")
   'Initialize the IME
    imeglobal.Initialize("imeglobal")
    imeglobal.AddHeightChangedEvent
End Sub

'this is the ime_HeighChanged event, this event is calling if you open your keyboad or hide the keyboard
Sub imeglobal_HeightChanged (NewHeight As Int, OldHeight As Int)
    pnltop = NewHeight 'the global value gets the newHeight Value
    pnl_ground.Top = NewHeight - pnl_ground.Height 'here we set the Panel.Top Value
'this value is formed over the NewHeight and the Panel Height value

'Here we set the 2 ImageViews to his right Position like on the Picture
    takephoto.Top = NewHeight - takephoto.Height -15
    img_send.Top = NewHeight - img_send.Height -15
End Sub

'we need this function to count the lines
Sub getLineCount(TargetView As Object) As Int
    Dim source = TargetView As JavaObject
    Return source.RunMethod("getLineCount", Null)
End Sub


'now we need the following event from the Edittext
Sub txb_content_TextChanged (Old As String, New As String)

Dim txtheight As Int  'this value is for optimizing

    If getLineCount(txb_content) = 1 Then
'we set the Panel Height from the textheight +58 for space
        pnl_ground.Height = su.MeasureMultilineTextHeight(txb_content,txb_content.Text ) +58
'and we place the panel over the keyboard
        pnl_ground.Top = pnltop - pnl_ground.Height

'sets the Eddittext height
        txb_content.Height =  su.MeasureMultilineTextHeight(txb_content,txb_content.Text ) +70
        Log("1. Zeile")
    Else If getLineCount(txb_content) = 2 Then

        txtheight = su.MeasureMultilineTextHeight(txb_content,txb_content.Text )
        txb_content.Height = txtheight +50
        pnl_ground.Height = txtheight +50
        pnl_ground.Top = pnltop  - txtheight -35

        Log("2. Zeile")

    Else if getLineCount(txb_content) = 3 Then
        txtheight = su.MeasureMultilineTextHeight(txb_content,txb_content.Text )
        txb_content.Height = txtheight +50
        pnl_ground.Height = txtheight +50
        pnl_ground.Top = pnltop  - txtheight -35
        Log("3. Zeile")

    Else If getLineCount(txb_content) = 4 Then
        txtheight = su.MeasureMultilineTextHeight(txb_content,txb_content.Text )
        txb_content.Height = txtheight +50
        pnl_ground.Height = txtheight +50
        pnl_ground.Top = pnltop  - txtheight -35
        Log("4. Zeile")
    Else If getLineCount(txb_content) = 5 Then
        txtheight = su.MeasureMultilineTextHeight(txb_content,txb_content.Text )
        txb_content.Height = txtheight +50
        pnl_ground.Height = txtheight +50
        pnl_ground.Top = pnltop  - txtheight -35
        Log("5. Zeile")
    Else If getLineCount(txb_content) = 6 Then
        txtheight = su.MeasureMultilineTextHeight(txb_content,txb_content.Text )
        txb_content.Height = txtheight +50
        pnl_ground.Height = txtheight +50
        pnl_ground.Top = pnltop  - txtheight -35
        Log("6. Zeile")
    End If
End Sub

and this is the result.

Screenshot_20170912-155418.jpg

Have fun.

EDIT:
Here is a little video :)
ezgif.com-resize.gif
 

Attachments

  • Screenshot_20170910-212445.jpg
    Screenshot_20170910-212445.jpg
    278.5 KB · Views: 640
  • Screenshot_20170910-212445.jpg
    Screenshot_20170910-212445.jpg
    278.5 KB · Views: 613
Last edited:
Top