Every image asset I add to my project on Android Studio gets added with an opacity of something like 0.5 and I'm unable to change its opacity programmatically using setAlpha method.
I'm adding it as an Action Bar and Tab Icons type and as Asset Type: Image.
Anyone else had this problem? The asset having an opacity of 1 is quite important for what I'm trying to do.
profileButton = (ImageView) findViewById(R.id.profileButton);
profileButton.setAlpha(1f);
SOLVED: Wasn't anything Android related. Sorry.
You can not change alpha of your drawable with View.setAlpha() method.
You should create a drawable with no alpha (value:1.0f) and then change alpha of the view if needed.
Drawable is the source used to generate the Bitmap that will be used to fill the ImageView or other elements. Then your view has its own alpha display settings that you can dynamically change.
In your specific case you have to edit your image sources to get them with no alpha, I think you have no other choices. If they are vector resources you have just to change alpha values in source files.
Related
I'm trying to adjust the all_inclusive svg image to my rectangular button. The shape itself is rectangular as well but the vector asset is square (24x24) with white spaces above and under the shape. These spaces force the shape itself to be very small. How to make the all inclusive svg rectangular by deleting that padding on top and on bottom?
In this picture the image is set to fit the guidelines on the left, top and right side:
<ImageView
android:id="#+id/imgInfinity"
app:srcCompat="#drawable/ic_infinity"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="0.75"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="0.75"
app:layout_constraintEnd_toEndOf="0.25" />
Things that did not work:
pivot vector asset with a group -> I just cant figure out the dimensions without messing up the original shape. Same storty with scaleX/Y or translateX/Y. I got it to work on my other buttons with simpler shapes though.
adjusting android:viewportheight or android:height -> it deshapes the picture to a weird form
crop svg online --> as Googles original SVG pathData is already 580 characters long, cropping tools only make it to large for android to deal with (above 1000 charactes)
crop svg picture with word and extract from zip file-> it doesnt compress svg images so it stays rectangular with the white spaces above and under.
Set a seperate horizontal guideline for the top of the picture. It does the trick but one or multiple guidelines for each image gets very messy. There must be a better way, right?..
ACCEPTED SOLUTION (edit with InkShape):
Install InkShape
Open SVG
Click on picture once to select it
Go to File-> Document Properties and click 'Resize pager to drawing or selection' (this button is hidden on the first tab, click +Resize page to content to show the option);
Save
extract pathData and (viewport)width/heights from saved file.
The viewportHeight attribute defines the size of the "canvas" that the path is drawn on (i.e., it defines what the coordinates in the path data actually "mean").
The height attribute defines the intrinsic size of the drawable.
The original vector has 6.5 units (in the viewport) of white space at the top and the bottom. That means that you can look for any pathData command that uses a capital letter, and subtract 6.5 from the y coordinate. That leaves you with this:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="13dp"
android:viewportWidth="24.0"
android:viewportHeight="13.0">
<path
android:fillColor="#FF000000"
android:pathData="M18.6,0.12c-1.44,0 -2.8,0.56 -3.77,1.53L12,4.16 10.48,5.5h0.01L7.8,7.89c-0.64,0.64 -1.49,0.99 -2.4,0.99 -1.87,0 -3.39,-1.51 -3.39,-3.38S3.53,2.12 5.4,2.12c0.91,0 1.76,0.35 2.44,1.03l1.13,1 1.51,-1.34L9.22,1.7C8.2,0.68 6.84,0.12 5.4,0.12 2.42,0.12 0,2.54 0,5.5s2.42,5.38 5.4,5.38c1.44,0 2.8,-0.56 3.77,-1.53l2.83,-2.5 0.01,0.01L13.52,5.5h-0.01l2.69,-2.39c0.64,-0.64 1.49,-0.99 2.4,-0.99 1.87,0 3.39,1.51 3.39,3.38s-1.52,3.38 -3.39,3.38c-0.9,0 -1.76,-0.35 -2.44,-1.03l-1.14,-1.01 -1.51,1.34 1.27,1.12c1.02,1.01 2.37,1.57 3.82,1.57 2.98,0 5.4,-2.41 5.4,-5.38s-2.42,-5.37 -5.4,-5.37z"/>
</vector>
Then, once the whole shape has been moved "up" by 6.5 units, you can subtract 11 (6.5 * 2) from both the viewport and the intrinsic height.
The end result is a 24x13dp shape, which should scale much better in wide views.
Update using Inkscape version 1.1:
Unfortunately, the latest version of Inkscape (1.1) no longer will import a vector drawable file directly, so the original answer is not 100% correct. That answer will probably work with other editors that can handle vector drawable files.
Here is an update to that answer that works with later versions of Inkscape to remove all padding from a vector drawable.
Convert vector drawable to scaled vector graphic (SVG):
Open Alex Lockwood's Shape Shifter site
Drag the vector drawable file from Android Studio to Shape Shifter.
Export the image as an SVG to a local file
Now that we have an SVG file, we can edit it with Inkscape:
Install Inkscape if not already installed.
Open SVG file in Inkscape.
Click on the image to select it.
Resize the image to the selection (Shift+Ctrl+R or Edit->Resize Page to Selection). You can also specify an alternate size if you desire some padding.
Save the image as an SVG file.
The image is now cropped in an SVG file. We need to convert it back to a vector drawable.
In Android Studio import the SVG file as a vector drawable. (File->New->Vector Asset) Asset Type = "Local file (SVG, PSD).
Once imported, the vector drawable no longer has any padding.
Use an image editor that can handle SVG files to crop the image. I used InkScape but there are others. Once the image is cropped, you can import it into Android Studio as an XML file.
Here's the new update on this topic:
https://code.google.com/p/android/issues/detail?id=202019
It looks like using android:scaleType="fitXY" will make it scale correctly on Lollipop.
From a Google engineer:
Hi, Let me know if scaleType='fitXY' can be a workaround for you , in
order to get the image look sharp.
The marshmallow Vs Lollipop is due to a special scaling treatment
added into marshmallow.
Also, for your comments: " Correct behavior: The vector drawable
should scale without quality loss. So if we want to use the same asset
in 3 different sizes in our application, we don't have to duplicate
vector_drawable.xml 3 times with different hardcoded sizes. "
Even though I totally agree this should be the case, in reality, the
Android platform has performance concern such that we have not reach
the ideal world yet. So it is actually recommended to use 3 different
vector_drawable.xml for better performance if you are sure you want to
draw 3 different size on the screen at the same time.
The technical detail is basically we are using a bitmap under the hook
to cache the complex path rendering, such that we can get the best
redrawing performance, on a par with redrawing a bitmap drawable.
I have a multi-color image that I wish to use on a splash screen. I am using a guide from here which requires specifying the image under a AppTheme.Launcher style, and using the item android:windowBackground to specify the image name through #Drawable/SplashIcon
I am stuck on how to actually add the image to the project. I have so far been adding images using the menu action new -> Image Asset which flattens the colour and doesn't seem to have an option to just import as is.
I have resorted to drag and drop onto the drawable folder in Android Studio, which adds the image, but I cannot reference it using Drawable/SplashIcon.
Here is what I have:
How do I reference my image?
Seems like it is an issue with the file name. Have to use lowercase letters and underscores for the file name, nothing else.
I therefore drag and dropped my image with the name splash_icon.png and it's now appearing under #drawable/...
I am also now using the different pixel densities too, as recommended.
I made simple menu icons which look the way I want them to look when in Illustrator, but when I place them in my app they look pixelated and bad.
Here is it in my app (as you can see, the text is not pixelated):
This is how it looks in Illustrator (I cut the icons and pasted them next to the other two, that's why the background is in different color):
I made the icons on 72x72 px canvas and exported them as .png file.
I am using Android Studio to make my app, and use simple
android:background="#drawable/back_button" to set the image/icon for the ImageButton.
I never try Illustrator to put icons, but I am directly download icons from flaticon that provides any type of file and size too
Two way to get different canvas file in android studio.
Android Studio-> File-> Image Asset or Vector Asset
upload your file and set as you need
Icon Generator
From this you can get directly res folder with different canvas image.
Mostly I prefere first.
Thanks
these icons as shown in fig. have a background color assigned by you in illustrator, no matter these are exported as png format or jpg!
First go back to illustrator and try to make background of images transparent as you assigned greyish color, tell me if it works. That's great you are making icons for yourself. Good work.
I think when you save the file please try to save it (SVG) format & then place it.
I'm trying to import a PNG image asset to my project. But the image is losing details. It's just retaining the outer background. The image is transformed to a solid asset:
As you can see, the source asset has a white-tick in the center. But, after importing, it just remains as a solid circle with no ticks. Any solutions?
UPDATE: Tried Android asset studio, but with the same result. What am I missing?:
Thanks to Shafayat Mamun, a workaround is figured out. Here's what I did:
Go to Android Asset Studio
Select Generic Icons (it didn't work for any other option)
Upload the image, pick your color and drag down the color scale to 0% using the scale.
Download the zip and extract to the main folder of the project.
PS: This, though helped me solve my query, but the question remains intact. Why is android studio not capturing the image details while importing? Same is the case while I select Action bar and tab icons in the Android Asset Studio.
do you really need to convert it in the action bar and tab icon generator? i recommend using the simple nine-patch generator here if you want a 9patch image. or the launcher icon generator and set the shape to none and change the image's name after downloading. if you use the launcher icon generator, just modify the shape. if you use the nine-patch generator, you can click trim and click edge transparency if you want to remove the spaces beside the image.
I had the same problem and the Android Asset Studio workaround was a great help. However I discovered another work around. In Android Studio when you create an image asset, instead of selecting Action Bar and Tab icons, I chose Launcher Icons from the drop down. Then the images displayed for me. I had to search for their name and they do not get stored in the drawable folder they end up in the mipmap folder.
So the steps are:
For Android Studio:
Right click on res, new Image Asset
On Asset type choose Launcher Icons
Choose the image path
Give your image a name in Resource name
Next->Finish
The image will be saved in the /res/mipmap folder
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