or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

Files

docs

buttons-and-selection.mdfeedback-and-communication.mdindex.mdinput-and-forms.mdlayout-and-containers.mdnavigation-components.mdpickers-and-selection.mdtheming-and-styling.md

input-and-forms.mddocs/

0

# Input and Forms

1

2

Text input components, sliders, and form-related elements for collecting and validating user input with Material Design styling and behavior patterns.

3

4

## Capabilities

5

6

### Text Input Layout

7

8

A layout that wraps EditText components to provide Material Design styling, floating labels, helper text, and error handling.

9

10

```java { .api }

11

public class TextInputLayout extends LinearLayout {

12

public TextInputLayout(Context context);

13

public TextInputLayout(Context context, AttributeSet attrs);

14

15

// Hint management

16

public void setHint(CharSequence hint);

17

public CharSequence getHint();

18

public void setHintEnabled(boolean enabled);

19

public boolean isHintEnabled();

20

public void setHintAnimationEnabled(boolean enabled);

21

public boolean isHintAnimationEnabled();

22

public void setHintTextAppearance(@StyleRes int resId);

23

public void setHintTextColor(ColorStateList hintTextColor);

24

public ColorStateList getHintTextColor();

25

26

// Helper text

27

public void setHelperText(CharSequence helperText);

28

public CharSequence getHelperText();

29

public void setHelperTextEnabled(boolean enabled);

30

public boolean isHelperTextEnabled();

31

public void setHelperTextTextAppearance(@StyleRes int resId);

32

public void setHelperTextColor(ColorStateList helperTextColor);

33

public ColorStateList getHelperTextColor();

34

35

// Error handling

36

public void setError(CharSequence error);

37

public CharSequence getError();

38

public void setErrorEnabled(boolean enabled);

39

public boolean isErrorEnabled();

40

public void setErrorTextAppearance(@StyleRes int resId);

41

public void setErrorTextColor(ColorStateList errorTextColor);

42

public ColorStateList getErrorTextColor();

43

public void setErrorIconDrawable(@DrawableRes int resId);

44

public void setErrorIconDrawable(Drawable errorIcon);

45

public Drawable getErrorIconDrawable();

46

public void setErrorIconTintList(ColorStateList errorIconTintList);

47

public ColorStateList getErrorIconTintList();

48

49

// Character counter

50

public void setCounterEnabled(boolean enabled);

51

public boolean isCounterEnabled();

52

public void setCounterMaxLength(int maxLength);

53

public int getCounterMaxLength();

54

public void setCounterTextAppearance(int counterTextAppearance);

55

public void setCounterTextColor(ColorStateList counterTextColor);

56

public ColorStateList getCounterTextColor();

57

public void setCounterOverflowTextAppearance(int counterOverflowTextAppearance);

58

public void setCounterOverflowTextColor(ColorStateList counterOverflowTextColor);

59

public ColorStateList getCounterOverflowTextColor();

60

61

// Start icon

62

public void setStartIconDrawable(@DrawableRes int resId);

63

public void setStartIconDrawable(Drawable startIcon);

64

public Drawable getStartIconDrawable();

65

public void setStartIconContentDescription(@StringRes int resId);

66

public void setStartIconContentDescription(CharSequence startIconContentDescription);

67

public CharSequence getStartIconContentDescription();

68

public void setStartIconOnClickListener(View.OnClickListener startIconOnClickListener);

69

public void setStartIconOnLongClickListener(View.OnLongClickListener startIconOnLongClickListener);

70

public void setStartIconVisible(boolean visible);

71

public boolean isStartIconVisible();

72

public void setStartIconTintList(ColorStateList startIconTintList);

73

public ColorStateList getStartIconTintList();

74

public void setStartIconTintMode(PorterDuff.Mode startIconTintMode);

75

public PorterDuff.Mode getStartIconTintMode();

76

77

// End icon

78

public void setEndIconMode(int endIconMode);

79

public int getEndIconMode();

80

public void setEndIconDrawable(@DrawableRes int resId);

81

public void setEndIconDrawable(Drawable endIcon);

82

public Drawable getEndIconDrawable();

83

public void setEndIconContentDescription(@StringRes int resId);

84

public void setEndIconContentDescription(CharSequence endIconContentDescription);

85

public CharSequence getEndIconContentDescription();

86

public void setEndIconOnClickListener(View.OnClickListener endIconOnClickListener);

87

public void setEndIconOnLongClickListener(View.OnLongClickListener endIconOnLongClickListener);

88

public void setEndIconVisible(boolean visible);

89

public boolean isEndIconVisible();

90

public void setEndIconTintList(ColorStateList endIconTintList);

91

public ColorStateList getEndIconTintList();

92

public void setEndIconTintMode(PorterDuff.Mode endIconTintMode);

93

public PorterDuff.Mode getEndIconTintMode();

94

public void setEndIconActivated(boolean endIconActivated);

95

public boolean isEndIconActivated();

96

97

// Prefix and suffix text

98

public void setPrefixText(CharSequence prefixText);

99

public CharSequence getPrefixText();

100

public void setPrefixTextAppearance(@StyleRes int prefixTextAppearance);

101

public void setPrefixTextColor(ColorStateList prefixTextColor);

102

public ColorStateList getPrefixTextColor();

103

public TextView getPrefixTextView();

104

public void setSuffixText(CharSequence suffixText);

105

public CharSequence getSuffixText();

106

public void setSuffixTextAppearance(@StyleRes int suffixTextAppearance);

107

public void setSuffixTextColor(ColorStateList suffixTextColor);

108

public ColorStateList getSuffixTextColor();

109

public TextView getSuffixTextView();

110

111

// Placeholder text

112

public void setPlaceholderText(CharSequence placeholderText);

113

public CharSequence getPlaceholderText();

114

public void setPlaceholderTextAppearance(@StyleRes int placeholderTextAppearance);

115

public void setPlaceholderTextColor(ColorStateList placeholderTextColor);

116

public ColorStateList getPlaceholderTextColor();

117

118

// EditText access

119

public EditText getEditText();

120

121

// Shape appearance

122

public void setShapeAppearanceModel(ShapeAppearanceModel shapeAppearanceModel);

123

public ShapeAppearanceModel getShapeAppearanceModel();

124

125

// Listeners

126

public void addOnEndIconChangedListener(OnEndIconChangedListener listener);

127

public void removeOnEndIconChangedListener(OnEndIconChangedListener listener);

128

public void clearOnEndIconChangedListeners();

129

public void addOnEditTextAttachedListener(OnEditTextAttachedListener listener);

130

public void removeOnEditTextAttachedListener(OnEditTextAttachedListener listener);

131

public void clearOnEditTextAttachedListeners();

132

133

public interface OnEndIconChangedListener {

134

void onEndIconChanged(TextInputLayout textInputLayout, int previousIcon);

135

}

136

137

public interface OnEditTextAttachedListener {

138

void onEditTextAttached(TextInputLayout textInputLayout);

139

}

140

}

141

```

