Theme Material [MIT AI2]

Thanks for the hint Benjamin, that it was possible to have Theme.Material with App Inventor.

In order to get Theme.Material working with App Inventor your device must support it by having Lollipop.

Designer Properties of Screen1

Sizing: Responsive
ShowStatusBar: Checked
TitleVisible: Checked

We will control StatusBar and Title with the respective application.

 

ApptoMarket

Made with AppToMarket by M. Hossein Amerkashi

Downloadable files and folders to get this to work.
Framework file 1.apk.
Folders values, values-v11, values-v21 can be downloaded from here.

Launch AppToMarket

Browse for your project.

Decompile.

Select necessary features and update Manifest.

Edit manifest, add this android:theme="@style/Theme.Mytheme" for the theme in the AndroidManifest.xml file.

Save Manifest.

Before we Create New.apk.
Replace 1.apk in C:\Users\xxx\apktool\Framework\ with downloaded 1.apk.

Move downloaded folders to ..\AppToMarket_v40\temp_myDecompiles\res\ folder.

atmmove4

Theming
Each folder values, values-v11, values-v21 contains mytheme.xml file where we will change to the desired theme, and by doing that your apps will choose the theme to use depending on the device’s API.

Folder
values Theme.Light

values-11 Theme.Holo.Light
values-21 Theme.Material.Light

Create New.apk

Sign.

Verify.

Zip Align.

And that’s all….

 

Apk Modder v.2


Coming

 

Apk Modder v.1


Made with Apk Modder by Gabriele.


Launch Apk Modder

Select Apk tab and choose the Select apk to decompile.

Decompile should take a couple of seconds to be completed.

Making some changes in the Manifest file by selecting from the drop-down menus.

Build new apk.

Finalize apk.

