Округлено, что это за программа для Android

Обновлено: 21.11.2024

Очень важно, чтобы кнопки в приложении для Android выглядели красиво. Когда вы проектируете и создаете свое приложение, вы, вероятно, захотите создать закругленные углы для кнопок.

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

Чтобы создать закругленные углы для кнопки в Android, вам необходимо:

Создайте Drawable для кнопки
Добавьте прямоугольную форму в Drawable
Установите цвет фона в Drawable
Установите радиус углов в Drawable
Применить Drawable к кнопке
Добавьте кнопку в свой макет Activity/Fragment и примените Drawable к кнопке

В этот пост я включил примеры кода для создания кнопки с закругленными углами в Android, которую вы можете использовать в своем приложении для Android.

В дополнение к этому я включил в этот пост разделы, посвященные различным стилям закругленных кнопок, например:

Применение сплошного цвета фона к закругленной кнопке
Применение градиентного цвета фона к закругленной кнопке
Применение тени к закругленной кнопке
Создание круглой кнопки

Создание кнопки со скругленными углами в Android

В этом разделе поста я покажу вам, как создать кнопку с закругленными углами в Android, которая выглядит как на изображении ниже.

Сначала вам нужно создать новый ресурс для рисования в каталоге res/drawable.

Чтобы создать рисуемый объект в Android Studio, разверните каталог «res/drawable» и щелкните правой кнопкой мыши папку «drawable». Наведите указатель мыши на меню «Создать» и выберите пункт меню «Рисуемый файл ресурсов».

Введите имя файла для нового рисунка и нажмите кнопку «ОК». Это создаст файл ресурсов для рисования.

Для этой кнопки мы применим сплошной цвет фона. Существует файл ресурсов для централизации всех цветов в вашем приложении для Android, расположенный в каталоге «res/values» с именем colors.xml, где вы можете добавить цвет фона кнопки.

Отредактируйте файл colors.xml в Android Studio и добавьте новый цвет, который будет использоваться в качестве цвета фона закругленной кнопки. См. приведенный ниже фрагмент кода, показывающий, как цвета определяются в файле colors.xml.

Теперь у нас есть все необходимое для создания ресурса для рисования кнопки со скругленными углами. Откройте ресурс для рисования, который вы ранее создали в Android Studio.

Замените код внутри ресурса drawable приведенным ниже фрагментом кода. Убедитесь, что атрибут android:color ссылается на правильное название цвета, которое вы создали в файле colors.xml.

Внутри ресурса для рисования у вас будет элемент формы. Android поддерживает 4 различных типа рисунков: прямоугольник, овал, линия и кольцо. Мы будем использовать прямоугольную форму, которую можно нарисовать для нашей кнопки со скругленными углами, установив для атрибута «android: shape» значение «прямоугольник» в элементе формы.

Внутри элемента формы мы добавим два элемента: сплошной и угловой.

Элемент сплошного цвета используется для установки цвета фона кнопки, которая будет заполнена одним сплошным цветом. Используйте атрибут android:color сплошного элемента, чтобы установить цвет заливки фигуры в соответствии с цветом кнопки, который мы ранее добавили в файл colors.xml.

Элемент углов используется для применения определенного радиуса к углам прямоугольной формы для создания закругленных углов. Радиус углов определяется в пикселях дисплея (dp).

Вы можете применить радиус к отдельным углам по одному, используя атрибуты «android:topLeftRadius», «android:topRightRadius», «android:bottomLeftRadius», «android:bottomRightRadius». В качестве альтернативы вы можете применить одинаковый радиус ко всем углам прямоугольника, используя атрибут «android:radius».

На этом создание чертежа завершится. Следующим и последним шагом будет добавление кнопки в действие или фрагмент. Откройте ресурс макета Activity или Fragment в Android Studio.

Затем вы можете добавить кнопку в макет действия или фрагмента. При добавлении вашей кнопки используйте атрибут «android: background», чтобы применить свой рисунок к кнопке. Также используйте атрибут «android:padding», чтобы задать отступ между текстом внутри кнопки и границами кнопки, чтобы она выглядела лучше.

Добавление градиентного фона к кнопке со скругленными углами

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

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

Сначала вам нужно будет создать новый ресурс для рисования в каталоге «res/drawable» и присвоить файлу для рисования имя «round_gradient_button».

Далее нам нужно добавить два цвета в файл ресурсов colors.xml, расположенный в каталоге «res/values». Эти два цвета будут представлять собой начальный и конечный цвета, которые мы будем использовать для градиентного фона.

Хороший онлайн-ресурс, который я использовал, чтобы придумать цвета для градиента, — это gradientbuttons.colorion.co. Инструмент имеет большой список цветов, показанных вместе на градиентном фоне, который вы можете прокручивать, если у вас возникли проблемы с поиском цветов, которые хорошо смотрятся вместе.

Если вы найдете цвета, которые вам нравятся, нажмите кнопку «Получить код CSS», скопируйте шестнадцатеричные коды цветов и используйте их в файле colors.xml

После того как вы добавите два цвета в файл ресурсов colors.xml, вам нужно будет изменить ранее созданный объект round_gradient_button.

Замените код внутри ресурса drawable приведенным ниже фрагментом кода. Убедитесь, что атрибуты android:startColor и android:endColor ссылаются на правильные названия цветов, которые вы создали в файле colors.xml.

Ресурс drawable очень похож на то, что мы создали в предыдущем разделе выше, он использует форму прямоугольника с элементом углов с атрибутом radius для определения закругленных углов.