142

143

**End Icon Mode Constants:**

144

```java { .api }

145

public static final int END_ICON_NONE = 0;

146

public static final int END_ICON_PASSWORD_TOGGLE = 1;

147

public static final int END_ICON_CLEAR_TEXT = 2;

148

public static final int END_ICON_DROPDOWN_MENU = 3;

149

public static final int END_ICON_CUSTOM = -1;

150

```

151

152

### Text Input EditText

153

154

A specialized EditText designed for use with TextInputLayout.

155

156

```java { .api }

157

public class TextInputEditText extends AppCompatEditText {

158

public TextInputEditText(Context context);

159

public TextInputEditText(Context context, AttributeSet attrs);

160

161

public CharSequence getHint();

162

public TextInputLayout getTextInputLayout();

163

}

164

```

165

166

### Material AutoComplete TextView

167

168

An AutoCompleteTextView with Material Design styling for dropdown selections.

169

170

```java { .api }

171

public class MaterialAutoCompleteTextView extends AppCompatAutoCompleteTextView {

172

public MaterialAutoCompleteTextView(Context context);

173

public MaterialAutoCompleteTextView(Context context, AttributeSet attrs);

174

175

public void setAdapter(ListAdapter adapter);

176

public ListAdapter getAdapter();

177

public void setSimpleItems(@ArrayRes int arrayResId);

178

public void setSimpleItems(String[] items);

179

}

180

```

181

182

### Slider

183

184

A Material Design slider for selecting values from a continuous or discrete range.

185

186

