Components

Textfield

Used to enter spesific text input form

Usage

Textfields allow user input. The border should light up simply and clearly indicating which field the user is currently editing.

Basic

Here’s the default usage of Textfield with placeholder and label attribute set.

Xml Code

<com.telkom.legion.component.textfield.LgnSingleField
    android:id="@+id/etEmail"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    app:placeholderText="Email atau Username" />

Add TextChange Listener

with(binding) {
    etEmail.doOnTextChanged { text, start, before, count ->
        //Do your action here
    }
}

Icon

Xml Code

<com.telkom.legion.component.textfield.LgnSingleField
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Sample End Icon"
    app:endIconDrawable="@drawable/ic_clock"
    app:isOptional="true"
    app:placeholderText="Email atau Username" />

Prefix & Suffix

Xml Code

<com.telkom.legion.component.textfield.LgnSingleField
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Biaya"
    app:helperText="Masukan Email dan Username anda!"
    app:placeholderText="Email atau Username"
    app:prefixText="Rp" />

Disabled

Xml Code

<com.telkom.legion.component.textfield.LgnSingleField
    android:id="@+id/etEmail"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    android:enable="false"
    app:placeholderText="Email atau Username" />

Error

Xml Code

<com.telkom.legion.component.textfield.LgnSingleField
    android:id="@+id/etEmail"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    app:placeholderText="Email atau Username" />

Kotlin Code

...
with(binding) {
    etEmail.error = "Email sudah digunakan!"
}
...

Success

Xml Code

<com.telkom.legion.component.textfield.LgnSingleField
    android:id="@+id/etEmail"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    app:placeholderText="Email atau Username" />

Kotlin Code

...
with(binding) {
    etEmail.succcess = "Email bisa digunakan!"
}
...

Password Field

Here’s the password usage of Textfield with placeholder and label attribute set.

Static in xml

<com.telkom.legion.component.textfield.LgnPasswordField
    android:id="@+id/etPassword"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Kata Sandi"
    app:placeholderText="Email atau Username" />

