it-swarm.com.ru

Стандартная кнопка Android другого цвета

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

Наилучший способ, который я нашел для этого, - это поменять объект Button на объект рисования, расположенный в res/drawable/red_button.xml:

<?xml version="1.0" encoding="utf-8"?>    
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:drawable="@drawable/red_button_pressed" />
    <item Android:state_focused="true" Android:drawable="@drawable/red_button_focus" />
    <item Android:drawable="@drawable/red_button_rest" />
</selector>

Но для этого требуется, чтобы я фактически создал три разных рисования для каждой кнопки, которую я хочу настроить (один для кнопки в состоянии покоя, один для фокусировки и один для нажатия). Это кажется более сложным и не СУХИМ, чем мне нужно.

Все, что я действительно хочу сделать, это применить какое-то преобразование цвета к кнопке. Есть ли более простой способ изменить цвет кнопки, чем я?

716
emmby

Я обнаружил, что все это можно сделать в одном файле довольно легко. Поместите что-то вроде следующего кода в файл с именем custom_button.xml, а затем установите background="@drawable/custom_button" в виде кнопок:

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item Android:state_pressed="true" >
        <shape>
            <gradient
                Android:startColor="@color/yellow1"
                Android:endColor="@color/yellow2"
                Android:angle="270" />
            <stroke
                Android:width="3dp"
                Android:color="@color/grey05" />
            <corners
                Android:radius="3dp" />
            <padding
                Android:left="10dp"
                Android:top="10dp"
                Android:right="10dp"
                Android:bottom="10dp" />
        </shape>
    </item>

    <item Android:state_focused="true" >
        <shape>
            <gradient
                Android:endColor="@color/orange4"
                Android:startColor="@color/orange5"
                Android:angle="270" />
            <stroke
                Android:width="3dp"
                Android:color="@color/grey05" />
            <corners
                Android:radius="3dp" />
            <padding
                Android:left="10dp"
                Android:top="10dp"
                Android:right="10dp"
                Android:bottom="10dp" />
        </shape>
    </item>

    <item>        
        <shape>
            <gradient
                Android:endColor="@color/blue2"
                Android:startColor="@color/blue25"
                Android:angle="270" />
            <stroke
                Android:width="3dp"
                Android:color="@color/grey05" />
            <corners
                Android:radius="3dp" />
            <padding
                Android:left="10dp"
                Android:top="10dp"
                Android:right="10dp"
                Android:bottom="10dp" />
        </shape>
    </item>
</selector>
710
emmby

Следуя ответу Томаша, вы также можете программно установить оттенок всей кнопки, используя режим умножения PorterDuff. Это изменит цвет кнопки, а не только оттенок.

Если вы начинаете со стандартной серой затененной кнопки:

button.getBackground().setColorFilter(0xFFFF0000, PorterDuff.Mode.MULTIPLY);

даст вам красную затененную кнопку,

button.getBackground().setColorFilter(0xFF00FF00, PorterDuff.Mode.MULTIPLY);

даст вам зеленую кнопку и т. д., где первое значение - это цвет в шестнадцатеричном формате.

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

304
conjugatedirection

Майк, тебя могут заинтересовать цветовые фильтры.

Пример:

button.getBackground().setColorFilter(new LightingColorFilter(0xFFFFFFFF, 0xFFAA0000));

попробуйте это, чтобы получить цвет, который вы хотите.

145
Tomasz

Это мое решение, которое отлично работает, начиная с API 15 . Это решение сохраняет все эффекты нажатия кнопок по умолчанию, например, материал RippleEffect. Я не тестировал его на более низких API, но он должен работать.

Все, что вам нужно сделать, это:

1) Создайте стиль, который меняет только colorAccent:

<style name="Facebook.Button" parent="ThemeOverlay.AppCompat">
    <item name="colorAccent">@color/com_facebook_blue</item>
</style>

Я рекомендую использовать ThemeOverlay.AppCompat или ваш основной AppTheme в качестве родительского для сохранения остальных ваших стилей.

2) Добавьте эти две строки в ваш виджет button:

style="@style/Widget.AppCompat.Button.Colored"
Android:theme="@style/Facebook.Button"

Иногда ваше новое colorAccent не отображается в Android Studio Preview, но при запуске приложения на телефоне цвет изменится.


Пример кнопки виджета

<Button
    Android:id="@+id/sign_in_with_facebook"
    style="@style/Widget.AppCompat.Button.Colored"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="center"
    Android:text="@string/sign_in_facebook"
    Android:textColor="@Android:color/white"
    Android:theme="@style/Facebook.Button" />

Sample Button with custom color

80
RediOne1

Теперь вы также можете использовать appcompat-v7 AppCompatButton с атрибутом backgroundTint:

