How to create an ImageButton without border (just the image should be visible)? One could achieve this by setting imageButton.setBackgroundDrawable(null), but this also removes the focus and selection colors.
The goal is that initially only the image without borders is visible. But when the user focuses/touches/clicks the image this should be indicated by hightlighting the image like regular buttons.
Solution in Java-Code for API 14 is preferred. Thank you!
As has been mentioned, the borderlessButtonStyle built into the default themes on API11 and above is the simplest way to achieve this effect. You mentioned you are creating your buttons in Java code instead of XML, so there are two options depending on how you need to apply the style.
Option #1: Add it to the theme
If all the Button or ImageButton instances in your application (or at least within the Activity) need to have this style applied, add the styling to your theme instead:
<resources>
<style name="AppTheme" parent="android:Theme.Holo.Light">
<!-- Default style for ImageButtons -->
<item name="android:imageButtonStyle">?android:borderlessButtonStyle</item>
<!-- Default style for Buttons -->
<item name="android:buttonStyle">?android:borderlessButtonStyle</item>
</style>
</resources>
With this theme applied to your Application or Activity, you won't have to declare the style of each element, you can just declare them as
Button button = new Button(context);
ImageButton imageButton = new ImageButton(context);
And the styling will be pulled from the theme.
Option #2: Declare it in the constructor
If only a couple buttons need to be styled this way, you can pass the style attribute you want to apply directly to each view, like so:
Button button = new Button(context, null, android.R.attr.borderlessButtonStyle);
ImageButton imageButton = new ImageButton(context, null, android.R.attr.borderlessButtonStyle);
This version supplies a different default style attribute for the widget to use.
Use borderlessButtonStyle to ImageButton
<ImageButton
style="?android:borderlessButtonStyle"
android:layout_width="58dp"
android:layout_height="wrap_content"
android:contentDescription="Delete"
android:src="#android:drawable/ic_delete" />
Ref : Google I/O 2013 - Android Design for UI Developers
Use a selector for the background like this:
/res/drawable/my_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/my_drawable" />
<item android:drawable="#android:color/transparent" />
</selector>
my_drawable is whatever drawable you want as your border.
Then your ImageButton
<ImageButton
android:layout_height="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/my_selector"
android:src="#drawable/your_bitmap" />
your_bitmap is your actual image.
Your answer is here in the Nick Butcher and Roman Nurik talk for Google I/O 2013 about android design for UI developers.
Min: 31:40:
https://www.youtube.com/watch?v=Jl3-lzlzOJI#t=31m40s
The only problem with this approach is that style="?android:borderlessButtonStyle" is available for API 11 and above so if you want the same behaviour on any API before the 11, then you will have to stick with selectors.
By the way I highly recommend you to watch the whole talk because it is really interesting.
You have to add
imageButton.setClickable(true);
imageButton.setFocusable(true);
And it will works...
That's the way in your xml file :
android:clickable="true"
android:focusable="true"
Hope this help
I hope this will help you. please give the background as transparent
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/facebookbuttonanimation"
android:background="#00000000"
/>
You can design different images for clicked/not clicked states and set them in the onTouchListener as shown in the selected answer for this SO post.
Then you can set the image back to the previous image on post longclick or click.
Related
I'm using the new material components com.google.android.material:material with android x but I can't set a custom background to the button.
I know that I can use app:backgroundTint to change the color
but the default background has some padding that I want to get rid of, and the old way of using android:background to set my own background but this is no longer working.
I looked at the docs but can't find any mention to this change.
In the Material Components Library, the MaterialButton has a default style with insetBottom and insetTop with a value of 6dp.
You can change it using:
<com.google.android.material.button.MaterialButton
android:insetTop="0dp"
android:insetBottom="0dp"
../>
If you want to change the background color you can use the app:backgroundTint attribute or you can override some theme attributes from a default style then you can use new materialThemeOverlay attribute.
In your case you can do something like:
<style name="MtButtonStyle"
parent="Widget.MaterialComponents.Button">
<item name=“materialThemeOverlay”>#style/GreenButtonThemeOverlay</item>
</style>
<style name="GreenButtonThemeOverlay">
<item name="colorPrimary">#color/green</item>
</style>
Finally starting with the version 1.2.0-alpha06 you can use the android:background attribute in the MaterialButton.
<MaterialButton
app:backgroundTint="#null"
android:background="#drawable/button_drawable"
... />
The documentation for the MaterialButton class says:
Do not use the android:background attribute. MaterialButton manages its own background drawable, and setting a new background means MaterialButton can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed, MaterialButton cannot guarantee well-defined behavior.
However, the GitHub readme says:
Note: MaterialButton is visually different from Button and AppCompatButton. One of the main differences is that AppCompatButton has a 4dp inset on the left and right sides, whereas MaterialButton does not.
This mentions only left/right inset, but the Attributes section of the readme shows that all four insets are supported:
So you could add these attributes to your <MaterialButton> tag:
android:insetTop="0dp"
android:insetBottom="0dp"
Looking at https://medium.com/#velmm/material-button-in-android-e4391a243b17 I found that app:backgroundTint (and app:backgroundTintMode) works. It changes a color, but not a drawable selector.
Also you can replace <Button with <android.widget.Button.
If you want to use gradient drawable as MaterialButton's background,
set Your MaterialButton as below:
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:backgroundTint="#null"
android:background="#drawable/group_47"
app:layout_constraintEnd_toEndOf="#+id/input_password"
app:layout_constraintStart_toStartOf="#+id/input_password"
app:layout_constraintTop_toBottomOf="#+id/input_password" />
If you wish to keep your
android:background="#drawable/button_background"
And have MaterialButton respect it, then you must set
app:backgroundTint="#null"
app:backgroundTintMode="add" // it doesn't matter the value, but it must be set
Please note that you can also use app:background instead, although I've noticed enough breaking changes that I still prefer the method above.
I face the same issue when I use state drawable in a Button but It does not change the background of the button. After searching for a long time, I found 2 solutions as below:
The first solution is change the application theme from MaterialComponents to AppCompat in values/themes.xml file. then state drawable will work well.
to
<style name="Theme.MyApplication" parent="Theme.AppCompat.DayNight.DarkActionBar">
If you still want to use MaterialComponents theme then you can try the second solution.Use <android.widget.Button instead of <Button or <com.google.android.material.button.MaterialButton
<android.widget.Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/state_test"
android:text="Button" />
The second solution I found at Here
The main reason for this decision by the google design team to exclude the functionality android:background="#drawable/" from the initial release versions of the material library is to enable developers to build consistent and professional-looking designs for apps at a faster pace. This is because most developers like me are bad in making decisions related to design and colors of the app.
Also, I found this snippet from google tutorial while migrating to MDC.
Just by using android:backgroundTint
<style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
<item name="android:backgroundTint">#color/pink</item>
</style>
<com.google.android.material.button.MaterialButton
android:id="#+id/followButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/channel_header_item_margin"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/titeChannelTV"
style="#style/MyButtonStyle"/>
using a simple
app:backgroundTint="#null"
with button attributes works perfectly.
I have this button:
<Button
android:id="#+id/btn_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:theme="#style/AppTheme.Button.Toolbar"/>
And this style:
<style name="AppTheme.Button.Toolbar" parent="Widget.AppCompat.Button.Borderless">
<item name="colorButtonNormal">#color/main</item>
<item name="android:textColor">#color/secondary</item>
</style>
Even though the style inherits from Widget.AppCompat.Button.Borderless, the button still has a border.
Changing Button to android.support.v7.widget.AppCompatButton did not help.
How to remove the border then?
Edit:
Setting background of the button is not an option - by doing so the animation of ripple effect is lost.
Edit 2:
Things become even more interesting.
Tried to change android:theme to style as #cadet suggested.
When button is defined this way:
<Button
android:id="#+id/btn_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:theme="#style/ToolbarButton"/>
That's what I get:
The colors apply, but there is distinct border.
If I just change theme to style:
<Button
android:id="#+id/btn_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
style="#style/ToolbarButton"/>
I get this:
There is no border, and the style is applied only partially (text is colored, button is not)
Edit 3:
Friends, I'm looking for a way to get borderless, styled button with ripple effects using styling approach. Hacking each and every button separately in layout files might work, but that's not the point.
Try this, hope out of this one may help you
<Button
android:id="#+id/btn_photo_lib"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="startPhotoLibAction"
android:src="#drawable/library_blau_2"
style="?android:attr/borderlessButtonStyle"/>
or
android:background="#null"
set background #null. or set own created background
android:background="#null"
You can use a different View instead of Button
<LinearLayout
android:id="#+id/btn_action_alternative"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:clickable="true" />
I found a better solution, you'll wanna create a custom drawable and depending on the min version your app supports, you'll need to create two, one for Android versions pre-21(Lollipop) and another for post 21(Lollipop). The two files will need to be named identically so Android can find them and match them appropriatly based on the API level. But in the file drawable file for API 21 and above your file should look like such:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#drawable/button_normal"/>
</ripple>
This Drawable file is wrapping another Drawable that is your preferred background image or color with a ripple whose color is defined using "?android:colorControlHighlight", which is simple a reference to a default color from what ever theme the current activity is using.
If you need to support pre-21(Lollipop), your drawable file would simply be a selector, with the preferred drawable. Your preferred drawable should be the same background color, or even a transparent color to make sure you can see your parent layouts background color. Similar to this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_normal"/>
</selector>
You can combine this with a style in order to apply the borderless style to all buttons it to all buttons in a layout... I recommend you use a transparent drawable so you can use this style with all buttons regardless if their parent has a different color background. This will prevent you from making several themes with different backgrounds.
To handle versioning support, or even config support if you'd like custom drawables based on various device configurations, you would just create several drawable folders with a configuration specific suffix. So, for example, drawables only for version 21 and above you'd create a folder called 'drawable-21'.
I found a website that better explains what I'm talking about.
So I am trying to change my app color to blue and some of most the views I have are not willing to cooperate with me.
Here is the image:
Here I want to change the color of the green parts on the spinner, edittext and checkbox views (which are green) to black or blue.
I've looked all over Stack Overflow and I can't find the solution!
Thank you very much, If possible I would like to have a XML solution but I wouldn't mind a programmatic solution!
Add these to your base theme in styles.xml
<item name="colorControlNormal">#color/YOUR_COLOR</item>
<item name="colorControlActivated">#color/YOUR_COLOR</item>
<item name="colorControlHighlight">#color/YOUR_COLOR</item>
Note: The above change will affect the EditTexts and other views probably throughout the application.
If not, and if you are using the AppCompat v22 support library, you can specify the theme in the EditText like: android:theme="#style/Theme.App.Base.
This will ensure the style won't also affect other views in your layouts that you don't want to change
Also if you want to change the above solution, just add another Theme specific to EditTexts and Spinners and apply it to all Spinners if you want
<style name="MyWidgetTheme">
<item name="colorControlNormal">#color/YOUR_COLOR</item>
<item name="colorControlActivated">#color/YOUR_COLOR</item>
<item name="colorControlHighlight">#color/YOUR_COLOR</item>
</style>
and in your EditText, Spinner or any other View, just assign this theme:
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Demo"
android:lines="1"
android:theme="#style/MyWidgetTheme"
/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/MyWidgetTheme"></Spinner>
Take a look to this resource generator.
Choose your color, the widgets you want to generate and voila! You copy them to your project and reference them in your xmls.
I saw new appCompat controls are available here. And implemented it in android app, but I don't find any specific way of customizing its color.
Just like if we set accent color in style, the edit text automatically catches it. But it is not working in case of AppCompatButton.
Does anybody find something regarding this?
See here: Coloring Buttons in Android with Material Design and AppCompat
To summarize, you can use the tintBackground attribute on the button itself or you can use colorControlNormal (or a combination).
Also, you can just use Button and it'll get converted to an AppCompatButton as long as you're using the theme and inheriting from AppCompatActivity correctly.
Examples from the linked URL
theme.xml:
<item name="colorButtonNormal">#color/button_color</item>
v21/theme.xml
<item name="android:colorButtonNormal">#color/button_color</item>
or
<Button
android:id="#+id/add_remove_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/bg_remove_btn_default"
android:textColor="#android:color/white"
tools:text="Remove" />
Use the SupportLib with AppCompatButton like this:
<android.support.v7.widget.AppCompatButton
android:id="#+id/add_remove_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/bg_remove_btn_default"
android:textColor="#android:color/white"
tools:text="Remove" />
app is a mxlns: xmlns:app="http://schemas.android.com/apk/res-auto"
so the backgroundTint works also for preLollipop
I need to get the device default Switch (Api lvl 14) button. I already have Switch buttons in my app, but I want them to look like the DEVICE default Switch buttons, not like those from Android. How can I do that?
I tried to change the theme of the application but I already have a custom one which is used for my custom title bar and if I try to change the theme (e.g. Theme.DeviceDefault) I get a force close because of the custom title.
This is how the switch looks like (for my device):
May you are looking for ToggleButton (Api lvl 1), or Swith (Api lvl 14)?
Update: Okay, then you can use ImageView, which also can handle clicks. And in xml:
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/my_swich"
/>
in my_swith.xml in drawable folder:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/selectedImage" />
<item android:drawable="#drawable/normalImage" />
</selector>
And final, in code you need to set OnClickListener to image. When onClick event on Image you need to do this:
iv.setSelected(!iv.isSelected());
And you get custom(you own toogle)
I hope I correct understand your question.
Check out this page: http://androiddrawableexplorer.appspot.com/ for a list of all the usable icons. There is a usage example at the top, but if you are doing this in a menu.xml file, use some code that looks like this
<item android:id="#+id/end"
android:title="#string/end_label"
android:alphabeticShortcut="#string/end_shortcut"
android:icon = "#android:drawable/ic_menu_close_clear_cancel" />