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" />
Related
I am currently developing an android TV app and have configured a basic button on the main fragment. At the current time there is no way of indicating wether you are focusing on, or knowing you can click on this button. I created a view with a drawable background, to use as the indicator; then wrote some code (Kotlin). At first I wrote: indicator.isVisible=button.isFocused to no avail, I also tried earlier in the code to set (as a test) button.isFocused = true this also did not work. After, some research I realised that you could set the button to focused by default. After inserting this into the code, there was of course an issue with the API usage (26 or above); mine being API 22. So, I'd like to know for an API below 26 (in my case 22) how can I make the indicator visible when the button is focused? Once again, so the user knows what they're currently hovering over (especially in rows with many selectable views)
Update:
Well, looking at the View documentation, I found out there is a setOnHoverListener method and a OnHoverListener interface. I haven't tried it but I think this one is what you are looking for.
Old answer:
You can create a new xml drawable with different background colors for each state (hover, pressed, default) and set that drawable as the button's background.
The new drawable would look like this, i.e :
<?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/blue" />
<item android:state_focused="true" android:drawable="#color/gold" />
<item android:drawable="#color/grey" />
</selector>
Android 4.0 introduces the switch button (a different form of the toggle button). Is it possible through some support library to use this button on a 2.3 platform?
The short answer is no, there is no simple support library that allows the switch button to be used on 2.3, but there are several suggestions here.
I was looking for the same things a couple weeks ago, but I decided to just use the CheckBox widget on 2.3 since I didn't want to add unnecessary code for an old API.
One good suggestion in the link I provided is to replace the Drawables of the CheckBox widget with Drawables showing the SlideSwitch. It doesn't slide (just clicks on and off), but it looks better than a CheckBox.
Easy step ! If you have 2 image- power on / power off, it's easy.
Make a drawable/togglebutton_setting.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/switch_on" android:state_checked="true"/>
<item android:drawable="#drawable/switch_off" android:state_checked="false"/>
<item android:drawable="#drawable/switch_off"/>
</selector>
Add ToggleButton to switch - as background.
<ToggleButton
android:id="#+id/switch_dark_mode"
android:layout_width="53.3dp"
android:layout_height="22dp"
android:background="#drawable/togglebutton_setting"
android:textOff=""
android:textOn="" />
Comment
switch_on & switch_off are image for power on/off.
off -- https://i.stack.imgur.com/KBrrz.png
on --- https://i.stack.imgur.com/HHHJP.png
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.
What I'm trying to do
I'm trying to use in my Layout the Android 4.0 styled togglebutton. For this I selected the Theme = Theme.Holo.Light . When I take the togglebutton from there its that square with the green line, if the button is enabled.
But I'd like to use the togglebutton like they got in there config on top (take a look at the printscreen).
Question
How can I use thise togglebutton? Some Codesnippets or a quick tutorial would be great!
Best Regards
safari
Picture
New Edit: I now did a full backport of the Switch back to API Level 8 and put in on github:
https://github.com/ankri/SwitchCompatLibrary
The old post with my custom implementation of the Switch:
I'm a bit late to the party but I had the same problem. I took the source code from the other post in this thred and made my own version of the switch.
You can find the source code and documentation on my website
This is what it looks like:
edit: Updated link and picture
UPDATE: New images work on both light and dark backgrounds. Original images still available.
Also, as someone points out in the comments, make sure to save them as "*.9.png", i.e. "switch_on_on_db.9.png", etc.
Ankri's answer is great, but alittle heavy. Also, he uses the 4.2 style switches as opposed to the older (and in my opinion, prettier) 4.1 style buttons. For a quick fix, I made a drawable so that you can style your togglebutton to look like a switch.
First, here is the button style:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/switch_on_on_db" android:state_checked="true" android:state_pressed="true"/>
<item android:drawable="#drawable/switch_on_on_db" android:state_checked="true" android:state_focused="false"/>
<item android:drawable="#drawable/switch_off_off_db" android:state_checked="false" android:state_pressed="true"/>
<item android:drawable="#drawable/switch_off_off_db" android:state_checked="false" android:state_focused="false"/>
</selector>
which refer to these images:
Download the original images from here:
Old Off
Old On
Finally, you can style the togglebutton like so:
<ToggleButton
android:id="#+id/ParamToggleButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/toggletoswitch"
android:textOff=""
android:textOn=""/>
UPDATE:
Jelly Bean versions (though not identical) are now available:
Old Off
Old On
If your app targeting api level 14 or higher. Use Switch widget and make sure your application's theme is "Theme.Holo" or "Theme.Holo.Light"
However, if you want to target api level under 2.3 you have to make custom layout.
I think It's quite messy to explain about that, I'll give you an example.
You can find the "Switch" button's real implementaion in here.
Well, You can just get that source and put in your project. You'll have some error but it's not that difficult to resolve it.
Great solution above...thanks! (no name given?)
I thought someone might be able to use my xml that worked for me to make the togglebutton look like a switch:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:orientation="horizontal" >
<TextView
android:id="#+id/tv_switchToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip"
android:layout_marginTop="0dip"
android:text="#string/shake_to_add"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<ToggleButton
android:id="#+id/switchToggle"
android:layout_width="75dp"
android:layout_height="20dp"
android:layout_margin="5dip"
android:background="#drawable/togglebutton"
android:textOff=""
android:textOn="" />
</LinearLayout>
#drawable/togglebutton refers to the selector described above. Thanks again!
I'm trying to detect the focus/pressed color for button and other elements.
This is needed because I'm developing new components and it's important that those look as part of platform.
Those colors are ORANGE on android sdk and GREEN on HTC SenseUI.
If I could detect that color my component will look as part of platform on both version.
Does anyone knows how to do this?
It's possible to create "selector" which uses custom image for default state and platform default for focus/selection.
To do this follow the steps:
1) create xml file with selector in "res/drawable" (e.g. "red_button.xml"):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#android:drawable/btn_default" >
</item>
<item android:state_focused="true"
android:drawable="#android:drawable/btn_default" >
</item>
<item
android:drawable="#drawable/btn_default_red" >
</item>
</selector>
2) from folder ".../android-sdk-mac/platforms/android-1.5/data/res/drawable/" take picture "btn_default_pressed.9.png" and change color as you like (I needed to change it to red and for this GIMP is enough).
3) place altered picture in "res/drawable" (e.g. with name "btn_default_red.9.png")
4) define button:
<Button
android:id="#+id/info_button"
android:layout_width="wrap_content"
android:layout_height="37dip"
android:layout_marginTop="1dip"
android:background="#drawable/red_button"
android:text="[Info]" />
That's all.
This is result:
alt text http://img200.imageshack.us/img200/1349/custombutton.png
I had this problem too. As already stated, the problem is that the backgrounds aren't simple colors, they're Drawables that could take on all kinds of appearances. However, I found a work-around that may help. If your custom component looks something like an existing one, e.g. a Button or ListView entry, you can just steal their background/selector and set that as the background for your custom component. E.g., in your custom component constructor:
setBackgroundDrawable(new Button(context).getBackground());
or for a background more suitable for list-like components:
setBackgroundDrawable(new ListView(context).getSelector());
You may want to optimise that code somewhat, but you get the idea.
Those aren't colors. They are a few nine-patch images out of a StateListDrawable. I am skeptical that there will be a reliable way for you to determine what the color is, one that will work across all devices and all versions of Android.
This is pretty much a duplicate of: Android ListView Selector Color
Also, why do you need to detect the colours? Just do nothing and your widgets will fit in to the platform's existing look & feel.
Or if you're writing a custom theme, just make yours inherit from android:Theme.