How to customize icons

37 views
Skip to first unread message

Mic

unread,
Sep 19, 2016, 5:42:51 AM9/19/16
to App Inventor Open Source Development
Hello, when I set an icon in AI2 it automatically gives the icon a frame (made of empty space). But in reality the image I uploaded has no frame. 

I would like an icon without frame. Is there a way to modify the default settings for icons in AI2?

Jos Flores

unread,
Sep 19, 2016, 6:07:53 AM9/19/16
to app-inventor-open-source-dev
Heya, if the frame is coming up automatically, it probably is defined
in css; the main css file is
https://github.com/mit-cml/appinventor-sources/blob/master/appinventor/appengine/war/Ya.css
If you try and change some settings there, you might get what you want.

cheers,
José
> --
> You received this message because you are subscribed to the Google Groups
> "App Inventor Open Source Development" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to app-inventor-open-so...@googlegroups.com.
> To post to this group, send email to
> app-inventor-o...@googlegroups.com.
> Visit this group at
> https://groups.google.com/group/app-inventor-open-source-dev.
> For more options, visit https://groups.google.com/d/optout.

Mic

unread,
Sep 19, 2016, 6:48:56 AM9/19/16
to App Inventor Open Source Development
Thanks, I think i have found what I have to modify in CSS. 
Now, the newbie question: how can I implement in my app the modifications i make to CSS? 
I decompiled the app it with apktool but cant find any reference to CSS or Ya.css in the app's folders.


El lunes, 19 de septiembre de 2016, 12:07:53 (UTC+2), Jos escribió:
Heya, if the frame is coming up automatically, it probably is defined
in css; the main css file is
https://github.com/mit-cml/appinventor-sources/blob/master/appinventor/appengine/war/Ya.css
If you try and change some settings there, you might get what you want.

cheers,
José



On 19 September 2016 at 10:42, Mic <mwg...@gmail.com> wrote:
> Hello, when I set an icon in AI2 it automatically gives the icon a frame
> (made of empty space). But in reality the image I uploaded has no frame.
>
> I would like an icon without frame. Is there a way to modify the default
> settings for icons in AI2?
>
> --
> You received this message because you are subscribed to the Google Groups
> "App Inventor Open Source Development" group.
> To unsubscribe from this group and stop receiving emails from it, send an

Jos Flores

unread,
Sep 19, 2016, 6:57:39 AM9/19/16
to app-inventor-open-source-dev
oh wow, hold on. You are talking about the compiled app? I thought you
were talking about a component or similar...
Sorry about that misunderstanding. The css has no effect whatsoever on
compiled apps.

So where is the frame for the icon? You mean when you see the app on
your phone apps menu? I don't know if you can do anything about
that... is the size of the icon right?

cheers,
José



On 19 September 2016 at 11:48, Mic <mwg...@gmail.com> wrote:
> Thanks, I think i have found what I have to modify in CSS.
> Now, the newbie question: how can I implement in my app the modifications i
> make to CSS?
> I decompiled the app it with apktool but cant find any reference to CSS or
> Ya.css in the app's folders.
>
> El lunes, 19 de septiembre de 2016, 12:07:53 (UTC+2), Jos escribió:
>>
>> Heya, if the frame is coming up automatically, it probably is defined
>> in css; the main css file is
>>
>> https://github.com/mit-cml/appinventor-sources/blob/master/appinventor/appengine/war/Ya.css
>> If you try and change some settings there, you might get what you want.
>>
>> cheers,
>> José
>>
>>
>>
>> On 19 September 2016 at 10:42, Mic <mwg...@gmail.com> wrote:
>> > Hello, when I set an icon in AI2 it automatically gives the icon a frame
>> > (made of empty space). But in reality the image I uploaded has no frame.
>> >
>> > I would like an icon without frame. Is there a way to modify the default
>> > settings for icons in AI2?
>> >
>> > --
>> > You received this message because you are subscribed to the Google
>> > Groups
>> > "App Inventor Open Source Development" group.
>> > To unsubscribe from this group and stop receiving emails from it, send
>> > an
>> > email to app-inventor-open-so...@googlegroups.com.
>> > To post to this group, send email to
>> > app-inventor-o...@googlegroups.com.
>> > Visit this group at
>> > https://groups.google.com/group/app-inventor-open-source-dev.
>> > For more options, visit https://groups.google.com/d/optout.
>
> --
> You received this message because you are subscribed to the Google Groups
> "App Inventor Open Source Development" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to app-inventor-open-so...@googlegroups.com.