<Android.support.v7.widget.AppCompatButton
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:backgroundTint="#ffaa00"/>
56
Nilhcem

Мне нравится предложение цветового фильтра в предыдущих ответах от @conjugatedirection и @Tomasz; Однако я обнаружил, что предоставленный код не так легко применяется, как я ожидал.

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

Из моего прочтения исходного вопроса, идеальным решением было бы то, которое не включает никаких изображений. Принятый ответ с использованием custom_button.xml от @emmby, вероятно, лучше подходит, чем цветовые фильтры, если это ваша цель. В моем случае я начинаю с png-изображения от дизайнера пользовательского интерфейса того, как должна выглядеть кнопка. Если я установлю фон кнопки на это изображение, обратная связь по умолчанию будет полностью потеряна. Этот код заменяет это поведение программным эффектом затемнения.

button.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 0x6D6D6D sets how much to darken - Tweak as desired
                setColorFilter(v, 0x6D6D6D);
                break;
            // remove the filter when moving off the button
            // the same way a selector implementation would 
            case MotionEvent.ACTION_MOVE:
                Rect r = new Rect();
                v.getLocalVisibleRect(r);
                if (!r.contains((int) event.getX(), (int) event.getY())) {
                    setColorFilter(v, null);
                }
                break;
            case MotionEvent.ACTION_OUTSIDE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                setColorFilter(v, null);
                break;
        }
        return false;
    }

    private void setColorFilter(View v, Integer filter) {
        if (filter == null) v.getBackground().clearColorFilter();
        else {
            // To lighten instead of darken, try this:
            // LightingColorFilter lighten = new LightingColorFilter(0xFFFFFF, filter);
            LightingColorFilter darken = new LightingColorFilter(filter, 0x000000);
            v.getBackground().setColorFilter(darken);
        }
        // required on Android 2.3.7 for filter change to take effect (but not on 4.0.4)
        v.getBackground().invalidateSelf();
    }
});

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

22
Stan Kurdziel

Если вы создаете цветные кнопки с помощью XML, вы можете сделать код немного чище, указав сфокусированное и нажатое состояние в отдельном файле и повторно используя их. Моя зеленая кнопка выглядит так:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item Android:state_focused="true" Android:drawable="@drawable/button_focused"/>
    <item Android:state_pressed="true" Android:drawable="@drawable/button_pressed"/>

    <item>
        <shape>
            <gradient Android:startColor="#ff00ff00" Android:endColor="#bb00ff00" Android:angle="270" />
            <stroke Android:width="1dp" Android:color="#bb00ff00" />
            <corners Android:radius="3dp" />
            <padding Android:left="10dp" Android:top="10dp" Android:right="10dp" Android:bottom="10dp" />
        </shape>
    </item>

</selector>
16
haemish

Самое короткое решение, которое работает с любой версией Android:

<Button
     app:backgroundTint="@color/my_color"

Notes/Требования :

  • Используйте пространство имен app: и не используйте пространство имен Android:!
  • версия приложения> 24.2.0

    зависимостей {compile 'com.Android.support:appcompat-v7:25.3.1'}

Объяснение : enter image description here

12
user1185087

Я использую этот подход

style.xml

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="Android:colorPrimaryDark">#413152</item>
    <item name="Android:colorPrimary">#534364</item>
    <item name="Android:colorAccent">#534364</item>
    <item name="Android:buttonStyle">@style/MyButtonStyle</item>
</style>

<style name="MyButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="Android:colorButtonNormal">#534364</item>
    <item name="Android:textColor">#ffffff</item>
</style>

Как вы можете видеть сверху, я использую собственный стиль для моей кнопки. Цвет кнопки соответствует цвету акцента. Я считаю, что это гораздо лучший подход, чем установка Android:background, поскольку я не потеряю эффект ряби, который обеспечивает Google.

9
Kelok Chan

Используйте это таким образом:

buttonOBJ.getBackground().setColorFilter(Color.parseColor("#YOUR_HEX_COLOR_CODE"), PorterDuff.Mode.MULTIPLY);
8
IntelliJ Amiya

Теперь есть гораздо более простой способ: Android-holo-colors.com

Это позволит вам легко менять цвета всех голографических рисунков (кнопок, блесен, ...). Вы выбираете цвет и затем загружаете Zip-файл, содержащий рисунки для всех разрешений.

8
Dalmas

В <Button> используйте Android:background="#33b5e5". или лучше Android:background="@color/navig_button"

4
lalitm

Вы также можете использовать этот онлайн-инструмент для настройки своей кнопки http://angrytools.com/Android/button/ и использовать Android:background="@drawable/custom_btn" для определения настраиваемой кнопки в макете.

3
JRE.exe

