Next Tutorial
Coding a Layerlist with Elevation
Prev Page
View All Tutorials
Material Design is new code classes for developing android apps; included are:
New color blends for the UI interface;
Elevation for UI(user interface) elements;
The new material theme (light and dark);
View shadows;
RecyclerView widget;
CardView widget;
Floating Action Button(FAB);
SnackToast;
Drawable animation with styling effects;
Material design animation;
Activity transition effects;
Animators for view properties based on view states;
Customizable UI widgets and app bars with controllable color palettes;
Animated and non-animated drawables with XML vector graphics;
New widgets to create complex views;
New APIs to create custom shadows and animations.
This is the App - Material Theme
It is the light theme of the material design theme; coded as material.theme.light; there is also a material.theme which is the dark color.
Some codes and concepts are entirely new, while others build upon previous code classes making them more functional and or improving their performance for your app.
Examples of this are the new RecyclerView and CardView widgets, which basically extend the capabilities of the previously known ListView.
For designing your UI; features include new functionality for fab buttons, ripple buttons and blended color charts; snacktoast messages, and elevated shadows for elements.
And for drawables and animations, there is now xml vector graphics, and drawable animations with styling effects.
Create two styles.xml pages. They each have the same page name, that being: styles.xml. And, each page has exactly the same coding except for the theme names; Theme.Material.Light and Theme.Holo.Light.
Here are images showing the coding for each theme.
Theme Holo Light Code
Theme Material Light Code
To make each theme display accordingly to the android version being used we have to create a folder for the Material Theme, as such: res/values-v21, and put our styles.xml coded page for the Material Theme into the values-v21 folder. The 21 in the folder name stands for API 21 because android version 5.1 is api 21.
The styles.xml page for the Holo.Theme.Light is put into the app's default res/values folder.
Once we have coded the styles.xml pages and put them in their folders, we need to add the style name we gave our theme to the the AndroidManifest.xml file. We named it AppTheme so just add that name to the manifest file code as such:
android:theme="@style/AppTheme
Now the android system will display each theme depending on the android platform being used.
Additional Reading at these websites:
Android Developer Website: Material Design for Android
Designing Your App Using Material Design
Create New Project;
Then, choose
New Android App(gradle, android Java/xml)
or
Hello World App Java/xml
if your using the original version of AIDE
Use;
Material Theme for the App Name and,
for the package name(next line) use:
com.aac.materialthemeExample
For this app you will use these coded pages:
LAYOUT File 1 layout file, main.xml; located at res/layout/main.xml, already created, just replace the code on this page with the code from our Example Code section and save the page.
JAVA File 1 java class page; MainActivity.java; located at app/src/java/MainActivity.java, already created; we don't need to add or edit code on this page so leave it as it is.
Styles.xml, page 1 styles.xml for Theme.Holo.Light, already created when you created your android template app for this tutorial, located at res/values/styles.xml Since it's already been created, you don't have to do anything to this page code.
1 styles.xml for Theme.Material.Light, already created for you when you created your android template app for this tutorial; at res/values-v21/styles.xml
If however, you needed to create it; do this: First, create the folder, values-v21 at res/, then create the file styles.xml; just copy paste the code from our example code into the page to replace the code on page now, then save the page. Make sure to copy the Theme.Material.Light code.
Now you have your two styles.xml created. One for the holo theme and one for the material theme.
If a user with android version 5 or greater uses your app, then the Material Theme Light will display for them, and if a user on a android version less than 5 downloads and uses your app, then the Holo Theme Light will display for them.
Strings.xml, page 1 strings.xml file, for text on our app page; file created for you when you created your android template app; just replace code that's there with code from our Example Code and save page.
AndroidManifest.xml page 1 manifest file, AndroidManifest.xml (already created).
This is where you put the name of your theme, in this case the name given to it is AppTheme. This name is already in the androidmanfest.xml file, It was created for us when we created our template android app, so we don't need to edit this page.
In this file you can also code your SDK min and target versions for your app. These can also be coded in the build.gradle page of your app project as mentioned in an earlier tutorial.
The important thing with Api number is that you code the version for the code class your adding.
In this app we are adding the material theme, from the Material Design coding classes; so we must use the SDK version (api number that corresponds to the version number)for that code class which is SDK target version 21. You can set a higher SDK api target number; but it cannot be less than the api number for the code class you add. So, for Material Design you cannot use api number less than 21; but you can use 26,27,28,29,30, or 31.
Updated: 2021
Newer platforms have been introduced; and with that, the min and target SDKs have changed. As of this time, March 2021; ideally you should set your min as 16, and target at least 28. For additional reading on this, goto Tutorial 1
The sdk min and targets are already coded for us when the template app was created for us, so we must change them manually for each app template we create. This is essy to do.
Goto the link mentioned above 'Tutorial 1'; scroll down page till you see image of build gradle, follow instruction to change them and save the page. Now your app is targeting the latest os platforms which means your app can be downloaded by more potential users. If you don't keep your SDK targets uptodate; you could lose a good market share of users worldwide.
Another way to check what SDK targets to use is by reviewing Google's app submission guidelines. They specify what targets you must use in your app for it to be published on Google Play Store.
If you want to use a darker color for your view you can use Material.Theme, which will show a dark color.
As mentioned in our previous tutorial on themes, you can add them to the entire app, or to individual pages in your app.
BUILD.GRADLE page The build.gradle. page is where you can define certain system requirements for your app; like coding your library support files;(dependencies); and your sdk min and target versions as explained.
The build.gradle is a page you will likely use(code) often as your gain more experience coding android apps; especially if your adding Material Design code components to your apps; or any new code classes since Material Design that require dependencies to implement them.
FYI:
Material Design
In addition to setting our SDK min and target api numbers; we need to add Support Libraries, also known as 'dependencies.' Not every Material Design code class requires you to add a support library but many do.
These support libraries are added to the build.gradle file in your app project. Every app project you create with AIDE or Android Studio will have a build.gradle page.
Your app project actually has two build.gradle files; there's one we can edit and one we cannot edit.
The one we can edit and add our codes to is at src folder of your app project(in AIDE): at AppProjects/MaterialTheme/app/ and is named build.gradle. The other one has a header text saying 'DO NOT EDIT THIS FILE'
We have included in our EXAMPLE Code section; the build.gradle file from this tutorial so you can see what the code in the file looks like.
You can read additional info at the android developer website
Support Libraries
To add a library for a code class your adding to your app; you need to add a few lines of code, to the build.gradle file at the section named dependencies.
If you don't add the required code class dependency: or set the correct SDK api numbers, you will get error messages; and or, your app will build but won't display your view.
You can see the api number for each code class at android developer website.
And, you can read the newest 'code classes' added per platform version.
Although you can add general libraries which cover more than one code class; it is recommended to only add the code class for the actual components your going to use in your app. This way, the apk(your app package file) does not contain unnecessary files.
These links from android developer website have more info you can read on adding library support for Material Design and the various libraries available that you can use.
Support Library Packages
Support Library Features Guide
Also Read:
Maintaining Compatibility Across Platforms
The Build Process
Chart of android platform distribution
Coding a Layerlist with Elevation
Prev Page
View All Tutorials
Android Material Design
Introduced in Android Version 5, API 21Material Design is new code classes for developing android apps; included are:
New color blends for the UI interface;
Elevation for UI(user interface) elements;
The new material theme (light and dark);
View shadows;
RecyclerView widget;
CardView widget;
Floating Action Button(FAB);
SnackToast;
Drawable animation with styling effects;
Material design animation;
Activity transition effects;
Animators for view properties based on view states;
Customizable UI widgets and app bars with controllable color palettes;
Animated and non-animated drawables with XML vector graphics;
New widgets to create complex views;
New APIs to create custom shadows and animations.
This is the App - Material Theme
It is the light theme of the material design theme; coded as material.theme.light; there is also a material.theme which is the dark color.
How To Use Material Design
Material Design introduces new coding methods to use in your android app development.Some codes and concepts are entirely new, while others build upon previous code classes making them more functional and or improving their performance for your app.
Examples of this are the new RecyclerView and CardView widgets, which basically extend the capabilities of the previously known ListView.
For designing your UI; features include new functionality for fab buttons, ripple buttons and blended color charts; snacktoast messages, and elevated shadows for elements.
And for drawables and animations, there is now xml vector graphics, and drawable animations with styling effects.
Coding Themes - Holo and Material
For our app tutorial, we have added two themes, one for the new Material Theme theme light (light color version) and one for the holo theme light (also light in color). We have added both so that users with devices using the newer android platforms 5 and greater, will be shown the Material Theme's light theme, and users on android platforms less than version 5 will be shown the holo theme light theme. To code this in our app we must do this:Create two styles.xml pages. They each have the same page name, that being: styles.xml. And, each page has exactly the same coding except for the theme names; Theme.Material.Light and Theme.Holo.Light.
Here are images showing the coding for each theme.
Theme Holo Light Code
Theme Material Light Code
To make each theme display accordingly to the android version being used we have to create a folder for the Material Theme, as such: res/values-v21, and put our styles.xml coded page for the Material Theme into the values-v21 folder. The 21 in the folder name stands for API 21 because android version 5.1 is api 21.
The styles.xml page for the Holo.Theme.Light is put into the app's default res/values folder.
Once we have coded the styles.xml pages and put them in their folders, we need to add the style name we gave our theme to the the AndroidManifest.xml file. We named it AppTheme so just add that name to the manifest file code as such:
android:theme="@style/AppTheme
Now the android system will display each theme depending on the android platform being used.
Additional Reading at these websites:
Android Developer Website: Material Design for Android
Designing Your App Using Material Design
Creating - Naming Your App Using AIDE
When creating your app,(from left menu) choose:Create New Project;
Then, choose
New Android App(gradle, android Java/xml)
or
Hello World App Java/xml
if your using the original version of AIDE
Use;
Material Theme for the App Name and,
for the package name(next line) use:
com.aac.materialthemeExample
The Coded Pages
Code for the app - Material ThemeFor this app you will use these coded pages:
LAYOUT File 1 layout file, main.xml; located at res/layout/main.xml, already created, just replace the code on this page with the code from our Example Code section and save the page.
JAVA File 1 java class page; MainActivity.java; located at app/src/java/MainActivity.java, already created; we don't need to add or edit code on this page so leave it as it is.
Styles.xml, page 1 styles.xml for Theme.Holo.Light, already created when you created your android template app for this tutorial, located at res/values/styles.xml Since it's already been created, you don't have to do anything to this page code.
1 styles.xml for Theme.Material.Light, already created for you when you created your android template app for this tutorial; at res/values-v21/styles.xml
If however, you needed to create it; do this: First, create the folder, values-v21 at res/, then create the file styles.xml; just copy paste the code from our example code into the page to replace the code on page now, then save the page. Make sure to copy the Theme.Material.Light code.
Now you have your two styles.xml created. One for the holo theme and one for the material theme.
If a user with android version 5 or greater uses your app, then the Material Theme Light will display for them, and if a user on a android version less than 5 downloads and uses your app, then the Holo Theme Light will display for them.
Strings.xml, page 1 strings.xml file, for text on our app page; file created for you when you created your android template app; just replace code that's there with code from our Example Code and save page.
AndroidManifest.xml page 1 manifest file, AndroidManifest.xml (already created).
This is where you put the name of your theme, in this case the name given to it is AppTheme. This name is already in the androidmanfest.xml file, It was created for us when we created our template android app, so we don't need to edit this page.
In this file you can also code your SDK min and target versions for your app. These can also be coded in the build.gradle page of your app project as mentioned in an earlier tutorial.
The important thing with Api number is that you code the version for the code class your adding.
In this app we are adding the material theme, from the Material Design coding classes; so we must use the SDK version (api number that corresponds to the version number)for that code class which is SDK target version 21. You can set a higher SDK api target number; but it cannot be less than the api number for the code class you add. So, for Material Design you cannot use api number less than 21; but you can use 26,27,28,29,30, or 31.
Updated: 2021
Newer platforms have been introduced; and with that, the min and target SDKs have changed. As of this time, March 2021; ideally you should set your min as 16, and target at least 28. For additional reading on this, goto Tutorial 1
The sdk min and targets are already coded for us when the template app was created for us, so we must change them manually for each app template we create. This is essy to do.
Goto the link mentioned above 'Tutorial 1'; scroll down page till you see image of build gradle, follow instruction to change them and save the page. Now your app is targeting the latest os platforms which means your app can be downloaded by more potential users. If you don't keep your SDK targets uptodate; you could lose a good market share of users worldwide.
Another way to check what SDK targets to use is by reviewing Google's app submission guidelines. They specify what targets you must use in your app for it to be published on Google Play Store.
Theme Colors Material Theme
The material theme light color is similar to the holo.theme.light, so using either of these themes will give your app page a light color view.If you want to use a darker color for your view you can use Material.Theme, which will show a dark color.
As mentioned in our previous tutorial on themes, you can add them to the entire app, or to individual pages in your app.
BUILD.GRADLE page The build.gradle. page is where you can define certain system requirements for your app; like coding your library support files;(dependencies); and your sdk min and target versions as explained.
The build.gradle is a page you will likely use(code) often as your gain more experience coding android apps; especially if your adding Material Design code components to your apps; or any new code classes since Material Design that require dependencies to implement them.
FYI:
Material Design
In addition to setting our SDK min and target api numbers; we need to add Support Libraries, also known as 'dependencies.' Not every Material Design code class requires you to add a support library but many do.
These support libraries are added to the build.gradle file in your app project. Every app project you create with AIDE or Android Studio will have a build.gradle page.
Your app project actually has two build.gradle files; there's one we can edit and one we cannot edit.
The one we can edit and add our codes to is at src folder of your app project(in AIDE): at AppProjects/MaterialTheme/app/ and is named build.gradle. The other one has a header text saying 'DO NOT EDIT THIS FILE'
We have included in our EXAMPLE Code section; the build.gradle file from this tutorial so you can see what the code in the file looks like.
You can read additional info at the android developer website
Support Libraries
To add a library for a code class your adding to your app; you need to add a few lines of code, to the build.gradle file at the section named dependencies.
If you don't add the required code class dependency: or set the correct SDK api numbers, you will get error messages; and or, your app will build but won't display your view.
You can see the api number for each code class at android developer website.
And, you can read the newest 'code classes' added per platform version.
Although you can add general libraries which cover more than one code class; it is recommended to only add the code class for the actual components your going to use in your app. This way, the apk(your app package file) does not contain unnecessary files.
These links from android developer website have more info you can read on adding library support for Material Design and the various libraries available that you can use.
Support Library Packages
Support Library Features Guide
Also Read:
Maintaining Compatibility Across Platforms
The Build Process
Chart of android platform distribution
EXAMPLE CODE - Code For This Tutorial
JUST copy the code for this tutorial App Name is 'Material Theme - located at AppProjects/MaterialTheme in AIDE, open the AIDE app, then open App Projects,
THEN select the 'Material Theme', app from your files hierachy(left menu); then click on any file from the app, like strings.xml Make sure at top of page, the app name 'Material Theme' is there next to AppProjects like so: AppProjects/MaterialTheme, then you know you have the proper App.
JUST copy the code for this tutorial App Name is 'Material Theme - located at AppProjects/MaterialTheme in AIDE, open the AIDE app, then open App Projects,
THEN select the 'Material Theme', app from your files hierachy(left menu); then click on any file from the app, like strings.xml Make sure at top of page, the app name 'Material Theme' is there next to AppProjects like so: AppProjects/MaterialTheme, then you know you have the proper App.
Once a file is in the editor, you can edit, save it, then RUN your APP, Install,
and Open your app.
Make sure you SAVED EACH PAGE,(or choose automatic saving in AIDE settings) before you RUN your code. SAVE, RUN, INSTALL, OPEN, your App. Once it has been
installed on your tablet, you can open it Simply by Clicking on the Android little green App Icon,with the wording 'MaterialTheme' on your tablet. It will
be with your other installed apps.
If you make further changes to this App, you need to SAVE, RUN, UPDATE, INSTALL, OPEN the app again.
This free script provided by
JavaScript
Kit
AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid.
GoTo Aide
ANDROID STUDIO - for creating Android Apps on your desktop computer.
Learn more - Android Studio
The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.
You May Like:
Make Sushi Rolls Taste World Wines Flavours and Aromas