In this release, Crosslight for Android releases full support for Material Design and a brand new v7 assembly with powerful Fragment classes.
New v7 Assembly
The new Intersoft.Crosslight.Android.v7 assembly is a whole new library, built from the ground-up to fully accommodate Material Design into Crosslight. The v7 identifier follows the same compatibility level with the Android.Support.v7 library, which will work on Android API Level 15 and upwards, albeit with limitations.
Several new dependencies are now required in the Material project, even though your application might not actively use them. The new dependencies are as follow:
Material User Experience
Developers can now take advantage of full Material Design experience in Crosslight apps, such as vibrant material colors, Floating Action Buttons (FABs), Material Toolbar, Collapsing Toolbar, Shared Element Transitions, Parallax Scrolling, Material Navigation Drawer, all conforming to Google's Material Design guidelines.
Vibrant Material Colors
With Material Design, Google also introduced new color palettes that developers and designers can adopt which uses striking bold, vibrant colors that made Material Design apps easily distinguishable. Crosslight Android Material library introduces a new theme that incorporates these vibrant colors, enabling you to leverage the Material colors effortlessly. It also lets you easily customize the color values from a centralized definition.
By default, Material projects generated by Crosslight Project Wizard automatically apply the new theme introduced in the Material library.
- Primary, Action Menu Background, Progress Dialog Background: 500.
- Action Menu Text Color, Button Text Color, Progress Text Color: white or black, depending on primary color.
- Primary Dark: 700.
- Accent, Navigation Bar, Progress Text Color Inverse, Progress Bar Color Inverse: 400
- Selection Background: 200
- Navigation Drawer Header: 400 (start), 500 (center), 800 (end)
- Progress Bar Color: white or black, depending on accent color.
If you wish to override these colors, simply open the colors.xml file inside the Resources/values folder.
Floating Action Button
Material Design is dominated by rich UI components that are used throughout the app. Let's say you have a screen with list of notes. What will be the most suitable primary action that users will definitely use most often? It will be the Add Note action, correct? How to present the primary action in a visually-appealing manner that still adheres to Material Design?
A single button with icon with accent color filling the entire background. To make the experience complete, when the button is pressed, it needs to be elevated with increased drop shadow and provide a ripple effect to touch feedback. Thus, the Floating Action Button, or simply known as FAB is introduced. With Crosslight Android Material, using FAB is very simple. You can easily define and customize FABs with simply property sets from the Fragment. Learn more.
In classic Android development, ActionBars were widely used to provide navigation and actions that are contextual to the displayed screen. However, ActionBars were rigid and difficult to customize. When Material Design is introduced, almost all elements of the screen need to be animated. The existing ActionBar framework needs to be replaced with a more dynamic view that can play nicely with the transition framework used for Material Design. Therefore, a new Material Toolbar was introduced in favor to ActionBar.
With Crosslight Android Material, transitioning from ActionBar to Material Toolbar is seamless and automatic. It manages the Toolbar as navigation is performed between fragments. You can easily define the animations, interactivity, or even the menu items for the Toolbar with just simple API calls. No tedious code or AXML configuration needed.
As an integral part of the Material Design, Collapsing Toolbars allow for more content to shine when user consumes content on mobile devices. Crosslight Android Material offers several predefined Toolbar interactions that will delight Android developers, moreover that the behavior can easily be enabled with just simple property sets.
Beyond the traditional Collapsing Toolbar experience, Crosslight Android Material includes innovative Toolbar interactions that allow custom header, so you can present any content while preserving the smooth animation while scrolling. Learn more.
Back in the days before Lollipop, Android was famously known for its inferior user interface and animations compared to iOS. But all that has changed with Lollipop and Material Design. For example, navigating between screens now feels seamless and very interactive, thanks to the shared transitions. UI elements from the previous screen can be persisted to the next screen and have it beautifully animated from one state or position to another.
Defining these transitions in Crosslight Android Material is as simple as defining the enter and exit transitons from one Fragment to another, as follows. Learn more.
The comprehensive Material Design specs defined by Google even covers user interactions such as scrolling. The scrolling techniques presented in the document highlights many of the interesting behaviors Material Design has to offer. To achieve this effect in Crosslight Android Material, all you have to do is just override the Initialize method in the Fragment and specify the behavior settings as follows.
Material Navigation Drawer
The Navigation Drawer also receives a noticeable amount of changes in Material Design. Navigation Drawers are now in full view, taking all the space that spans even above the Toolbar, achieving a full-height navigation drawer. Google seems to be paying more attention to the navigation drawer by introducing a new UI component called NavigationView, which allows developers to simply use the drawer and define the menus and groups via XML definition in the Resource/menu folders. Crosslight Android Material features a new DrawerActivity that resembles all features and experiences found in the Material Navigation Drawer.
Consistent Material Design
In Material Design, UI elements feel roomy and takes up more space than ever. The extra padding spaces allows for users to easily interact with UI elements without requiring too much precision. Material Design manages to achieve the right balance between user interface and app usability without sacrificing any user experiences. Crosslight Android Material is meticulously designed to closely follow the Google's Material design guidelines, preserving the true look and feel of Material Design, including margin, paddings, icon sizes, and layouts.
Simplified Programming Pattern
Crosslight Android Material also introduces a new, simplified programming pattern that will further speed up development process. In most cases, developers will only have to deal with Fragments instead of multiple Activities and Fragments. At runtime, Crosslight Android Material will automatically generates the hosting Activity, should the developer not provide one. However, if the use of a specific Activity is desired, then the defined Activity will be used. In addition, when projects are created using Crosslight Project Wizard, the resulting project now have a more modernized and logical project structure. You can now also use resource overrides to customize UI elements easily. Not only that, defining menu items inside Toolbar and performing various appearance customizations can now be done easily in Fragment level.
Modernized Project Structure
With the use of the new assembly, development patterns are now more simplified and organized than ever. Right after a Material project is created with the Crosslight Project Wizard, you'll see a new and refreshed project structure. Most of the unnecessary files are removed, Android class files are now logically grouped. Activity files inside the Activities folder, Fragment files inside the Fragments folders, infrastructural bootstrapper files inside the Infrastructure folder.
Launcher icons now use mipmap folders instead of the drawable folders. Quoting the Android developers blog: It’s best practice to place your app icons in
mipmap- folders (not the
drawable- folders) because they are used at resolutions different from the device’s current density. For example, an
xxxhdpi app icon can be used on the launcher for an
The new Crosslight Android Material is now loaded with customizations. Customizing different elements and colors for your Android app is now easier than ever. What you need to do is simply override existing keys and values in your application and your it will immediately take effect across your entire application. For a complete list of overridable resources, check out this document.
Automatic Back Button
In previous versions of Crosslight Android, you have to explicitly write a certain code to show the back button in the view. Well, all that has changed with the new Crosslight Android Material. The back button is now visible automatically when you perform push, modal or nested modal navigation. For more information, check out this document.
Add Toolbar Items with Simple API
In traditional Android development patterns, to specify menu items for your Toolbar, you need to create an .xml and put them under the Resources/menu folder, then specify the layout Id in the Fragment or Activity. That's very tedious. With Crosslight Android Material, all you need to do is simply override the Initialize method and add one line-of-code to add a toolbar item to the Toolbar.
For more information, see this document.
Smart Fragment Navigation
Crosslight Android Material takes the pain out of thinking which view context to use, Activity or Fragment. With the new library, Fragment is now the first-class view context with full navigation support. This means you can just create fragments for all your content views. Under the hood, Crosslight Android Material will seamlessly manage the Activity creation when needed.
This results in much simplified, rapid and maintainable Android development, where you can simply creating views by focusing solely on fragments. Note that Activity is needed only for the main container in the app, and in certain scenarios when different kind of container is desired.
Comprehensive Material Components
To achieve all the amazing Material Design described earlier, the existing Crosslight Android needs to be re-engineered from the ground-up to achieve full Material Design compliance, resulting to a powerful Crosslight Android Material library. Many tedious operations were streamlined into fragments such as smart TransitionDrawable orchestration needed for shared transitions, parallax effects, floating action buttons, data binding, navigation patterns, and so much more.
For example, to create a collapsing toolbar animation, simply define the behavior settings as shown below.
To learn more about the new Fragment, see Using Material Fragment.
Let's explore many of the new Fragment classes available in Crosslight Android Material.
At any point in mobile development, Android developers should have encountered some form of data listing using ListView. Great for various usage cases, ListView provides flexible approach to data listing. However, should it be incorrectly implemented, will cause a huge performance degradation in scrolling virtualization and performance. Also, the existing ListView architecture is tightly coupled with its container, allowing inflexible changes at runtime.
With RecyclerView, developers won't have to worry about performance, as RecyclerView enforces the view holder pattern, allowing fast reuse of its cells. In addition, by decoupling the list from its container, developers can now easily change the list layout at runtime by setting the LayoutManager. Furthermore, it works great with the new transition framework for Material Design. Therefore, Crosslight.Android now introduces a new, specialized class to support better use of RecyclerView in Crosslight apps: RecyclerViewFragment.
Let's take a look at some of the features the RecyclerViewFragment has to offer. To learn more about the Recycler View, check out Using Material Recycler View Fragment.
CardView is now becoming the industry standard for Android since Material Design. It is the perfect presentation technique to display items with rich visual display. Using CardViews, you can easily present items with icons and titles which allows for a richer user experience. Starting from API level 21, developers can use the existing native CardView layouts to be used with the RecyclerView, modernizing your Crosslight app in no time.
Swipe Gesture Support
In iOS 7, Apple introduced a new swipe gesture that can be done against a table cell, allowing users to perform quick actions to a single table cell. With the new RecyclerViewFragment, now you can achieve the same result with minimal amount of code.
Furthermore, it also supports automatic state synchronization during batch editing mode and multiple selection. The quick actions now shares the same pattern with iOS development, allowing the actions to be defined at the Core level. Building on mature Crosslight Foundation, it comes with comprehensive data binding support allowing you to reuse the same UI logic and action commands in ViewModel. Learn more.
Shared Transition Support
In addition to shared transition to item detail, Crosslight Android Material also also integrates nicely to Crosslight Form Builder, making the transition to the editor form seamless and natural. To enable this feature, you only need to define the shared element and SharedImageIndex in the source Fragment and the target Fragment. Learn more.
Multiple Selection Support
With the new RecyclerViewFragment, multiple selection action is also supported. Although the cells are being heavily reused, the RecyclerViewFragment is designed smart enough to remember the multiple selection state for each item when the user scrolls through the list of items. Upon entering multiple selection mode, the existing Toolbar is overlaid by another Toolbar that shows contextual actions. During multiple selection mode, the RecyclerViewFragment's swipe gesture is automatically disabled as swipe gesture makes lesser sense in editing mode. Learn more.
The new SearchableRecyclerViewFragment lets you implement search against your collection in RecyclerView with minimum effort. Here's an example video of the new search experience with the new Fragment. To learn more about using the new Fragment, check out Using Material Searchable Recycler View Fragment.
Crosslight Android Material comes with an advanced GridViewFragment designed with intuitive API. For example, you can specify the number of GridView columns, item offset, paddings and interaction mode. It also caters to common business scenarios such as displaying items in a horizontal manner, as shown in the following video. This is all made possible, thanks to the new GridViewFragment for Crosslight Android Material. To learn how to use the new GridViewFragment, see Using Material Grid View Fragment. To experience it yourself, check out the new Material Sample.
The new Material Design language introduced in Crosslight Android Material allows forms to shine on a new level. With clear design guidelines from Google, Material Design has also manifested in forms, effectively changing how Crosslight Form Builder should look and feel, therefore a new FormFragment is introduced.
In this release, a new MasterDetailFragment is introduced for Material Design. This component was originally introduced back in Crosslight 2, which allows users to perform master detail navigation on tablets. With the new MasterDetailFragment, you can easily replicate the same user experience with Material Design look and feel. To learn how to use the new component, check out Using Material Master Detail Fragment. If you wish to see it in action, run the Inventory Tracker Master Detail Sample.
Similar to the MasterDetailFragment, the new NestedFragment allows users to perform two-level master detail navigation on tablets. This is useful for business scenarios in which the list may contain a sublist of items. Originally introduced in Crosslight 2, the new NestedFragment is now refined and redesigned to match Material Design standards. See the documentation for more information on how to use the NestedFragment. To see it in action, check out the Inventory Master Detail Sample.
If you prefer a iPad style split view, then this is the right Fragment for you.
Introducing the new SplitFragment, this Fragment allows you to have a completely two separate Fragments where the Fragment have their own Toolbars each with its own navigation. You can learn how to use the SplitFragment here: Using Material Split Fragment. You can see this new feature in action in Master Detail Split template created using the new Crosslight Project Wizard.
The new SearchActivity is a special Activity class which handles search performed by child views, for example, view pagers, centralized in just one parent SearchActivity. The video above shows the expected experience when working with the SearchActivity. To experience this feature yourself, check out the revised View Projection Sample.
Material UI Components
The new and modern UI language introduced in Material Design also affects how Crosslight Android Material apps look and behave. Re-engineering was inevitable, and the end result is Android apps now looks even more stunning UI components that blends perfectly with Material Design. Check out the full showcase below.
Crosslight Maps are also compiled and tested against the new Xamarin support libraries, ensuring maximum compatibility with Lollipop. To learn how to take advantage of the new MapFragment here: Using Material Map Fragment.
Due to shared transitions framework introduced in Material Design, the existing ViewPagers also need to be revamped. Now ViewPagers support the use of multiple floating action buttons, for each tab, which are smoothly animated during tab transition from one tab to another. To learn more about the new ViewPagerFragment, check out Using Material View Pager Fragment.
Material Activity Presenter
In older versions of Crosslight, Activity Presenters's designs were heavily influenced by the Holo theme, which looks very dark and black. In Crosslight 5, the Activity Presenter's UI is upgraded to use enhanced ProgressDialog so that it displays presenters Android users are familiar with. It still retains three method overloads supported by Crosslight Activity Presenter in the ViewModel. It will be automatically applied when you migrate to Crosslight 5.
The older Holo-themed buttons just won't cut it to Material Design. As a result, buttons are also upgraded to use the two variants of Material Design, the Raised and Flat buttons. The buttons feels modern and second nature to Material Design. This will also be automatically applied when you migrate to Crosslight 5.
New UI Components
Crosslight 5 adds four new UI components to supercharge Android development experience: Gauge Chart, Circular Chart, Signature Pad and Calendar Month View 2.0.
Gauge and Circular Chart
Display and measure real time data in Crosslight applications with the new Gauge and Circular Chart for iOS and Android. For more information, see Visualizing Data With Gauge and Visualizing Data With Circular Gauge.
Capturing customer's signature is no longer a hassle with the new Signature Pad. Works independently or integrated in Crosslight Form Builder. For more information, see Android SignaturePad.
Crosslight Calendar Month View for Android is now refined for the Android platform to make it neater and work better on smaller-sized devices, such as phones. For more information, see Android Calendar View.
In this release, Crosslight for Android receives several great enhancements which will make mobile development even easier. Here are the list of enhancements:
New Rounded Button.
New Numeric Stepper Control.
- Fused Location Provider.
- Add binding support for ImageButton, ToggleButton, RoundedButton, NumericStepper.
- ListView Improvement in FormBuilder.
New Rounded Button
The new rounded button allows you display a round button with adjustable width and height. This allows you to improve the overall look of your app with nice, round-accent buttons. All you need to do is just specify the image source and the text you would like to use. Tip: it works great with the rounded image view. For more information, see Android Rounded Button.
New Numeric Stepper Control
The numeric stepper control is a versatile control that allows users to perform changes to a numeric value in small increments. You can specify the minimum value as well as the maximum value, and also how many increments you want the stepper to perform. It also works with Crosslight Form Builder, so you can integrate the numeric stepper into various kinds of forms, for example, guest reservation, flight reservation form, etc. Learn more.
Fused Location Provider
In the first iteration, Crosslight introduced a versatile, cross-platform mobile service, which includes a very useful location service, that allows developers to obtain the location of the device. In this release, the location service for Android is enhanced with the use of Fused Location Provider. The Fused Location Provider conforms to the native Android approach in getting the last known location of the device. It's all done automatically so you don't have to perform any code changes.
ListView Improvement for Form Builder
At times, when using the Form Builder, you may want to display a list of items. This is where the ListView control in Form Builder comes to play. It allows you to bind a list of items and display them inline with the form components in other sections as well.
This release also adds several improvements to the ListView performance in Form Builder. You now can:
- Perform runtime batch updates to the ListView. Previously, you need to supply an initial items binding to the ListView, and it cannot be changed at runtime.
- Bind items to the ListView from the Form ViewModel's Items property.
- Simply bind a list of string to the ListView.
- Improved rotation support.
Binding Support for More Controls
Crosslight 4 adds more MVVM binding support for these controls: ImageButton, ToggleButton, RoundedButton and NumericStepper.
Crosslight 3.0 release adds hundreds of significant new features to the Android platform which are strongly focused on user interface components and huge performance upgrades.
Major Android Improvements
- Drastic improvements for scrolling performance when using async image loaders + incremental loads + pull to refresh.
- Added bindings support for MapView and ImageButton.
- Presenters are now redisplayed even after rotation.
- Navigating using DrawerActivity to another Fragment will trigger ActionBar up button.
Binding Support for MapView
In this release, Crosslight adds full data binding support for MapView component which lets you easily work with annotations right from the ViewModel. Leveraging the MVVM pattern, the MapView binding lets you write your UI logic in a single codebase. This opens up a whole new level of possibility not available before. For instance, you can now load customer address information from a REST service asynchronously, then simply assign the results to a collection property in the ViewModel. The MapView binding does the rest and automatically updates the view's annotations instantaneously. It's that simple. And best of all, the exact code in the ViewModel also applies to the map view in other platforms.
The MapView binding includes a vast array of mapping features that you can program from the ViewModel such as getting routes information, changing selected route, and finding directions by driving or walk In addition, you can also customize the annotation marker with a custom image as well as easily adding navigation interaction to your mapping apps.
To learn how to provide annotation items in ViewModel and bind it to MapView, see Working with Map.
Carousel View lets you add image slider capability to your Crosslight Android app in just a few lines of code, thanks to the built-in MVVM and data binding support. More than just an image slider, Carousel View lets you show virtually any kind of items, including your own custom view. For instance, you can display the content of a mail message and lets users quickly swipe to navigate to the previous or next item.
More importantly, Carousel View is blazing fast, thanks to its high-performance virtualization architecture. It lets you bind any number of items without worrying any performance or resources constraints. In addition, there are numerous features that you can enable with simple property sets, such as enabling slide show and customizing the page indicator colors.
For more information, see Android Carousel View.
Message Input View
In building apps that provides chat-like functionalities, a common pattern is to provide a comprehensive input and editing component that works intuitively without steep learning curve. The Message Input View is a control that provides such functionality. Designed to be fully customizable, the message input view consists of a List View that takes up around 80% of the screen, with the remaining screen estate left for the input view. When the input view is in focus, the screen automatically adjusts itself to provide maximum functionality, reducing the List View size to almost half of its size, to provide more estate for the keyboard to appear and disappear, complying with Android standard interactions. It also supports graceful rotation handling.
You will find this component useful in many scenarios, such as providing a quick input for comment, reply, or add a new task. You can customize several options such as setting the watermark, adding a left button, changing the right button's caption, and much more.
For more information, see Android Message Input View.
Calendar Month View
Calendar Month View is perfect to show a simple month calendar with subtle event information. It supports basic month navigation and allows you to customize a number of appearance settings. You can easily bind a list of events to the calendar view, thanks to the built-in data binding and MVVM support.
For more information, see Android Calendar View.
New Radio Button Editor for Form Builder
With the new radio button editor, you can now easily provide a list of options for user to choose – all in a single screen. In addition, the radio button editor automatically deselect the other options and reflect the value in the model. This lets you quickly capture the chosen input value that bound one-to-one with the model without dealing with tedious workarounds.
To learn more, see Using Radio Button Editor in Form Builder.
New List View Editor for Form Builder
Form Builder is one of the most powerful features in Crosslight which allows you to build rich data form with simple metadata. Introducing the new List View editor, Crosslight 3 takes Form Builder to the next level by allowing you to present multiple list items in a single form. The List View also supports a number of common interactions such as single selection, multiple selection, and navigation. Best of all, it supports two-way collection binding which means the List View will be automatically sync'ed as the collection is modified in the ViewModel.
The List View editor supports a large number of potential line-of-business scenarios. For instance, in addition to general user information, you can now display list of available roles, branches, and other list – along with their selection state.
To learn more, see Using List View Editor in Form Builder.
Section Customization in List View
In addition to cell customization, Crosslight also adds support for section header and footer customization in a table view. All you have to do is to provide a custom AXML and specify it as a ListItemLayoutId, Crosslight takes care the rest – including calculating the height for you and doing the other low-level operations behind the scene.
This section aggregates the new features and enhancements included in the updates cycle of Crosslight 2 which spans from version 2.1 to 2.5.
Improved ImageLoader Performance 2.5
You have been enjoying the great async image loader since Crosslight 2.0 Update 4. In this release, we've improved the image loader even further. Now the loading process is done using the Android AsyncTask to enhance the smooth scrolling experience.
Improved Presenter Service 2.5
In the previous Crosslight for Android versions, Android presenters simply uses the basic implementation of dialogs. In this iteration, the presenter service lifecycle has been greatly improved using the DialogFragment, therefore state persistence and correct orientation upon rotation. The use of the DialogFragment also increases the reliability of the presenters. Now developers can rest assured that the presenters used now works painlessly and seamlessly across their Android applications.
New Pull-to-Refresh 2.5
The highly popular pull-to-refresh gesture has been around in the Android community for some time, and many people have been implementing this feature with many difficulties using third-party libraries. Now Google has addressed this issue by standardizing the pull-to-refresh experience across all its products, including Gmail, Google+, Google Now, etc. Google calls this experience as Swipe-to-Refresh. Around last April, Google has introduced a new SwipeRefreshLayout component that allows developers to easily implement feature across their Android applications. Crosslight for Android has been upgraded to support this new component by default, replacing the previous pull-to-refresh implementation for Android platform. This is all done automatically after applying the new Crosslight for Android library.
Introducing Form Fragment 2.5
Many of you have been using the Crosslight Form Builder feature in Android, which currently only supports form in the form of FormActivity, which takes up the whole screen. Say what if you would like to use the form in a Fragment? Introducing the FormFragment. The FormFragment is a version of the Form Builder which allows you to create Crosslight forms and use it in a Fragment. The rotation has been highly considered as well, with consistent bindings behavior throughout the FormFragment. Learn how to use the Form Fragment here.
Major Stability Improvements 2.3
In addition to new features, this release is strongly focused on stability improvements across all platforms and components. Specifically, this release marks an important milestone for the Android platform which includes major infrastructure revamp and re-engineering to achieve best performance and consistency. It has been further stress-tested and passed rigorous user experience testing.
In general, Crosslight for Android has been specifically improved in the following areas:
Migrated Android framework to use Xamarin.Android.Support.v4 assembly (previously Mono.Android.Support.v4) which provides better compatibility with Google services and other third party components.
This update requires you to change the assembly reference of the Android project from Mono.Android.Support.v4 library to Xamarin.Android.Support.v4 library. No code changes is required.
Applying the new library on Mac:
Go to /Library/Application Support/Intersoft Solutions/Crosslight 2/common/Xamarin/Android and copy the Xamarin.Android.Support.v4 library to your desired directory. Change the Android project assembly reference to the new assembly.
Applying the new library on Windows:
Go to /Program Files/Intersoft Solutions/Crosslight 2/common/Xamarin/Android and copy the Xamarin.Android.Support.v4 library to your desired directory. Change the Android project assembly reference to the new assembly.
When using this library, take note that the first build might take some time as the library will download the necessary components first to the folder.
Also, check out the Xamarin Components page for regular updates on the Xamarin.Android.Support.v4 library.
- Revamped life cycle and infrastructure for activity and fragments to support better ViewModel state persistence during nested navigation, layout change, and other scenarios.
- Elegant rotation support, ensuring view state is properly restored without performance degradation. For instance, the list view should maintain its scroll position, and selection should be keep highlighted.
- Improved performance with more efficient resources allocation in various Android components such as the tab fragments, view pager, form activity, nested master detail fragment, and more.
- Improved stability and reliability to the core mobile services such as the camera services, location services, social services and more.
Android DateTimePicker in FormBuilder 2.2
Android now includes a revamped DateTimePicker for Android form builder, this includes view suited for either portrait or landscape orientation.
To use the date time picker in the form builder, you can use the EditorAttribute Class and specify the editor type to DateTime as seen in the following code.