class: center, middle, inverse

# User Form

.footnote[Mateu Yábar]

---
# Objectiu final

.fullscreen70[![](exercicis/userform/loginform.gif)]

---
# Text inputs
- L'ordre del xml defineix l'ordre d'escriptura (tabs)
- Podem definir tipus

```xml
android:inputType="textPassword"
```

---
# Layouts
- FrameLayout
- LinearLayout

---
# Scroll

```xml
<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    
	<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    </LinearLayout>
</ScrollView>
```

---
# Material design
Usarem l'ultima versió beta de material.

```gradle

implementation 'com.google.android.material:material:1.1.0-beta02'
```

- Recorda modificar el tema de l'aplicació

---
# Material design - colors

- https://material.io/resources/color/

```xml
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryVariant">@color/colorPrimaryVariant</item>
<item name="colorOnPrimary">@color/colorOnPrimary</item>
<item name="colorSecondary">@color/colorSecondary</item>
<item name="colorSecondaryVariant">@color/colorSecondaryVariant</item>
<item name="colorOnSecondary">@color/colorOnSecondary</item>
```

---
# Material Text Input
- https://material.io/develop/android/components/text-input-layout/
- Mostra hint
- Pot mostrar errors
- Diferents estils disponibles

---
# Material Text Input

```xml
<com.google.android.material.textfield.TextInputLayout
	android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/hint"
    >
    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
    	android:layout_height="wrap_content"
    	android:inputType="text"
    />
</com.google.android.material.textfield.TextInputLayout>
```

---
# Material Text Input
## Error message

```
textInputLayout.setError(R.string.error_message);
```

---
# Sroll a una view

```java
private void scrollTo(TextInputLayout targetView) {
    targetView.getParent().requestChildFocus(targetView,targetView);
}
```

---
# Custom pickers
Edit Text no seleccionable

```xml
android:focusable="false"
android:focusableInTouchMode="false"
```

---
# Material Date Picker

```java
MaterialDatePicker.Builder<Long> builder = MaterialDatePicker.Builder.datePicker();
builder.setTitleText(R.string.title);
MaterialDatePicker<Long> picker = builder.build();
picker.addOnPositiveButtonClickListener(this::doOnDateSelected);
picker.show(getFragmentManager(), picker.toString());
```

---
# Material dialogs

- https://material.io/develop/android/components/dialog/

```java
new MaterialAlertDialogBuilder(context, R.style.ThemeOverlay_MaterialComponents_MaterialAlertDialog_Centered)
  .setTitle("Title")
  .setMessage("Message")
  .setPositiveButton("Accept", /* listener */ null));
```

---
# Material dialogs

## Selecció d'una opció

```java
new MaterialAlertDialogBuilder(getContext())
    .setTitle(R.string.title)
    .setItems(optionsArray, /* listener */ null)
    .show();
```

---
# Progress dialog

```
dialog = ProgressDialog.show(getContext(), titol, text, true);
dialog.show();

// Per tancar-lo
dialog.dismiss();
```