ic_skip_previous_24dp.xml stretches on Android 5.0 - android

I added the ic_skip_previous_24dp.xml vector image from Android Studio 1.5 (Beta) via New > Vector Asset and the triangle stretches downward when rendering on 5.0 (works fine for 4.4 and 5.1, just an issue with API 21).
Here's how it renders on API 21 (5.0.1):
Here's how it renders on API 22 (5.1.1):
And here's the Android Vector XML that Android Studio imports:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FFFFFFFF"
android:pathData="M6,6h2v12H6zm3.5,6l8.5,6V6z"/>
</vector>
A couple notes:
It renders the same way on a layout file in an ImageView (with or without the scaleType attribute).
ic_skip_next_24dp.xml has no issues.
I changed the color in the XML to white (from the default black) so that it's easier to look at, but the issue is identical on the unedited black version.
I know that I can get the icon as density-specific PNGs but I'd like to use the vector, if possible.
Thanks in advance for any help.

I faced the same problem. It looks like in certain devices it is not able to interpret "m" (relative move) in the generated pathData. Not sure why! Might be a bug.
Found out that if we change it to use absolute value "M" as shown below it works:
android:pathData="M6,6h2v12H6zM9.5,12l8.5,6V6z".
Adding the solution in the hope it will help others.

Related

How to adjust size of vector icon in launcher

My app's launcher icon is vector-drawn (as opposed to image-drawn). It is launched with
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="#color/appColorDark" />
<foreground android:drawable="#drawable/ic_myIcon" />
</adaptive-icon>
However, the icon is severely cropped (i.e. only partially visible) in the preview display (and therefore in the ultimate launcher icon).
QUESTION: is there any attribute in XML (or alternatively, in code) I can use to scale the icon down, so that it fits nicely (i.e. with the required padding) in the previewed colored background? That code would also come in handy whenever I want to use the same vector file somewhere else in the app.
My solution now is to go back to Inkscape, reset the borders, resave the file in Android Studio, have a look in the preview, back to Inkscape etc. till it fits. Not ideal.
I suggest you to create a launcher icon in the form of a mipmap where the launcher will adjust to the device on which the application will be installed.
of course you can easily create the mipmap file here : https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html
you can make some adjustments here. of course this way is easier and better I think. you just need to overwrite the existing mipmap file with the new mipmap file.
I hope this helps
You can wrap the pathData in your ic_myIcon.xml drawable with group tag and then play the scale.
<!--Reduce scaleX and scaleY until desired size is achieved (note: 1 = 100%).
You may also need to adjust the position (translateX and translateY) after scale adjs.
-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
...
>
<group
android:scaleX="1"
android:scaleY="1"
android:translateX="0"
android:translateY="0"
>
<path
android:pathData=.../>
</group>
</vector>
You can create the launcher icon using Image asset studio which is a preferred way and recommended by android dev team.
image asset studio

Android - Non-programmatically Change back button based on language (English and Arabic)

Is there any way to change the direction of back button based on language other than programmatically?
I want this icon for English
I want this one for Arabic
You can use by Vector Drawable,
just set android:autoMirrored="true" it will flip the image
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="8dp"
android:height="18dp"
android:autoMirrored="true"
android:viewportHeight="15.0"
android:viewportWidth="9.0">
<path
android:fillColor="#00000000"
android:fillType="evenOdd"
android:pathData="M8,1l-7,6.5l7,6.5"
android:strokeColor="#6D6D6D"
android:strokeLineCap="round"
android:strokeLineJoin="round"
android:strokeWidth="2" />
First of all,
make sure to enable the RTL flag in the manifest android:supportsRtl="true"
make sure you don't have android:layoutDirection="ltr/rtl" in your layout or parent layouts (activity of fragments) - this could mess things up🙂
or add android:layoutDirection="local" if something looked weird
Now for icons, there are 2 cases
1. Vectors
if you have your icon as vector XML i.e. imported from SVG
on the import screen just toggle the Enable auto mirroring for RTL layout
or if you already have it In your project, go to the XML file and add this line android:autoMirrored="true" to the parent vector tag
2. PNGs with multiple sizes
if you have it as PNG with multiple sizes, you should then get another PNG image for the RTL layouts yourself, but then you need to add the new RTL images/icons to drawable-[layout direction/language]-[size] directory e.g. drawable-ar-hdpi this way the icon will be for hdpi screen-size and for the Arabic language
make sure to follow the same order cuz it won't work otherwise

