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{ .. implementation ‘com.android.support:design:28.0.0-alpha1' implementation ‘androidx.appcompat:appcompat:1.0.0-beta01’ .. } - 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.
Read: Fastlane : An automated app deployment tool – Part 1
Conclusion
So Devs!, These are few components of material design using that you can create attractive and beautiful digital experience. You must try your hands on updated Material Components.
To know more about Material design introduced in Google I/O 2018 refer this.
You may also like
Integrating AI in Your eCommerce App for Personalization
In the ever-evolving digital landscape with the changing preferences, of modern consumers there come...
Gamification in Healthcare: Benefits, Trends & Examples
Gamification in healthcare apps reveals a new possibility in transforming the patient's journey.
Gamification in Education: The Winning Trio of AR, VR & AI
Relying on conventional techniques for modern-day challenges...
