И вот мы здесь еще на неделю, в последней части этой серии.
Мы рассмотрели такие важные темы, как подключение к базе данных, выбор изображений и т.д. Тем не менее, все еще не хватает важного, его отсутствие обесценивает наше приложение, независимо от того, какой мощной функциональностью оно обладает. Я говорю о дизайне.
Я буду честен и скажу вам, что я не великий дизайнер. На самом деле, подготовка к этой последней части заняла у меня много времени, пока я писал серию, я практиковался и читал ресурсы по всему Интернету, чтобы написать отличную статью.
В этом последнем посте мы рассмотрим компоненты материала, не все из них, и инструмент для улучшения дизайна.
Прежде всего, Android позволяет нам использовать компоненты, называемые материалами. Такого рода компоненты дают нам совершенно новый опыт работы с UX-шаблонами с интересными дизайнами, такими как возвышения, тени, анимация и элементы рисования.
Учитывая предыдущее, давайте изменим весь вид текста и редактирование текста, а также кнопку. Контейнер изображений, насколько я знаю, не поддерживает материалы, поэтому мы оставим все как есть.
Для изменения редактирования текста мы будем использовать TextInputLayout и Редактирование ввода текста. Макет используется как контейнер для ввода текста, он может содержать подсказку и изображения, чтобы избежать еще большего количества компонентов. Приведенный ниже код показывает, как изменить EditText на новый компонент. Обратите внимание на тег подсказки с текстом “Username”, он похож на декоратор, когда вы нажимаете на компонент, он меняет свое положение; и тег boxStrokeColor, позволяющий нам изменять цвет обводки.
Из-за тега подсказки компонента я удаляю TextView, поскольку он является избыточным.
Теперь переключатели будут изменены для изображений, отличная страница, где вы можете найти бесплатные ресурсы в формате png, – это icons8 , вы могли бы добавить возможность рисования слева или справа и будут показаны значки, если вам не нравится ориентация подсказки, также есть возможность добавить ее сверху или снизу, скрыв круглую кнопку.
Следующим шагом является изменение поля дня рождения, как мы сделали с полем имени пользователя, вариант в данном случае – изменение типа ввода на none, чтобы пользователь не мог писать. Этот последний шаг был выполнен программно, как только все было инициализировано.
birthday.setInputType(InputType.TYPE_NULL);
Затем центрируйте все на экране и измените холодный цвет и его контрастность, отличная страница – paletton . Я предлагаю подобрать светлые цвета, но не слишком яркие (представьте, что вы носите солнцезащитные очки каждый раз, когда открываете свое приложение из-за яркого света).
Объедините все вместе в стиль для ваших макетов, просто чтобы style.xml файл и добавьте следующее
Не упустите возможность изменить названия стиля, то есть Username Label и значения цвета на что-то, что отлично подходит для вашего приложения.
Чтобы импортировать этот стиль в свой компонент, просто добавьте тег style, например.
...
Используя преимущества макетов ввода текста, давайте дополним нашу функциональность сообщением об ошибке. Чтобы сделать это, используйте прослушиватель изменения текста в вашем edittext; onafterchange проверьте, внесено ли изменение, когда текстовое поле изменится на пустое, установите ошибку; в противном случае измените макет текста на исходное состояние.
username.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void afterTextChanged(Editable editable) {
if (editable.toString().isEmpty()) {
username.setError(getResources().getString(R.string.username_error));
username_layout.setBoxStrokeColor(Color.RED);
} else if (!editable.toString().isEmpty()) {
username_layout.setBoxStrokeColor(getResources().
getColor(R.color.boxStroke));
}
}
});
Вы должны сделать это для каждого текстового макета, который вы хотите отобразить с ошибкой.
В конце приложение должно выглядеть следующим образом.
(Меньше оранжевого , Я действительно не знаю, почему изображение окрашивается в этот цвет, когда я делаю снимок)
Но есть одна недостающая проблема: что произойдет, если приложение будет использоваться на небольшом устройстве? все будет выглядеть странно, мы просто поместим макет в ScrollView, и проблема решена.
Аааа И…. Это оно.
Спасибо за чтение и помните, что проект находится на github (ссылка) для любой цели, которую вы хотите ему предоставить.
Оригинал: “https://dev.to/edrome/how-to-create-an-android-app-improving-designs-epi”