```java { .api }

187

public class Slider extends BaseSlider<Slider, Slider.OnChangeListener, Slider.OnSliderTouchListener> {

188

public Slider(Context context);

189

public Slider(Context context, AttributeSet attrs);

190

191

// Value management

192

public float getValue();

193

public void setValue(float value);

194

public void setValueFrom(float valueFrom);

195

public float getValueFrom();

196

public void setValueTo(float valueTo);

197

public float getValueTo();

198

public void setStepSize(float stepSize);

199

public float getStepSize();

200

201

// Focus management

202

public void setFocusedThumbIndex(int index);

203

public int getFocusedThumbIndex();

204

205

// Listeners

206

public void addOnChangeListener(OnChangeListener listener);

207

public void removeOnChangeListener(OnChangeListener listener);

208

public void clearOnChangeListeners();

209

public void addOnSliderTouchListener(OnSliderTouchListener listener);

210

public void removeOnSliderTouchListener(OnSliderTouchListener listener);

211

public void clearOnSliderTouchListeners();

212

213

// Label formatting

214

public boolean hasLabelFormatter();

215

public void setLabelFormatter(LabelFormatter formatter);

216

217

// Thumb customization

218

public void setCustomThumbDrawable(@DrawableRes int drawableResId);

219

public void setCustomThumbDrawable(Drawable drawable);

220

public void setCustomThumbDrawablesForValues(@DrawableRes int... customThumbDrawableResIds);

221

public void setCustomThumbDrawablesForValues(Drawable... customThumbDrawables);

222

223

// Appearance

224

public void setThumbRadius(@IntRange(from = 0) int radius);

225

public void setThumbRadiusResource(@DimenRes int radius);

226

public int getThumbRadius();

227

public void setHaloRadius(@IntRange(from = 0) int radius);

228

public void setHaloRadiusResource(@DimenRes int radius);

229

public int getHaloRadius();

230

public void setThumbElevation(float elevation);

231

public void setThumbElevationResource(@DimenRes int elevation);

232

public float getThumbElevation();

233

public void setTrackHeight(@IntRange(from = 0) int height);

234

public void setTrackHeightResource(@DimenRes int height);

235

public int getTrackHeight();

236

237

public interface OnChangeListener {

238

void onValueChange(Slider slider, float value, boolean fromUser);

239

}

240

241

public interface OnSliderTouchListener {

242

void onStartTrackingTouch(Slider slider);

243

void onStopTrackingTouch(Slider slider);

244

}

245

246

public interface LabelFormatter {

247

String getFormattedValue(float value);

248

}

249

}

250

```

251

252

### Range Slider

253

254

A slider that allows selection of a range of values.

255

256

```java { .api }

257

public class RangeSlider extends BaseSlider<RangeSlider, RangeSlider.OnChangeListener, RangeSlider.OnSliderTouchListener> {

258

public RangeSlider(Context context);

259

public RangeSlider(Context context, AttributeSet attrs);

260

261

// Value management

262

public List<Float> getValues();

263

public void setValues(Float... values);

264

public void setValues(List<Float> values);

265

public void setMinSeparation(float minSeparation);

266

public float getMinSeparation();

267

public void setMinSeparationValue(float minSeparationValue);

268

public float getMinSeparationValue();

269

270

public interface OnChangeListener {

271

void onValueChange(RangeSlider slider, float value, boolean fromUser);

272

}

273

274

public interface OnSliderTouchListener {

275

void onStartTrackingTouch(RangeSlider slider);

276

void onStopTrackingTouch(RangeSlider slider);

277

}

278

}

279

```

280

281

### Material TextView

282

283

A TextView with Material Design theming support.

284

285

```java { .api }

286

public class MaterialTextView extends AppCompatTextView {

287

public MaterialTextView(Context context);

288

public MaterialTextView(Context context, AttributeSet attrs);

289

290

public void setTextAppearance(@StyleRes int resId);

291

public void setLineHeight(@Px int lineHeight);

292

public int getLineHeight();

293

}

294

```

295

296

## Usage Examples

297

298

### Creating a Text Input with Validation

299

300

```java

301

TextInputLayout textInputLayout = new TextInputLayout(context);

302

textInputLayout.setHint("Email Address");

303

textInputLayout.setHelperText("We'll never share your email");

304

textInputLayout.setEndIconMode(TextInputLayout.END_ICON_CLEAR_TEXT);

305

textInputLayout.setCounterEnabled(true);

306

textInputLayout.setCounterMaxLength(50);

307

308

TextInputEditText editText = new TextInputEditText(textInputLayout.getContext());

309

textInputLayout.addView(editText);

310

311

// Add validation

312

editText.addTextChangedListener(new TextWatcher() {

313

@Override

314

public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

315

316

@Override

317

public void onTextChanged(CharSequence s, int start, int before, int count) {}

318

319

@Override

320

public void afterTextChanged(Editable s) {

321

String email = s.toString();

322

if (!isValidEmail(email)) {

323

textInputLayout.setError("Please enter a valid email address");

324

} else {

325

textInputLayout.setError(null);

326

}

327

}

328

});

329

```

330

331

### Creating a Password Input Field

332

333

