Кнопки раскраски в Android с материальным дизайном и AppCompat

до AppCompat обновление вышло сегодня я смог изменить цвет кнопок в Android L, но не на более старых версиях. После включения нового обновления AppCompat я не могу изменить цвет для любой версии, когда я пытаюсь, кнопка просто исчезает. Кто-нибудь знает, как изменить цвет кнопки?

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

picture showing desired result

белая кнопка по умолчанию, Красная - это то, что я хотеть.

это то, что я делал ранее, чтобы изменить цвет кнопок в styles.xml:

<item name="android:colorButtonNormal">insert color here</item>

и делать это динамически:

button.getBackground().setColorFilter(getResources().getColor(insert color here), PorterDuff.Mode.MULTIPLY);

также я изменил тему parent из @android:style/Theme.Material.Light.DarkActionBar до Theme.AppCompat.Light.DarkActionBar

25 ответов


официально исправлено в библиотеке поддержки REV. 22 (пт 13 марта 2015). См. соответствующую проблему с кодом google:

https://issuetracker.google.com/issues/37008632

пример использования

тема.XML-код:

<item name="colorButtonNormal">@color/button_color</item>

v21 / тема.в XML

<item name="android:colorButtonNormal">@color/button_color</item>

Edit (22.06.2016):

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

Оригинальный Ответ:

поскольку этот AppCompat не поддерживает кнопку, Вы можете использовать xml в качестве фона. Для этого я взглянул на исходный код Android и нашел связанные файлы для материалов для укладки кнопки.

1-Посмотрите на оригинальную реализацию кнопки материала из источника.

посмотреть btn_default_material.xml на Android исходный код.

вы можете скопировать файл в папку проектов drawable-v21. Но не прикасайтесь к цвету attr здесь. Файл нужно менять-это второй файл.

drawable-v21 / custom_btn.в XML

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="@drawable/btn_default_mtrl_shape" />
</ripple>

2-получить форму оригинала материальная кнопка

как вы понимаете, внутри этого drawable есть форма, которую вы можете найти в этот файл исходного кода.

<inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:insetLeft="@dimen/button_inset_horizontal_material"
   android:insetTop="@dimen/button_inset_vertical_material"
   android:insetRight="@dimen/button_inset_horizontal_material"
   android:insetBottom="@dimen/button_inset_vertical_material">
<shape android:shape="rectangle">
    <corners android:radius="@dimen/control_corner_material" />
    <solid android:color="?attr/colorButtonNormal" />
    <padding android:left="@dimen/button_padding_horizontal_material"
             android:top="@dimen/button_padding_vertical_material"
             android:right="@dimen/button_padding_horizontal_material"
             android:bottom="@dimen/button_padding_vertical_material" />
</shape>

3-Получение размеров материальной кнопки

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

4-Создайте еще один drawable файл для старых версий

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

drawable / custom_btn.в XML

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

    <!-- pressed state -->
    <item android:state_pressed="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/PRESSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>

    <!-- focused state -->
    <item android:state_focused="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/FOCUSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>

    <!-- normal state -->
    <item>
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/NORMAL_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
</selector>

результат

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


это было улучшено в v23.0.0 библиотеки AppCompat с добавлением дополнительных тем, включая

виджет.Совместимости приложений.Кнопка.Цветные

прежде всего включите зависимость appCompat, если вы еще не

compile('com.android.support:appcompat-v7:23.0.0') {
    exclude group: 'com.google.android', module: 'support-v4'
}

теперь, поскольку вам нужно использовать v23 приложения compat, вам также нужно будет настроить SDK-v23!

    compileSdkVersion = 23
    targetSdkVersion = 23

в своем values/theme

<item name="android:buttonStyle">@style/BrandButtonStyle</item>

в вашей values/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

в своем values-v21/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="android:colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

так как ваша тема кнопки основана на Widget.AppCompat.Button.Colored цвет текста на кнопке по умолчанию белый!

но, кажется, есть проблема, когда вы отключите кнопка, кнопка изменит свой цвет на светло-серый, а цвет текста останется белым!

обходной путь для этого-специально установить цвет текста на кнопке на белый! как я сделал в показанном стиле выше.

теперь вы можете просто определить свою кнопку и позволить AppCompat сделать все остальное:)

<Button
        android:layout_width="200dp"
        android:layout_height="48dp" />

Отключенном Состоянии Disabled state

Включенном Состоянии Enabled State


в библиотеке поддержки Android 22.1.0 Google сделал Button оттенок известны. Таким образом, еще один способ настроить цвет фона кнопки-использовать .

например,

<Button
       android:id="@+id/add_remove_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:backgroundTint="@color/bg_remove_btn_default"
       android:textColor="@android:color/white"
       tools:text="Remove" />

