Android - Text overlays icon on toggle button - android

I have a toggle button with an icon and text as shown above (pointed at with the green arrow). Most devices I have tested worked just fine.
Just with so far two Samsung tablets (Samsung Galaxy Tab 7.0 and a 10 inch Galaxy Tab) there is this problem where the text overlays the icon (pointed at with the red arrow) as shown below.
I have tried all aligments, paddings and such with no working result.
The web and SO surprisingly did not come up with a solution nor the problem.
This is the XML I am using right now for the toggle button. It is wrapped amongst other defintions into a RelativeLayout:
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/label_subscriptions"
android:id="#+id/subscription_button"
android:textOff="#string/btn_subscribe"
android:textOn="#string/btn_subscribed"
android:button="#drawable/star_selector"
android:background="#android:color/transparent"
android:textColor="#color/textColor"
android:layout_toLeftOf="#+id/navigation_next_item"
android:layout_alignBottom="#+id/channel_headline_image"
/>
The #drawable/star_selector has the following definition:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#drawable/ic_like" />
<item android:state_checked="true" android:drawable="#drawable/ic_liked_fav" />
</selector>
Thank you for any hints pointing me in the right direction!

Actually its not working on lower APIs
Change
android:button="#drawable/star_selector"
to
android:drawableLeft="#drawable/star_selector"
Hope it will help.

To allow crossVersion properly you should use drawableStart instead of drawableLeft. This issue appears only with Android 4.1
If you use drawableLeft you will not be able to add a padding between text and drawable, but with drawableStart you can use the "drawablePadding" property
Regards!!!

Related

Splash screen with more than one image on android

Currently using the layer-list to achieve a splash screen with a drawable at the center. The app is targetting API 23+ so using bitmap is not mandatory unless it's necessary for what am trying to do. Basically I'm trying to pull off something similar to WhatsApp's new splash screen where the company reference is placed at the bottom of the screen.
But for some reason, the second image is not being shown at all even though it's visible in the Android Studio preview distorted. What I have currently is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/black700" />
<item
android:drawable="#drawable/ic_app_icon"
android:gravity="center" />
<item
android:drawable="#drawable/ic_company_mark"
android:gravity="bottom|center" />
</layer-list>
As stated in the comments I've noticed that the bottom item depends on the phone resolution on some phones. Why it depends on the resolution, I don't know.
To work around you can add padding at the bottom
<item android:bottom="50dp">
for your bottom item in your layer-list and it will show up.
I haven't found a way to dynamically set the value depending on something and therefore used a value which "looks good" for most display resolutions.

Styling a AppCompatButton in v21 to have no shadow and corner radius of zero

