Android Material Design and creation of apps with legacy APIs

Hello viewer, You can now have our Tutorial Lessons in your android mobile device and read it offline.
Download kotlin Programming APP on PlayStore
Download Website SEO Lessons APP on PlayStore

The Material Design was introduced in Android 5 (Lollipop), but with Android 6 (Marshmallow) and Android 7 (nougat), has been enhanced with new features. In this tutorial we will see the steps to create an application that takes advantage of the material design and use precautions to ensure that it is displayed correctly on devices with lower API.

Topic: Android Material Design and creation of apps with legacy APIs

The material design is definitely one of the most important new features introduced in Android version 5. With the Android Exit 6 (Marshmallow) and 7 (nougat), other improvements have been made and animation types, and things really start to be more outlined, partly because this new philosophy is now being applied to the same web pages (see Angular Material )

In this tutorial we will then see how to create a first app that takes advantage of the material design, and we’ll see how the interface of the app itself, to appear if it were installed in the previous version of Android Lollipop.

To start we create a new project in Android Studio calling it “Material Design.” This project will serve as a basis to show, starting from the next tutorial, the main characteristics, which form the basis for the design of new interfaces. As a minimum SDK, I will choose the API 21 corresponding to 5 or Android Lollipop.

Topic: Android Material Design and creation of apps with legacy APIs

To start, no complicate our lives, we will choose an Activity Empty. After the procedure, the Main_activity page, which display it, will have all the features of the interface material design. Indeed, there seems no particular differences. The only obvious thing you notice in the ActionBar, is the absence of the classic icon on the left side of the app title.

Android Material Design and creation of apps with legacy APIs - Android Material Design and creation of apps with legacy APIs - Android Material Design and creation of apps with legacy APIs - android material design

By analyzing in more detail, it is also discovered a slight shadow on the bottom, to give a sense of three-dimensionality to the bar, some as often happens on websites. Of course, many will say that they are shades, but then the wheel has already been invented, so it is just to improve it.

Now if we were to start two emulators, one with API 19 (KitKat or Android 4.4) and one with API 21 (Lollipop), the first of course I could not test anything, because in the process of creating the project, I chose as minimum SDK the API 21. Entering then into the Gradle files and setting the value 19, as seen in the tutorial “Changing the level of API for a project ,” I will launch my app, even within the emulator Android KitKat.

Topic: Android Material Design and creation of apps with legacy APIs

What you notice immediately is that, without that I have changed nothing in the code, the interface is different from that displayed on an emulator of a device with Android Lollipop. The current interface is the classic theme “Holo Theme”.

Android Material Design and creation of apps with legacy APIs - Android Material Design and creation of apps with legacy APIs - Android Material Design and creation of apps with legacy APIs - android material design

How is this possible?

If you try to view the contents of the res folder, you will find that there are two folders that begin with the word “values”.

 

Android Material Design and creation of apps with legacy APIs - Android Material Design and creation of apps with legacy APIs - Android Material Design and creation of apps with legacy APIs - android material design

In the first case, the one with the name “values”, we will find in the classic styles.xml file, which, as we know, is used to apply a theme to the application, thanks to the presence of the element <style>

In this case, the theme is inherited from the default “Theme.Holo.Light.DarkActionBar”, which was used during the development of applications for Android 4.

In the second case, namely as “values-v21”, there will always be an xml file with the classic <style> element, but this time the theme will be an extension of “Theme.Material.Light”. This is one of two versions is available with which the “material” theme, introduced in Android 5: one whose background appears to be clear. There is also the one with dark background “Theme.Material”

In conclusion to create an app that takes advantage of the material design, you’ll need to start by creating a project that takes advantage of Android APIs 5 or 21 and then change the minimum SDK to support older versions of Android.

Topic: Android Material Design and creation of apps with legacy APIs

Customize the theme using custom colors Material

The specific themes of the “Materials Design”, can be clearly customized, depending on the style you want to give your app. As you have seen, in the theme of “light” color dell’Actionbar background it is a light gray.

The next step is to define then some custom color names. Each of these will be defined within a color tag. We could define a named color “blue” and set it to a hexadecimal color equal to # 9BDDFF.

<item name="blue" type="color">#47A2FF</item>

Next I will create a second element called “darkblue“, which will assign a color equal to #0047AB.

 

<item name="darkblue" type="color">#0047AB</item>
Inside the color.xml files so I find myself:


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="blue" type="color">#47A2FF</item>
    <item name="darkblue" type="color">#0047AB</item>
    <item name="White" type="color">#FFFFFF</item>
</resources>

At this point I created two custom colors that I can use within the two style.xml seen earlier file to customize the look of my app. The next step then will be to add the <item> elements that will overwrite the default theme.

Below I report some of the names to be used for different sections of an app that inherits from a theme “Material”.

  • colorPrimaryDark : Defines the background color of the system tray (SystemBar)
  • colorPrimary : Defines the background color for the application bar (ActionBar)
  • textColorPrimary : it defines the color of text in the application bar
  • windowsBackground : Defines the background color of the entire Activity
  • navigationBarColor : Defines the background color of the navigation bar

Now to customize the status bar, I’ll have to go and edit the files style.xml the version corresponding to the topic Material that is, those with API 21 (Values-21 / styles.xml), going to redefine the colors of the sections that I interested in changing.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="android:Theme.Material.Light">
    <! - Customize the Material Light theme below ->
    <item name="android:colorPrimary">@color/blue</item>
    <item name="android:colorPrimaryDark">@color/dark
 blue</item>
    <item name="android:textColorPrimary">@color/white</item>
    </style>
</resources>

About The Author

Related posts

Leave a Reply