для поддержки цветных кнопок используйте последнюю библиотеку AppCompat (>23.2.1) С:

надуть-XML

Виджет AppCompat:

android.support.v7.widget.AppCompatButton

Стиль AppCompat:

style="@style/Widget.AppCompat.Button.Colored"

NB! чтобы установить пользовательский цвет в xml: используйте attr:app вместо android

(использовать alt+enter или объявить xmlns:app="http://schemas.android.com/apk/res-auto" использовать app)

app: backgroundTint= "@color / your_custom_color"

пример:

<android.support.v7.widget.AppCompatButton
     style="@style/Widget.AppCompat.Button.Colored"
     app:backgroundTint="@color/your_custom_color"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"     
     android:text="Colored Button"/>

или установите его программно-JAVA

 ViewCompat.setBackgroundTintList(your_colored_button,
 ContextCompat.getColorStateList(getContext(),R.color.your_custom_color));

С последней библиотекой поддержки вы можете просто наследовать свою активность от AppCompatActivity, поэтому он будет надувать Button as AppCompatButton и дать вам возможность стиль цвета каждой кнопки на макете с использованием android:theme="@style/SomeButtonStyle", где SomeButtonStyle - это:

<style name="SomeButtonStyle" parent="@android:style/Widget.Button">
    <item name="colorButtonNormal">@color/example_color</item>
</style>

работал для меня в 2.3.7, 4.4.1, 5.0.2


Если вы хотите ниже style

enter image description here

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

style="@style/Widget.AppCompat.Button.Borderless.Colored"

Если вы хотите этот стиль

enter image description here

добавить ниже код

style="@style/Widget.AppCompat.Button.Colored"

ответ тема не стиль

проблема в том, что цвет кнопки прилипает к colorButtonNormal темы. Я пытался изменить стиль по-разному, но безуспешно. поэтому я изменил тему кнопки.

Создайте тему с colorButtonNormal и colorPrimary:

<style name="ThemeAwesomeButtonColor" parent="AppTheme">
    <item name="colorPrimary">@color/awesomePrimaryColor</item>
    <item name="colorButtonNormal">@color/awesomeButtonColor</item>
</style>

используйте эту тему в кнопке

<Button
        android:id="@+id/btn_awesome"
        style="@style/AppTheme.Button"
        android:theme="@style/ThemeAwesomeButtonColor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_awesome"/>

" AppTheme.Кнопка " может быть любая вещь расширяет стиль кнопки, как здесь я использую основной цвет для цвета текста:

<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
    ...
    <item name="android:textColor">?attr/colorPrimary</item>
    ...
</style>

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


Я только что создал библиотеку android, которая позволяет легко изменять цвет кнопки и цвет пульсации

https://github.com/xgc1986/RippleButton

<com.xgc1986.ripplebutton.widget.RippleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn"
    android:text="Android button modified in layout"
    android:textColor="@android:color/white"
    app:buttonColor="@android:color/black"
    app:rippleColor="@android:color/white"/>

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


эта работа для меня с appcompat-v7: 22.2.0 в android + 4.0

в своем стили.в XML

<style name="Button.Tinted" parent="Widget.AppCompat.Button">
    <item name="colorButtonNormal">YOUR_TINT_COLOR</item>
    <item name="colorControlHighlight">@color/colorAccent</item>
    <item name="android:textColor">@android:color/white</item>
</style>

в файле layout

<Button
    android:id="@+id/but_next"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/but_continue"
    android:theme="@style/Button.Tinted" />

планировка:

<android.support.v7.widget.AppCompatButton
  style="@style/MyButton"
  ...
  />

стили.XML-код:

<style name="MyButton" parent="Widget.AppCompat.Button.Colored">
  <item name="backgroundTint">@color/button_background_selector</item>
  <item name="android:textColor">@color/button_text_selector</item>
</style>

color / button_background_selector.XML-код:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#555555"/>
    <item android:color="#00ff00"/>
</selector>

цвет/button_text_selector.XML-код:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#888888"/>
    <item android:color="#ffffff"/>
</selector>

для тех, кто использует ImageButton вот как вы делаете это:

в стиле.XML-код:

<style name="BlueImageButton" parent="Base.Widget.AppCompat.ImageButton">
    <item name="colorButtonNormal">@color/primary</item>
    <item name="android:tint">@color/white</item>
</style>

в v21 / стиле.XML-код:

<style name="BlueImageButton" parent="Widget.AppCompat.ImageButton">
    <item name="android:colorButtonNormal">@color/primary</item>
    <item name="android:tint">@color/white</item>
</style>

затем в файле layout:

<android.support.v7.widget.AppCompatImageButton
    android:id="@+id/my_button"
    android:theme="@style/BlueImageButton"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:layout_gravity="center_vertical"
    android:src="@drawable/ic_check_black_24dp"
    />

