9 patch editor android studio suddenly black - android

Anyone with experience having the 9 patch editor in AS suddenly start using a black background for images? I have had no problems using it, now suddenly I can't make any edits. The image below should have a transparent background. If I try and drag the stretchable patches nothing changes, it keeps resetting itself, so to speak. Also this change happened in the same session.

Question is old, but I have run into this issue 5 minutes ago. The problem occur when I save custom .png in paint.net and choose option for depth color "auto-detection". But when I saved it with with color depth "32 bit" all ok, and background is transparent.

I have the similar problem, right-click to select "Create 9-Patch file...", the transparent area become black. It only occur in some images after converted by ImageMagick.
Check the image details by pngcheck tool:
xb#dnxb:/tmp$ pngcheck msg_box.png #original image
OK: msg_box.png (2251x967, 32-bit RGB+alpha, non-interlaced, 99.9%).
It becomes palette+trns after converted by ImageMagick:
xb#dnxb:/tmp$ convert msg_box.png -transparent white -trim msg_trim.png
xb#dnxb:/tmp$ pngcheck msg_trim.png
OK: msg_trim.png (394x311, 8-bit palette+trns, non-interlaced, 98.5%).
The solution is prefix the image with png32 to force it outputs RGBA:
xb#dnxb:/tmp$ convert msg_box.png -transparent white -trim png32:msg_trim.png
xb#dnxb:/tmp$ pngcheck msg_trim.png
OK: msg_trim.png (394x311, 32-bit RGB+alpha, non-interlaced, 99.4%).
xb#dnxb:/tmp$
Now when I paste this image in Android Studio and right-click to select "Create 9-Patch file...", then it able to keep transparent instead of black.

Related

How to expand vector drawable?

I was trying to expand my shape but only from one side.
What I have:
https://imgur.com/NboRnFw
What I want to have:
https://imgur.com/eTQpA75
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="368dp"
android:height="257dp"
android:viewportWidth="368"
android:viewportHeight="257">
<path
android:pathData="M0,6H348C359.046,6 368,14.954 368,26V243H0V6Z"
android:fillColor="#E7C9FF"/>
</vector>
How can I do this in Android Studio? Is there some kind of image scaling to achieve that? I don't want to change the resource code of this shape.
For something like this, its better yo use 9 patch images. You wouldn't achieve this result any other way since changing width height ratio will make the image distorted.
You can specify the area which expands by giving it 1 pixel order, very easy to set up and there is a built in editor in Android Studio.
Make a PNG from your SVG first, then in Android Studio, right-click the PNG image you'd like to create a NinePatch image from, then click Create 9-patch file.
https://developer.android.com/studio/write/draw9patch
It takes literally a few seconds to create a 9 patch. You can also use this online editor to build a nine patch without Android Studio.
(I was trying to make your drawable into a 9 patch but it had a white background which was causing issue.)

Android Studio Image Asset Launcher Icon Background Color

