How to adjust size of vector icon in launcher - android

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

Related

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

App Icon on Device is too small

My problem is that the App Icon on my device looks way too small in comparison to the other apps. I read some solution on other questions, like this one Android App Icon size too small but this doesn't seems to be my problem. In the Android Studio you can make a right click on "res" where you can find new --> image asset where you can create such a icon. it creates icons for all the different sizes like mdpi, hdpi and so on. So i thougt that i might display the app icon correctly but it doesn't. can anybody help me?
In "Configure Image Asset", click "Legacy", change "Shape" from "Square" to "None", and the image padding will appear. Go back to "Foreground Layer" and resize the image to fill the padding.
Try to use this. Its very useful, fast and free. And thats what I use.
If your icon already has a shape, remember to set the shape to none. Hope it helps!
If you are getting the same results, I also recommend this website, where I usually get "bigger" icons.
I found the launcher icons generator puts there a small padding, that is the reason for smaller icons. On the other way it is recommended by Google team here.
Android expects product icons to be provided at 48dp, with edges at 1dp.
All is on you to decide. In case the icon applies to whole square space - use padding, otherwise when small object is not square shape, rather fit to edges :)
I had the same issue. I fixed it like so:
Create the adaptive icon through Android Asset Studio. In the third tab you can select "Create Legacy Icon". Only this legacy one is going to be too small! The others will be fine.
So the thing I did was just to replace the icon_launcher.png files (this is the legacy icon).
If you use any single image directly as android:icon="#drawable/ic_launcher"
It'll be shown correctly on old devices but on android 26+ it'll appear small
Use this approach to make the icon appear like fitXY scaleType for imageview, that is, it's corners can be clipped like cardview but it will not be shrinked
Step 1
Delete ic_launcher from drawables and paste it in mipmap-xxhdpi-v4
Add transparent padding of width/6 px to your launcher icon online
Step 2
Paste the second file as ic_launcher_foreground
Step 3
Create ic_launcher.xml under res/mipmap-anydpi-v26 and add this content
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<foreground android:drawable="#mipmap/ic_launcher_foreground" />
<background android:drawable="#color/colorTransparent"/>
</adaptive-icon>
Step 4
Edit the manifest and use mipmap instead of drawable
Now your icon should not appear shrinked/zoomed
This is useful when your app icon can't be split into foreground/background eg some graphic image as app icon
How it works:
For API26+ devices, mipmap-anydpi-v26 will take precedence over mipmap-xxhdpi-v4 and system will load icon from xml, which in turn, loads foreground from ic_launcher_foreground, automatically crop 2/3 of its size because it's 'adaptive icon'. (This is the reason we add padding of width/6 from all sides
For older devices the ic_launcher.webp will be used directly
Tested on API 21-31

Delphi XE7 Android splash screen - background color

I can see Delphi XE7 comes with splash/startup image support for Android.
However, when I choose to center the image (which looks best) Delphi shows black color around it. I would prefer white since it fits better with the image and color theme of the app. There does no appear to be an opion for background color where you set splash/startup images.
How can I change this color?
If you want fill the black background with the same background color from your image you must use 9patch images. To make 9patch pngs use NinePatch (included in android sdk)
Once you hace the images, add to your project and set up like this:
splash tile mode: disabled
splash gravity: center
Then go to project -> deployment:
Uncheck splash_image_def.xml (to not deploy)
rename your splash_image.png to splash_image_def.9.png
If you are just wanting to change the background color of the splash screen, you can modify two files. colors.xml and splash_image_def.xml. You will find these in the Android/Debug/ (or Android64/Debug/) folder of your project. These get recreated each time you deploy your application so you will need to make backup copies of them.
In Project|Deployment, untick these items and create new entries for the copies you have made, making sure that you deploy them to the same location. You will end up with two entries for Debug and Release.
Edit colors.xml and add the new color that you want like so
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<color name="notification_accent_color">#000000</color>
<color name="logoblue">#0094ff</color>
</resources>
Here I've added the logoblue color. Next edit splash_image_def.xml and change #android:color/black to #color/logoblue. It should look somewhat like the following
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<item android:drawable="#color/logoblue" />
<item>
<bitmap
android:src="#drawable/splash_image"
android:antialias="true"
android:dither="true"
android:filter="true"
android:gravity="center"
android:tileMode="disabled"/>
</item>
</layer-list>
There might be a simpler way of doing this, but this is what I've come up with through a bit of trial and error.
There is no background color property of splash images because this is supposed to be a part of the image. There are 4 different possible sizes for Splash Images on Android:
426 x 320
470 x 320
640 x 480
960 x 720
So, depending on your supported devices, you should have up to 4 images matching these sizes, with the background color being whatever you wish. Set it up to fill the entire screen, and make sure you're not using transparency. For Splash Gravity, select the fill option.
to change default black splashscreen, just open
splash_image_def.xml at debug folder,
and change "black" to white if you want change it to white, like this
<item android:drawable="#android:color/white" />
Note : Build it with no change at source code, layout or anything at RAD Studios. Just edit the file xml with notepad, save it, then rebuild.