Mic

unread,
Sep 19, 2016, 9:14:28 AM9/19/16
to App Inventor Open Source Development
Thanks a lot for the help.

I attached a screenshot. There is a red arrow pointing to my app icon. As you see there is a gray border/frame around the green area. I would like the green to fill all the icon area, like in the clock icon you can see (green arrow pointing to it). The icon I uploaded to AI2 has no empty space in the border. I tried various sizes, this one should be 512px or 192px (i dont rimember but anyway the result were the same for all sizes I tried).
>> > To post to this group, send email to
>> > app-inventor-o...@googlegroups.com.
>> > Visit this group at
>> > https://groups.google.com/group/app-inventor-open-source-dev.
>> > For more options, visit https://groups.google.com/d/optout.
>
> --
> You received this message because you are subscribed to the Google Groups
> "App Inventor Open Source Development" group.
> To unsubscribe from this group and stop receiving emails from it, send an
Screenshot_2016-09-19-15-02-29.png

Jos Flores

unread,
Sep 19, 2016, 9:22:42 AM9/19/16
to app-inventor-open-source-dev
According to [1] icons should be 96x96 at higher resolution. No idea
what's happening there, to be honest, you can also see that border in
firefox, maps, and some others. Can't help here; maybe someone else
knows what's going on.


[1] https://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html

cheers,
José
>> >> > email to app-inventor-open-so...@googlegroups.com.
>> >> > To post to this group, send email to
>> >> > app-inventor-o...@googlegroups.com.
>> >> > Visit this group at
>> >> > https://groups.google.com/group/app-inventor-open-source-dev.
>> >> > For more options, visit https://groups.google.com/d/optout.
>> >
>> > --
>> > You received this message because you are subscribed to the Google
>> > Groups
>> > "App Inventor Open Source Development" group.
>> > To unsubscribe from this group and stop receiving emails from it, send
>> > an
>> > email to app-inventor-open-so...@googlegroups.com.
>> > To post to this group, send email to
>> > app-inventor-o...@googlegroups.com.
>> > Visit this group at
>> > https://groups.google.com/group/app-inventor-open-source-dev.
>> > For more options, visit https://groups.google.com/d/optout.
>
> --
> You received this message because you are subscribed to the Google Groups
> "App Inventor Open Source Development" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to app-inventor-open-so...@googlegroups.com.

孟神通

unread,
Sep 21, 2016, 8:52:00 AM9/21/16
to App Inventor Open Source Development
i think you are right for the firefox and whatsup have same appearance.

在 2016年9月19日星期一 UTC+8下午9:22:42，Jos写道：
>> >> > To post to this group, send email to
>> >> > app-inventor-o...@googlegroups.com.
>> >> > Visit this group at
>> >> > https://groups.google.com/group/app-inventor-open-source-dev.
>> >> > For more options, visit https://groups.google.com/d/optout.
>> >
>> > --
>> > You received this message because you are subscribed to the Google
>> > Groups
>> > "App Inventor Open Source Development" group.
>> > To unsubscribe from this group and stop receiving emails from it, send
>> > an
>> > To post to this group, send email to
>> > app-inventor-o...@googlegroups.com.
>> > Visit this group at
>> > https://groups.google.com/group/app-inventor-open-source-dev.
>> > For more options, visit https://groups.google.com/d/optout.
>
> --
> You received this message because you are subscribed to the Google Groups
> "App Inventor Open Source Development" group.
> To unsubscribe from this group and stop receiving emails from it, send an
Reply all
Reply to author
Forward
0 new messages