Библиотека компонентов DroidUX имеет виджет ColorButton , цвет которого можно легко изменить как с помощью определения XML, так и программно во время выполнения, так что вы даже можете позволить пользователю устанавливать кнопки цвет/тема, если ваше приложение позволяет это.

3
Ricky Lee

Вы можете установить тему вашей кнопки на это

<style name="AppTheme.ButtonBlue" parent="Widget.AppCompat.Button.Colored">
 <item name="colorButtonNormal">@color/HEXColor</item>
 <item name="Android:textColor">@color/HEXColor</item>
</style>
2
Manoj Bhadane

Самый простой способ - просто определить пользовательский класс Button, который принимает все свойства, которые вам нужны, такие как радиус, градиент, цвет нажатия, нормальный цвет и т.д., А затем просто использовать это в макетах XML вместо настройки фона с помощью XML. Образец здесь

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

Результат (не использовался селектор фона).

Обычная кнопка

Normal Image

Нажатая кнопка

enter image description here

1
redDragonzz

В соответствии с рекомендациями по дизайну материала, вы должны использовать стиль, как показано ниже

<style name="MyButton" parent="Theme.AppCompat.Light>
    <item name="colorControlHighlight">#F36F21</item>
    <item name="colorControlHighlight">#FF8D00</item>
</style>

и в макете добавьте это свойство к вашей кнопке

    Android:theme="@style/MyButton"
0
Shivam

Это просто .. добавить эту зависимость в ваш проект и создать кнопку с 1. Любая форма 2. Любой цвет 3. Любая граница 4. С эффектами материала

https://github.com/manojbhadane/QButton

<com.manojbhadane.QButton
       Android:layout_width="match_parent"
       Android:layout_height="wrap_content"
       Android:text="OK"
       app:qb_backgroundColor="@color/green"
       app:qb_radius="100"
       app:qb_strokeColor="@color/darkGreen"
       app:qb_strokeWidth="5" />
0
Manoj Bhadane

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

import Android.annotation.TargetApi;
import Android.content.Context;
import Android.graphics.Color;
import Android.graphics.ColorFilter;
import Android.graphics.LightingColorFilter;
import Android.graphics.drawable.Drawable;
import Android.graphics.drawable.LayerDrawable;
import Android.os.Build;
import Android.util.AttributeSet;
import Android.widget.Button;

public class DimmableButton extends Button {

    public DimmableButton(Context context) {
        super(context);
    }

    public DimmableButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public DimmableButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @SuppressWarnings("deprecation")
    @Override
    public void setBackgroundDrawable(Drawable d) {
        // Replace the original background drawable (e.g. image) with a LayerDrawable that
        // contains the original drawable.
        DimmableButtonBackgroundDrawable layer = new DimmableButtonBackgroundDrawable(d);
        super.setBackgroundDrawable(layer);
    }

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    @Override
    public void setBackground(Drawable d) {
        // Replace the original background drawable (e.g. image) with a LayerDrawable that
        // contains the original drawable.
        DimmableButtonBackgroundDrawable layer = new DimmableButtonBackgroundDrawable(d);
        super.setBackground(layer);
    }

    /**
     * The stateful LayerDrawable used by this button.
     */
    protected class DimmableButtonBackgroundDrawable extends LayerDrawable {

        // The color filter to apply when the button is pressed
        protected ColorFilter _pressedFilter = new LightingColorFilter(Color.LTGRAY, 1);
        // Alpha value when the button is disabled
        protected int _disabledAlpha = 100;
        // Alpha value when the button is enabled
        protected int _fullAlpha = 255;

        public DimmableButtonBackgroundDrawable(Drawable d) {
            super(new Drawable[] { d });
        }

        @Override
        protected boolean onStateChange(int[] states) {
            boolean enabled = false;
            boolean pressed = false;

            for (int state : states) {
                if (state == Android.R.attr.state_enabled)
                    enabled = true;
                else if (state == Android.R.attr.state_pressed)
                    pressed = true;
            }

            mutate();
            if (enabled && pressed) {
                setColorFilter(_pressedFilter);
            } else if (!enabled) {
                setColorFilter(null);
                setAlpha(_disabledAlpha);
            } else {
                setColorFilter(null);
                setAlpha(_fullAlpha);
            }

            invalidateSelf();

            return super.onStateChange(states);
        }

        @Override
        public boolean isStateful() {
            return true;
        }
    }

}
0
Matthew Cawley

значения\styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="RedAccentButton" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorAccent">#ff0000</item>
</style>

затем:

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:text="text" />

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:enabled="false"
    Android:text="text" />

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:text="text"
    Android:theme="@style/RedAccentButton" />

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:enabled="false"
    Android:text="text"
    Android:theme="@style/RedAccentButton" />

result

0
Milan Hlinák