I have created a sprite sheet (single image that contains multiple images) with 4 different icons. I would like to create a layer-list that uses different parts of the images to make a single image, for example:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/spritesheet"/>
<item android:drawable="#drawable/spritesheet"/>
<item android:drawable="#drawable/spritesheet"/>
<item android:drawable="#drawable/spritesheet"/>
</layer-list>
For example the sprite sheet would look something like this:
and I would like the final result to look like this:
I have tried the different options that are available here
however I can't find a solution.
Why don't you just use the parts of the picture?
#drawable/layers.xml, for example:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/part1"/>
<item android:drawable="#drawable/part2"/>
<item android:drawable="#drawable/part3"/>
<item android:drawable="#drawable/part4"/>
</layer-list>
And if the full picture is needed, you can use a fifth (the full) picture, or create it from the parts in a RelativeLayout thus it remains the app light-weight.
Related
I am trying to fit a drawable (VectorDrawable/BitmapDrawable) that got a 1:1 aspect ratio on first frame of Android.
I tried the following attempt without success:
styles.xml
<style name="LaunchTheme" parent="#android:style/Theme.Light.NoTitleBar">
<item name="android:windowBackground">#drawable/launch_background</item>
</style>
launch_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/white" />
<item android:drawable="#drawable/splashscreen" android:gravity="top|bottom"/>
</layer-list>
This does not maintain aspect ratio, same behavior as top|bottom|right|left as far as I can tell.
I desired this output:
Any ideas how to achieve this?
Try using android:gravity="center|bottom|clip_vertical"
The only downside is that if there is not enough space, your image won't be fully shown, but it will be clipped, I couldn't find an way to do this directly from a drawable. But from the tests I did it works pretty well, and it doesn't clip that much of the image. You could play more with the gravity options.
Another way will be to just create an layout, where you will use an ImageView and set the scaleType to fitCenter.
I'm trying to use a 9-patch image as a splash screen, but I get a weird artefact when doing so.
I use the following style on the activity
<style name="AppTheme.Splash" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/splash_screen</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
</style>
This references the following drawable
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#color/splash_background" />
</item>
<item>
<nine-patch
android:src="#drawable/test_splash"
android:tileMode="disabled"
android:gravity="center" />
</item>
</layer-list>
The 9-patch image has two scalable vertical regions---above and below "Middle". There is no horizontal scaling set.
What this ends up giving me is
Where is that black bar 3/4 of the way down coming from?
I had the same issue. After scrubbing thru all of my splash.9.png files looking for the problem, I retreated and tried one that worked fine in another app. It produced the same artifact.
It seems the issue is with the Theme.AppCompat.Light.NoActionBar. Try this instead:
<style name="splashscreen" parent="android:Theme">
It doesn't look exactly the same around the title bar and such, but it looks like a splash screen.
I don't use Xamarin (I use Titanium), but I had this exact problem when I didn't provide a padding box (the black pixels on the right and bottom). I fixed it by filling the padding lines with black.
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 want to have custom background for the menu items displayed in the ActionBar. I found out that I can do that by adding the following item to my app theme style definition:
<item name="android:actionBarItemBackground">#drawable/actionbar_button</item>
Where actionbar_button.xml contains:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/action_btn_on" android:state_pressed="true" />
<item android:drawable="#drawable/action_btn_off" />
</selector>
However, this causes the background image to also render behind the custom app logo displayed on the left of the ActionBar. After several attempts at figuring out a selector that would include only the buttons, I came up with this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/action_btn_on" android:state_pressed="true" android:state_enabled="true" />
<item android:drawable="#drawable/action_btn_off" android:state_pressed="false" android:state_enabled="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
Which sort of worked, and after the app loads fully the background behind the logo is transparent as I want it. But the problem is that while it's still loading it briefly shows the logo with the button background behind it and more annoyingly, it scales and crops the logo to fit inside the fill area of the 9-patch graphic that is the button background. When finished loading, the background is switched out, but the scaling and cropping remains, which looks quite ugly. How can I fix it?
Have not found a working solution to the general problem of setting image-based backgrounds to ActionBar buttons, but the scaling/cropping does not happen if I use entered XML based backgrounds, such as created with a layer-list of shapes. For some cases in may not be viable, but in my case it was entirely possible, and maybe even better than using a bitmap based resource.
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>