I am changing some button background colors before the activity is shown and when the buttons are displayed, they are missing the white space around them.
How do I get the buttons to be red, where the grey is, and keep the white spacing?
You probably have missed setting margin for layout. Actually there is a white space around your button so all the buttons are touched, so when you set background that white space also turns red. This should be okay I guess.!
Layout :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<Button
android:id="#+id/one"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="About"
android:layout_margin="5dp" />
<Button
android:id="#+id/two"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Gallery"
android:layout_margin="5dp"/>
<Button
android:id="#+id/third"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Media"
android:layout_margin="5dp"/>
</LinearLayout>
In strings.xml
<color name="red">#FF0000</color>
In Java
one = (Button) findViewById(R.id.one);
two = (Button) findViewById(R.id.two);
three = (Button) findViewById(R.id.third);
one.setBackgroundResource(R.color.red);
two.setBackgroundResource(R.color.red);
three.setBackgroundResource(R.color.red);
Output
Create a red_button.xml in drawable like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:width="2dp"
android:color="#80FFFFFF" />
<corners android:radius="25dp" />
<gradient android:angle="270"
android:centerColor="#ff0000"
android:endColor="#ff0000"
android:startColor="#ff0000" />
</shape>
To get same shape as the default Button
You can play around with radius and stroke width and stroke color to get your Button as you want.
EDIT: You can add the color to original default Button like this:
Drawable d = yourButton.getBackground();
PorterDuffColorFilter filter = new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP); // or whatever color you like
d.setColorFilter(filter);
Related
I just updated my android Studio and every time that I try to change the background color of AppCompatButton the layout gets flat and looses the ripple effect, it wasn't like that.
And normal :
In my old project, works fine too!
<androidx.appcompat.widget.AppCompatButton
android:clickable="true"
android:onClick="Login"
android:layout_marginEnd="50dp"
android:layout_marginTop="17dp"
android:textColor="#color/primaryDarkColor"
android:layout_marginStart="50dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp"
android:text="Logar"
android:focusable="true" />
A good way to change your buttons background and keep the ripple effect is to create a separate drawable for them.
So you would create a default_button_background.xml with some pre-defined colors
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/button_ripple_color">
<item>
<shape android:shape="rectangle">
<corners android:radius="#dimen/button_corner_radius" />
<solid android:color="#color/buttonBackground" />
</shape>
</item>
</ripple>
Then you can assign this drawable to your button background like:
<androidx.appcompat.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/default_button_background"/>
I have created a listview and added a border to it's items.
something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal"
android:background="#drawable/listviewborderbox"
android:padding="10dp" >
<LinearLayout
android:id="#+id/sharedbyyouNameLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".70"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/sharedbyyoutext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="#string/sampletext1"
android:textColor="#color/blackText"
android:textSize="14sp" />
<TextView
android:id="#+id/sharedbyyouselected"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="#string/sampletext2"
android:textColor="#color/blackText"
android:textSize="16sp"
tools:ignore="RtlHardcoded" />
</LinearLayout>
<LinearLayout
android:id="#+id/sharedbyyouLayoutforarrow"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".10"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_next"
tools:ignore="RtlSymmetry,RtlHardcoded,ContentDescription" />
</LinearLayout>
</LinearLayout>
And I have ripple effect value in Drawable-v21 like this:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/white"> <item android:drawable="#color/footercolor"/> </ripple>
Border shape xml in drawable folder is this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/colorforbodybox" />
<corners android:radius="10dip"/>
<stroke android:width="2dip" android:color="#color/colorforborder" />
</shape>
Ripple effect works but ripple effect is shown outside the border line that I have drawn. Please check pic below:
How do I make the ripple effect not to cross the border in the list view?
To achieve rounded corner ripple effect change your ripple xml file to:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#android:color/white"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="#color/footercolor"/>
</shape>
</item>
</ripple>
The problem I had was that the corner radius of my views was not a fixed value therefore using the xml suggested didn't work for me.
I needed a something that would adapt the ripple effect every time regardless of the shape used so...
I used a simple view extension:
fun View.addRippleEffect(rippleColorId: Int = R.color.rippleColor) { // Here you can pass the color you want for the ripple effect and assign a "default" value
val rippleColor = ColorStateList.valueOf(ContextCompat.getColor(App.context(), rippleColorId))
this.background = RippleDrawable(
rippleColor, // This is the color of the effect and needs to be a ColorStateList
this.background, // ( = content ) With this you use your view's background as the content of the ripple effect
this.background) // ( = mask ) With this the ripple will take the shape of the background and not "spill over". (Could be null IF you did set the previous variable "content = this.background")
}
OR, if you want to separate the two layers:
fun View.addRippleEffect(rippleColorId: Int = R.color.rippleColor) {
val rippleColor = ColorStateList.valueOf(ContextCompat.getColor(App.context(), rippleColorId))
this.foreground = RippleDrawable( //Using the foreground allows you to give the view whatever background you need
rippleColor,
null, //Whatever shape you put here will cover everything you've got underneath so you probably want to keep it "null"
this.background)
}
Basically you give a view a background (rounded rectangle with borders in your case) then you can simply call the extension in your Activity/Fragment:
whateverView.addRippleEffect()
//or
whateverView.addRippleEffect(R.color.red)
See: https://developer.android.com/reference/android/graphics/drawable/RippleDrawable
1. Create the Ripple Drawable Contains the Backgound Shape
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?colorControlHighlight"> //defaul ripple color
<item>
<shape //the background shape when it's not being click
android:shape="rectangle">
<solid
android:color="#color/colorPrimary" />
<corners
android:radius="32dp" />
</shape>
</item>
</ripple>
2. Applying the Drawable to the View and REMOVE THE SHADOW
<Button
style="?borderlessButtonStyle" //remove the default shadow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_button" //here
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#android:color/white" />
Try setting clipToOutline of your View / ViewGroup to true, either in the code or through XML, it should limit the ripple's area accordingly (as long as you background shape matches the requirements, see the docs for more details).
In my Android app I have button with arrow image on the right side. On my SettingsActivity you can change the color of app (change the color of buttons and TextViews).
I changed the color of TextViews fine, but when I changed the color of buttons, the image (arrow on the right side) is gone.
Thats my code now. It change color and delete the imge.
loginButton = (Button) findViewById(R.id.btnLogin);
loginButton.setTextColor(color);
I find this on some post. But this only works for ImgageView, not for button.
loginButton = (Button) findViewById(R.id.btnLogin);
GradientDrawable bgShape = (GradientDrawable)loginButton.getBackground();
bgShape.setColor(getResources().getColor(Color.BLACK));
text.setTextColor(color);
I also tryed to change the color like this. But this does not change the color at all.
Drawable button = context.getResources().getDrawable(R.drawable.button);
button.setColorFilter(new
PorterDuffColorFilter(0xffff00,Mode.MULTIPLY));
The last thing which I hope should work is to define new drawable for every color. But this is really awful...
I also think, that the problem is not only with the image. I think this solution overrides all the drawable file...
Is there anyone who knows how to change the color of drawable and keep the image on the button?
EDIT: Just trying... I can move all colors to colors.xml file. And change the path of color to all drawable files. Like
<resource>
Color 1
Color 2
Color 3
...
</resource>
But than how can drawable files decide which color it should use?
EDIT2: Button layout:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
style="#style/bgGrey">
<RelativeLayout
android:layout_height="0dip"
android:layout_weight="30"
android:layout_width="fill_parent"
>
<TextView
...
/>
</RelativeLayout>
<LinearLayout
...>
<TextView
.../>
<EditText
.../>
<TextView
.../>
<EditText
.../>
<Button
android:id="#+id/btnLogin"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/password"
android:gravity="center|left"
android:paddingLeft="15dp"
android:layout_marginTop="10dp"
android:background="#drawable/login_button_background"
android:text="Login" />
</LinearLayout>
</LinearLayout>
Button drawable, background.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/layer"></item>
</selector>
layer.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:left="0dp" android:top="5dp" android:bottom="5dp" android:right="0dp" >
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#ffb500"/>
</shape>
</item>
<item android:left="350dp" android:top="5dp" android:bottom="5dp" android:right="5dp" >
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#ffb500"/>
</shape>
</item>
<item android:right="15dp" >
<bitmap android:src="#drawable/btn_right" android:gravity="right" android:tileMode="disabled" />
</item>
</layer-list>
An alternative approach can be: Remove the arrow from the background and set it as Compound Drawable.
As Button extends TextView, you can set drawables to the top, bottom, left or right.
In the XML, just set the property drawableRight to an arrow, or via JAVA code:
button.setCompoundDrawablesWithIntrinsicBounds (idLeft, idTop, idRight, idBottom)
So to set a right arrow:
button.setCompoundDrawablesWithIntrinsicBounds (0, 0, R.drawable.your_arrow, 0);
This way, the background is independent from the arrow, and it will be easier to modify it without creating complex versions or selectors.
There are methods and properties to adjust the drawable padding so you can place it more or less where you need it.
I have this Button in my Relative Layout:
<Button
android:id="#+id/gpsButton"
android:layout_width="50sp"
android:layout_height="50sp"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/tableLayout1"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="GPS"
android:textColor="#ffffff" />
It is linked to this shade:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#FF0000"/>
<stroke android:width="2sp" android:color="#fff" />
</shape>
My question is how can I change the colour from the button in my activity?
I've tried it but the app crashed -.-
Here is a snippet of my code:
RelativeLayout relLayout = (RelativeLayout) findViewById(R.id.reli);
GradientDrawable bgShape = (GradientDrawable) relLayout.getBackground();
bgShape.setColor(Color.parseColor("#FFFF00"));
What do I wrong? I don't understand how to do this with the view.
Thank you in advance :)
You can easily change the background color of your Button programatically by adding a color filter. For that, set a white background in the XML file. Then, to make the button red, you can do this:
gpsButton.getBackground().setColorFilter(Color.RED, Mode.MULTIPLY);
The red and white will be multiplied which will result as red. Of course, you can replace the Color.RED by the color you want.
Usually, there's a bit effect when we press a button. But when I set gradient background for a button by creating a shape border.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="1px" android:color="#cccccc" />
<corners android:radius="6px" />
<gradient
android:startColor="#d8d8d8"
android:endColor="#f9f2f9"
android:angle="90" />
</shape>
and button:
<Button
android:id="#+id/visibility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:drawableLeft="#drawable/idle"
android:singleLine="true"
android:padding="5px"
android:textSize="14px"
android:textColor="#444444"
android:textStyle="bold"
android:typeface="sans"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:background="#drawable/border"
android:clickable="true">
</Button>
the effect when press the button is lost, the button now is just like a textview, nothing is changed when I click on it.
But if I delete this line in button, everything's ok:
android:background="#drawable/border"
So any solutions to don't be lost the effect when press the button, or any solutions to make a button has border and gradient background without use shape?
Thanks!
You have to use a StateListDrawable for the button background, supplying different background images for each state (pressed, focused, etc.).
It will be much simpler to simply not change the button background at all.