Тематика Material Design EditText в Android с примером
Опубликовано: 1 Декабря, 2021
Предварительное условие : Material Design EditText в Android с примерами
В предыдущей статье Material Design EditText в Android с примерами Текстовые поля материального дизайна предлагают больше настроек и улучшают взаимодействие с пользователем по сравнению с обычными текстовыми полями. Например, Icon, чтобы очистить все поле EditText, вспомогательный текст и т. Д. В этой статье обсуждалось, как мы можем настроить текстовые поля редактирования Material design. Взгляните на следующее изображение, чтобы понять, как можно тематизировать EditTexts в материальном дизайне.
Note: Now in this article we will only customize the Material design EditText and about implementation refer to the prerequisite article above. The Material design EditText comes under the Small Components.
Шаги по оформлению материального дизайна EditText
Работа с файлом activity_main.xml
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity" tools:ignore="HardcodedText"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="64dp" android:text="Material Design Filled EditText" /> <!--this is the material design filled EditText with helper text--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/filled_edit_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:hint="Enter Something" app:helperText="Enter in text format only"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.textfield.TextInputLayout> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="64dp" android:text="Material Design Outlined EditText" /> <!--this is the material design outlined EditText with helper text--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/outline_edit_text" style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:hint="Enter Something" app:helperText="Enter in text format only"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.textfield.TextInputLayout> </LinearLayout> |
Выходной интерфейс: запуск в эмуляторе
Теперь настраиваем поля EditText путем переопределения дизайна материалов по умолчанию
- Как мы видели, в статье «Введение в материальный дизайн в Android» есть три типа, формирующие компоненты материального дизайна. Это край треугольника, срезанный угол , и закругленный угол.
- Работа с файлом styles.xml. Вызовите следующий код, чтобы настроить MDC EditText. Комментарии добавляются внутри кода для лучшего понимания.
XML
< resources > <!-- Base application theme. --> < style name = "AppTheme" parent = "Theme.MaterialComponents.Light.DarkActionBar" > <!-- Customize your theme here. --> < item name = "colorPrimary" >@color/colorPrimary</ item > < item name = "colorPrimaryDark" >@color/colorPrimaryDark</ item > < item name = "colorAccent" >@color/colorAccent</ item > <!--this changes the filled colour of the MDC Filled EditText--> <!--this also changes the color of the hint font and helper text too--> < item name = "colorOnSurface" >@color/colorPrimaryDark</ item > <!--this customizes the hint font of the EditText--> < item name = "textAppearanceSubtitle1" >@style/TextAppearance.App.Subtitle1</ item > <!--this changes the helper text font--> < item name = "textAppearanceCaption" >@style/TextAppearance.App.Caption</ item > <!--this is to change the shape of the MDC EditText--> < item name = "shapeAppearanceSmallComponent" >@style/ShapeAppearance.App.SmallComponent</ item > </ style > < style name = "TextAppearance.App.Subtitle1" parent = "TextAppearance.MaterialComponents.Subtitle1" > <!--this changes the font face of the hint text--> < item name = "fontFamily" >sans-serif-condensed</ item > < item name = "android:fontFamily" >sans-serif-condensed</ item > </ style > < style name = "TextAppearance.App.Caption" parent = "TextAppearance.MaterialComponents.Caption" > <!--this changes the font face of the helper text--> < item name = "fontFamily" >sans-serif-black</ item > < item name = "android:fontFamily" >sans-serif-black</ item > </ style > < style name = "ShapeAppearance.App.SmallComponent" parent = "ShapeAppearance.MaterialComponents.SmallComponent" > <!--this makes the 10 dp of cut corners of the MDC EditText--> < item name = "cornerFamily" >cut</ item > < item name = "cornerSize" >10dp</ item > </ style > </ resources > |
Выходной интерфейс: запуск в эмуляторе
- Есть больше атрибутов для установки радиуса для определенных углов.
boxCornerRadiusTopStart
boxCornerRadiusTopEndboxCornerRadiusBottomStart
boxCornerRadiusBottomEnd
- Следующий код и выходные данные являются примером того же. Код необходимо вызывать внутри styles.xml .
XML
< resources > <!-- Base application theme. --> < style name = "AppTheme" parent = "Theme.MaterialComponents.Light.DarkActionBar" > <!-- Customize your theme here. --> < item name = "colorPrimary" >@color/colorPrimary</ item > < item name = "colorPrimaryDark" >@color/colorPrimaryDark</ item > < item name = "colorAccent" >@color/colorAccent</ item > <!--this changes the filled colour of the MDC Filled EditText--> <!--this also changes the color of the hint font and helper text too--> < item name = "colorOnSurface" >@color/colorPrimaryDark</ item > <!--this customizes the hint font of the EditText--> < item name = "textAppearanceSubtitle1" >@style/TextAppearance.App.Subtitle1</ item > <!--this changes the helper text font--> < item name = "textAppearanceCaption" >@style/TextAppearance.App.Caption</ item > <!--this is to change the shape of the MDC EditText--> < item name = "shapeAppearanceSmallComponent" >@style/ShapeAppearance.App.SmallComponent</ item > </ style > < style name = "TextAppearance.App.Subtitle1" parent = "TextAppearance.MaterialComponents.Subtitle1" > <!--this changes the font face of the hint text--> < item name = "fontFamily" >sans-serif-condensed</ item > < item name = "android:fontFamily" >sans-serif-condensed</ item > </ style > < style name = "TextAppearance.App.Caption" parent = "TextAppearance.MaterialComponents.Caption" > <!--this changes the font face of the helper text--> < item name = "fontFamily" >sans-serif-black</ item > < item name = "android:fontFamily" >sans-serif-black</ item > </ style > < style name = "ShapeAppearance.App.SmallComponent" parent = "ShapeAppearance.MaterialComponents.SmallComponent" > <!--this makes the 10 dp of cut corners of the MDC EditText--> < item name = "cornerFamily" >rounded</ item > <!--this attribute makes changes to the Bottom Right corner of the EditText according to the value--> < item name = "cornerSizeBottomRight" >24dp</ item > <!--this attribute makes changes to the Top Left corner of the EditText according to the value--> < item name = "cornerSizeTopLeft" >24dp</ item > </ style > </ resources > |
Выходной интерфейс: запуск в эмуляторе
Хотите более динамичную и конкурентную среду для изучения основ Android?
Щелкните здесь, чтобы перейти к уникальному руководству, составленному нашими экспертами с целью мгновенно подготовить вашу отрасль!