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.
Related
On Android Studio I made an image perform like a button. Though what I can't find anywhere is how do I make it so when I click on the image aka the button it becomes a bit smaller and when you release it comes back to original size. Ik that onClick you can perform functions and activities and what not but how do I change the actual button image so as I'm holding down the click button it gets smaller and when i release it comes back to its original size.
You can use selectors to achieve that. For example define this in your drawable folder:
selector_state_xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_bg_selected" android:state_selected="true"></item>
<item android:drawable="#drawable/button_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/button_bg_normal"></item>
</selector>
And use this as your View drawable:
<Button
android:id="#+id/your_button"
android:background="#drawable/selector_state_xml"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
An alternative could be using ScaleAnimation
I have an app, that has an ImageViev, which can be clicked to perform an action. I want it to be a little bit bigger when it's pressed, and go back to normal when it's released. The problem is, I have 10 different images that appear in the ImageViev, depending on the situation. I've read a lot of threads about that, and none of the solutions seems to solve my problem. I need to:
Make an image bigger when the button is pressed, or replace it with a bigger version.
Make the image shrink when the button is released, or go back to normal version of the image.
When I change the image in the ImageView, it will still change its size when pressed.
I've tried this so far:
Creating a drawable item, that looks like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/b1big" />
<item
android:state_pressed="false"
android:drawable="#drawable/b1"/>
</selector>
but it won't work, because Android automatically scales the image to the size of the ImageView, so no matter if b1big is bigger than b1.
Changing the width and height of the drawable item, but it doesn't have these parameters.
Is creating 10 normal images like image1, image2... image10, then creating 10 big images like image1big... image10big and then creating 10 drawable objects like:
<item
android:state_pressed="true"
android:drawable="#drawable/image1big" />
<item
android:state_pressed="false"
android:drawable="#drawable/image1"/>
and using them as src for my ImageView? How do I prevent them from scaling then?
Update you selector's content to
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/b1big" />
<item
android:drawable="#drawable/b1"/>
</selector>
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.
How do I style an image button so that it displays as a PNG icon but on click/touch, the PNG shape gets a soft glowing edge?
You probably want to look at 9-patch
Basically you create a transparent png with the glow effect baked into the image, and it'll scale the edges while keeping the corners intact and letting you place the content within a predefined area of the image.
To map your images to a button, you need a selector, which is a xml file and goes into your projects drawables. A sample grabbed from another answer looks like this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/red_button_pressed" />
<item android:state_focused="true" android:drawable="#drawable/red_button_focus" />
<item android:drawable="#drawable/red_button_rest" />
</selector>
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" />