Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • An Easy Guide to Material Design Implementation for Android Developers

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 4.87k
    Comment on it

    Material Design was introduced in Android Lollipop version and is considered as an extensive guide for motion, visual, and interaction design across various devices and platforms. One can also use the design support library to integrate components, patterns as well as the material design. This supporting library is compatible with Android 2.3 (Api level 9) and above.

     

    You can apply the material theme in your app by specifying a style that inherits from android: Theme. Material:

    <!-- res/values/styles.xml -->
    <resources>
      <!-- your theme inherits from the material theme -->
      <style name="MyAppTheme" parent="android:Theme.Material">
        <!-- theme customizations -->
      </style>
    </resources>

     

    The material theme is defined as:

    • @android:style/Theme.Material (dark version)
    • @android:style/Theme.Material.Light (light version)
    • @android:style/Theme.Material.Light.DarkActionBar

     

    Material Design provides a set of properties to customize the Material Design Color theme. However, we can focus on the following five primary attributes:-

    • colorPrimaryDark – It’s the app darkest primary color which mainly applies to status or the notification/status bar background
    • colorPrimary – It’s the primary app color and is applied as a toolbar background
    • textColorPrimary – It’s the primary text color and is applied to the toolbar title
    • windowBackground – It’s the default background color of the app
    • navigationBarColor – It defines the background color of footer navigation bar

     

    Besides, you can add colors in the colors.xml inside values folder:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="colorPrimary">#F50057</color>
        <color name="colorPrimaryDark">#C51162</color>
        <color name="textColorPrimary">#FFFFFF</color>
        <color name="windowBackground">#FFFFFF</color>
        <color name="navigationBarColor">#000000</color>
        <color name="colorAccent">#FF80AB</color>
    </resources>

     

    Now add them in your theme:-

    
    <!-- res/values/styles.xml -->
    <resources><!
      -- your theme inherits from the material theme -->
      <style name="MyAppTheme" parent="android:Theme.Material">
        <!-- theme customizations -->
      	<item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
      </style>
    </resources>
    

     

    Introduction of Recycler View and Card View

    RecyclerView:- RecyclerView is comparatively better refined and flexible version of ListView. It is available in v7 supporting package. You can find more detail on RecyclerView here.

    CardView:- CardView increases the FrameLayout class and display the information inside cards. CardView widgets can have shadows and rounded corners.

     

    Below code show, how to add cardview in your layout:-

    <!-- A CardView that contains a TextView -->
        <android.support.v7.widget.CardView
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:id="@+id/card_view"
            android:layout_gravity="center"
            android:layout_width="200dp"
            android:layout_height="200dp"
            card_view:cardCornerRadius="4dp">
    
            <TextView
                android:id="@+id/info_text"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </android.support.v7.widget.CardView>

     

    If you want to give shadow to the card view then use card_view: cardElevation attribute.

    You need to add the following dependencies in your build.gradle(module)

    dependencies {
        ...
        compile 'com.android.support:cardview-v7:21.0.+'
        compile 'com.android.support:recyclerview-v7:21.0.+'
    }

     

    You can also give shadow to any view by using android:elevation attribute.

    <TextView
        android:id="@+id/myview"
        android:elevation="2dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

     By the help of material design, you can include vector drawable's, define custom animation and can do many other things in your app

     

    Hope you like the article! Share the feedback, brickbats, and concerns in the comment section below.

     An Easy Guide to Material Design Implementation for Android Developers

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: