Resize an image for ImageButton background - android

I want to create a ImageButton and set an image as background mantaining original size. So I use this few lines of code find on StackOverflow too:
ImageButton retry = new ImageButton(this);
Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.button2);
retry.setImageBitmap(image);
retry.setMinimumWidth(image.getWidth());
retry.setMinimumHeight(image.getHeight());
But unfortunately I obtain following result:
Obviously I don't want the "background button", but only the image. How can I do?

It depends on your image but. You can achieve this by writing style to your button.
Firstl you should define your shape for your button in drawables folder(if it doesnt exist dont hesitate to create and define button_shape.xml).
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed" /> <!-- **pressed button pressed is name of image...** -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="#drawable/button_focused" /> <!-- hovered -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
After you define your style in style file.
<style name="button_style">
<item name="android:textColor">#ffffff</item>
<item name="android:background">#drawable/button_states</item>
</style>
and set style property of Button.

set button's background to transparent color or null.

Related

Material 3 - Change switch icon size in style.xml

I'm trying to add an icon to a switch control via thumbIcon, but I can't find a way to resize the icon. I'm trying to learn about this on this Page but I haven't been able to.
If I use the drawable without a selector, the icon displays the correct size, but if I use the drawable with the selector, the icon size becomes large, larger than 16dp and unsightly. Is there a way to change the icon size with the drawable mode selector? or can this be done in some way? I want when the switch is in the unchecked position it shows a different icon than the checked position with the right size or fit.
Material Switch
<com.google.android.material.materialswitch.MaterialSwitch
android:id="#+id/SFilter_WorldWideValue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:checked="true"
android:fontFamily="#font/roboto_medium"
android:text="#string/search"
android:textAllCaps="true"
android:textColor="#color/Text_Base_White"
android:textIsSelectable="false"
android:textSize="16sp"
app:thumbIcon="#drawable/icon_check" --> **Normal Size**
app:thumbIcon="#drawable/default_switch_icon" --> **Size is not normal**
tools:ignore="TouchTargetSizeCheck" />
style.xml
<style name="Theme.Default" parent="Theme.Material3.Light.NoActionBar">
...
<item name="materialSwitchStyle">#style/Switch.Default</item>
</style>
<style name="Switch.Default" parent="Widget.Material3.CompoundButton.MaterialSwitch">
<item name="thumbIcon">#drawable/default_switch_icon</item>
<item name="checkedIconSize">16dp</item> // Not working
<item name="selectorSize">16dp</item> // Not working
<item name="iconSize">16dp</item> // Not working
<item name="drawableSize">16dp</item> // Not working
<item name="itemIconSize">16dp</item> // Not working
<item name="maxImageSize">16dp</item> // Not working
<item name="materialThemeOverlay">#style/Switch.Colors.Default</item>
</style>
<style name="Switch.Colors.Default" parent="">
...
...
</style>
drawable/default_switch_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:state_checked="true"
android:drawable="#drawable/icon_check"/>
<item
android:state_checked="false"
android:drawable="#drawable/icon_close"/>
</selector>
You can use a layer-list in your selector :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- State Checked -->
<item android:state_checked="true">
<layer-list>
<item android:drawable="#drawable/ic_check"
android:height="16dp"
android:width="16dp"
android:gravity="center"/>
</layer-list>
</item>
<!-- State Unchecked -->
<item android:drawable="#color/transparent" />
</selector>
I had to set the gravity to center or the icon was not centered in the thumb.

Colorstatelist for button background not working

