Create User Avatar from User Name

[zainulhassan]

Hello Everyone…
Today I will show you how you can create user avatar by using User names. There is already an extension present for this purpose but I prefer to use this method because that extension has some issues which are not currently resolved.

Profile Generator Extension

Write a short description A non-visible component that provides images with letter/text like the Gmail app. Add a picture of all the blocks Rounded Rectangular [3] Create Rounded Rectangular img. Rounded [2] Create Rounded img. Rectangular [1] Create Rounded img. Extra Properties [4] Demo [sample] How to use ? Blocks [1] Designer Property [2] Download Sample Project AIA ProfileMaking.aia (19.6 KB) Download Extension com.ProfileGenerator.aix (18.6 KB)

So you can use this method as an alternative to that extension. One more thing that you can also download the avatars created and this function is not present in the extension.

Online Method

Components :

1. Image
2. Spaces
3. Buttons
4. Web
5. TextBox
6. Label
7. Network
8. Notifier
9. Switches
10. Spinner

Initial Designer View

Blocks

Result :

The blocks are really simple and easy. Just experiment with them. You will surely create much better than this one.
Website: https://ui-avatars.com/
AIA File : Avatars.aia (4.8 KB)
Apk File : Avatars.apk (5.2 MB)

Offline Method
This is the offline method created by @Zia_Choudhary.
Jump to main topic :

Create User Avatar from User Name

Hi @zainulhassan i have created offline avatar creator logic for you you can add it in your guide Here is the extension that i used Component To Image Extension ScreenShot [Screenshot_20200724-181416] Downloads AvatarCreator.apk (5.1 MB) AvatarCreator.aia (12.5 KB)

Initial Designer View

Blocks :

Result

For downloading AIA and APK file, visit the post

Create User Avatar from User Name

Hi @zainulhassan i have created offline avatar creator logic for you you can add it in your guide Here is the extension that i used Component To Image Extension ScreenShot [Screenshot_20200724-181416] Downloads AvatarCreator.apk (5.1 MB) AvatarCreator.aia (12.5 KB)

Thanks to @Zia_Choudhary for the Offline method

[themaayur (Mayur Berad)]

Nice guide

[Zia_Choudhary (Zia Ur Rahman)]

Great work… Keep it up

[Xoma (Kumaraswamy)]

Nice guide

[Ottoman (Muhammad Usman)]

Nice Guide . Thanks for this

[Vedang (Indian boy)]

Nice guide @zainulhassan

[Zia_Choudhary (Zia Ur Rahman)]

I have a suggestion… Here we use web component but it can be created with canvas component too that can work even offline… U can also add that method too in this guide…that’s also very simple… This api is taking first two letters of a name… So this can be done very easily with text separate blocks and canvas m i right?

[zainulhassan]

Thanks. I will try with Canvas

[Zia_Choudhary (Zia Ur Rahman)]

Hi @zainulhassan i have created offline avatar creator logic for you
you can add it in your guide
Here is the extension that i used
Component To Image Extension

ScreenShot

Downloads

AvatarCreator.apk (5.1 MB)
AvatarCreator.aia (12.5 KB)

[zainulhassan]

Can we create transparent images I mean .png format with this???

[Zia_Choudhary (Zia Ur Rahman)]

Yes You can by just adding .pnj after image name in save as method of this extension’s block.

[zainulhassan]

No I mean the images generated will have a transparent background???

[Zia_Choudhary (Zia Ur Rahman)]

In my blocks its not possible…but it can be created by setting background to transparent colour or by setting text colour to transparent. its not a difficult task .

[Zia_Choudhary (Zia Ur Rahman)]

@zainulhassan

Thanks to @Zia_Choudhary for the Offline method

You r welcome.

[Pralaya_Ranjan_Behera]

@Zia_Choudhary

Component To Image Extension

cant download

[Pralaya_Ranjan_Behera]

but in my app i have two canvases but only one is showing the result. if i disable the 1st one 2nd one working if i disable the 2nd one then the 1st one is working. i am using the offline method. pls help me regarding this. how to solve this problem?