I have a AppCompatButton defined in a XML layout, and I have set a theme for it like this:
android:theme="#style/CustomAccentOverlay"
And I have set:
android:stateListAnimator="#null"
to remove the shadow. I have two problems with this.
The height of the button is deducted the height of the shadow, even though the shadow is not shown. Should I remove the shadow in some other way, or how do I fix this?
The button has rounded corners, and I want the corners to be sharp. I can not set a background on the button, because I want to keep the standard ripple effect and that goes away if I set a background (at least I don't know how to keep it if I set a background). I have tried setting
<item name="android:bottomLeftRadius">0dp</item>
and all the other corners to the CustomAccentOverlay theme and also its corresponding style, but it does not work. How can I set the corner radius to zero on my button?
Thank you
Søren
Use the following code for the Button.
<android.support.v7.widget.AppCompatButton
android:layout_width="200dp"
android:layout_height="200dp"
android:text="Button"
android:stateListAnimator="#null"
android:elevation="0dp"
android:background="#android:color/darker_gray"
android:foreground="?attr/selectableItemBackground"
/>
I will explain the attributes.
android:elevation="0dp" and android:stateListAnimator="#null". No shadow for the button.
android:background . Set the desired color as background. It removes the rounded corners.
android:foreground="?attr/selectableItemBackground" . It gives the ripple effect when the button is pressed.
Update 1:
It seems like android:foreground attribute for View works from API 23. For below APIs, create a drawable with ripple in drawable-v21 folder and set it as background to the button,
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="NewApi"
android:color="#color/ripple_color">
<item android:drawable="#color/normal_state_button_background_color"/>
</ripple>
For pre Lollipop versions, create a drawable with selector in drawable folder with the same name.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed_color"
android:state_pressed="true" />
<item android:drawable="#drawable/focused_color"
android:state_focused="true" />
<item android:drawable="#drawable/normal_color" />
</selector>
First question:How to remove shadow of a button?
Here is the answer:
Just add this attribute to your button
android:stateListAnimator="#null"
Second question: How to make the corner of button sharp without losing the standard ripple effect.
Here is the answer: But first you have to make two drawble file with same name but one for below api 21 and one for api > 21 because the ripple is only available only api > 21.So now I am showing how to create that.Read the following text carefully
Right click on the drawble folder and choose new and "Drawble resource file" and hit next then name the drawble whatever you like and press ok.Then again right click on the drawble folder and choose new and "Drawble resource file" and hit next and name the drawble exactly what you named the previous drawble folder but this time at the bottom you can see a section called "available qualifiers".Go to this section and at the very bottom you can see "Version",click it and then you can see a arrow icon at the right,click it then in the "Platform api level" add 21 and then press ok.And now if you expand drawble folder you can see two file of your created drawble file.Once for api that is below 21 and once for upper 21.Open drawble file that you have created and make sure you open that have "(v21)" at the last.Now delete everything from there and add the following code
<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="?attr/colorControlHighlight" xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners android:radius="0dp"/>
<solid android:color="#D6D7D7"/>
</shape>
</item>
</ripple>
And add this attribute to your button
android:background="#drawable/youdrawblefilethatyouhavecreated"
And now if you run your application you can see that there is no shadow and your button has sharp corner and if you click the ripple shows up.
Lastly,your button look something like this
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button 1"
android:background="#drawable/yourcreatddrawblefile"
android:stateListAnimator="#null"/>
Hope this help!
It really sounds like you want to use a clickable TextView rather than a Button. TextView by default will not have shadow and has sharp corners and you can attach a click listener to it. Remember, Button is just a fancy TextView with a lot of visual add-ons to it, and it sounds like you want to remove a lot of it.
If you want to keep the ripple on the TextView and define your own background, set android:foreground="?attr/selectableItemBackground"
EDIT: Even though the other answer was marked accepted, I would still argue that the OP should use a TextView with a click listener and applying the ripple effects to that than using a Button. Clickable TextViews in this manner are exactly how the Google I/O app implements all of their flat buttons that meet Material Design spec.
Use this code
<android.support.v7.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorAccent"
android:text="#string/button" />

9Patch on Lollipop shows gray oval in background

I have the following button:
<Button
android:layout_height="32dp"
android:layout_marginTop="4dp"
android:layout_marginLeft="#dimen/aecs_item_inner_padding_positive"
android:id="#+id/aecsTelephone"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_below="#id/aecsServicesContainer"
android:layout_alignParentLeft="true"
android:text="Mobile"
android:background="#drawable/selector_mobile_button" />
and it has the following background selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/mobile_btn_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/mobile_btn"></item>
</selector>
on Lollipop only the background shows an oval gray layer and I don't have any clue from where this layer is shown?
Note that using the none 9-patch version of the image fixes the problem, but I don't know why!
mobile_btn.9.png
Lollipop Screenshot:
KitKat Screenshot:
Edit:
The problem is solved. Okay..It was in the transparency of the 9-patch image, I used it from the hdpi folder and when it gets scaled the transparency area gets corrupted. However I am still shocked why on earth the problem shows up on Lollipop only. After I used the image as it is without any scale the problem is fixed.
Use TextView and set android:focusable="true" if you don't need the default Button styling. The Button widget is just a tiny set of properties on top of TextView and includes default elevation and z-depth animation.

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

Use Android 4.0 styled toggle-button

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!

Categories

Resources