I have a .png logo for my app which doesn't have a background, when I add it to android studio as an Image Asset I am forced to have a background. The hex field doesn't accept 8 digit color codes, 6 digits only. Is there anyway to keep the background invisible?
To make background transparent, set shape as None.
See the image below:
EDIT:
For Android Studio 3.0,
you can set it from Legacy Tab
I'm using Android Studio 3.0.1 and if the above answer doesn't work for you, try to change the icon type into Legacy and select Shape to None, the default one is Adaptive and Legacy.
Note: Some device has installed a launcher with automatically adding white background in icon, that's normal.
You have two ways:
1) In Background Layer > Scaling, reduce the Resize to 1
and then in Legacy > Legacy Icon set Shape as None
2) in Background Layer > Scaling > Source Asset, you can set an image as a 1x1 pixel (or any size) transparent.png image (you've already created).
and then in Legacy > Legacy Icon set Shape as None
the above approach didn't work for me on Android Studio 3.0. It still shows the background. I just made an empty background file
<?xml version="1.0" encoding="utf-8"?>
<vector
android:height="108dp"
android:width="108dp"
android:viewportHeight="108"
android:viewportWidth="108"
xmlns:android="http://schemas.android.com/apk/res/android">
</vector>
This worked except the full bleed layers
This is just another workaround.
For the 'Foreground Layer', select 'Asset type' as text and delete the default text in the text field.
For the 'Background Layer', select 'Asset type' as image and now choose the path of the image you want as an icon.
And you are good to go.
Android Studio 3.5.3
It works with this configuration.
I Just put my view background (color code) as ClipArt or Image background, and it looks like transparent or no background where both have the same color as background.
These are the steps I took to make an image transparent:
1- I used an online website which makes the image transparent, there are a lot of them. For me, I use this https://www241.lunapic.com/editor/?action=transparent and sometimes this http://www.online-image-editor.com/help/transparency
2- In Android Studio (I'm using version 3.1.3), open Image Asset from app > res (right click) > New > Image Asset
3- In the Path, choose the location of the transparent image which you downloaded from the online website, and make the other options as shown, then Next, then Finish. The five different sizes of image mdpi(48×48), hdpi(72×72), xhdpi(96×96), xxhdpi(144×144), and xxxhdpi(192×192) will be created in the res/mipmap-density folders.
4- If you need sizes (dimensions) different from above, you can use this website http://nsimage.brosteins.com/ to upload your PNG image of biggest size that will be used in xxxhdpi. After uploading, you can download a zip file containing the five different sizes of image in the res/drawable-density folders.
First, create a launcher icon (Adaptive and Legacy) from Image Asset:
Select an image for background layer and resize it to 0% or 1% and
In legacy tab set shape to none.
Then, delete folder res/mipmap/ic_laucher_round in the project window and Open AndroidManifest.xml and remove attribute android:roundIcon="#mipmap/ic_launcher_round" from the application element.
In the end, delete ic_launcher.xml from mipmap-anydpi-v26.
Notice that: Some devices like Nexus 5X (Android 8.1) adding a white background automatically and can't do anything.
With "Asset Type" set to "Image", try setting the same image for the foreground and background layers, keeping the same "Resize" percentage.
I just added the icon as a normal icon: New -> Vector Asset
and then change the app icon in the Manifest file.
For Foreground Layer choose "Text" and then delete the content text
Finaly choose the path of the image you want as an icon.
enter image description here
Using android 3.0.1
I noticed this weird behavior(solution),
First: in background layer in the source_asset change the asset_type from image to color and than change it back to image.
second: enable trim in scaling and then resize it to a small percentage and it will work perfectly.
PS: If u didn't do the first step the scaling wont take affect.
and if anyone have an explanation for this please provide.
steps

Error:Must have one-pixel frame that is either transparent or white in Android Studio

I have just imported a project from eclipse to Android studio. Almost for every second image , android studio is giving the following error.
Error:Must have one-pixel frame that is either transparent or white.
I am trying to edit my images for last few hours, but couldn't do it. Can anyone guide me whats the best solution for it.
Why its in only Android Studio why not in Eclipse.
This is shown because you're trying to edit 9-Patch images that don't have the appropriate 1-pixel border.
Android uses an image format called 9-Patch which allows you to define stretchable areas in an image (you can read more about it here). To fix your problem, either add an outer 1-pixel thick transparent frame to your png images or simply rename them from .9.png files to .png files

9 patch image prevent build project android studio

I am moving to Gradle build . but i have this error for a lot of 9-patch images .
Note the drawable is auto generated by http://android-holo-colors.com
but they are old.
I am using android studio 0.5.1
and my build tool version is 19.0.3
this is the error
Error:Execution failed for task ':app:mergeDebugResources'.
> Error: Failed to run command:
/Applications/Android Studio.app/sdk/build-tools/19.0.3/aapt s -i /Users/Ed/Desktop/TestAndroid/app/src/main/res/drawable-mdpi/spinner_default_holo_dark.9.png -o /Users/Ed/Desktop/TestAndroid/app/build/res/all/debug/drawable-mdpi/spinner_default_holo_dark.9.png
Error Code:
42
Output:
ERROR: 9-patch image /Users/Ed/Desktop/TestAndroid/app/src/main/res/drawable-mdpi/spinner_default_holo_dark.9.png malformed.
Frame pixels must be either solid or transparent (not intermediate alphas).
Found at pixel #3 along top edge.
/Users/Ed/Desktop/TestAndroid/app/src/main/res/drawable-hdpi/cab_background_bottom_test.9.png
Error:Ticks in transparent frame must be black or red. - ERROR: 9-patch image /Users/Ed/Desktop/TestAndroid/app/src/main/res/drawable-mdpi/spinner_default_holo_dark.9.png malformed.
Anyone faced the same problem.
Have you tried following the suggestions in the error log?
I.e. take a look at the 3rd (possibly 4th if it treats it as zero indexed?) Pixel along the top row in an image editor:
Is the pixel red or black (#FF0000 or #000000)?
Does it have an alpha value of 255 or 0?
If the answer is "no", then I guess that's your problem. This will then obviously also need to be applied to all other marker pixels around the edge of the images.
I'd add this as a comment, but don't have enough rep - sorry.
I saw a solution in other feed and the way to fix this issue is to use draw9patch tool to open the image and save it directly. I use this way to solve this issue.
About "draw9patch", you can use that tool in the tools directory of the Android sdk folder or use it directly by clicking the image within the Android Studio, it uses draw9patch as well.
My two cents,
I used photoshop to create my ninepatch and came across this error.
I had used the brush tool in brush mode with the black color to paint the border pixels (content and stretch)
The problem with the brush is that it also colors contiguous pixels with just a tiny amount of very transparent black so that you can't see it. Using the eraser in 1px crayon mode on all the pixel that should have been transparent worked for me.
When working on a nine patch in photoshop always use the brush tool in crayon mode

Problem while creating 9 patch images

I am creating 9 patch images using draw9patch tool and saving images with extension .9.png but when I am using created 9 patch images in app it is giving error.
But when I downloaded an 9 patch image from net & used in my same app it is working properly.
I am not getting what I am doing wrong .
Please Help
You must be creating the 9-patch wrongly. I had also the same issue . You must be drawing the black patch on one side of image. Try to draw the black patch by dragging your mouse two side of image. I hope you can understand my words...........
Nine-patch images on Android must have transparent 1-pixel edge, and have opaque pixels in left-top border (1 pixel wide) specifying which part of image is stretched, and which do not.
More here: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

Categories

Resources