Android java button background

How to Change the Background Color of Button in Android using ColorStateList?

ColorStateList is an object which can define in an XML file that can be used to apply different colors on widgets (such as Buttons, etc) depending on the state of Widgets to which it is being applied. For Example, There are many states of Buttons like (pressed, focussed, or none of them ) and other widgets states like enable, checkable, checked, etc, Using Color State List is a nice way to change the color of the button without using shape drawables or custom images. One should remember the color state list can be used anywhere, where color is used. The color state list is defined in XML and saved under the res/color folder. The root element of the color state list is a selector and the item element is defined for each state that you want to define the color by using color and alpha attributes. The default color should be the last element which is used when color for a specific state is not defined. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language.

Approach

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Источник

Buttons

A button consists of text or an icon (or both text and an icon) that communicates what action occurs when the user touches it.

Depending on whether you want a button with text, an icon, or both, you can create the button in your layout in three ways:

• With text, using the Button class:
• With an icon, using the ImageButton class:
• With text and an icon, using the Button class with the android:drawableLeft attribute:

Key classes are the following:

Responding to Click Events

When the user clicks a button, the Button object receives an on-click event.

To define the click event handler for a button, add the android:onClick attribute to the element in your XML layout. The value for this attribute must be the name of the method you want to call in response to a click event. The Activity hosting the layout must then implement the corresponding method.

For example, here’s a layout with a button using android:onClick :

Within the Activity that hosts this layout, the following method handles the click event:

Kotlin

The method you declare in the android:onClick attribute must have a signature exactly as shown above. Specifically, the method must:

• Be public
• Return void
• Define a View as its only parameter (this will be the View that was clicked)

Using an OnClickListener

You can also declare the click event handler programmatically rather than in an XML layout. This might be necessary if you instantiate the Button at runtime or you need to declare the click behavior in a Fragment subclass.

To declare the event handler programmatically, create an View.OnClickListener object and assign it to the button by calling setOnClickListener(View.OnClickListener) . For example:

Kotlin

Styling Your Button

The appearance of your button (background image and font) may vary from one device to another, because devices by different manufacturers often have different default styles for input controls.

You can control exactly how your controls are styled using a theme that you apply to your entire application. For instance, to ensure that all devices running Android 4.0 and higher use the Holo theme in your app, declare android:theme=»@android:style/Theme.Holo» in your manifest’s element. Also read the blog post, Holo Everywhere for information about using the Holo theme while supporting older devices.

To customize individual buttons with a different background, specify the android:background attribute with a drawable or color resource. Alternatively, you can apply a style for the button, which works in a manner similar to HTML styles to define multiple style properties such as the background, font, size, and others. For more information about applying styles, see Styles and Themes.

Borderless button

One design that can be useful is a «borderless» button. Borderless buttons resemble basic buttons except that they have no borders or background but still change appearance during different states, such as when clicked.

To create a borderless button, apply the borderlessButtonStyle style to the button. For example:

Custom background

If you want to truly redefine the appearance of your button, you can specify a custom background. Instead of supplying a simple bitmap or color, however, your background should be a state list resource that changes appearance depending on the button’s current state.

You can define the state list in an XML file that defines three different images or colors to use for the different button states.

To create a state list drawable for your button background:

Create three bitmaps for the button background that represent the default, pressed, and focused button states.

To ensure that your images fit buttons of various sizes, create the bitmaps as Nine-patch bitmaps.

Источник

Основы темизации в Android

Темизация приложения может быть одним из самых запутанных вопросов в разработке Android. В то время как проект постоянно увеличивается, становится все труднее поддерживать стили компонентов и тематическое оформление приложения. Если у вас нет хорошей системы дизайна, то можно получить противоречивое оформление и несоответствующие цвета в приложении. Хорошее понимание стилизации и темизации поможет вам создать единообразный пользовательский интерфейс во всем приложении. Кроме того, если вы думаете о миграции на Compose, плохая система дизайна может создать дополнительные сложности.

Хорошая система дизайна требует правильной настройки стилизации и темизации. Это способствует созданию единообразных и многократно используемых стилей для наших компонентов. Но как на самом деле создать правильную систему стилей и тем?

На этот вопрос нет однозначного ответа, его можно разделить на 5 частей.

Стиль по умолчанию

Стиль в сравнении с темой

Атрибуты

Все начинается с атрибута. Без атрибутов в XML не было бы никаких характеристик, которые бы мы могли определить. Атрибуты — это именованные значения, которые имеют свое определение в файле attrs.xml . Атрибут может быть определен как для представления, так и для темы. Например, атрибут android:layout_width является атрибутом представления, а colorPrimary — атрибутом темы.

