Introduction to Upcoming AndroidX with Material Components

What is AndroidX?

AndroidX (Android Extension library) is the new era of Android Support library which every Android Developer were using since 7+ years. AndroidX supports newer OS features on older versions of Android along with newer device-specific UX, new features under Android KTX, debugging, testing. To keep in mind for smaller and more focused packages, AndroidX redesigns the packages structure such that both the names of Architecture Components and support libraries are simplified. This should help make clear that which dependencies should be included in the APK.

Now the biggest question might arise in every developers’ mind that there are components and packages named “v7” when the minimal SDK level we support is 14! What about that? It’s worth making clear that to work across different versions of Android is to understand the division between APIs that are bundled with the platform and which are static libraries for developers. So developers, it’s time to say “Hello World” to AndroidX.

Migrate from the Support version to AndroidX .

In Android Studio do Refactor -> Refactor to AndroidX.. .This feature is available on Android Studio Canary 14 for app targeting Android P. Android Studio will update that library directly to reference androidx.

To implement high quality application in lesser time, it would be easier for developers to make above changes of AndroidX, but changes by AndroidX will have an impact on existing code and migration takes time, so for that reason Google is also giving parallel updates to android.support for P preview SDK timeframe which will continue the 28.0.0 as a final feature release as android.support.

AndroidX Refactoring

Now to create a new project using androidx-packaged dependency, your new project needs to target API level 28, and you will need to add the following lines to your gradle.properties:

android.enableJetifier=true
android.useAndroidX=true

Some of the package changes from android.support(28.0.0-alpha1) to androidx(1.0.0-alpha1) will look like this: (This might have minor change during alpha phase)

For support library -> android.support.** to androidx.@ ,

For dataBinding library -> android.databinding.** to androidx.databinding.@

For design library -> android.design.** to com.google.android.material.@

For Room database under
Architectural components -> android.arch.persistence.room.** to androidx.room.@

For More Refactoring Refer this

Material Components

All the new announcements made in Google I/O 2018 make a huge change in terms of enhanced with expanded design guidance , tools geared toward solving the lags between design and development, and customisable UI components for not only Android but also for iOS, Web and Flutter. So drop-in replacement of Design Library as a Material Components in 28.0.0-alpha1 or AndroidX and to help you build beautiful digital experiences even faster will be huge change in the world of design and development.

These are few steps to setup environment for material design:

• Use Android Studio Canary 14 for app targeting Android P for support-v4:28.0.0-alpha1’ or AndroidX.
• Gradle-wrapper.properties
  

  distributionUrl=https\://services.gradle.org/distributions/gradle-4.8-all.zip

• Update build.gradle(project-level)
  

  classpath 'com.android.tools.build:gradle:3.2.0-alpha11'

• Update build.gradle (Module level)
  

  android{
  compileSdkVersion '28' 	
  DefaultConfig{
  ..
  targetSdkVersion 27
  }
  .. 
  }

Under dependency tag

• If you are using support lib 28.0.0-alpha1
  build.gradle (module level)
  

  depndencies{
  ..
   api 'com.android.support:design:28.0.0-alpha1'  
  implementation 'com.android.support:support-v4:28.0.0-alpha1' 
  ..
  }

• If you are using AndroidX then you will replace api ‘com.android.support:design:28.0.0-alpha1’ with implementation ‘androidx.appcompat:appcompat:1.0.0-beta01′ and implementation ‘com.android.support:support-v4:28.0.0-alpha1’ with implementation ‘com.google.android.material:material:1.0.0-beta01’.
  build.gradle (module level)
  

  depndencies{
  ..
  implementation ‘com.google.android.material:material:1.0.0-beta1’ 
  implementation 'com.android.support:support-v4:28.0.0-alpha1' 
  ..
  }

• Update App theme
  style.xml
  

  <resources>
  <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
  <item name=colorPrimary">@color/colorPrimary</item>
  <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  <item name="colorAccent">@color/colorAccent</item>
  </style>
  </resources>

1. Material TextinputEditText

To create a material text field, add a TextInputLayout to your XML layout and a TextInputEditText as a direct child.

activity_login.xml

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="Password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

style.xml

<style name="TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/HintText</item>
   <item name="android:paddingBottom">8dp</item>
</style>

To make a outline textField , put a style like

style="Widget.MaterialComponents.TextInputLayout.OutlinedBox"

2. Material Button

Here, you can use one of these style for Material Button for ex:

style="@style/Widget.MaterialComponents.Button"

Above code will set primaryColor as backgroundColor

style="@style/Widget.MaterialComponents.Button.TextButton"

This will set transparent background to your button.

Another best thing about Material Components are whole material is dynamic. Now, developers don’t need to make a drawable to make button customise. We directly can set cornerRadius, backgroundTint, set icon, iconTint, iconPadding from xml as well as default get Built-in touch feedback (called MDC Ripple) and elevation.

activity_login.xml