Если вы используете решение стиля с colorButtonNormal не забудьте унаследовать от виджет.Совместимости приложений.Кнопка.Цветные таким образом, эффект пульсации работает;)

Как

<style name="CustomButtonStyle" parent="Widget.AppCompat.Button.Colored">
      <item name="colorButtonNormal">@android:color/white</item>
</style>

Если вы хотите только кнопку" плоский " материал, вы можете настроить их фон с помощью selectableItemBackground Как пояснил здесь.


для меня проблема заключалась в том, что в Android 5.0 android:colorButtonNormal не имел никакого эффекта, и на самом деле, нет элемента из темы (например,android:colorAccent), но в Android 4.4.3, например, сделал. Проект был настроен с compileSdkVersion и targetSdkVersion до 22, поэтому я сделал все изменения как @Muhammad Alfaifi sugessted, но в конце концов, я заметил, что проблема была buildToolsVersion, это не было обновлено. Однажды я переоделся в 23.0.1, все начинает работать почти как обычно. Сейчас, the android:colorButtonNormal по-прежнему не имеет эффекта, но, по крайней мере, кнопка реагирует на android:colorAccent, что для меня приемлемо.

Я надеюсь, что этот намек может помочь кому-то. Примечание: я применил стиль непосредственно к кнопке, так как кнопка android:theme=[...] также не имеет эффекта.


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

    <style name="Theme.MyApp.Button.Primary.Blue" parent="Widget.AppCompat.Button">
        <item name="colorButtonNormal">@color/someColor</item>
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>

Теперь в стилях.xml add

    <style name="MyApp.Button.Primary.Blue" parent="">
        <item name="android:theme">@style/Theme.MyApp.Button.Primary.Blue</item>
    </style>

Теперь в вашем макете просто укажите на стиль в вашей кнопке

    <Button
        ...
        style="@style/MyApp.Button.Primary.Blue"
        ...  />

обновление

использовать библиотека поддержки проектирования (23.2.0) и appcompatwidgets ниже

В Библиотеке Поддержки Android 22.1 :

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

полный список виджетов tint aware:

AppCompatAutoCompleteTextView
AppCompatButton
AppCompatCheckBox
AppCompatCheckedTextView
AppCompatEditText
AppCompatMultiAutoCompleteTextView
AppCompatRadioButton
AppCompatRatingBar
AppCompatSpinner
AppCompatTextView

материал дизайн для устройств Pre-Lollipop :

AppCompat (он же ActionBarCompat) начинался как backport Android 4.0 ActionBar API для устройств, работающих на пряниках, предоставление общего уровня API поверх backported реализации и в рамках реализации. AppCompat v21 предоставляет API и набор функций, что является актуальной с Android 5.0



Если вы хотите использовать стиль AppCompat, как виджет.Совместимости приложений.Кнопка , базы.Штучка.Совместимости приложений.Кнопка.Цветные, etc., вам нужно использовать эти стили с совместимыми представлениями из библиотеки поддержки.

код ниже не работает для устройств pre-lolipop:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:theme="@style/Widget.AppCompat.Button" />

вам нужно использовать AppCompatButton для включения стилей AppCompat:

<android.support.v7.widget.AppCompatButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:theme="@style/Widget.AppCompat.Button" />

Я на самом деле не хотел менять свои пользовательские стили кнопок, но, к сожалению, они больше не работали.

мое приложение имеет minSdkVersion 9, и все работало раньше.

Я не знаю, почему, но так как я удалил android: перед buttonStyle он, кажется, снова работает

сейчас = работает:

<item name="buttonStyle">@style/ButtonmyTime</item>

before = просто серый материал кнопки:

<item name="android:buttonStyle">@style/ButtonmyTime</item>

у меня нет папки spezial для newver android версии, так как мои кнопки довольно плоские, и они должны выглядеть одинаково во всех версиях android.

может быть, кто-то может сказать мне, почему я должен был удалить " android:" ImageButton все еще работает с " android:"

<item name="android:imageButtonStyle">@style/ImageButtonmyTimeGreen</item>

после 2 дней поиска ответов тема кнопки не работала для меня в API

мое единственное решение-переопределить тонировку AppCompatButton не только с помощью базовой темы приложения "colorButtonNormal", но и с помощью backgroundTint вида:

public class AppCompatColorButton extends AppCompatButton {

    public AppCompatColorButton(Context context) {
        this(context, null);
    }

    public AppCompatColorButton(Context context, AttributeSet attrs) {
        this(context, attrs, android.support.v7.appcompat.R.attr.buttonStyle);
    }