Атрибут представления устанавливается в XML представления либо путем установки непосредственно в теге, либо косвенно с помощью style (будет упомянуто позже).. Давайте рассмотрим, как мы можем установить красный фон кнопки с помощью атрибута представления android:backgroundTint .

Примечание: Для доступа к встроенным атрибутам используется префикс android.

Допустим, вы хотите изменить его фон на белый. Вы можете сделать это, установив атрибут android:backgroundTint на белый.

Это хорошо, если вы измените только одну кнопку. Но как быть, если вы хотите изменить все красные кнопки на белые? Этого можно добиться:

Использование атрибута темы для android:backgroundTint

Создание и применение стиля ко всем кнопкам

Атрибут темы — это атрибут, который не принадлежит ни одному представлению и может быть изменен на уровне темы.

Чтобы использовать атрибут темы для android:backgroundTint , давайте сначала определим пользовательский атрибут темы под названием myButtonBackground в attrs.xml .

Добавление пользовательского атрибута темы:

Тип атрибута задается с помощью поля format . Формат может быть задан как одиночный или множественный тип, например,

android:background format=»reference|color» , который принимает как ссылки на drawable-ресурс («reference»), так и цвет («color»).

Теперь вы можете использовать атрибут myButtonBackground для установки фона вашей кнопки. Но перед этим необходимо задать значение myButtonBackground . Оно должно быть определено либо в теме, либо в наложении темы, которое будет использоваться.

Установка значения атрибута темы:

Затем вы можете использовать этот атрибут для установки фона ваших кнопок.

Установка фона кнопки с помощью пользовательского атрибута:

Если вы измените значение атрибута, то изменится фон всех кнопок, использующих атрибут ?attr/myButtonBackground в качестве фона. В качестве альтернативы можно использовать ?myButtonBackground как сокращение вместо ?attr/myButtonBackground .

Но установка android:backgroundTint на myButtonBackground для всех кнопок может оказаться непосильной задачей. Чтобы решить эту проблему, мы создадим стиль и применим его ко всем кнопкам, используя стиль по умолчанию.

Стиль по умолчанию

Замечали ли вы, что если не задаете кнопке никакого фона, то все равно получаете фоновый drawable (выводимый средствами графических ресурсов объект)? Это происходит потому, что компонент Button (кнопка) имеет стиль по умолчанию, как и любой другой вид. Стиль по умолчанию используется в качестве базового стиля представления.

Давайте проверим стиль кнопки по умолчанию.

Стиль кнопки по умолчанию устанавливается с помощью атрибута темы R.attr.buttonStyle . Это означает, что вы можете изменить стиль по умолчанию всех кнопок в вашем приложении с помощью этого атрибута.

Давайте изменим стиль кнопки по умолчанию в нашей теме так, чтобы фон был красным.

Установка стиля кнопки по умолчанию с помощью атрибута buttonStyle :

Тогда при создании кнопки вы будете получать следующее.

Кнопка с красным фоном

Разве это не напоминает текст с красным фоном? Так происходит потому, что стиль MyButton не наследуется ни от каких стилей. По этой причине все кнопки будут содержать атрибут фонового изображения только в своем стиле по умолчанию. Давайте проверим, как стиль кнопки по умолчанию выглядит в AppCompat .

Стиль кнопок по умолчанию в AppCompat :

Как вы видите, эти атрибуты являются базовым стилем для кнопки. Давайте укажем Widget.AppCompat.Button в качестве родителя стиля MyButton и изменим атрибут background на backgroundTint , поскольку мы хотим изменить только цвет, а не drawable-объект.

Установка родительского стиля кнопки MyButton :

Затем мы получаем кнопку с красным фоном.

Кнопка с красным фоном

Стиль и тема

Мы уже упоминали о стиле и теме, но в чем разница между ними? И стиль, и тема — это набор атрибутов, но разница заключается в том, в каком случае они применяются. Стили предназначены для применения к представлениям, а темы — к действиям или всему приложению. По этой причине стиль должен содержать только атрибуты представления, а тема — только атрибуты темы.

Вы можете изменить стиль представления тремя способами:

Изменение атрибута представления в файле макета

Создание нового стиля и применение его с помощью атрибута представления style в файле макета

Указание стиля по умолчанию

Давайте посмотрим, как можно изменить фон кнопки в файле макета.

Изменение фона кнопки в файле макета:

Теперь давайте проверим, как мы можем создать стиль и применить его к этой кнопке.

Стиль кнопки с пользовательским фоновым drawable:

Установка пользовательского стиля для кнопки:

При применении стиля учитываются только атрибуты представления. Если вы попытаетесь установить любой атрибут темы внутри стиля MyButton , это не сработает. Для наглядности приведем пример:

Использовать атрибут темы colorPrimary внутри drawable фона кнопки.

Изменим значение colorPrimary внутри стиля MyButton