Dynamic using Kotlin*

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnPasswordField(requiredContext()).apply {
            //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Date Field

Here’s the date picker usage of Textfield with placeholder and label attribute set.

Static in xml

<com.telkom.legion.component.textfield.LgnCalendarField
    android:id="@+id/etCalendar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Tanggal Lahir"
    app:dateFormat="FULL_DATE"
    app:helperText="Pilih tanggal lahir anda!"
    app:placeholderText="Tanggal Lahir" />

Dynamic using Kotlin*

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnCalendarField(requiredContext()).apply {
            //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Time Field

Here’s the time picker usage of Textfield with placeholder and label attribute set.

Static in xml

<com.telkom.legion.component.textfield.LgnTimeField
    android:id="@+id/etTime"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Waktu"
    app:placeholderText="Waktu Budidaya" />

Dynamic using Kotlin*

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnTimeField(requiredContext()).apply {
            //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Here’s the dropdown usage of Textfield with placeholder and label attribute set.

Static in xml

<com.telkom.legion.component.textfield.LgnDropdownField
    android:id="@+id/etDropDown"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Kategori"
    app:helperText="Kategori Panen!"
    app:isOptional="true"
    app:placeholderText="Masukan Kategori Panen" />

Dynamic using Kotlin*

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnDropdownField(requiredContext()).apply {
            //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Unit Field

Here’s the set of number field and dropdown field.

Static in xml

<com.telkom.legion.component.textfield.LgnSingleUnitField
    android:id="@+id/etUnit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Luas Area"
    android:inputType="number"
    app:placeholderText="Masukkan luas area" />

Dynamic using Kotlin*

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnSingleUnitField(requiredContext()).apply {
            //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Properties

Component Name	Id	Description
TextView	tvHint	To display label on text area
TextInputLayout	etBase	To display text field on text area
TextView	tvHelper	To display helper text on text area
TextView	tvError	To display error text on text area

Attributes

Attribute Name	Xml Attrs	Related method(s)	Description
Text	`android:text`	`text`	To set Text value directly via xml
Hint	`android:hint`	`text`	To set Hint or Label value directly via xml
Enable Status	`android:enabled`	`isEnable`	To set enable or disable text area directly via xml
Required Status	`app:isRequired`	`isRequired`	To set required status on text area directly via xml
Optional Status	`app:isOptional`	`isOptional`	To set optional status on text area directly via xml
Placeholder text	`app:placeholderText`	`placeHolder`	To set placeholder text directly via xml
Helper text	`app:helperText`	`helper`	To set helper text directly via xml
Suffix Text ¹	`app:suffixText`	`suffixText`	To set suffix text on text field directly via xml
Prefix Text ¹	`app:prefixText`	`prefixText`	To set prefix text on text field directly via xml
Input Type ¹	`android:inputType`	`inputType`	To set input type on text field directly via xml
Start Icon Drawable ¹	`app:startIconDrawable`	`startIconDrawable`	To set icon on front text field directly via xml
End Icon Drawable ¹	`app:endIconDrawable`	`endIconDrawable`	To set icon on behind text field directly via xml
Prefix End Icon Drawable ¹	`app:prefixEndIconDrawable`	`prefixEndIconDrawable`	To set icon on behind text prefix on text field directly via xml
Prefix Start Icon Drawable ¹	`app:prefixStartIconDrawable`	`prefixStartIconDrawable`	To set icon on front text prefix on text field directly via xml
Suffix End Icon Drawable ¹	`app:suffixEndIconDrawable`	`suffixEndIconDrawable`	To set icon on behind text suffix on text field directly via xml
Suffix Start Icon Drawable ¹	`app:suffixStartIconDrawable`	`suffixStartIconDrawable`	To set icon on front text suffix on text field directly via xml
Max Lines ¹	`android:maxLines`	`maxLines`	To set maximum lines on text field directly via xml
Max Length ¹	`android:maxLength`	`maxLength`	To set max length on text field directly via xml
Ellipsize Placement ¹	`android:ellipsize`	`ellipsize`	To set where Ellipsize on text field directly via xml
Locked Field ¹	`N/A`	`isLocked`	To set locked field on LgnSingleField
Date Format ²	`app:dateFormat`	`dateFormat`	To set date format text directly via xml
Time Format ³	`app:timeFormat`	`timeFormat`	To set time format text directly via xml
Override Dropdown Behaviour ⁴ ⁵	`app:overrideDropdown`	`overrideDropdown`	To override default behaviour of dropdown
Get Edit Text Instance	`N/A`	`editText`	To get edit text instance from component
Add Values ⁴ ⁵	`N/A`	`addAll(List<String>)`	To set list of string to dropdown on component
Add Click Listener ⁴ ⁵	`N/A`	`setOnClickListener`	To set click listener on dropdown if you want override default behaviour
Add Dropdown Listener ⁴	`N/A`	`setListener`	To set listener on dropdown when value changed
Add Unit Listener ⁵	`N/A`	`setOnUnitListener`	To set listener on dropdown on unit field when value changed
Get Selected Unit Value ⁵	`N/A`	`unit`	To get selected unit on unit field
Get Edit Text on Dropdown Field Instance ⁵	`N/A`	`dropDown`	To get edittext on dropdown field instance on unit field

¹) : Attribute only available on LgnSingleField Component

²) : Attribute only available on LgnCalendarField Component

³) : Attribute only available on LgnTimeField Component

⁴) : Attribute only available on LgnDropdownField Component

⁵) : Attribute only available on LgnSingleUnitField Component

Do you have feedback?

Please let us know to make it better

Send Feedback

Components

Textfield

Used to enter spesific text input form

Usage

Basic

Xml Code

Add TextChange Listener

Icon

Xml Code

Prefix & Suffix

Xml Code

Disabled

Xml Code

Error

Xml Code

Kotlin Code

Success

Xml Code

Kotlin Code

Password Field

Static in xml

Dynamic using Kotlin*

Date Field

Static in xml

Dynamic using Kotlin*

Time Field

Static in xml

Dynamic using Kotlin*

Dropdown Field

Static in xml

Dynamic using Kotlin*

Unit Field

Static in xml

Dynamic using Kotlin*

Properties

Attributes

Do you have feedback?