Adaptive icons looks very nice because they change their shape according to launcher requirements and adjust it's icon size.
Let me show you an example of adaptive icon and how adaptive icon are useful for your app.
Example : This is a simple icon
Example : And this is adaptive icon.
You can adaptive icon is filling out all space provided to it. And this is power of adaptive icon.
To make adaptive icon in sketchware follow these steps.
1. Prepare your resources.
Make a background image of size 108x108 pixels (the gradient background in my case)
Make a foreground image of size 108x108 (app icon) It should contain icon in only 72x72 pixel area. Because only 72x72 area will be visible of foreground image. Means image should be of 108x108 and icon should be of 72x72 pixels.
App useful for this
Image resize in pixels
Background eraser
2. Inside sketchware
Open your sketchware project. Go to OnCreate of mainactivity.
Add a xml command block and fill it as shown in sketchware.
To fill
reference = app_icon
distance = empty
frontend = empty
backend = empty
commamnd = replace
name = AndroidManifest.xml
Add a add source directly and enter this
android:icon="@drawable/app_icons"
Method 1
Open right drawer inside project and click on resource manager.
Choose drawable-xhdpi from project list.
Click on add button on the top
ml file link will be provided in bottom of this post.
Choose xml file and your images.
Now run the project.
You can also create a xml file named app_icons.xml and paste this code inside it.
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/background"/>
<foreground android:drawable="@drawable/ic_foreground"/>
</adaptive-icon>
Method 2
Come back to project list and see the number of your project. in my case it is 956
Open your file manager and navigate to this folder
.sketchware/mysc/{project number}/app/src/main/res/drawable-xhdpi/
Create a new file named app_icons.xml
Inside this file paste this code.
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/background"/>
<foreground android:drawable="@drawable/ic_foreground"/>
</adaptive-icon>
Now transfer you foreground and background images to this folder and name them as
background.png
and ic_foreground.png
Come back to sketchware open your project again and if dialog of restore appear then click on no button.
Now run your project
You can also download demo project from bottom of this post.
FAQs
1. Error [/storage/emulated/0/.sketchware/mysc/971/app/src/main/AndroidManifest.xml:5: error: Error: No resource found that matches the given name (at 'icon' with value '@drawable/app_icons')., ]
Ans. You have not added app_icons.xml in drawable folder
2. Is external library needed.
Ans. No external library needed
3. Method 1 not working
Ans. Follow method 2 because method 1 not work in many sketchware versions many times.
4. What if we backup and restore project.
Ans. Resource files will be deleted and project will show error same as in faq #1
Links
Download project :-: Click here
Download app_icons.xml :-: Click here
Download background.png :-: Click here
Download ic_foreground.png :-: Click here