Android button закруглить края

Drawable. Фигуры и градиенты

Shape и ShapeDrawable

Фигуры являются подмножеством Drawable-ресурсов.

Данный вид ресурсов на основе класса ShapeDrawable позволяет описывать простые геометрические фигуры, указывая их размеры, фон и контур с помощью тега .

Можно создавать ресурсы фигур на основе стандартных фигур вроде прямоугольника, эллипса, линии. Для использования ресурсов фигур нужно создать в подкаталоге res/drawable XML-файл, в котором будет присутствовать тег , который в свою очередь может содержать дочерние элементы , ,

Имя файла без расширения будет служить идентификатором (ID): R.drawable.filename в Java-коде и @[package:]drawable/filename в XML-файлах.

Элементы фигуры

— отступы. Возможные атрибуты: android:left, android:top, android:right, android:bottom

— размеры фигуры. Возможные атрибуты: android:height, android:width

— сплошной цвет для фигуры. Возможные атрибуты: android:color

— контур фигуры. Возможные атрибуты: android:width, android:color, android:dashGap (расстояние между черточками), android:dashWidth (длина пунктирной черточки)

rectangle (Прямоугольник)

shape_rect.xml — Атрибут android:shape здесь необязателен: rectangle — это значение по умолчанию.

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

Создадим файл separator.xml:

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

У первого разделителя ширина 1dp, у второго — 3dp. Получили красивую полоску.

У прямоугольников можно скруглить углы при помощи тега corners

Можно закруглить углы по отдельности:

oval (Эллипс)

Другой вариант с пунктиром:

ring (Кольцо)

shape_ring.xml — Для кольца имеются дополнительные атрибуты:

innerRadius Внутренний радиус innerRadiusRatio Отношение между внешним и внутренним радиусами. По умолчанию равно 3 thickness Толщина кольца (т.е. разница между внешним и внутренним радиусами) thicknessRatio Отношение ширины кольца к его толщине. По умолчанию равно 9

line (Горизонтальная линия)

shape_line.xml — Линия может быть только горизонтальной

Градиенты: gradient и GradientDrawable

Тег gradient (класс GradientDrawable) позволяет создавать сложные градиентные заливки. Каждый градиент описывает плавный переход между двумя или тремя цветами с помощью линейного/радиального алгоритма или же используя метод развертки.

Тег gradient внутри тега shape. Основные атрибуты: type, startColor (обязателен), endColor (обязателен) и middleColor (необязателен). Также иногда оказывается полезным атрибут centerColor.

Используя атрибут type, вы можете описать свой градиент:

linear

• android:type=»linear» можно опустить, он так и есть по умолчанию. Отображает прямой переход от цвета startColor к цвету endColor под углом, заданным в атрибуте angle.
• Атрибут android:angle используется только линейным градиентом и должен быть кратным значению 45.

Дополнительный материал: Android Dev Tip #3 — помните о прозрачности, который может привести к другому результату.

Также можно задействовать атрибуты centerX и centerY.

radial

Интересный эффект получается при использовании множества радиальных градиентов.

sweep

Рисует развёрточный градиент с помощью перехода между цветами startColor и endColor вдоль внешнего края фигуры (как правило, кольца).

Можно использовать атрибуты android:centerX и android:centerY.

Попробуйте также такой вариант.

А почему бы не повращать?

Примеры с shape

Закругляем уголки у компонентов

Создадим отдельный файл res/drawable/roundrect.xml и с его помощью скруглим уголки у LinearLayout, ImageView, TextView, EditText:

В разметке активности пишем следующее:

Овальный кабинет

В Белом доме есть Овальный кабинет. Если вам придётся писать приложение для администрации президента США, то все элементы нужно сделать овальными. Создадим файл res/drawable/oval.xml:

Заменим в предыдущем примере android:background=»@drawable/roundrect» на android:background=»@drawable/oval».

Источник

Закругленные углы на кнопке материала

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

Однако мне нужно изменить радиус угла, и я не смог этого сделать, унаследовав стиль Widget.AppCompat.Button.Colored и установив параметр radius.

Как я могу иметь такой же стиль, но с закругленными углами?

7 ответов

Обновление:

Ответ Габриэле Мариотти ниже теперь лучше.

Старый ответ:

Вам нужно унаследовать этот стиль.

Добавьте в ваш файл styles.xml:

Добавить файл drawable / rounded_shape.xml:

И, наконец, в вашем макете:

Изменить: обновленный ответ, чтобы использовать цвет темы, а не жестко закодированный.

Кнопка с закругленными углами материала с эффектом ряби

Создайте файл в папке Drawable ripple.xml

Создайте файл в папке для рисования rounded_shape.xml

И на твоей кнопке:

Попробуйте приведенный ниже код. Создайте рисуемый файл с именем round_button.xml и вставьте следующий

Затем измените фон кнопки на этот нарисованный файл

Если вы хотите кнопку полного круга, вы можете использовать ниже рисунок

В стабильном выпуске компонентов материалов Android в ноябре 2018 года Google переместил компоненты материалов из пространства имен android.support.design в com.google.android.material .
библиотека компонентов материала заменяет библиотеку поддержки дизайна Android ,

Добавьте зависимость в свою build.gradle :

В этом случае вы можете использовать MaterialButton в файле макета:

Используйте атрибут app:cornerRadius , чтобы изменить размер радиуса угла. Это закруглит углы с указанными размерами.

Вы также можете настроить углы, используя shapeAppearanceOverlay (требуется версия 1.1.0)

Старая библиотека поддержки .

Вы можете добавить эту кнопку в наш файл макета с помощью:

Вы можете установить угловой радиус с помощью этого атрибута:

• app:cornerRadius : используется для определения радиуса, используемого для углов кнопки

Я скажу вам мое точное решение для этого. Внутри селекторных тегов можно размещать предметы (функциональность кнопок)

Второй элемент тега селектора имеет противоположное поведение. Вы можете добавить столько, сколько селектор (поведение кнопки) ДОБАВЬТЕ ЭТОТ ЧЕРТЕЖНЫЙ XML В КАЧЕСТВЕ ФОНА КНОПКИ android: background = «@ drawable / this xml»

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

И добавить app:cornerRadius=»8dp» для закругленного угла

И не забудьте добавить библиотеки материалов Google в build.gradle

Также еще один простой способ — обернуть его вокруг cardView. Не забудьте установить для layout_width и layout_height cardView значение wrap_content, также все необходимые поля, необходимые для кнопки, должны быть применены к cardView.

Источник

Закругленная кнопка в Android

Я хочу создать округлые кнопки в программе Android. Я посмотрел на Как создать EditText с закругленными углами?

чего я хочу добиться-это:

1. Кнопки С Закругленным Краем
2. изменить фон кнопки / внешний вид в разных состояниях (например, Onclick, фокус)
3. используйте мой собственный PNG для фона и не создавайте фигуру.

9 ответов

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

ресурс селектора фона, button_background.xml :

для каждого государства, катры ресурсов, например, button_press.XML-код:

Примечание corners атрибут, это дает вам закругленные углы!

затем установите фон drawable на кнопку:

EDIT (9/2018): тот же метод можно использовать для создания круглой кнопки. Круг-это действительно просто квадратная кнопка с размером радиуса, установленным на 1/2 стороны квадрата

кроме того, в примере выше stroke и gradient не являются необходимыми элементами, они просто примеры и способы, которые вы сможете увидеть форму закругленного угла

Если вам нужна закругленная кнопка в Android, то создайте XML-файл » RoundShapeBtn.xml » как drawable.

добавить в код кнопки:

создать xml-файл в папке drawable в android, как:

теперь этот xml-файл в качестве фона кнопок.

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

расширения ImageView вот так:

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

Это можно сделать с помощью атрибута углу. Посмотрите на ниже xml.

гораздо лучше поместить состояния и формы кнопок в 1 XML-файл селектора. Это должно сделать ваше приложение работать быстрее / лучше. Попробуйте это (любезно предоставлено введение в разработку приложений для Android). Не спамить здесь просто показываю, что это не мой код.

С.-конструкции П. совет: градиенты и скругленные прямоугольники лучше всего использовать, когда вы вряд ли можете сказать, что они есть-используйте с умом.

закругленные кнопки можно создавать с помощью формы кольца drawable Также, см. http://www.zoftino.com/android-shape-drawable-examples

создать Катры ресурсов с именем btnOval—>затем мимо кода ;

Источник

Material button. Как сделать кнопки с радиусом и фоном.

Мне очень нравятся красивые закругленные кнопки из material.

Но, к сожалению, вечно у меня с ними проблемы. Всё выглядит вроде бы просто:

Не забудьте указать зависимость «com.google.android.material:material:1.2.0»

Но, внезапно, с таким кодом красивая кнопка становится с прямыми углами и никакая магия не помогает сделать радиус. При этом, если убрать строчку background, то углы возвращаются, но кнопка становится серой. Да и cornerRadius не работает. Хоть 70dp поставь, а никак не реагирует. Мои решения:

1. Заходим в стили и находим AppTheme. Для material надо указывать parent что-то от MaterialComponents. Я указала style name=»AppTheme» parent=»Theme.MaterialComponents.Light.NoActionBar». В xml заменяем слово background на backgroundTint. Теперь app:cornerRadius=»70dp» в xml сработает.
2. Если вы хотите поддерживать приложения ниже Android 5.0 то студия будет ругаться на строчку android:backgroundTint. Можно просто поднять minSdk до 21, но я не ищу простых путей (чувствую, что я ещё пожалею об этом). Идём в папку drawable и создаём файл с удобным для вас названием. Копируем туда код:

Возвращаемся в xml, где описывали кнопку. backgroundTint не удаляем, чтобы у нас остался нужный нам цвет. Вставляем android:background=»@drawable/material_button», где material_button → название вашего файла, который создавали в drawable. Готово. Вы идеальны.

Кстати, вместо android:radius можете установить радиус только для одного конкретного угла. Или для нескольких. Просто напишите второй параметр под первым.

Источник

Делаем красивые кнопки в Android

Одним из важных компонентов пользовательского интерфейса в приложения является кнопка. Она используется для выполнения различных действий пользователя.

В этой статье мы приведём примеры использования и стилизации кнопки.

Добавляем кнопку на разметку

Пользовательский интерфейс приложения определён в XML-файле с разметкой. Вы можете добавить элемент Button и установить атрибуты вручную. Или вы можете, воспользовавшись инструментом дизайна, добавить Button из палитры элементов и задать атрибуты.

Атрибуты кнопки

Button является подклассом TextView и наследует атрибуты от TextView и View. Ниже приведены некоторые важные атрибуты кнопки, которые можно использовать для настройки стиля и поведения.

• background: установка в качестве фона как цвета, так и drawable
• onClick: установить метод, который будет запускаться при нажатии на кнопку
• minHeight: для определения минимальной высоты кнопки
• minWidth: для определения минимальной ширины кнопки
• stateListAnimator: определение анимации при изменении состояния кнопки
• focusable: для определения того, будет ли обработано нажатие клавиши
• clickable: указать, является ли кнопка кликабельной
• gravity: установка выравнивания текста кнопки
• textAppearance: установить стиль текста

Включение и выключение кнопки

Вы можете использовать атрибут enabled для включения или выключения кнопки, установив его в true или false. Также это можно сделать программно, вызвав метод setEnabled(), как показано ниже:

Кнопка с Drawable

Вы можете отображать на кнопке вместе с текстом изображение, используя drawableTop, drawableRight, drawableBottom или drawableLeft, в зависимости от того, где располагать картинку, как показано на скриншоте ниже.

ImageButton

Android также предоставляет ImageButton, задачей которого является использование изображения в качестве кнопки. Чтобы установить изображение, вы можете использовать атрибут src. Вы также можете использовать разные изображения, которые будут меняться в зависимости от состояния кнопки, меняя в XML drawable selector как показано ниже.

Пример XML drawable selector

Обработка нажатий на кнопку

Клики можно обрабатывать двумя способами. Первый — это установить атрибут onClick в разметке XML. Второй — назначить кнопке слушатель в коде активности или фрагмента.

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

Ниже приведён код обработки нажатия с помощью слушателя.

Дизайн и стили кнопок

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

Пример применения темы для кнопки.

Настройка стилей кнопок

Вы можете изменить цвета по умолчанию для стилей, применяемых к кнопке, установив атрибут colorAccent на уровне приложения и атрибут colorButtonNormal на уровне виджета для нужных цветов. Атрибут colorControlHighlight используется для установки цвета кнопки, когда она находится в нажатом состоянии.

Как только вы определите собственный стиль, вы можете применить его к кнопкам с помощью атрибута theme. Ниже приведен пример пользовательской темы.

Кнопка с закруглёнными углами

Вы можете определить элемент inset, как показано ниже, чтобы создать кнопку с закруглёнными углами и сохранить файл с drawable в папке res/drawable. Вы можете увеличить или уменьшить атрибут радиуса элемента, чтобы отрегулировать радиус углов кнопки.

Затем определите стиль, задающий атрибут background для xml drawable и примените его к кнопке с помощью атрибута style.

Высота и тень кнопки

Вы можете установить атрибуты elevation и translationZ, чтобы нарисовать тень кнопки.

Настройка анимации тени

Вы можете определить различные свойства теней для разных состояний кнопки и анимировать переход путём определения селектора. Вы можете применить аниматор к кнопке, используя свойство stateListAnimator.

Обратите внимание, что stateListAnimator установлен в null в приведённом выше примере. Это было сделано для удаления аниматора по умолчанию, чтобы elevation и translationZ работали.

Чтобы настроить анимацию тени при изменении состояния кнопок, вам нужно определить селектор, как показано ниже, в папке res/animator и установить свойство stateListAnimator своей темы для определённого аниматора.

Примените следующую тему, которая использует аниматор, к кнопке с использованием атрибута style или theme.

Простая кнопка логина

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

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

Метод setCompoundDrawablesWithIntrinsicBounds() делает то же, что и атрибуты drawableLeft, drawableTop и так далее. В качестве параметров нужно указать, где именно будет размещаться изображение (указываем null в случае, если здесь изображение не нужно).

Источник