CODEWITHSUNDEEP
androidandroid-layout
John Victor
John Victor

Reputation: 625

Changing Button Color without changing the shape in android

When i say

 button.setBackgroundColor(Color.BLUE);

the button shape changes to rectangle from default shape. I want to change the button color without affecting its original shape. Please help me.

Upvotes: 12

Views: 17977

Answers (9)

Marcelo Cz
Marcelo Cz

Reputation: 56

I had the same problem when using "setBackgroundColor" was changing the shape of the View. I solved it with "setTint"

Upvotes: 0

Joey
Joey

Reputation: 23

It's an old question, but for future seekers, this worked for me...

In drawable the button shape:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:topRightRadius="10dp"
        android:topLeftRadius="10dp" />
</shape>

In my layout.xml for the button:

<Button
    android:id="@+id/button"
    android:layout_width="150dp"
    android:layout_height="38dp"
    android:layout_marginEnd="20dp"
    android:layout_marginBottom="20dp"
    android:background="@drawable/buttonshape"
    android:backgroundTint="@color/colorButtonOrange"
    android:text="@string/button_text"
    android:textColor="@color/colorWhite"/>

With the android:backgroundTint, the Buttons get an orange Color when the activity is started.

In my Activity, I change the button color with only one line:

button.getBackground().setColorFilter(Color.GREY, PorterDuff.Mode.SRC_ATOP);

Upvotes: 0

CHarris
CHarris

Reputation: 2793

This worked for me - changing at run-time/ dynamically. For example, when the button is clicked, the colour changes, but it's shape needs to stay the same.

First, you need to define in xml the button:

       <Button
            android:id="@+id/myButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/buttonshape"
            android:text="Change Colour but keep shape, please" />

You will see above it calls buttonshape, so in your drawable folder:

(It's a rectangle, grey, with a dark grey border of 1dp)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#D3D3D3" />
    <corners android:radius="3dp" />

    <stroke
        android:width="1dp"
        android:color="#aeaeae" />
</shape>

Now a new xml file in drawable folder, buttonpressed.xml, for the button pressed state. The colour will be green, everything else the same.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    android:shape="rectangle">
    <solid android:color="#2AB40E" />
    <corners android:radius="3dp" />

    <stroke
        android:width="1dp"
        android:color="#aeaeae" />
</shape>

Now, on button click in our activity:

 private void myButton() {

        myButton.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

//              keep the slightly rounded shape, when the button is pressed
                myButton.setBackgroundResource(R.drawable.buttonpressed);

etc..etc...

Upvotes: 0

Abhishek Aggarwal
Abhishek Aggarwal

Reputation: 89

I was facing the same problem just a few minutes ago. Using android:backgroundTint property in XML of your layout file instead will solve the issue. The button will retain it's original shape, also the ripple effect won't be lost.

The XML should look something like:

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me!"
        android:textColor="#FFF"
        android:backgroundTint="#2196f3" />

Upvotes: 2

ayesh don
ayesh don

Reputation: 1161

Check with this in your layout.xml

android:background="*****"

Upvotes: 0

Yoann Hercouet
Yoann Hercouet

Reputation: 17986

Here is a solution that worked for me, that contrary to the accepted solution will allow you to change the color dynamically:

myButton = (ImageButton)myView.findViewById(R.id.my_button);
Drawable roundDrawable = getResources().getDrawable(R.drawable.round_button);
roundDrawable.setColorFilter(Color.BLUE, Mode.SRC_ATOP);

if(android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.JELLY_BEAN) {
    myButton.setBackgroundDrawable(roundDrawable);
} else {
    myButton.setBackground(roundDrawable);
}

XML of the "round_button" drawable I used, as an example:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#4db6ac"/>
</shape>

Upvotes: 16

karn
karn

Reputation: 6033

Whenever you change the default background of your button the shape is going to change as the default shape is rectangle and the default background is a shape drawable with rounded corners. If you use any other background this rounded corner effect is lost.

You can achieve the same effect with any color or shape if you use a shape drawable as the background.
Here is how you can achieve this:

  1. Create a shape drawable.
  2. Use this drawable as the button's background.


sample code for shape drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid
        android:color="#f8f8f8"/>
    <corners
        android:radius="4dp"/>
    <padding 
        android:left="10dp"
        android:right="10dp"
        android:top="5dp"
        android:bottom="5dp"/>
    <stroke 
        android:width="1dp"
        android:color="#aeaeae"/>
</shape>


If you want to have a button with a selector then use this xml as the background 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true">
        <shape >
            <solid
                android:color="#ff0000" />
            <stroke 
                android:width="1dp"
                android:color="#ff0000" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:right="10dp"
                android:top="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item >
        <shape >
            <gradient
                android:startColor="#ff2727"
                android:endColor="#890000"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#620000" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:right="10dp"
                android:top="10dp"
                android:bottom="10dp" />
        </shape>        
    </item>
</selector>

This is a selector xml with items as the different shape drawables. If the button is pressed that is the button's state is state_pressed then the top shape drawable is used else the bottom shape drawable is used.
I hope this will help.

Upvotes: 9

Nibha Jain
Nibha Jain

Reputation: 8161

You can create your own custom buttons.

check the below link for help :

http://www.dibbus.com/2011/02/gradient-buttons-for-android/

Upvotes: 0

Drummer RJ
Drummer RJ

Reputation: 1

When you use color object by default the android system uses paint object to fill the button and the paint object can fill only the rectangle,circles shapes rather than the curves If you really want to represent a button with color and curve shape use custom view (canvas)

Upvotes: 0

Related Questions