    public AppCompatColorButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        if (TintManager.SHOULD_BE_USED) {
            setSupportBackgroundTintList(createButtonColorStateList(getContext(), attrs, defStyleAttr));
        }
    }

    static final int[] DISABLED_STATE_SET = new int[]{-android.R.attr.state_enabled};
    static final int[] FOCUSED_STATE_SET = new int[]{android.R.attr.state_focused};
    static final int[] PRESSED_STATE_SET = new int[]{android.R.attr.state_pressed};
    static final int[] EMPTY_STATE_SET = new int[0];

    private ColorStateList createButtonColorStateList(Context context, AttributeSet attrs, int defStyleAttr) {
        final int[][] states = new int[4][];
        final int[] colors = new int[4];
        int i = 0;

        final int themeColorButtonNormal = ThemeUtils.getThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorButtonNormal);
        /*TypedArray a = context.obtainStyledAttributes(attrs, new int[] { android.R.attr.backgroundTint }, defStyleAttr, 0);
        final int colorButtonNormal = a.getColor(0, themeColorButtonNormal);*/
        TypedArray a = context.obtainStyledAttributes(attrs, android.support.v7.appcompat.R.styleable.View, defStyleAttr, 0);
        final int colorButtonNormal = a.getColor(android.support.v7.appcompat.R.styleable.View_backgroundTint, themeColorButtonNormal);
        a.recycle();
        final int colorControlHighlight = ThemeUtils.getThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorControlHighlight);

        // Disabled state
        states[i] = DISABLED_STATE_SET;
        colors[i] = ThemeUtils.getDisabledThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorButtonNormal);
        i++;

        states[i] = PRESSED_STATE_SET;
        colors[i] = ColorUtils.compositeColors(colorControlHighlight, colorButtonNormal);
        i++;

        states[i] = FOCUSED_STATE_SET;
        colors[i] = ColorUtils.compositeColors(colorControlHighlight, colorButtonNormal);
        i++;

        // Default enabled state
        states[i] = EMPTY_STATE_SET;
        colors[i] = colorButtonNormal;
        i++;

        return new ColorStateList(states, colors);
    }
}

затем вы можете определить свой цвет кнопки следующим образом:

<com.example.views.AppCompatColorButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:backgroundTint="#ffff0000"
            app:backgroundTint="#ffff0000"
            android:text="Button"
            android:textColor="@android:color/white" />

изменить цвет одной кнопки

ViewCompat.setBackgroundTintList(button, getResources().getColorStateList(R.color.colorId));

этот ответ так помог мне прийти к ответу https://stackoverflow.com/a/30277424/3075340

Я использую этот метод утилиты для установки фонового оттенка кнопки. Он работает с устройствами pre-lollipop:

// Set button background tint programmatically so it is compatible with pre-lollipop devices.
public static void setButtonBackgroundTintAppCompat(Button button, ColorStateList colorStateList){
    Drawable d = button.getBackground();
    if (button instanceof AppCompatButton) {
        // appcompat button replaces tint of its drawable background
        ((AppCompatButton)button).setSupportBackgroundTintList(colorStateList);
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // Lollipop button replaces tint of its drawable background
        // however it is not equal to d.setTintList(c)
        button.setBackgroundTintList(colorStateList);
    } else {
        // this should only happen if
        // * manually creating a Button instead of AppCompatButton
        // * LayoutInflater did not translate a Button to AppCompatButton
        d = DrawableCompat.wrap(d);
        DrawableCompat.setTintList(d, colorStateList);
        button.setBackgroundDrawable(d);
    }

}

Как использовать в коде:

Utility.setButtonBackgroundTintAppCompat(myButton,
ContextCompat.getColorStateList(mContext, R.color.your_custom_color));

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


Я android:textColor to @null в моей теме кнопки, и это помогает.

стили.в XML

<style name="Button.Base.Borderless" parent="Widget.AppCompat.Button.Borderless.Colored">
    <item name="android:textColor">@null</item>
</style>

some_layout.в XML

<Button
    style="@style/Button.Base.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hint" />
теперь цвет текста colorAccent определена в AppTheme
<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">@color/colorAccent</item>
    <item name="borderlessButtonStyle">@style/Button.Base.Borderless</item>
    <item name="alertDialogTheme">@style/AlertDialog</item>
</style>

Я использую это. Эффект пульсации и кнопка нажмите тень работает.

стиль.в XML

<style name="Button.Red" parent="Widget.AppCompat.Button.Colored">
    <item name="android:textColor">@color/material_white</item>
    <item name="android:backgroundTint">@color/red</item>
</style>
на:
<Button
        style="@style/Button.Red"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/close"/>

другое простое решение с помощью AppCompatButton

<android.support.v7.widget.AppCompatButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     style="@style/Widget.AppCompat.Button.Colored"
     app:backgroundTint="@color/red"
     android:text="UNINSTALL" />