How to determine appropriate dimensions for ExpandableListView groupIndicator icons?

I'm working on an app that involves and ExpandableListView. We should like to replace the groupIndicator with one of our own choosing.
I created a spec for the indicator that would show a different png depending on the state of the selector (expanded or not expanded)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/arrow_down" android:state_expanded="true"/>
<item android:drawable="#drawable/arrow_right"/>
</selector>
I then set up my layout xml to use:
(Note that childDivider is a one pixel tall png rather than a color because setting that to a color seems to be bugged)
This works, except that our icon is stretched out vertically. That makes sense, because we just created a 25x25 icon and hoped for the best. I'm trying to figure out the dimensions of the native icon so that I can match it, but that's where I run into trouble.
Digging through the source code (ExpandableListView.java) I found that, by default, the class will use com.android.internal.R.styleable.ExpandableListView_groupIndicator. So I have an id, but no icon yet.
I'd love to be able to do:
Bitmap image = BitmapFactory.decodeResource(this.getResources(), com.android.internal.R.styleable.ExpandableListView_groupIndicator);
imWidth = image.getWidth();
imHeight = image.getHeight();
But as the "internal" suggests, it's not visible to me in user space.
I also found getIndicate() in ExpandableListView.java, but it is private, so I can't get to that either.
I'm quite new to diving into the platform source code, and I don't know how else to track down that image. Can anyone help me out?
Edit: Thanks CommonsWare. To spell out the rest for anyone else looking:
android:drawable/expander_group is defined in /frameworks/base/core/res/res/drawable/expander_group.xml.
expander_group.xml mentions that it uses #drawable/expander_ic_maximized and #drawable/expander_ic_minimized.
Those drawables can be found in /frameworks/base/core/res/res/drawable/expander_ic_maximized.9.png and /frameworks/base/core/res/res/drawable/expander_ic_minimized.9.png, among other places for specific densities and such. The "9" explains why the default icons don't have distortion problems - they're patch-9 graphics. The density-agnostic versions of the icons are 34px by 38px.
base.git's core/res/res/values/styles.xml defines com.android.internal.R.styleable.ExpandableListView_groupIndicator as android:drawable/expander_group. That is a StateListDrawable in your SDK's copy of the resources. The underlying PNGs are of varying sizes based upon density.

Local icons in Android Options Menu stretch to fill menu item, obscure Title

I'm new, so links and images are here
Hi,
I'm likely making a silly mistake... hoping to find out what that is.
I'd like to use a few of the standard menu icons (ic_menu_refresh, etc.) in my app's Options Menu. And I'd like to set the icons in the xml file for the menu. I read in a few places that I can use the following:
<item android:id="#+id/quit"
android:icon="#android:drawable/ic_menu_close_clear_cancel"
android:title="Quit" />
to make a quit button in my menu. And this works nicely. However, I'd also like to use some other icons, like ic_menu_stop.png, which are apparently "not public" [link1]. Also, I've read in a few places that it's not a great idea to "reference internal graphics like that" [link2]. Likewise, I don't want to use the asterisk workaround [link3] to allow access to private resources. The solution offered is to make a local copy of the drawables.
So I copied the image files I wanted from C:\...\android-8\data\res\drawable-hdpi into my project's res\drawable folder, and then changed the above xml to:
<item android:id="#+id/quit"
android:icon="#drawable/ic_menu_close_clear_cancel"
android:title="Quit" />
However, this causes the icon to stretch (I believe the icon is stretched - and not simply a bigger (hdpi) image file - because it's slightly blurred) and either obscure or crowd out the title text, so all I see is the oversized, blurry icon. Of course, I also tried copying the icon from the drawable-mdpi folder: using the mdpi icon doesn't obscure the title, but the icon is slighlty undersized and blurry.
I wanted a screenshot, so I switched to running the app on my emulator. However, the blurring isn't apparent, and the local mdpi image seems to match the internal one I'm referencing:
[screenshot] (follow the link at the top!)
I have double-checked :), and it really is blurred on my phone (Motorola Droid).
It also occurred to me that the referenced one might be getting the icon via an xml file (like a state-list drawable), and that the xml file somehow defined how the image was to be drawn. I tried making one with a bitmap element, and tried setting a couple of the properties in ways I thought might help:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/ic_menu_close_clear_cancel"
android:gravity="top"
android:filter="false" />
It worked to display the icon (I was proud of myself), but didn't affect the stretching issue.
I also found these [link4 and link5] pages, but they seemed to have different issues.
Perhaps I should be copying the icons from another location? Am I on the right track with the xml file? Help?
Thanks,
Nolan
If you want to have the icon appear correctly in all screen densities, then you should create your own drawable-mdpi, drawable-hdpi, etc folders and copy the icons into each of those.
That way the correct size icon will be used for each density. For more details on how this works, see supporting multiple screen sizes, particularly the section on resource qualifiers.

Categories

Resources