And that’s all….

 

    • pmesystem on January 12, 2016 at 4:13 pm

    Reply

      • pmesystem on January 12, 2016 at 5:42 pm

      Reply

      I download folders.Just import ypur files to my drive.Now its work but ı have litle error.Title visible how to fix it?

      http://www.hizliresimyukle.com/image/19x
      http://www.hizliresimyukle.com/image/193

        • bobans on January 13, 2016 at 2:36 pm

        Reply

        I did it only with one theme, you have to make changes to mytheme.xml.

        change this in mytheme.xml
        values Theme.Light –> Theme.Light.NoTitleBar
        values-11 Theme.Holo.Light –> Theme.Holo.Light.NoActionBar
        values-21 Theme.Material.Light –> Theme.Material.Light.NoActionBar

        I’ll see if I can fix more themes

        • pmesystem on January 16, 2016 at 12:31 am

        Reply

        Thanks for reply.Can we add this direclty to app Inventor 2? maybe new extension method help us?

          • bobans on January 20, 2016 at 12:26 pm

          Reply

          I have seen request of themes in the MIT Ai2 forum, however I do not know if they have made any progress and I do not think it’s possible to do it with the extension either..

  1. Reply

    Love you. Forever.

    • Julian on July 11, 2016 at 5:46 pm

    Reply

    how i download it?

      • bobans on July 13, 2016 at 11:05 pm

      Reply

      Hello Julian,
      This guide is somewhat old and not updated in relation to the Apk Modder, there is a new version out now of APK Modder v.2

      Forum & download: https://groups.google.com/forum/#!forum/gwayapps

    • seghier khaled on September 4, 2016 at 10:26 am

    Reply

    didn’t work

      • bobans on September 4, 2016 at 11:40 am

      Reply

      It works as it should if you followed the instructions.

      By the way, which App Inventor Distribution do you use.

        • seghier khaled on September 4, 2016 at 11:50 am

        Reply

        i tested with app created with : MIT App Inventor 2
        Beta ,
        and with the same app compiled with : App Inventor 2 Ultimate.
        this method work for me only when i tried with applications created by : http://appybuilder.com/
        04sept.2016_1044.13: I: Loading resource table…
        04sept.2016_1044.13: ERROR: Unable to decompile your .apk file
        also when i tried with apktool ( apkstudio ) the manifest.xml didn’t have anything just few lines about the version and the name
        and original manifest file crypted

          • bobans on September 4, 2016 at 1:42 pm

          Reply

          1. Have you updated AppToMarket to 4.1, if not do it….
          2. When you get this “ERROR: Unable to decompile” try by pressing the button “Update Manifest” and again press button “Decompile”.
          3. Delete 1.apk file in the C:UsersXXXXapktoolframework folder and try again to Decompile…

            • seghier khaled on September 4, 2016 at 1:46 pm

            Reply

            with the v4.1 always i got message about internet connection or server
            for this reason i use v4
            i tried but always the same problem

              • bobans on September 4, 2016 at 2:47 pm

              Reply

              AppToMarket 4.0 won’t work with MIT latest built.

              Sorry, I’m not so good at updating the information, I’ve only updated information for this in Sidebar Tutorial. See Notes at that page…

              • bobans on September 4, 2016 at 3:02 pm

              Reply

              I used apktool from this page and it works without any issue on all App Inventor Distributions.

                • seghier khaled on September 4, 2016 at 3:11 pm

                Reply

                thank you i will try again with apktool
                always i got manifest.xml like that
                http://i.imgbox.com/hO0iKeah.jpg
                i can’t edit anything

    • seghier khaled on September 4, 2016 at 4:59 pm

    Reply

    i used advanced apk tool and i tried to do what you did
    the name of your theme : mytheme
    waht you change is : Mytheme
    the two name must the same : mytheme or Mytheme
    but after compiling i can’t open the application

      • bobans on September 4, 2016 at 5:44 pm

      Reply

      Files are named mytheme but you must specify in manifestfile Mytheme android:theme=”@style/Theme.Mytheme”

      after you build with apktool, you have to Sign, Verify and Zip align, otherwise your application will not work

      therefore the easiest and by far the best way to do this is with ApkModder However, it requires a donation
      the second is AppToMarket and finally apktool, because you will have to fill in things yourself and go through all those steps that ApkModder, AppToMarket automatically does

    • seghier khaled on September 4, 2016 at 6:29 pm

    Reply

    yes i signed them and installed everytime in my phone but didn’t work
    something missing
    you can see here the xml file ; there is nothing about theme

        • bobans on September 5, 2016 at 5:47 pm

        Reply

        Take a look at my manifest file and the only thing you need to put into it,

        then copy the folders and files to respective location as I mention in this tutorial,
        now you can build your app, sign, verify and zipalign.

        If this doesn’t work for you then you are doing something wrong..

          • seghier khaled on September 5, 2016 at 6:51 pm

          Reply

          thank you but didn’t work
          always : Unfortunately ….has stopped
          i donate apk modeler and i wait license to test it
          http://i.imgbox.com/c0bve36f.jpg

          • seghier khaled on September 6, 2016 at 11:14 am

          Reply

          i tried with apkmodeler and the same problem

            • bobans on September 7, 2016 at 6:52 am

            Reply

            You didn’t followed the tutorial

              • seghier khaled on September 7, 2016 at 7:04 am

              Reply

              i did but you use older version
              i wait the response of the developer after he test the apk

                • bobans on September 7, 2016 at 8:25 am

                Reply

                Not for Designer Properties

                  • seghier khaled on September 7, 2016 at 9:17 am

                  Reply

                  i post a link of my app in the forum if you want test it
                  and it’s better if you make video tutorial with the new version and show step by step
                  thanks

                    • bobans on September 7, 2016 at 11:42 am

                    Reply

                    as I said, Designer Properties look at the first picture in the tutorial.

                    Your app has not TitleVisible : Checked

                      • seghier khaled on September 7, 2016 at 12:18 pm

                      thank you ; finally work but with two problems
                      the fonts changed and are bigger and i got this message

                      runtime error
                      attemp to invoke virtual method
                      android.view.viewparent
                      android.view.view.getparent()
                      on a null object reference

    • Coco on November 13, 2016 at 5:14 am

    Reply

    I’ve tried all steps multiple times.

    Whenever I try to run the app. It says it unexpectedly stops.

    Please help!

      • bobans on November 13, 2016 at 2:00 pm

      Reply

      Hi Coco,

      Without knowing how your app is built, I can only guess what might be wrong
      1. Designer Properties look at the first picture in the tutorial, you must have the TitleVisible:Checked and ShowStatusBar:Checked.
      2. Do you have Slider component in your project.

    • Coco on November 13, 2016 at 3:54 pm

    Reply

    I do have them both checked. I also have a slider in the app.

      • bobans on November 13, 2016 at 10:52 pm

      Reply

      Slider component wont work with Holo or Material Theme because it is hard-coded by MIT AI2 however there is a solutions for this as well, easiest if you download this and use those files instead.

        • Coco on November 13, 2016 at 10:55 pm

        Reply

        Copy those files to my temp_myDecompiles res folder?

        Will it work just like in MIT AI2? Colors supported?

          • Coco on November 13, 2016 at 11:07 pm

          Reply

          Nevermind! It worked 😀

          Thanks so much.

          Please document this for other people to know

            • bobans on November 13, 2016 at 11:36 pm

            Reply

            Great that it worked for you.

            Yeah I know it was on my to do list.

    • diki on November 23, 2016 at 3:18 am

    Reply

    hi Boban..
    can you help me…how to change package name with apptomarket…

      • bobans on November 23, 2016 at 11:37 am

      Reply

      Unfortunately it is not possible with AppToMarket

    • Thomas on January 11, 2017 at 10:49 pm

    Reply

    This is fantastic, thank you very much.

    Just wondering if it is possible to change the colour of the text and backgrounds for material.theme.
    Specifically
    -the background colour & text colour for listpicker title
    – the text colour for message dialogue title
    – the thumb colour for a slider

      • bobans on January 12, 2017 at 1:12 pm
      • Author

      Reply

      I can look into this but no promises because it’s not easy to theme App Inventor apps.

      By the way, do you have something that I can see how it should look.

        • Thomas on January 13, 2017 at 1:55 am

        Reply

        Thanks for getting back to me. Attached are images of the current state of the app with a description below of what I’d like to change. Thanks again, Thomas

        https://14973399418869302879.googlegroups.com/attach/5eab4e57ea084/image1.PNG?part=0.3&view=1&vt=ANaJVrEr3lNXZa3pTMRGPTKVYG7WP6A1QdLNs_G28dmO60jUFVKBfU2B5mDwrYOip30jeXMCB16DXvygO7drOgIbq7MHlUtT9XnPCRsBLCZceHKpX8t0MYs
        – Change the background colour from black to grey for the listpicker title
        – Change the text colour from blue to black for the listpicker title (i.e. Choose a mode)

        https://groups.google.com/group/mitappinventortest/attach/5eab4e57ea084/image2.PNG?part=0.2&authuser=0&view=1
        Image2.png – Change the text colour from blue to black for the message dialogue title (i.e. Default Preset)

        https://groups.google.com/group/mitappinventortest/attach/5eab4e57ea084/image3.PNG?part=0.1&authuser=0&view=1
        – Change the thumb colour slider from blue to black

          • bobans on January 13, 2017 at 2:48 am
          • Author

          Reply

          Thomas you mean you mimic the appearance of material theme for your app, because the thumb slider is from holo theme, dialog box image2 is also from holo theme and image1 is Hossein’s own dialog box from the old theme.

          The only way to have material theme is if your device support it by having Lollipop Android 5.0 or higher.

            • Thomas on January 13, 2017 at 11:24 am

            Reply

            Thanks Bobans, I tried the app on my phone running nougat. Is this still holo theme or is it material?
            Ideally and if it is possible, I would still like to change the colour of thumb slider, background/text colour for the list picker heading and the text colour of the pink ‘ok’ button on the dialog box. Thanks again, Thomas

            https://drive.google.com/open?id=0B_YOAlGrpb6RZjBrbWZPTldGNm8
            https://drive.google.com/open?id=0B_YOAlGrpb6ReHo0SEZTcGYwa1k
            https://drive.google.com/open?id=0B_YOAlGrpb6RWVBBbUtmZV83UTg

              • bobans on January 13, 2017 at 1:02 pm
              • Author

              Reply

              Now we’re talking, that’s material theme

              I will have to take a look at what needs to be changed, if possible to make it easier for me to see what needs to be changed can you share your app if not then can you save it as a copy in MIT, erase all block code except those that control other screens, dialog or that I need to see, then build your app.

              In your app do you use it in full screen, min and target SDK etc.

                • Thomas on January 14, 2017 at 12:17 am

                Reply

                Awesome. I have just created another app and the colour issues are still there. Min sdk9 & Target sdk10.
                Thanks again, Thomas

                https://drive.google.com/open?id=0B_YOAlGrpb6RNFlhWWpQal9ZQ0E

                  • bobans on January 25, 2017 at 2:59 pm
                  • Author

                  Reply

                  As I mentioned earlier, it is not easy to theme AI2 apps especially Notifier Dialogs in holo theme, material theme have other issues, depending on android version and phone brand, thereof it will not look the same.

                  This might work for Notifier Dialogs in holo theme, but there is much to change just to have another color for the title.

    • Shubham on October 10, 2017 at 3:51 am

    Reply

    Hey , i followed above tutorial.
    But recompile was taking infinite time .

    So i used tickle my Android.
    Made those changes in manifest.
    Replaced the res folder.
    Installed the above framework. (1.apk)
    Recompiled with original signature.

    No changes in the android app when tested on marshmallow.

    Please help me with the issue.

      • bobans on October 10, 2017 at 3:25 pm
      • Author

      Reply

      At the moment, I do not know why it behaves like that.
      Can you share your apk, so I can perform a test on it and see what’s happening.

      As for TMA, I do not have the necessary requirements to test with it Sorry.

      • bobans on October 10, 2017 at 3:39 pm
      • Author

      Reply

      By the way, did you use this one runMeWindows_v41.bat to start the ATM…

Leave a Reply

Your email address will not be published.