Основное отличие заключается в использовании элемента градиента, а не сплошного элемента. Элемент градиента используется, как следует из его названия, для определения заливки рисуемого объекта как градиента цветов, а не одного сплошного цвета заливки.

В фрагменте кода я установил для атрибута android:angle значение 0, это означает, что градиент будет двигаться слева направо. Если вы хотите, чтобы градиент двигался снизу вверх, вам нужно установить угол равным 90. Значение угла должно быть кратно 45. Я включил изображение ниже, которое показывает разные углы для градиента.

Кроме того, во фрагменте кода я установил для атрибутов «android:startColor» и «android:endColor» цвета, созданные на предыдущем этапе этого раздела.

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

"android:centerX" и "android:centerY", которые принимают значения с плавающей запятой от 0 до 1,0 для управления относительной центральной позицией градиента.
"android:centerColor", который относится к цвету, отображаемому между начальным и конечным цветами.
«android:gradientRadius», который ссылается на радиус, показанный в градиенте, который применим только в том случае, если для типа градиента установлено значение «Радиальный».
«android:useLevel», для которого должно быть задано значение true, если градиент используется в качестве отображаемого списка уровней
"android:type" – это шаблон, используемый для градиента. Варианты включают "linear" (по умолчанию), "radial" и "sweep". Я включил примеры каждого из них на скриншот ниже.

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

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

В этом разделе поста я покажу вам, как применить тень к кнопке с закругленными углами в Android, которая выглядит как на изображении ниже.

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

Сначала вам нужно будет создать новый ресурс для рисования в каталоге «res/drawable» и присвоить файлу для рисования имя «round_shadow_button».

Поскольку я буду повторно использовать существующие цвета, я не буду повторять процесс добавления новых цветов в файл ресурсов colors.xml.

Замените код внутри ресурса drawable приведенным ниже фрагментом кода. Убедитесь, что оба атрибута android:color правильно ссылаются на фактические цвета.

Этот рисунок использует список слоев с двумя элементами внутри него. Первый элемент представляет тень, а второй элемент представляет кнопку. Два элемента содержат прямоугольные формы с одинаковым радиусом углов, но разного цвета. Каждый из элементов позиционируется по-разному с использованием атрибутов «android:left», «android:top», «android:bottom» и «android:right», чтобы тень отображалась за кнопкой.

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

Создание круговой кнопки

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

Сначала вам нужно будет создать новый ресурс для рисования в каталоге «res/drawable» и присвоить файлу для рисования имя «circular_button».

Замените код внутри ресурса drawable приведенным ниже фрагментом кода. Убедитесь, что «android:color» указывает на реальный цвет.

Ключевой особенностью этого Drawable является использование «овальной» формы в атрибуте «android: shape» элемента shape. Еще одним ключевым отличием от предыдущих рисунков, упомянутых выше, является использование элемента размера и предоставление ширины и высоты рисуемого объекта. Это делается для того, чтобы овал был достаточно большим, чтобы он не растягивался и не выглядел как круг.

Разработчики должны сделать один квадратный значок, а Google сделает все остальное: скругление углов, добавление теней и многое другое

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

Компания Google ввела требование «обеспечить единообразие и более аккуратный вид Google Play», сделав все значки квадратами со скругленными углами. Это изменение коснется магазина как на Android, так и на Chrome OS.

Кроме того, это изменение запрещает использование прозрачного фона. Google также динамически добавляет к значкам закругленные углы и тени.

Разработчики могут немедленно включить новый стиль. В Google Play Console раздел «Графические ресурсы» в разделе «Сведения о продукте» содержит параметр, а также информацию об обязательном изменении.

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

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

Кроме того, с 1 мая разработчики не смогут загружать значки, не соответствующие стандарту.

Стоит отметить, что это изменение не повлияет на Google Play для Android Auto, Android TV или Wear OS. Это также не повлияет на значки программы запуска APK на любой платформе.

У Google также есть подробная страница, которая поможет разработчикам создавать значки, соответствующие новым спецификациям.

Интересно, что с помощью этой спецификации Google снял с разработчиков часть работы. Play Store динамически обрабатывает маскировку и тени, поэтому разработчикам нужно создать только квадратный значок, а Google сделает все остальное, включая скругление углов и подгонку значка под различные поддерживаемые формы.

Учитывая, что Android Q адаптирует символы в системе, чтобы они соответствовали форме значка приложения, Google Play также может динамически изменять форму значка приложения, чтобы она соответствовала ему.

Подробнее о новой спецификации значков приложений можно узнать в блоге разработчиков Android.

Вот исходный код программы для демонстрации кнопки со скругленными углами в Android. Программа успешно компилируется и запускается в системе Windows с использованием Eclipse Ide. Вывод программы также показан ниже.

Чтобы продемонстрировать кнопку с закругленными углами, я определил стиль для своего текстового представления в папке /res/drawable с именем mystyle и применил его в качестве фона для моей кнопки, следующий код демонстрирует это.

Основное действие

мой стиль

Activity_Main

Sanfoundry Global Education & Learning Series – более 100 руководств по Java для Android.

Следующие шаги:

Получите бесплатный сертификат о заслугах в программировании на Java
Примите участие в конкурсе сертификации программистов на Java
Стать лучшим специалистом по программированию на Java
Пройдите тесты по программированию на Java
Практические тесты по главам: главы 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
Проверки по главам: главы 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

Похожие сообщения: