Android кнопка с градиентом

Android – настраиваемая кнопка с элементами рисования и градиентом программно

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

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

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

Любые указатели будут оценены.

Edit2: см. Вторую попытку ниже.

Edit3: причина щедрости заключается в том, чтобы выяснить, почему подклассы drawable не работают. Градиент не так важен.

Edit4: обнаружено drawRect перед getTextBounds () в DrawableView :: OnDraw ().

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

1) Используйте выравнивание, чтобы нарисовать текст в центре в вашем DrawableView (должно помочь, если текст кажется неактивным ):

2) Чтобы ответить на ваш вопрос, причина щедрости заключается в том, чтобы выяснить, почему подклассификация не работает :

Я полагаю, это потому, что вы создаете DrawableView в MyDrawable и не добавляете его в какой-либо контейнер, что означает, что вы не измеряете и не планируете его. Таким образом, это, вероятно, нулевая высота и ширина.

3) Я предлагаю вам использовать Button вместо пользовательских представлений и чертежей. Вы выходите из Button и делаете дополнительные чертежи в конце метода onDraw, примерно так:

Исходный неправильный ответ

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

Попробуйте проверить, нужно ли вам звонить:

• super.onDraw(canvas) в DrawableView.onDraw
• super.draw(canvas) в MyDrawable.draw

Используйте этот код, чтобы сделать кнопку градиента

Не рекомендуется создавать Drawable в зависимости от вида. Как предложил Евгений Печанец, ставьте MyDrawable и DrawableView.

Вы используете ShapeDrawables только в MyDrawable, поэтому вы можете перенести его из DrawableView.

Это может быть примерно так:

Вы можете не использовать ShapeDrawable и рисовать фигуры самостоятельно:

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

Источник

Делаем красивые кнопки в 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 в случае, если здесь изображение не нужно).

Источник

Gradient Drawable in Android — Create Gradient Backgrounds

LAST UPDATED: AUGUST 10, 2021

We have seen the Gradient colors on many websites as backgrounds, used in App logos, like in the Instagram logo shown below, App background, buttons, progress bars, etc. A gradient makes the UI of any app, be it Mobile App or a website, more beautiful and vibrant. Many developers are using gradient in their apps and websites to make it look more attractive. So in this tutorial, we will learn how to set a gradient background for our Android App activity.

What is Gradient?

According to Wikipedia:

In computer graphics, a color gradient specifies a range of position-dependent colors, usually used to fill a region. For example, many window managers allow the screen background to be specified as a gradient. The colors produced by a gradient vary continuously with the position, producing smooth color transitions.

A color gradient is also known as a color ramp or a color progression. In assigning colors to a set of values, a gradient is a continuous colormap, a type of color scheme.

So let’s add a simple gradient to our Android App.

Step 1: Create a new Project

Open Your Android Studio Click on «Start a new Android Studio project» (Learn how to setup Android Studio and create your first Android project)

Choose «Empty Activity» from the project template window and click Next

Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial), and minimum SDK(we are using API 19: Android 4.4 (KitKat))

Next click on the Finish button after filling the above details

Now, wait for the project to finish the build.

Step 2: Creating Gradient Color

To create a gradient color we need to create a .xml file in the drawable folder. So go to app -> res -> drawable and right-click on drawable -> New -> Drawable Resource File and create gradient_drawable.xml file.

The code of gradient_drawable.xml file is shown below:

As you can see in the code above, we are using the gradient tag along with providing android:startColor , android:centerColor and android:endColor attributes to define the color that will be used in the gradient. So let’s learn about the attributes available in the gradient drawable.

XML attributes of Gradient Drawable

Following are the attributes of the drawable:

Start color of the gradient.

The value of color may be in any one of «#rgb», «#argb», «#rrggbb», «#aarrggbb» forms

End color of the gradient

The value of color may be in any one of «#rgb», «#argb», «#rrggbb», «#aarrggbb» forms

The Center color of the gradient. It may be optional but you can use it if you want

The value of color may be in any one of «#rgb», «#argb», «#rrggbb», «#aarrggbb» forms

X position of the center point of the gradient within the shape as a fraction of the width

0.5 is the default value

Y-position of the center point of the gradient within the shape as a fraction of the height

0.5 is the default value

The angle of the gradient and it is only used with the linear gradient

It must be multiple of 45 in the range [0, 315]

It is used to set the type of gradient and the default value is linear . and it is of 3 types

It is used to set the radius of the gradient. It is only used with the radial gradient.

Step 3: Modify activity_main.xml

Now open the activity_main.xml file and remove the default code and change the layout to RelativeLayout and set it’s background to gradient background as shown below:

with this our activity_main.xml is done and the complete code will look like:

And the output of the above is shown below:

We can also add the gradient to different Views and layouts in our Android App. Let’s cover a few other Android App components in which we can use gradient backgrounds.

Gradient background with Button:

Here we will use the gradient background for button:

Output of the above code is:

Gradient background with TextView:

Here we will use the gradient background for TextView:

The output of the above code is:

Gradient background with ImageView:

Here we will use the gradient background for ImageView:

The output of the above code is:

Gradient background with SeekBar:

Here we will use the gradient background for SeekBar:

The output of the above code is:

Conclusion:

In just 3 simple steps we have integrated and shown you the basic example for creating a Gradient Drawable in your android app. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.

Источник

Attributes	Description
android:startColor