<android.support.design.button.MaterialButton
   style="@style/Widget.MaterialComponents.Button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Messages"
   android:minWidth="200dp"
   app:cornerRadius=”16dp”
   app:icon="@drawable/ic_action_setting" 
   app:cornerRadius="@dimen/_16sdp"
   app:backgroundTint="@color/colorAccent"
   app:iconTint="@color/light_pitch" 
   app:iconPadding="-12dp"app:strokeColor
  />

NOTE: You can access all the examples in our GITHUB link

3. Bottom AppBar And FAB

BottomAppBar is an evolution and one of the defining features from standard Material guidance. It puts more focus on features, increases engagement, and visually anchors the UI.

act_bottom_appbar_behaviour.xml

<com.google.android.material.bottomappbar.BottomAppBar
..
app:menu="@menu/bottom_appbar_menu_primary"
..
/>

BottomAppbarBehaviour.kt

class BottomAppbarBehaviour:AppCompatActivtiy(){
     Override fun onCreate(savedInstanceState: Bundle?){
      ..
      setSupportActionBar(appbar)
      ..
    }
}

Above code will set menu to the bottomAppbar.

activity_bottom_app_behaviour.xml

<androidx.coordinatorlayout.widget.CoordinatorLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <-- other components an views -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/appbar"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:backgroundTint="@color/colorAccent"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="5dp"
        app:fabCradleRoundedCornerRadius="15dp"
        app:fabCradleVerticalOffset="5dp"
        app:hideOnScroll="true"
        app:layout_scrollFlags="scroll|enterAlways"
        app:menu="@menu/bottom_appbar_menu_primary"
        app:navigationIcon="@drawable/ic_menu_24dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_local_florist_black_24dp"
        app:fabCustomSize="50dp"
        app:layout_anchor="@id/appbar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

bottom_appbar_menu_primary.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:android="http://schemas.android.com/apk/res/android">

   <item
       android:id="@+id/app_bar_search"
       android:icon="@drawable/ic_search_black_24dp"
       android:title="@string/action_search"
       app:showAsAction="ifRoom"/>

</menu>

4. BackDrop Menu

Backdrop is one of the newest features in Material design which is the furthest back surface of an app, appearing behind all other content and components. Backdrop Menu is composed of two surfaces: a back layer (which displays actions and filters) and a front layer (which displays content). This can be used to display interactive information and actions which is navigation or content filters.

First of all Add Menu:

layout_backdrop.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

   <com.google.android.material.button.MaterialButton
       style="@style/Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/nainital" />

   <com.google.android.material.button.MaterialButton
       style="@style/Button"
       android:textColor="@android:color/white"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/Manali" />

   <com.google.android.material.button.MaterialButton
       style="@style/Button"
       android:textColor="@android:color/white"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/camel_safari_jaisalmer" />

   <View
       android:layout_width="56dp"
       android:layout_height="1dp"
       android:layout_margin="16dp"
       android:background="?android:attr/textColorPrimary" />

   <com.google.android.material.button.MaterialButton
       style="@style/Button"
       android:textColor="@android:color/white"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/kaziranga" />

</merge>

Add this layout file to the layout file of activity

activity_backdrop.xml

<LinearLayout
   style="@style/Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical">

   <include layout="@layout/layout_backdrop" />
</LinearLayout>

Backdrop style will look like:

styles.xml

<style name="Backdrop" parent="">
   <item name="android:background">?attr/colorAccent</item>
</style>

Below section that is responsible for setting up the toolbar.

BackDropActivity.kt

this.setSupportActionBar(app_bar)

Add Motion
The type of motion used must should be eye catching and small because it is applied to repeated actions. The motion is the shape in front moving straight down.We can set this click listener with AccelerateDecelerateInterpolator() and icons for the open and close menu in BackDropActivity.kt onCreate() to provide Tweak motion of front layer.

BackDropActivity.xml

this.setSupportActionBar(app_bar)
app_bar.setNavigationOnClickListener(NavigationIconClickListener(
       this,
       recycler_view,
       AccelerateDecelerateInterpolator(),
       ContextCompat.getDrawable(this, R.drawable.branded_menu),
       ContextCompat.getDrawable(this, R.drawable.close_menu)))

5. Material Chips

Chip is nothing but a rounded button that consist of a label, an optional chip icon and optional close button. To represent it as a semantic entity text field can replace text with chipDrawable.

<com.google.android.material.chip.Chip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipText="@string/hello_world"/>

There are some updated material style which are updated to the latest Material theme that is as below
-> Entry chips :

This style contains optional chip icon, optional close icon and optionally checkable.

style="@style/Widget.MaterialComponents.Chip.Filter"

->Filter chips

This contains an optional chip icon, an optional close icon but difference is always checkable.

style="@style/Widget.MaterialComponents.Chip.Filter"

->Choice chips

This chip is to help users to make a single selection from finite set of options that contains optional chip icon and always checkable.

style="@style/Widget.MaterialComponents.Chip.Choice"

->Action chips

style="@style/Widget.MaterialComponents.Chip.Action"

Chip with updated material theme will give you updated Material Styles to your chips by default.