Customize Button (ANDROID) - android

I want to fully customize button in android, with keeping all its juicy material design styles.
Without a custom drawable png for button, just applying a color to button, i am able to change the color of the button and keep the Elevation, Ripple Effect, Rounded corner and it looks nice.
The code i used for this is
<resources>
<style name="AppTheme.NoActionBar">
<item name="android:colorButtonNormal">#8126f3</item>
</style>
</resources>
Then i wanted to put my own drawable into the button and keep the Material Design effects . so i created a drawable (V21) and assigned it as background to the button.
button_ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="#drawable/take_ride_map_btn"/>
</ripple>
But now the problem is that it does not have a elevation. And the ripple effect does not start at the point of touch.
I have looked into this, this, and this SO Question but these are not helpful with using the custom drawable into button.
Please do suggest how can i achieve this -
Elevation while having the custom drawable.
Start the Ripple Effect at the point where user touches.

you can always have the elevation if you set the button to wrap_content both ways i.e height and width and for the ripple effect you should use RippleDecoratorView.
You don't need to cast it to anything just wrap the button inside it in xml and your good to go, plus its highly customizeable too

Related

Ripple effect on a ImageButton does not work

I set an ImageButton in a RelativeLayout and i want to show a Ripple effect when the button get clicked. As far as i know it have to be enabled by default but for some reason it doesn't show even if i set ?attr/selectableItemBackgroundBorderless or ?attr/selectableItemBackground as foreground or background (i used ?android:attr instead of ?attr too).
I tried everything, i made a custom Ripple effect drawable and setted it as foreground/background and it stills not working.
The app is API 21 > targeting 31, i don't know if it have anything to do with it but i using Material3.dark as main theme.
Anyone have an idea of what could be wrong here?
ImageButon:
<ImageButton
android:id="#+id/tb_music"
style="#style/top_bar_button"
android:layout_marginLeft="8dp"
android:src="#drawable/note" />
Style top_bar_button:
<style name="top_bar_button">
<item name="android:layout_width">64dp</item>
<item name="android:layout_height">match_parent</item>
<item name="android:background">#00000000</item>
<item name="android:foreground">#drawable/ripple_effect</item>
<item name="android:clickable">true</item>
</style>
ripple_effect.xml:
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FFFFFF">
<item android:id="#android:id/mask"
android:drawable="#android:color/white">
<shape android:shape="rectangle"> </shape>
</item>
</ripple>
How the button looks
don't use background attribute with ImageButton or Button. These widgets have 9-patch set as background, so when you overwrite it you basically lose default Androids button style and padding. Now you bascially may have in here ImageView or even TextView with drawable set to left/right
for coloring button (image or common, or even other Views) use android:tint attribute, but this will work with API23+ (so you may look for some compat/androidX version if you need API21, note it implements TintableBackgroundView, so we may assume that tint attribute will work, with custom not-android prefix)
also in question you should show your ripple effect drawable file, but even assuming that is is properly written - you have set transparent background, thus ripple effect won't be visible, as it works only in bounds of background - you transparent color removed default "shape" of this View. Just like elevation and translationZ params, these are adding some shadow under View, but only for not transparent, you've also lost this visual effect in here
so in short: remove background attribute leaving default one (or set it as non-transparent-at-all 6-hash solid color, but this will become just colored rectangle) and get familiar with tint and tintMode
aaand if you need a ripple effect on transparent rectange View then afaik thats possible also, but with mask param in drawables XML. and you don't need ImageButton, any View is clickable in Android, especially when set View.OnClickListener using Java/Kotlin. so ImageView will be sufficiet
I don't know why ripple does not work in your app but when I tested it, It is working properly. I think you didn't give padding to your ImageButton. You can see my XML code that how my code shows the Ripple effect.
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
app:srcCompat="#drawable/note"
tools:ignore="ContentDescription" />
<!-- Make sure that you have added padding to show ripple effect. Otherwise ripple effect not show-->
Let me know if your problem is not solved yet.

Android: change button background/text/compoundDrawables with selector XML

I have already been using selector drawables to make my button change background according to the state.
However, I also want to change the text color and left compound drawable together with the background. But the default selector XML atrribute does not contain any "android:textColor" or "android:drawableLeft" to be assigned.
I know I can always achieve this with extend my own button class, but is there any clean way out?
I am not very sure about drawables but for changing textcolor depending upon button state, I use selectors as below,
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:color="#color/color_light_green"></item>
<item android:color="#fff"></item>
//state you want
</selector>
and then apply it to textColor attribute in the xml as,
android:textColor="#drawable/selector_btn_text_color"
Eclipse doesn't auto suggest color attribute in selector but we can do it. :)

Android view state_pressed Blue background

I have a lot of custom views and I have style for state_pressed. Basically its a rectangle with
solid android:color="#DC2D5A8C"
What I am trying to do is simulate the blue background color that comes with the standard views/controls. For example: when you click on a button or list view item, the background changes to blue (on_pressed).
I got that to work with the above style, but the problem is let's call it the tint effect. In a button, the text caption is black. When you press, the background is blue and the text color changes to white.
Now how can I achieve such a so called "tint" change in my custom control's view?
Your response is much appreciated.
Thanks!
You can use selector xml file to do this.You must be setting background to the button.Instead of that set the xml file to its background.Create selector.xml file in your drawable folder as shown below and set that xml file as background to that button just like : android:background="#drawable/selector"
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use blue -->
<item android:drawable="#drawable/btn_blue"
android:state_pressed="true" />
<!-- When not selected, use black-->
<item android:drawable="#drawable/btn_black"/>
</selector>
By doing this you will get so called tint effect to your button.Hope this will help you.

How can I change the android button to dark grey instead of light grey

I would like to change the color of the android button in my application to be dark grey instead of light grey. I intent to keep the color of the focus/pressed the same. I just want to change the color of the button in 'normal' state to dark grey.
I have found this thread:
Standard Android Button with a different color
I think the easiest way is to do this. Is that correct? But how can I make the LightingColor Filter to make it darkgrey?
button.getBackground().setColorFilter(new LightingColorFilter(0xFFFFFFFF, 0xFFAA0000));
I have tried
button.getBackground().setColorFilter(new LightingColorFilter(0xffffffff, 0xFF3A3A3A));
But all I get is a white color.
That's similar to what I am doing in my TabHost tabs in XML. If you have custom buttons and graphics it can be done in Java, but it is much easier if you're able to do it in your XML.
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/settings"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/mountain" />
</selector>
You could use the default light theme
Example

Is it possible to have a Button with a background image with text on top?

I need button that has a replicated background pattern and normal button text on top - how to specify this in layout XML?
Override android:background on the Button in question. Or, for reuse you could declare your own style, overriding android:background from the base button style:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyButtonStyle" parent="Widget.Button">
<item name="android:background">#drawable/fancy_button</item>
</style>
</resources>
In either case, your fancy_button drawable would be an image, or more likely a StateListDrawable.
For the Button instances you wish to apply this to, you'd do:
<Button style="#style/MyButtonStyle" />.
Consider using ImageButton instead of using regular one.

Categories

Resources