CODEWITHSUNDEEP
androidandroid-layoutandroid-styles
Sameer Khan
Sameer Khan

Reputation: 637

Set different color to buttons

I have 6 buttons and want to set colour of 5 buttons to ORANGE (#F08C35) and the last one to PINK(#D81B60). I have created styles (styles.xml) for each one as;

    <style name="MagentaButtonStyle" parent="Widget.AppCompat.Button.Colored">
        <item name="colorButtonNormal">#D81B60</item>
    </style>

    <style name="OrangeButtonStyle" parent="Widget.AppCompat.Button.Colored">
        <item name="colorButtonNormal">#F08C35</item>
    </style>

However all the buttons are set to colorAccent (#FF4081) as it picks the accent color from parent="Widget.AppCompat.Button.Colored".

I tried setting the android:background attr however the entire space of the button changes to the set background and I lose out on the raised button effect.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbarStyle="outsideOverlay"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.sameer.android.myappportfolio.MainActivity"
    tools:showIn="@layout/activity_main">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="20dp"
            android:layout_marginTop="20dp"
            android:text="@string/app0"
            android:textAlignment="center"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button1"
            style="@style/OrangeButtonStyle"
            android:text="@string/app1" />

        <Button
            android:id="@+id/button2"
            style="@style/OrangeButtonStyle"
            android:text="@string/app2" />

        <Button
            android:id="@+id/button3"
            style="@style/OrangeButtonStyle"
            android:text="@string/app3" />

        <Button
            android:id="@+id/button4"
            style="@style/OrangeButtonStyle"
            android:text="@string/app4" />

        <Button
            android:id="@+id/button5"
            style="@style/OrangeButtonStyle"
            android:text="@string/app5" />

        <Button
            android:id="@+id/button6"
            style="@style/MagentaButtonStyle"
            android:text="@string/app6" />

    </LinearLayout>
</ScrollView>

styles.xml pasted below:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="MagentaButtonStyle" parent="Widget.AppCompat.Button">
        <item name="colorButtonNormal">#D81B60</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_gravity">center_horizontal</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:onClick">onClick</item>
    </style>
    <style name="OrangeButtonStyle" parent="Widget.AppCompat.Button">
        <item name="colorButtonNormal">#F08C35</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_gravity">center_horizontal</item>
        <item name="android:textColor">@android:color/black</item>
        <item name="android:onClick">onClick</item>
    </style>
</resources>

Upvotes: 0

Views: 1762

Answers (3)

fragon
fragon

Reputation: 3471

This works for me:

<style name="MagentaButtonStyle" parent="Widget.AppCompat.Button">
    <item name="colorButtonNormal">#D81B60</item>
</style>

<style name="OrangeButtonStyle" parent="Widget.AppCompat.Button">
    <item name="colorButtonNormal">#F08C35</item>
</style>

You should set the parent to "Widget.AppCompat.Button" instead of "Widget.AppCompat.Button.Colored". "Raised button effect" is preserved with this solution as you wanted.

edit:

You should use your style like this to apply it to the button:

<Button
    android:id="@+id/button1"
    android:theme="@style/OrangeButtonStyle"
    android:text="@string/app1" />

Use attribute android:theme= instead of style=. It will work.

Upvotes: 0

dtx12
dtx12

Reputation: 4488

Just use backgroundTint, that's all. Also, if you need it on pre-L use android.support.v7.widget.AppCompatButton and app:backgroundTint, instead of android:backgroundTint

Upvotes: 3

Parth Anjaria
Parth Anjaria

Reputation: 3971

<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android"> 
   <gradient
     android:startColor="@color/drk_button"
     android:endColor="@color/lgt_button"
     android:angle="90">
   </gradient>

   <corners android:radius="20dip" />

   <stroke
     android:width="1px"
     android:color="@color/drk_button" />
</shape>

try this if this helps. you will need to set color . hope this helps

Upvotes: -1

Related Questions