I am getting crazy with switch buttons in Android 4.
First of all, I have set a selector as background with two different PNG files selected from drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/form_switch_no" android:state_checked="false"/>
<item android:drawable="#drawable/form_switch_ok" android:state_checked="true"/>
<item android:drawable="#drawable/form_switch_no"/>
</selector>
but I don't know why they are x-scaled. I want to manage this size, but I have tried to change layout_width/height/weight... without succes.
I have also a custom PNG file to be used as the thumb of the switch. I also need to manage the size of this thumb, because if I set textOn and textOff propieties as "", thumb gets a very small size. Moreover, I would like to change thumb padding in respect of the background, because It does not appears centered.
Here is my Switch XML definition:
<Switch
android:id="#+id/switchUsers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/user"
android:textOn=""
android:textOff=""
android:thumb="#drawable/form_switch_slider"
android:track="#drawable/switch_user_selector" />
I have tried to change image sizes and making them nine-patch ones, but I can't reach my target.
Any help will be appreciated. Thank you!
The solucion for the extremely small slider with no text was solved with a combination of:
android:thumbTextPadding="25dp"
android:textOn=""
android:textOff=""
Then, the problem of the small padding in the same slider was a 9-patch image problem. I had to extend bottom and right black lines one more pixel simetrically.
Hope this helps someone with the same problem.
Related
I am trying to align android switchcompat on both side whether its checked or unchecked but without success.
<android.support.v7.widget.SwitchCompat
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:checked="true"
android:clickable="true"
android:layout_gravity="center_vertical"/>
and here is the result
Any ideas how to get it done?
The Switches (the view bounds of switches to be specific) in your image are aligned as expected. However, it appears as though they are not aligned because the thumb actually goes a little out of the switch track (still within the view bounds). If you want the thumb and track to be aligned on both sides, you can create a custom Switch.
An example would be:
Create background.xml as follows:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/drawable1" />
<item android:state_checked="false" android:drawable="#drawable/drawable2"/>
</selector>
Set this as background for Switch:
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background"/>
You will get something like:
I know this aint perfect in terms of design, but you get the idea!
This shows that the view bounds are actually aligned in both checked and unchecked states.
You can customize it further by setting the track, thumb and so on...
On tweaking the background a little and setting the track you can get something like:
Cheers!
I'm trying to make a custom button style with a 3d look to it, but I'm having issue with the "pressed" state of the button. The button changes image properly, but the text stays still, which makes it look like the text is actually sliding upwards on press.
(Red lines added to show the cancel button's baseline)
XML for the button view (cmdNegative is the cancel button, layDialogControl is a layout directly above the buttons)
<Button
android:id="#+id/cmdPositive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_positive"
android:text="Accept"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toBottomOf="#+id/layDialogControl"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/cmdNegative"
app:layout_constraintBottom_toBottomOf="parent" />
XML for the button style (button_gray is the exact same as button_green just... well... gray)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#drawable/button_gray" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/button_green_pressed" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#drawable/button_green_pressed" />
<item
android:state_enabled="true"
android:drawable="#drawable/button_green" />
</selector>
Unpressed 9 patch:
Pressed 9 patch:
As far as I'm understanding, setting the pixels on the right/bottom should have defined the "content area" and the text should stay in the content view, buuuuuuut that's not the case. Any ideas or pointers as to where I've messed up would be greatly appreciated.
I think you have misunderstood 9-patch images. The stretchable areas (top and left sides) that you define will stretch according to your layout definition. The content area, right and bottom parts defined will set the limits for your content similar to like specifying a rectangle/square of area where your content will be kept. Your image for the accept button(pressed) will not stretch when clicked, thus whatever your image looks like is showing.
Furthermore, if your image has the text in it then there is no point of having a content area. If your button image has text defined then you can solve your problem by re-defining your content area. In other words on the pressed-state you are just substituting an image which had the correct content area region so it looks like it has been stretched on click but it is actually just another image.
Our graphic designer sent me a PNG to put inside spinners of our app. But, the image appears too big in the phone. I could resize it, but due to different screen sizes, i don't think its a nice solution.
I did a spinner_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/icono_desplegable_activar"
android:state_enabled="true"/>
<item android:drawable="#drawable/icono_desplegable"
android:state_enabled="false" android:state_window_focused="false"/>
</selector>
And, then, in the layout:
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textactivity"
android:layout_alignParentStart="true"
android:id="#+id/spinneractivity"
android:background="#drawable/spinner_selector"/>
How can I tell the spinner NOT to resize itself according to the image, but resizing the image to fit the spinner?
Thank you.
Use 9 patch image as background of your spinner. If you can't use a 9-patch image, try setting the height and width attribute of the spinner to a fixed value.
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.
I've learned how to tint an image when it's pressed by adding an OnTouchListener in which I call setColorFilter on the image.
I've learned how to use nine-patch images as the background for Buttons and ImageButtons.
The problem is, nine-path images don't stretch if they're the src for an ImageButton, and the tint has no effect on the background image.
How can I tint a nine-patch ImageButton when it's pressed? Any suggestions?
I know it's an old question but it seems that it's the only one on this topic.
You can tint nine patch images by creating an xml resource file containing a nine patch node and a tint node. Example :
<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/nine_patch_image"
android:tint="#android:color/black"/>
You may then reference this file in your background attributes :
<LinearLayout
android:id="#+id/some_id"
android:background="#drawable/xml_filename">
Hope this will help someone
So I'm 3 years late but I found a way to do this.
(I'm using Xamarin so excuse any C# formatting I miss)
#Override
protected void onDraw(Canvas canvas)
{
NinePatchDrawable bg = (NinePatchDrawable)getResources().getDrawable(R.Drawable.whatev);
bg.setBounds(0, 0, getWidth(), getHeight());
bg.setColorFilter(new PorterDuffColorFilter(color, PorterDuff.Mode.MULTIPLY));
bg.draw(canvas);
base.onDraw(canvas);
}
Another option, is using backgroundTint (available on API21 and above):
<TextView
android:id="#+id/chat_bubble_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/left_bubble"
android:backgroundTint="#color/main_color"
android:gravity="center_vertical"
android:minWidth="200dp"
android:textColor="#android:color/white"
android:visibility="visible"
tools:text="message" />
I found one way you can kinda sorta of do this. Using a purely gray-scale, semi-transparent 9-patch image as your button background, wrap the button in a view group which has your tint color as its background like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F00"
android:orientation="vertical" >
<Button
android:id="#+id/my_butt"
android:background="#drawable/my_semi_transparent_gray_9_patch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I'm a tinted 9-patch button!" />
</LinearLayout>
The main problem is that if your image has transparent edges, the tint color will show through where you don't want it, but if your image edges used a fully opaque color that matched the background of whatever container you put this thing in, it might work well enough. You also might need to write your own selector that changes those background colors for each state you care about. I'm not recommending this approach but maybe it will help someone. I agree that it's a shame that tinting isn't built into the 9-patch design because it feels stupid to maintain a bunch of identical images that differ only in tint, especially when you multiply that by a number of different drawable sizes. Even better would be for Android to natively support SVG. I've modified the open-source "svg-android" library so that with the right art I only need a single image that can be stretched and tinted as needed.
I think you'd have better results by making a separate asset for each button state. For instance, you can make a drawable xml file like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/btn_focused"
android:state_pressed="false"
android:state_focused="true" />
<item android:drawable="#drawable/btn_default"
android:state_focused="false"
android:state_pressed="false" />
</selector>
Then create a style for your buttons like this:
<style name="PushButton">
<item name="android:background">#drawable/btn</item>
</style>
Then you should be able to style your image buttons and set the src to whatever image you want.
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
style="#style/PushButton" />