{"id":20330,"date":"2016-05-04T09:18:47","date_gmt":"2016-05-04T14:48:47","guid":{"rendered":"https:\/\/www.solutionanalysts.com\/blog\/developers-guide-how-to-work-on-material-design-for-android-apps\/"},"modified":"2023-08-16T23:04:38","modified_gmt":"2023-08-17T04:34:38","slug":"developers-guide-how-to-work-on-material-design-for-android-apps","status":"publish","type":"post","link":"https:\/\/www.solutionanalysts.com\/blog\/developers-guide-how-to-work-on-material-design-for-android-apps\/","title":{"rendered":"Developers guide: How to work on Material Design for Android Apps"},"content":{"rendered":"

Material Design is living up to all its promise with the wide vista of development opportunities in applications, templates, and websites. Developers around the world are excited by this latest technology by Android and have sunk their hands into android app development<\/a> on this new platform with great gusto.<\/p>\n

Our Android development team already has a few projects underway that is giving us the chance to exploit the fresh features for a robust application.<\/p>\n

Elements of Material Design for building an Android App<\/h2>\n

Material Design can be used for mobile app development for Android Lollipop version 5.0 onwards. It has a systematic development approach for visuals, interaction and motion design for multi-screen apps.<\/p>\n

Support libraries have been updated for the system so that developers can create UIs enhanced with all the new features. Some of the cool new elements of Material Design for a futuristic app are \u2013<\/p>\n

– On this platform there are tangible surfaces composed with digital paper and ink and there are visual cues to the application structure that will give an idea of what can be touched and how it will respond. You can use it to create flexible UIs.<\/p>\n

– With surface elevation you can define the depth and add subtle effects of lighting and shadow<\/p>\n

<ImageView \u2026\r\n    android_elevation=\"8dp\" \/>\r\n<\/pre>\n
– Use the CardView support library to create surface that hold distinct information pieces. It can be used to extend frame layout and provides default elevation and corner radius for consistent appearance. Cards can be customized using cardElevation and cardCornerRadius attributes.<\/p>\n
<android.support.v7.widget.CardView\r\n    android_layout_width=\"match_parent\"\r\n    android_layout_height=\"wrap_content\">\r\n    <!-- Your card content -->\r\n\r\n<\/android.support.v7.widget.CardView>\r\n<\/pre>\n
– With Android 5.0 you can enjoy a beautified system font Roboto with w new medium weight that can be added as (android:fontFamily=\u201dsans-serif-medium\u201d). New TextAppearance styles can also be applied. The title style can be applied by setting android_textAppearance=\u201d@android:style\/TextAppearance.Material.Title\u201d<\/p>\n
Adding colors to the UI has become simple with three distinct commands<\/p>\n
colorrPrimary<\/p>\n
colorAccent<\/p>\n
colorPrimaryDark<\/p>\n
– Other controls include colorControlNormal, colorControlHighlight, colorButtonNormal, colorControlAvtivated, statusbarColor, colorEdgeEffect, navigationBarColor.<\/p>\n
– Dynamic color usage can be done with the new Palette support library which allows you to extract a small set of color from an image to create the UI controls. There are vibrant and muted tones with foreground text colors.<\/p>\n
– Declare \u201cshared elements\u201d to create smooth transition between two states:<\/p>\n
album_grid.xml\r\n\u2026\r\n    <ImageView\r\n        \u2026\r\n        android_transitionName=\"@string\/transition_album_cover\" \/>\r\nalbum_details.xml\r\n\u2026\r\n    <ImageView\r\n        \u2026\r\n        android_transitionName=\"@string\/transition_album_cover\" \/>\r\n\r\nAlbumActivity.java\r\nIntent intent = new Intent();\r\nString transitionName = getString(R.string.transition_album_cover);\r\n\u2026\r\nActivityOptionsCompat options =\r\nActivityOptionsCompat.makeSceneTransitionAnimation(activity,\r\n    albumCoverImageView,   \/\/ The view which starts the transition\r\n    transitionName    \/\/ The transitionName of the view we\u2019re transitioning to\r\n    );\r\nActivityCompat.startActivity(activity, intent, options.toBundle());\r\n<\/pre>\n
– Add ink ripple surface reaction and interactive controls using Theme.Material and wrapping the ripple element<\/p>\n
<ripple\r\n    xmlns_android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android_color=\"@color\/accent_dark\">\r\n    <item>\r\n        <shape\r\n            android_shape=\"oval\">\r\n            <solid android_color=\"?android:colorAccent\" \/>\r\n        <\/shape>\r\n    <\/item>\r\n<\/ripple>\r\n<\/pre>\n
There are many more special effects that you can add to your application with Android material design that give an immersive app experience.<\/p>\n
To find out more about it and to discuss ideas for beautiful mobile apps, don\u2019t forget to comment and get in touch with us.<\/p>\n","protected":false},"excerpt":{"rendered":"
Material Design is living up to all its promise with the wide vista of development opportunities in applications<\/p>\n","protected":false},"author":1,"featured_media":20331,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[200],"tags":[],"class_list":["post-20330","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android-apps"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/posts\/20330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/comments?post=20330"}],"version-history":[{"count":2,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/posts\/20330\/revisions"}],"predecessor-version":[{"id":32737,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/posts\/20330\/revisions\/32737"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/media\/20331"}],"wp:attachment":[{"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/media?parent=20330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/categories?post=20330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.solutionanalysts.com\/blog\/wp-json\/wp\/v2\/tags?post=20330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}