I am working on a project where I will have many buttons of the same size.
I was wondering if there is a way to create a standard button formatting with a set
height
weight
padding
etc.
I have looked into styles but I am not sure if that is the road I should be taking. I also thought about extending the button class and programmatically setting these values to a standard.
Hello, how are you!
The best way is to create a style in the style.xml resource, all the necessary features.
just add the style with style = "#style/mystyle" to all the buttons.
example:
<style name="mystyle">
<item name="android:textSize">20sp</item>
<item name="android:gravity">center|center_horizontal</item>
<item name="android:textAlignment">center</item>
</style>
In the same way when you want to create a customized button (java/kotlin)
it will also be added in the same way.
Greetings.
You can create a reusable component in a separate .xml file and use it everywhere since you said the dimensions exactly the same all across the app. Here is a sample:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="4dp" />
<!--customize and animate stuff-->
<gradient
android:angle="270"
android:endColor="#88b823"
android:startColor="#b0dc54" />
</shape>
Related
To make it short, this is what I would like to add a custom button that looks like this:
IMG is a .png file in my mipmap folders and SOME TEXT is just a string value. What the dashed line is added just as a separator in the image, not in the button.
The issue is that the rounded edges don't appear where the image is added. It looks like this:
My questions are the following:
Can this be achieved?
Is there a way to override the <solid /> attribute in <shape />?
I will have to create 10 of these buttons each with different colors and if I add android:color with a different value, the color does not change
When adding the image, it makes me choose only one (e.g. the mdpi one). If this will be displayed on larger screens, will it take a different .png image based on the size?
Is there a specific type of button I should use? I would like to revert the colors when the button is pressed and stay as pressed. I have a vague idea about how this can be achieved, but is there a way to do this for the .png files as well or do I need to import into the project others with the colors already inverted and just switch them?
custom_button.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="250px"
android:bottomLeftRadius="250px"
android:topRightRadius="50px"
android:bottomRightRadius="50px" />
<solid
android:color="#color/YellowPrimary"/>
</shape>
button_styles.xml
<resources>
<style name="CategoryToggle">
<item name="android:background">#drawable/custom_button</item>
<item name="android:textAllCaps">true</item>
</style>
<style name="CategoryToggle.First">
<item name="android:color">#color/bluePrimary</item> // Does not override <solid>
<item name="android:drawableLeft">#mipmap/icon_48mdpi</item>
<item name="android:text">#string/first_cat</item>
</style>
</resources>
button_layout.xml
<android.support.constraint.ConstraintLayout
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">
<Button
style="#style/CategoryToggle.History"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I have no java code at the moment as I just started and trying to implement this weird button format.
This is how it looks at my end:
Absolutely. As I mentioned in the comments, either make sure your drawable has a transparent background, or create a custom button to mask the drawable.
You'll want to use a style attribute apply a different style to each button. By this I mean the color defined in your custom_button.xml should reference a color attribute (something like colorAccent should work in your case), instead of a static color.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="?attr/colorAccent"/>
</shape>
Then change this color in your button styles instead of android:color.
<style name="CategoryToggle">
<item name="colorAccent">#color/YellowPrimary</item>
</style>
Make sure you have the support library dependency added, or colorAccent will not be available.
Use the android:theme attribute, instead of the style attribute to apply the button theme.
<Button
android:width="wrap_content"
android:height="wrap_content"
android:theme="#style/CategoryToggle"/>
It looks like your drawables are not using resource qualifiers. You'll need to make sure each alternative resource has the exact same name as the original (i.e. your icon_48mdpi.png should instead be called icon_48dp.png for all configurations) and is placed in the corresponding drawable folder for its density. Your drawable resources should look like the following (in the Project view structure, not the Android view structure).
res/
|-- drawable/
| +-- custom_button.xml
|-- drawable-hdpi/
| +-- icon_48dp.png
|-- drawable-mdpi/
| +-- icon_48dp.png
|-- drawable-xhdpi/
| +-- icon_48dp.png
|-- drawable-xxhdpi/
| +-- icon_48dp.png
|-- drawable-xxxhpdi/
| +-- icon_48dp.png
~
To change the color of a drawable based on state, you will need to abstract your color one step further and create a color state list.
res/color/button_color_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/pressed_color" android:state_pressed="true"/>
<item android:color="#color/focused_color" android:state_focused="true"/>
<item android:color="#color/state_hovered" android:state_hovered="true"/>
<item android:color="?attr/colorAccent"/>
</selector>
Then you can use this color resource in your shape drawable instead of colorAccent.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/button_color_selector"/>
</shape>
You can also make each of the colors in your color state list a styleable attribute by defining custom attributes and referencing those attributes in your styles. I won't go into that further for the sake of brevity though.
You can do this for drawables similarly by creating a state list drawable.
Lastly, you'll want to get into the habit of using dp instead of px unless you are absolutely certain you want to use px. This will prevent strange appearances at different screen densities.
On 4 "is there a way to (revert colors when pressed) for the .png files".. yes there are ways.
The by-the-book option is to use xml styles to specify different drawables for different button states. Consider ImageButton which has an example of this in its docs: https://developer.android.com/reference/android/widget/ImageButton.html
Another option is to apply tints or other filters to the drawable in your own code in button interaction callbacks. Compared to using different drawables, in this approach you add custom code instead of leveraging builtin resources, so you may wind up testing and debugging more on different devices, and you get full control so you can do custom animations and other elaborate things that may not fit well into Android resource tooling. Can checkout setColorFilter for starters:
https://developer.android.com/reference/android/widget/ImageView.html#setColorFilter(int,%20android.graphics.PorterDuff.Mode)
Thanks for adding some code and images or your problem, helps in understanding it.
Big shout out to Bryan for his insight on this matter. It led me to the paths I needed to follow in order to solve this issue.
I am posting this answer so that others with similar cases will know the steps. Although I have quite a number of files, this procedure did the trick perfectly.
I have my custom button as described in the link provided by Bryan.
For the rest I have the following:
Change the text color:
button_text_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/redPrimary" android:state_pressed="true"/>
<item android:color="#color/redDark"/>
</selector>
Change the background: button_background.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:bottomLeftRadius="400dp" android:radius="100dp" android:topLeftRadius="400dp" />
<solid android:color="#color/redDark" />
</shape>
</item>
<item android:state_enabled="true">
<shape android:shape="rectangle">
<corners android:bottomLeftRadius="400dp" android:radius="100dp" android:topLeftRadius="400dp" />
<solid android:color="#color/redPrimary" />
</shape>
</item>
</selector>
Change the drawable: button_drawable.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_button_inverted" android:state_pressed="true" />
<item android:drawable="#drawable/ic_button"/>
</selector>
button_style.xml
<style name="MyButtonStyle">
<item name="android:background">#drawable/button_background</item>
<item name="android:drawableLeft">#drawable/button_drawable</item>
<item name="android:text">#string/button_text</item>
<item name="android:textColor">#color/button_text_color</item>
</style>
Implementing it in main_layout.xml
<packagename.MyCustomButton xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/myButton"
style="#style/MyBUttonStyle"
android:layout_marginBottom="8dp" />
Just use the official library.
Add the MaterialButton component using these attributes:
app:icon to add the icon
app:iconGravity to decide the position of the icon
app:iconPadding to increase/decrease the space between the icon and the text
android:paddingLeft the padding between the edge and the icon
<com.google.android.material.button.MaterialButton
android:paddingLeft="2dp"
app:icon="#drawable/ic_add_24px"
app:iconGravity="start"
app:iconPadding="4dp"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.Button.RoundedRight"
.../>
With the app:shapeAppearanceOverlay you can customize the shape of the component.
<style name="ShapeAppearanceOverlay.Button.RoundedRight" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">4dp</item>
<item name="cornerSizeBottomRight">4dp</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeBottomLeft">16dp</item>
</style>
You can obtain the same result using a style.
Short question:
Suppose I use this style on a button:
<Button
style="#style/Widget.AppCompat.Button.Borderless.Colored" ...
(or without the "Colored" part).
How do I set the background of it to be a selector that has a different color when being pressed? The default one is quite a bold color on pre-Lollipop...
I want to have all of the style working as the default (including padding), except for the color of the selector.
I think the easiest would be to create a typical multi-state drawable and replicate Android's default button drawable properties for padding, etc...
From the Android SDK AppCompat theme:
<!-- Colored bordered ink button -->
<style name="Base.Widget.AppCompat.Button.Colored">
<item name="android:background">#drawable/abc_btn_colored_material</item>
<item name="android:textAppearance">#style/TextAppearance.AppCompat.Widget.Button.Inverse</item>
</style>
They use the drawable abc_btn_colored_material, whose source is like this: https://github.com/dandar3/android-support-v7-appcompat/blob/master/res/drawable/abc_btn_borderless_material.xml
You can see it's just a layer list with the following multi-state drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/abc_btn_default_mtrl_shape"/>
<item android:state_pressed="true" android:drawable="#drawable/abc_btn_default_mtrl_shape"/>
<item android:drawable="#android:color/transparent"/>
</selector>
https://github.com/dandar3/android-support-v7-appcompat/blob/master/res/drawable/abc_btn_default_mtrl_shape.xml
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_button_inset_horizontal_material"
android:insetTop="#dimen/abc_button_inset_vertical_material"
android:insetRight="#dimen/abc_button_inset_horizontal_material"
android:insetBottom="#dimen/abc_button_inset_vertical_material">
<shape android:shape="rectangle">
<corners android:radius="#dimen/abc_control_corner_material" />
<solid android:color="#android:color/white" />
<padding android:left="#dimen/abc_button_padding_horizontal_material"
android:top="#dimen/abc_button_padding_vertical_material"
android:right="#dimen/abc_button_padding_horizontal_material"
android:bottom="#dimen/abc_button_padding_vertical_material" />
</shape>
</inset>
So just make it yours :) Copy the drawable xml into your app and customize it.
I don't know if you will be able to access the #dimen/... from outside the SDK package, those values are defined in the SDK Values.xml, take a look at https://github.com/dandar3/android-support-v7-appcompat/blob/master/res/values/values.xml . If it's not possible, just create your own version of the dimens in your values.xml
If there's a cleaner solution any android guru can point out, I'll be glad to know!
Requested Update
Another trick is to apply a ColorFilter to the whole Button View. It's a very simple thing but not useful for all situations, as the color filter will blindly change the view as a whole (including Font color, borders, etc...). However, smartly selecting Alpha on the colors, could work for specific situations.
I'd suggest a LightningColorFilter. To apply a color filter to the Button, or to any view, you can do something like
myButton.getBackground().setColorFilter(new LightingColorFilter(Color.WHITE, Color.RED));
Check out what every color means here: http://developer.android.com/reference/android/graphics/LightingColorFilter.html
I have just begun creating Android apps using Eclipse and the ADT.
I have got the basic functionality working in a demo app, and would like to create a button that looks like a search field (there is no search functionality built in, I just want the user to press it and start a new activity).
My question is: what is the best practice for creating a button like the above (ignoring the 1px dark grey stroke around the outside)?
I have got as far as
Create the button in activity_main.xml
<Button
android:id="#+id/inputSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:hint="#string/hint_search"
android:background="#drawable/input_search"
style="#style/input_search"
android:onClick="findProducts" >
</Button>
Create a few styles
<style name="input_search" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#color/light_grey</item>
<item name="android:background">#color/white</item>
</style>
Create the input_search_background.xml which has a light grey stroke, rounded corners
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke
android:width="#dimen/stroke_width" android:color="#color/light_grey" />
<corners
android:radius="#dimen/corner_radius" />
<solid
android:color="#color/white" />
</shape>
Create input_search.xml for the states.
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/input_search_background"
android:state_pressed="true" />
<item android:drawable="#drawable/input_search_background"
android:state_focused="true" />
<item android:drawable="#drawable/input_search_background" />
</selector>
I'm not sure how to create the orange block on the right. Should I define a shape which is orange and use a transparent png for the magnifying glass or should the png be the orange block with the magnifying glass all in one?
What tools do you use for creating the assets?
How do I know how big to create them?
I'll appreciate any words of wisdom or links that could help.
Thanks,
Andrew
You can simply use a 9 patch.
You can find a similar one, in your sdk platform graphics:
In Windows (install path may change),
C:\Program Files\adt-bundle-windows-x86_64-20130522\sdk\platforms\android-8\data\res\drawable-mdpi
You can find this:
With some (very little) work, you can make the perfect image that matches your needs.
Just add it as the background of your Button (I'd use a TextView, but it's a matter of tastes) and enjoy.
You see, no need for a custom style nor an extra xml drawable.
(Now I have come across related questions on StackOverflow but unfortunately none of the solutions worked for me which is why I had to ask this separately)
I am a Novice to Android. The problem: I need to have an image that acts as a button. Now I understand that this can be achieved by either using an image on a standard button or by using something called as "ImageButton" (which I guess is highly recommended although I have no idea why).
Requirements: I need detailed guidance for going about this problem. Specifically, I thought the "putting-image-on-standard-button" was easier until I faced two major issues: I was unable to set the image in the center (thanks drawable-top,bottom,left6,right) and once I changed the background color to match that of the Activity screen's back-color, the button effect disappeared. Simply put, I need a moderately easy way of having an image act as a button or a button with an image which has all three effects: focussed, pressed and default. I used ImageButton but then I did not know how to make custom shapes or 9patch images to give it all the desired effects, I am pretty satisfied with the default button that android provided. All I simply need is something like a background hover over the image or something of that sort which indicates the user that the image is being pressed and the event has been generated!
Can someone please help me out with this? I need the UI to look decent and therefore, need the corresponding effects on my image/button. Thanks in Advance :)
This is my icon-image:
I wish to have some sort of hover effect around this that indicates that the image has been pressed just like any normal button.
Use ImageButton and StateList Drawable. You need selector for different button's states. You can assign different drawable for different state to imitate the onFocus or onPressed effect on normal button.
This is selector.xml in drawable folder under res:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#color/cyan"/> <!-- pressed state -->
<item android:state_focused="true"
android:drawable="#color/cyan"/> <!-- focused state -->
<item android:drawable="#android:color/transparent"/> <!-- default state -->
</selector>
And this is color.xml in values folder under res:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="cyan">#33B5E5</color>
</resources>
Set the ImageButton's src to your image and set the background to selector.xml.
This is the final result:
There is a good tutorial here: Android ImageButton Selector Example
If someone also still has an issue with this.
I've created the selector but referred the drawable to two different image files, and used the XML in the imagebutton as a source. It worked like a charm.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_add_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/btn_add"
android:state_focused="true" />
<item android:drawable="#drawable/btn_add" />
</selector>
And the image button looks like this:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/add_button_selector"
android:background="#null"/>
create xml view
<ImageView
android:id="#+id/imageview1"
android:background="#drawable/selector_xml_name"
android:layout_width="200dp"
android:layout_height="126dp"/>
create inside draw able folder selector_xml_name.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/numpad_button_bg_selected"android:state_selected="true"></item>
<item android:drawable="#drawable/numpad_button_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/numpad_button_bg_normal"></item>
create inside draw able folder numpad_button_bg_selected.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="90dp">
<solid android:color="#color/selected"/>
<padding />
<stroke android:color="#000" android:width="1dp"/>
<corners android:bottomRightRadius="15dp" android:bottomLeftRadius="15dp" android:topLeftRadius="15dp" android:topRightRadius="15dp"/>
I have an ImageButton with a background image that has some transparency. By default, the button gets a grey background where the transparency pixels are - due to the Holo.Light theme. I tried setting the background color of the button to transparent via the setBackgroundColor(Color.TRANSPARENT) method. That works just fine and does what I need except now my button no longer has the light blue color when focused/pressed and looks rather flat (no borders around it, so it looks like an image).
I googled and saw that you can assign selectors as explained here but that would mean that I have to specify an image per button state and I don't want to do that. I want to inherit the focuses/pressed colors from the theme but overwrite the normal button background (when not pressed/focused) to transparent instead of grey. How can I achieve that?? Please provide a working example as I have tried many different combinations with no success.
Edit
Thank you all for helping. I figured out how to make this work without having to recreate the same image with the focused and pressed states for each button!
Here is my solution:
My button is defined as:
<ImageButton
android:id="#+id/ImageButton05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/button" />
And my background XML file (titled button.xml) is defined as follows:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item android:drawable="#drawable/btn_default_pressed_holo_light"></item>
<item android:drawable="#drawable/network_wifi"></item>
</layer-list>
</item>
<item android:state_focused="true">
<layer-list>
<item android:drawable="#drawable/btn_default_focused_holo_light"></item>
<item android:drawable="#drawable/network_wifi"></item>
</layer-list>
</item>
<item android:state_hovered="true">
<layer-list>
<item android:drawable="#drawable/btn_default_focused_holo_light"></item>
<item android:drawable="#drawable/network_wifi"></item>
</layer-list>
</item>
<item>
<layer-list>
<item android:drawable="#drawable/btn_default_normal_holo_light"></item>
<item android:drawable="#drawable/network_wifi"></item>
</layer-list>
</item>
</selector>
You can put something into an xml file, for example, custom_button.xml and then set background="#drawable/custom_button" in the button view.
Please refer to this link as there is an xml example: Standard Android Button with a different color
I used it in my code and it worked just the way I wanted.
Reference:
Standard Android Button with a different color
Edited:
If you would rather use
Maybe you should try to set a border.
For example (Reference: Android - border for button ):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#00FF00"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
OR,
You could try to set the style/theme for the button. (But it would be in a separate file)
The style/theme contains the color attributes for various states of button such as focused / enabled / disabled/ etc.
For setting background color/image and having click highlight effect,
Here is an example (Reference: How to programmatically setting style attribute in a view)
<?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/btn_pressed" />
<item
android:state_pressed="false"
android:drawable="#drawable/btn_normal" />
</selector>
You can then apply this selector to a Button by setting the property android:background="#drawable/my_button".
I want to inherit the focuses/pressed colors from the theme but overwrite the normal button background (when not pressed/focused) to transparent instead of grey. How can I achieve that??
AFAIK you can't because the focus/pressed colors are built in to the same image resources that contain the grey background.
If you want to keep the system focus/pressed but remove the background you'll have to grab a copy of the image resources (which can be found in your SDK at /sdkroot/platforms/[version]/data/res/drawable-hdpi replace [version] with whatever api level you are after. And if needbe replace hdpi with another density) and edit out the grey button from them with a photo editor. Then make a selector that references your modified images and set that as the background for your button.
EDIT:
Here are the default holo button images for focused and pressed
You can use ImageView instead of ImageButton to solve your problem. Please set the android:background property of the ImageView to the background color of the parent.
You can write this in your xml file:
android:background="#null"
It worked for me.
if u don't need the default gray background and u need your ImageButton seems like an icon without no backgrounds just use android:background attribute and set it to
#android:color/transparent**
<ImageButton
android:id="#+id/ImageButton05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:background="#drawable/button" />
hope that help anybody