Use Android 4.0 styled toggle-button - android

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!

Related

Android M Developer Preview - TextView android:textColor being ignored

I have meet this problem when I try to upgrade my app to compile with compileSdkVersion 23
Just as my title says, the TextView used android:textColor="#android:color/white" no longer works.
I have tried to narrow down the cause by creating a simple testing app, and I have found that whenever my TextView has android:enabled="false", my android:textColor is being ignored.
I think I am going to file a issue to Android Developer Preview, however, I would like to confirm whether it is my own problem.
Here is the TextView I used for testing
<TextView
android:enabled="false"
android:textColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:textSize="50sp"
android:gravity="center"
android:layout_centerInParent="true"/>
Edit:
I have created a very simple project on github with this problem, I have tested it on emulator with android 19, 21, 22, 33, and on my Moto G with android 5.0
https://github.com/cyfung/BuggyTextView
As a workaround, try to use selector with defined state for android:state_enabled="false".
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#android:color/white" android:state_enabled="false"/>
<item android:color="#android:color/white"/>
</selector>
Confirmed to be a bug, and fix would be available in future build.
https://mail.google.com/mail/u/0/#inbox/14fb020ef65f9a41
Please refer to answer from #Alexandr if you need a workaround.

Style TextView like a Spinner with appcompat v21

I want to make a TextView look like a spinner with the new Material style.
I managed to do it with "Widget.Material.Light.Spinner" style, but I didn't find any alternative in AppCompat (v21) resources.
My xml:
<TextView
android:id="#+id/sp_league_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
tools:text="Premier league"
style="#android:style/Widget.Material.Light.Spinner"
android:textColor="#android:color/white" />
I'd go with:
style="#style/Widget.AppCompat.Spinner"
But feel free to pick another one:
The style solution didn't work for me, but I've found another solution:
I use AppCompatButton instead, and have this :
XML:
<android.support.v7.widget.AppCompatButton
android:background="#drawable/abc_spinner_mtrl_am_alpha"
... />
Java:
((AppCompatButton)findViewById(...)).setSupportBackgroundTintList(new ColorStateList(new int[][]{new int[0]}, new int[]{0xff52A1E8}));
EDIT: seems it won't work well anymore, but found another solution :
<style name="Widget.MyTheme.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
</style>
It's true that it's for the action bar , but it should work for other cases too.
I Tested the the solutions mentioned here 1.Using style="#style/Widget.AppCompat.Spinner) and
2.Using Widget.AppCompat.Light.Spinner.DropDown.ActionBar
Both these works only on Android 5.x And Above Devices and do not work well for Android devices running on 4.x and below.
Hence, I am posting my solution for those who wanted to have a Drop-down like effect to TextView for all devices.
App needs to create a Drawable inside drawable folder in App, let's say dropdown_spinner.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/ic_icon_arrow"
android:gravity="end" />
And then simply use this as a background for the TextView as below:
<TextView
android:id="#+id/mySpinnerTextView"
android:background="#drawable/dropdown_spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
In AndroidX, use style="#style/TextAppearance.AppCompat.Widget.TextView.SpinnerItem"

Can switch (ToggleButton) for Android 4.0 be used in 2.3

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

Android DeviceDefault Switch button

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" />

Android: Custom spinner help

I am following this tutorial on how to create custom spinners. Near the begining it instructs you to navigate to: *android.jar\res\drawable-finger* But for some reason I can't find the "drawable-finger" folder in my android.jar. I thought it may have to do with the API level so I changed it from 1.6 to 2.1 to no avail. I went around this and put them in the drawable folder thinking I could just work around it but then the spinner has the image stretched and malformed instead of repeating the image in the x direction. Any ideas?
Thanks!
EDIT: Here is the code
Spinner
<Spinner android:id="#+id/catspinner" android:layout_marginLeft="15dip" android:layout_marginRight="15dip"
android:layout_width="fill_parent" android:layout_centerHorizontal="true"
android:layout_height="wrap_content" android:layout_centerVertical="true"
android:drawSelectorOnTop="true" android:background="#drawable/spinnerbackground"/>
code for the spinner background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/myspinner_select" />
<item android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/myspinner_press" />
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/myspinner_press" />
<item android:drawable="#drawable/myspinner_normal" />
</selector>
it looks like this
Sherif is correct. As far as following the tutorial, it doesn't (and shouldn't) suggest that you put the images back in android.jar/res/drawable-finger. You should put your versions of those images in your drawable folders (i.e. drawable-ldpi, drawable-mdpi, etc).
I suspect that the issue with the image being stretched and not repeated is a result of your code or image, not the location you put the images. You could post your code and we might be able to help with that.
I also noticed that the tutorial looks like it is based off of a pre-release Android SDK version. I'm guessing that the drawable-finger folder no longer exists. It's also possible that other elements of the tutorial are outdated.

Categories

Resources