Android: bug with layout background (which shoudl not be white) on Android 4.2 and later

I have a strange bug on Android 4.2 and later. I have a custom view (which is classical RelativeLayout, not a widget from an external library) which looks like this (normal look) on Android versions strictly lower than 4.2:
But it looks like this (white background = bug) on Android 4.2 and later :
Does anybody know what can be the reason ? I remember that I removed some holo.theme files from my project as I considered theme as useless, I don't see why it would be the reason but just to give complete information.
For info, I set the background directly in the xml like this:
<ImageView
android:id="#+id/woodOfTopBarImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:layout_alignTop="#+id/topBarButtonsRelativeLayout"
android:layout_alignBottom="#+id/topBarButtonsRelativeLayout"
android:src="#drawable/topbaripad3_2x"
/>
Thanks !!
I found the problem: it seems that on Android 4.2 and higher, the image resizing (with a scaling down) does not work properly if the image is too big (much larger and/or higher than the screen). I put a smaller source image and it works.

Gradient compatibility issue - ICS defaults to fewer colors than all the previous versions of Android

Gingerbread (2.3.3) emulator left, ICS (4.0.3) emulator right. Notice the gradient fade effect difference inside the red box (open in separate window to see the full sized image).
Mainview background:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/app_bg"
android:orientation="vertical" >
...
</LinearLayout>
app_bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#000" android:centerColor="#333"
android:endColor="#000" android:angle="270" />
</shape>
What is causing this issue? How to fix this, so that the ICS gradient would look as smooth as the 2.3.3 version? Does the problem occur only on emulator?
I think the problem is that android is (on the right) drawing the gradient using fewer colours. I believe you want to enable dithering to help disguise the drop in the color depth. Maybe see this answer link
I'm not totally sure how it works, but I believe android will sometimes default to RGB_565 mode, even if the device is capable of 24bit colors.
ICS automaticly adds gradient effect if hardware acceleration is enabled in application.
It is also possible to force hardware acceleration for all apps, you will notice that some apps will have gradient background, instead of black.
I saw your comment that using PixelFormat.RGBA_8888 didn't help.
You can also try adding the dither flag: window.addFlags(WindowManager.LayoutParams.FLAG_DITHER);.
You can see my previous related answer about dithering and colours here:
Awful background image quality in Android
Just verified on ICS 4.0.3 device: this is emulator ONLY problem.

Is it possible to dither a gradient drawable?

I'm using the following drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<gradient
android:startColor="#color/content_background_gradient_start"
android:endColor="#color/content_background_gradient_end"
android:angle="270"
/>
</shape>
The problem is that I get severe banding on hdpi devices (like the Nexus One and Droid) since the gradient goes from the top of the screen to the very bottom.
According to http://idunnolol.com/android/drawables.html#shape_gradient there isn't a "dither" attribute for a gradient. Is there anything I can do to smooth the gradient?
Note: adding dither="true" to shape doesn't seem to work.
I wrote the documentation you referenced. I've taken another look at the code and unfortunately there's no way to enable dithering on a GradientDrawable except by explicitly calling GradientDrawable.setDither() in code.
(The way the codes looks, technically you could include the Gradient as the only child of a <selector>, and enable dithering on the entire selector; however, it's definitely a hack.)
I'm not convinced enabling dithering will actually solve your problem, as dithering (at least as it's noted in the official Android docs) are for solving banding problems when the device has too small of a color palette. This seems to be a banding problem due to the size of the gradient.
Hi all i have the same problem, there is one solution which works but it's not very good.
getWindow().setFormat(PixelFormat.RGBA_8888);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DITHER);
It works for me but the problem is that the whole windows is dithered. I was looking to find a way to dither only the gradient but i couldn't find anything. android:dither="true" in xml is not working and GradientDrawable.setDither(true) is also not working. So any ideas how can i dither only the gradient ?
I faced a very similar problem last year and came to no useful conclusion on the android-developers list.
However, a while ago I discovered — after trying <gradient> and all sorts of Drawables with various dither attributes and manually creating dithered PNGs — that if I manually create a new image using GIMP, and specify the density at this point (i.e. explicitly entering 120, or 240 etc) when creating the image, it looks great, even on hdpi devices. And this is despite it being a grayscale gradient, with not so many colours.
The PNG when saved ends up being comparatively large (at least for 240dpi), but it looks great.

Categories

Resources