Reference: How to specify background color in Color State List Resources?
I have followed the popular answer in the link above.
I have the following drawable;
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true"
android:drawable="#color/KeyActionPrimary"/> <!-- enabled -->
<item android:state_enabled="false"
android:drawable="#color/KeyActionButtonDeactivated"/> <!-- disabled -->
<item android:state_pressed="true"
android:drawable="#color/KeyActionPrimary"/> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#color/KeyActionPrimary"/> <!-- focused -->
<item android:drawable="#color/KeyActionPrimary"/> <!-- default -->
</selector>
I understand that it will always follow order of precedence and therefore in the current order only activated and deactivated likely to be triggered. Currently however I am not getting any results at all
My button;
<Button
android:id="#+id/buttonSTART"
android:layout_width="#dimen/btn_width"
android:layout_height="#dimen/btn_height"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="16dp"
android:background="#drawable/state_controlled_key_action_button"
android:padding="#dimen/btn_padding"
android:text="#string/btn_start"
android:textColor="#color/key_action_button_text_color"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnSCORES"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
The button comes out as white which in my material theme is the ColorPrimary attribute
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Home" parent="Theme.MaterialComponents">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/Primary</item>
<item name="colorPrimaryVariant">#color/PrimaryVariant</item>
<item name="colorSecondary">#color/Secondary</item>
<item name="colorSecondaryVariant">#color/SecondaryVariant</item>
<!--colorBackground appears behind scrollable content and is used for the default window-->
<!--background. colorSurface is mapped to the surface of components such as cards, sheets-->
<!--and menus. colorError is used to indicate an error state for components such as-->
<!--text fields.-->
<item name="android:colorBackground">#color/Background</item>
<item name="colorSurface">#color/Surface</item>
<item name="colorError">#color/Error</item>
<!--"On" colors define how text, icons and strokes are colored in relation to the surface-->
<!--on which they appear.-->
<item name="colorOnPrimary">#color/ColorOnPrimary</item>
<item name="colorOnSecondary">#color/ColorOnSecondary</item>
<item name="colorOnBackground">#color/ColorOnBackground</item>
<item name="colorOnSurface">#color/ColorOnSurface</item>
<item name="colorOnError">#color/ColorOnError</item>
<item name="android:fontFamily">#font/atma_medium</item>
<item name="android:textColor">#color/PrimaryTextColor</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">#color/StatusBar</item>
<!-- Customize your theme here. -->
<item name="actionBarSize">36dip</item>
</style>
</resources>
Firstly I am assuming that a theme covers the entire app but if you explicitly specify a background to a specific button it should override the theme value, please correct me if I am wrong.
I started this journey with a colorstatelist under res/colors. Read the link at the top which confirmed you need to use drawable. As I already had a color state list initially followed the advice of the answer which had 0 votes...
shape
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#color/primary_button_color" />
<stroke android:width="#dimen/btn_stroke" android:color="#color/primary_button_stroke_color"/>
<corners android:radius="#dimen/btn_radius"/>
</shape>
colorstatelist
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true"
android:color="#color/Primary"/> <!-- pressed -->
<item android:state_enabled="false"
android:color="#color/PrimaryButtonDeactivated"/> <!-- pressed -->
<item android:state_pressed="true"
android:color="#color/Primary"/> <!-- pressed -->
<item android:state_focused="true"
android:color="#color/Primary"/> <!-- focused -->
<item android:color="#color/Primary"/> <!-- default -->
</selector>
Neither of these approaches is amending my button color. I am still always seeing a white button. I purposely chose horrid colors to ensure the change was obvious
What am I doing wrong? What else do you need to see?
UPDATE...........
Following discussion with #rcs I used my original colorstatelist from res/color with the backgroundtint property on the button and it works as intended
My final code:
For each button that requires a different style i have a button color or text color file in res/colors as per below
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#color/KeyActionColorOnPrimary"/>
<item android:state_enabled="true"
android:color="#color/KeyActionPrimary"/>
<item android:state_enabled="false"
android:color="#color/lime"/>
<item android:state_focused="true"
android:color="#color/KeyActionPrimary"/>
<item android:color="#color/KeyActionPrimary"/>
</selector>
Then within my button xml
android:backgroundTint="#color/key_action_button_color" // for button color
android:textColor="#color/key_action_button_text_color" // for text color
e.g.
<Button
android:id="#+id/buttonSTART"
android:layout_width="#dimen/btn_width"
android:layout_height="#dimen/btn_height"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="16dp"
android:backgroundTint="#color/key_action_button_color"
android:padding="#dimen/btn_padding"
android:text="#string/btn_start"
android:textColor="#color/key_action_button_text_color"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnSCORES"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
This works with no additional styles. I can keep my material design theme without the button style being set to apt compat style. I am only using the above attributes in the layout xml for the button i want to have these styles
Since the first condition in your color_state is `android:state_enabled="true", which is always the case, thereby resulting in the same color. Get rid of it to notice the color changes
Refer the official docs for more info and try to use a color file resource instead of drawable as the docs says,
ColorStateLists are created from XML resource files defined in the "color" subdirectory directory of an application's resource directory
Edit:
As mentioned in this answer, applying the colorstate as a style to the Button tag should solve the issue
create a new style
<style name="AppTheme.CustomButtonStyle" parent="#style/Widget.AppCompat.Button.Colored">
<item name="android:backgroundTint">#color/state_controlled_key_action_button</item>
</style>
Activity
<Button
android:id="#+id/your_button_id"
style="#style/AppTheme.CustomButtonStyle"/>

Change actionbar button background color when pressed

If I press a button in the action bar, then its background color is not what I want. The background color of my item doesn't respond to my click event. How can I change this and change the background color when it's pressed?
You need to declare android:actionBarItemBackground attribute which is a:
Custom item state list drawable background for action bar items.
Then, in your styles do as follows:
<style name="CustomStyle" parent="#style/Theme.Holo.Light" >
<item name="android:actionBarItemBackground">#drawable/ab_item_background</item>
<item name="actionBarItemBackground">#drawable/ab_item_background</item>
</style>
So, put your own drawable with a selector and every state (pressed, focused, disabled, etc) to have the expected background. For example, the drawable ab_item_background.xml declared above might be like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime">
<!-- focused/pressed: color=red -->
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#color/red" />
<!-- pressed: color=red -->
<item
android:state_pressed="true"
android:drawable="#color/red" />
<!-- normal: color=transparent -->
<item
android:drawable="#android:color/transparent" />
</selector>
In Styling the Action Bar, you can find all the customization possibles and all the attributes to do so.
ActionBar actionBar = getActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#0a0a0a")));
this might help

Android ImageButton background change when clicked

I have an image button that has a transparent background and a image as a foreground. What i want to do is to make the button flash when i press the button. Now i don't want to define two different images for the up and down state, is there any why i can define a selector color for the background and foreground and the background of the button ?
Kind Regards,
You can use this code for background selection of button for diff-2 state of button, save this file in drawable folder and set button background. Hope it will useful to you...:)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>

change button text color when pressed

I have made my button transparent so I would like to have the button text color change when the button is pressed. Is it possible to do this using just xml files?
Yes, you can do it like that:
layout/main_layout.xml:
.....
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bonjour !"
android:textColor="#color/button_text_color"
/>
.....
color/button_text_color.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#c0c0c0" android:state_pressed="true"/>
<item android:color="#ffffff"/>
</selector>
See the section called State List in this bit of documentation...Drawable Resources.
You can define two different Button xml files one for the transparent 'default' state and another with the button as Red for your 'pressed' state. You then define a selector which switches the drawable resources in the different states.
EDIT: As per devunwired's comment the Color State List resource is probably more suitable for just changing colours rather than the drawable itself.
I like the solution proposed by Konstantin Burov in the other issue: Android customized button; changing text color
You can actually manage more states than just pressed and normal. But it should solve the problem.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Focused and not pressed -->
<item android:state_focused="true"
android:state_pressed="false"
android:color="#ffffff" />
<!-- Focused and pressed -->
<item android:state_focused="true"
android:state_pressed="true"
android:color="#000000" />
<!-- Unfocused and pressed -->
<item android:state_focused="false"
android:state_pressed="true"
android:color="#000000" />
<!-- Default color -->
<item android:color="#ffffff" />
</selector>
Then you can use that selector drawable in your button changing the text color attribute like below. Note that the selector in the example below is named "button_text_color"
android:textColor="#drawable/button_text_color"
Using the same drawable approach you can also solve the background color of the button. Just remember that in the selector instead of using the "android:color" attribute you need to use the "android:drawable" attribute like below.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Focused and not pressed -->
<item android:state_focused="true"
android:state_pressed="false"
android:drawable="#ffffff" />
<!-- Focused and pressed -->
<item android:state_focused="true"
android:state_pressed="true"
android:drawable="#000000" />
<!-- Unfocused and pressed -->
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="#000000" />
<!-- Default color -->
<item android:drawable="#ffffff" />
</selector>
And then in the button itself do, note that this time the selector name is "button_background"
android:background="#drawable/button_background"
You have to do it in your code. Try this:
mBtn = ((Button) findViewById( R.id.button1 ));
mBtn.setOnClickListener( new OnClickListener() {
#Override
public void onClick(View v) {
mBtn.setTextColor( Color.RED );
}
});
Declare:
private Button mBtn;
You must set #drawable xml resource in textColor attributte
Here is example: Android customized button; changing text color
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="false"
android:color="#FFFFFF" />
<item
android:state_pressed="true"
android:color="#000000" />
</selector>

Categories

Resources