Фоновый drawable, который использует атрибут colorPrimary :

Изменение атрибута темы colorPrimary внутри стиля кнопки:

Тогда, несмотря на то, что мы установили основной цвет как красный, мы получим кнопку с фиолетовым фоном.

Кнопка с фиолетовым фоном

Это происходит потому, что представление знает только о своих собственных атрибутах; Кнопка (Button) не знает об атрибуте colorPrimary, поэтому он игнорируется.

Представление получает свои атрибуты из файла макета или атрибута стиля. Если стиль представления включает атрибут темы, он будет проигнорирован.

Как же тогда изменить атрибуты темы только для одного представления? Здесь на помощь приходит наложение тем.

Наложение тем

Наложение тем — это техника, используемая при переопределении атрибутов темы для любого представления или группы представлений. Наложение тем очень полезно, когда вы обновляете тему определенной части вашего приложения.

При применении наложения темы нужно выполнить два шага:

Создайте стиль, состоящий из атрибутов темы, которые необходимо изменить.

Примените этот стиль к файлу макета с помощью android:theme или программно с помощью ContextThemeWrapper .

Давайте продолжим вышеупомянутый сценарий, в котором мы изменяем цвет фона кнопки с помощью атрибута темы colorPrimary . Сначала нам нужно создать стиль для наложения темы, в котором мы зададим colorPrimary .

Наложение темы для кнопки:

У наложения темы нет родительского элемента.

Кроме того, лучше начинать именовать стиль с ThemeOverlay , поскольку так его будет легче отличить от других стилей. Эта техника именования используется также в Material Components и AppCompat.

Давайте применим это наложение к кнопке в файле макета.

Применение наложения темы с помощью атрибута android:theme :

Имейте в виду, что если наложение темы применяется к группе представлений, оно также будет применяться ко всем ее потомкам. Другими словами, тема каждого потомка группы представлений накладывается, когда наложение темы применяется к группе представлений.

Применение наложения темы к группе представлений:

Мы также можем осуществить наложение темы программно, обернув контекст представления с помощью ContextThemeWrapper .

Использование ContextThemeWrapper для наложения темы:

ContextThemeWrapper создает новый контекст (оборачивая заданный) своей собственной темой.

TextAppearance

TextAppearance — это класс, который содержит данные только для стилизации атрибутов TextView , связанных с текстом (например, textColor , textSize , но не связанных с видом, таких как maxLines или drawableTop и т.д.).

TextAppearance устанавливается атрибутом android:textAppearance на TextView . Атрибут android:textAppearance работает так же, как и атрибут style . Основное различие заключается в порядке приоритета между ними. style имеет приоритет над android:textAppearance , что означает, что style всегда будет превалировать над общими атрибутами.

Вы можете спросить, зачем он нам нужен, ведь мы можем задать все в style ? Ответ заключается в том, что мы получаем возможность устанавливать только атрибуты, связанные с текстом, и это делает его многократно используемым для всех TextViews , оставляя атрибут style свободным.

Например, давайте создадим внешний вид текста для заголовка.

Использование стиля TextAppearance.StylesNThemes.Header в качестве оформления внешнего вида текста:

Как видите, атрибут style для TextView является свободным и может использоваться для настройки других атрибутов представления. Вы также можете установить android:textAppearance , создав стиль.

Давайте создадим стиль однострочного заголовка.

Однострочный стиль заголовка:

Теперь вы можете установить этот стиль с помощью атрибута style и повторно использовать его для любого текста.

Применение однострочного стиля заголовка к текстовому представлению:

Если вы хотите более глубоко погрузиться в изучение темы внешнего вида текста и приоритета стилей, я настоятельно рекомендую вам прочитать эту статью.

Заключение

Атрибуты являются ключевым понятием в стилизации и темизации. Используйте атрибуты представления для их стиля и атрибуты темы для приложения, Активности или иерархии представлений. Если вы хотите изменить стиль для всех инстансов данного типа представления во всем приложении, вам подойдут стили по умолчанию. Наложения тем используются для переопределения атрибутов темы, и вы можете использовать их даже для представлений в заданной иерархии. Внешний вид текста может помочь вам сформировать текстовые атрибуты TextViews с помощью android: textAppearance , оставляя атрибут style свободным.

Android-разработчиков с опытом от 3 лет и всех желающих приглашаем на онлайн-интенсив «Полный coverage. Покрываем Android-приложение юнит/интеграционными/UI тестами».
На интенсиве мы:
— Научимся покрывать android приложение юнит/интеграционными/UI тестами.
— Рассмотрим различные кейсы: покрытие тестами suspend функций, RX цепочек.
— Изучим популярные инструменты для написания тестов.
— Обсудим best practices по покрытию тестами.

Источник