Home > Blockchain >  How to implement a "TextArea" variant of TextEdit
How to implement a "TextArea" variant of TextEdit

Time:11-27

I'm trying to implement the use of material text fields (https://material.io/components/text-fields) in an android application.

I'm currently stuck on trying to implement this for a body text of an email. It needs to be the height and width of it's LinearLayout so that it displays on various screen sizes.

The problem I need to address is that any text typed in is forced onto a line in the vertical-center of the TextEdit rather than at the top. I can't have it's height be a single line to start with either as I want the user to be able to type into it by clicking anywhere in the implied message body area which is larger than a single line.

Firstly, I just can't seem to get the multiLine functionality to work as it's generally described. But then even if I could, I need the size of it to be set according to the space available for it to fill (dependent on screen size) not by some arbitrary number of lines. Perhaps I misunderstand how this would work?

Secondly, the material.io references an inputType called TextArea which is referenced nowhere else, not even google helped to uncovered it. Why so secretive? (https://material.io/components/text-fields#input-types) Is this a possible solution or just a red herring?

Code is supplied below, I've thrown a bunch of googling at this by now so apologies if some things are redundant or it's weirdly formatted, but I'd appreciate any advice to get this to function or help me understand what I'm doing wrong.

General TextEdit version:

<EditText
        android:inputType="textMultiLine"
        android:singleLine="false"
        android:minLines="6"
        android:lines="10"
        android:maxLines="20"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        
        android:hint="Message"/>

materials.io version:

<com.google.android.material.textfield.TextInputLayout
        android:id="@ id/noticeBody"
        style="@style/DetailNoticeBodyTextView"
        android:padding="10dp"
        android:inputType="textMultiLine"
        android:hint="Message"
        android:gravity="top|left"
        android:textCursorDrawable="@null">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </com.google.android.material.textfield.TextInputLayout>

NB: I've tried various mix'n'match versions too, eg. minLines/maxLines in the materials.io version, etc.

CodePudding user response:

Having an evening to mull it over outside of a pressured work schedule, I realised that the issue I was having was discerning a mixture of convention between com.google.android.material.textfield, and a regular TextEdit.

Below is the code for com.google.android.material.textfield that does what I intended it to do.

<com.google.android.material.textfield.TextInputLayout
        android:id="@ id/noticeBody"
        style="@style/DetailNoticeBodyTextView"
        android:padding="10dp"
        android:inputType="textMultiLine"
        android:hint="Message"
        android:textCursorDrawable="@null">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="top|left" />
    </com.google.android.material.textfield.TextInputLayout>

As with the documentation, the textfields hint, inputType, padding, etc, etc, are written in the TextInputLayout section. This is the typical convention on the documentation I linked in the question. In fact it explicitly states that the message hint should be set there to avoid unexpected behaviour.

The gravity setting however has (in my experience) had no effect in that same section and needs to be set within the TextInputEditText section. I feel like this "sometimes-this-and-sometimes-that" is a bad look for Google Materials but I don't really feel like going into it. Nevertheless this was the solution that worked for me.

CodePudding user response:

You could set the inputType to textMultiLine.

Code:

    <com.google.android.material.textfield.TextInputLayout
    android:id="@ id/noticeBody"
    style="@style/DetailNoticeBodyTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:inputType="textMultiLine"
    android:hint="Message"
    android:gravity="top|left"
    android:textCursorDrawable="@null">
    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textMultiLine"
        android:gravity="top|start"
        android:scrollbars="vertical"  >
    </com.google.android.material.textfield.TextInputEditText>
</com.google.android.material.textfield.TextInputLayout>
  • Related