```java

334

TextInputLayout passwordInputLayout = new TextInputLayout(context);

335

passwordInputLayout.setHint("Password");

336

passwordInputLayout.setEndIconMode(TextInputLayout.END_ICON_PASSWORD_TOGGLE);

337

passwordInputLayout.setHelperText("Must be at least 8 characters");

338

339

TextInputEditText passwordEditText = new TextInputEditText(passwordInputLayout.getContext());

340

passwordEditText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);

341

passwordInputLayout.addView(passwordEditText);

342

```

343

344

### Creating an AutoComplete Dropdown

345

346

```java

347

MaterialAutoCompleteTextView autoCompleteTextView = new MaterialAutoCompleteTextView(context);

348

String[] countries = {"United States", "Canada", "Mexico", "United Kingdom", "France", "Germany"};

349

ArrayAdapter<String> adapter = new ArrayAdapter<>(context, android.R.layout.simple_dropdown_item_1line, countries);

350

autoCompleteTextView.setAdapter(adapter);

351

352

TextInputLayout dropdownLayout = new TextInputLayout(context);

353

dropdownLayout.setHint("Select Country");

354

dropdownLayout.setEndIconMode(TextInputLayout.END_ICON_DROPDOWN_MENU);

355

dropdownLayout.addView(autoCompleteTextView);

356

```

357

358

### Creating a Value Slider

359

360

```java

361

Slider volumeSlider = new Slider(context);

362

volumeSlider.setValueFrom(0f);

363

volumeSlider.setValueTo(100f);

364

volumeSlider.setValue(50f);

365

volumeSlider.setStepSize(1f);

366

367

volumeSlider.setLabelFormatter(value -> (int) value + "%");

368

369

volumeSlider.addOnChangeListener((slider, value, fromUser) -> {

370

if (fromUser) {

371

setVolume((int) value);

372

}

373

});

374

375

volumeSlider.addOnSliderTouchListener(new Slider.OnSliderTouchListener() {

376

@Override

377

public void onStartTrackingTouch(Slider slider) {

378

// User started dragging

379

}

380

381

@Override

382

public void onStopTrackingTouch(Slider slider) {

383

// User stopped dragging

384

saveVolumePreference((int) slider.getValue());

385

}

386

});

387

```

388

389

### Creating a Range Slider for Price Filter

390

391

```java

392

RangeSlider priceRangeSlider = new RangeSlider(context);

393

priceRangeSlider.setValueFrom(0f);

394

priceRangeSlider.setValueTo(1000f);

395

priceRangeSlider.setValues(100f, 500f);

396

priceRangeSlider.setStepSize(10f);

397

priceRangeSlider.setMinSeparation(50f);

398

399

priceRangeSlider.setLabelFormatter(value -> "$" + (int) value);

400

401

priceRangeSlider.addOnChangeListener((slider, value, fromUser) -> {

402

if (fromUser) {

403

List<Float> values = slider.getValues();

404

float minPrice = values.get(0);

405

float maxPrice = values.get(1);

406

filterProductsByPrice(minPrice, maxPrice);

407

}

408

});

409

```

410

411

### Creating a Form with Multiple Inputs

412

413

```java

414

LinearLayout formLayout = new LinearLayout(context);

415

formLayout.setOrientation(LinearLayout.VERTICAL);

416

417

// Name input

418

TextInputLayout nameInputLayout = new TextInputLayout(context);

419

nameInputLayout.setHint("Full Name");

420

nameInputLayout.setStartIconDrawable(R.drawable.ic_person);

421

TextInputEditText nameEditText = new TextInputEditText(nameInputLayout.getContext());

422

nameInputLayout.addView(nameEditText);

423

424

// Email input

425

TextInputLayout emailInputLayout = new TextInputLayout(context);

426

emailInputLayout.setHint("Email Address");

427

emailInputLayout.setStartIconDrawable(R.drawable.ic_email);

428

emailInputLayout.setEndIconMode(TextInputLayout.END_ICON_CLEAR_TEXT);

429

TextInputEditText emailEditText = new TextInputEditText(emailInputLayout.getContext());

430

emailEditText.setInputType(InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS);

431

emailInputLayout.addView(emailEditText);

432

433

// Phone input

434

TextInputLayout phoneInputLayout = new TextInputLayout(context);

435

phoneInputLayout.setHint("Phone Number");

436

phoneInputLayout.setStartIconDrawable(R.drawable.ic_phone);

437

phoneInputLayout.setPrefixText("+1 ");

438

TextInputEditText phoneEditText = new TextInputEditText(phoneInputLayout.getContext());

439

phoneEditText.setInputType(InputType.TYPE_CLASS_PHONE);

440

phoneInputLayout.addView(phoneEditText);

441

442

formLayout.addView(nameInputLayout);

443

formLayout.addView(emailInputLayout);

444

formLayout.addView(phoneInputLayout);

445

```