This is the first post in a multi-part blog series.
As you may already know, Universal Subscribers have access to our 100% native chart library for iOS and Android. When we released these native mobile UI controls last year, we created a small Stock Market app to demonstrate the speed and capabilities of DevExpress Chart for iOS and Android.
In this blog series, we will take this Mobile Stock Market App and port it to the Xamarin platform. In addition to the port, we’ll add new features to the app and describe some of the capabilities of our newest Xamarin.Forms UI controls. The goal of this first post is to detail our new app design and briefly describe the Xamarin UI components we will use to complete the project.
- DevExpress Xamarin Drawer Page
- DevExpress Xamarin Data Grid
- DevExpress Xamarin Chart Library
The Purpose of the Mobile Stock Market App
This app is designed to deliver relevant/timely stock market data to users. It will allow individuals to track their favorite stocks and to monitor hypothetical portfolio gains/losses. As you’ll soon see, the application will allow users to create a ‘virtual’ stock portfolio and test their investment acumen without incurring financial risk.
Data
We will use the IEX Cloud data provider to load financial data within the application. IEX provides historical and intraday stock prices. It also offers users access to important market statistics and trading news. IEX data is limited to the U.S. stock market.
App Navigation
Our Stock Market app will include several top-level views.
To help simplify app navigation, we will use the DevExpress Xamarin Drawer Page and allow users to select top-level modules within the Stock Market app.
Market Conditions Page
This page will provide a snapshot of current market conditions (most active stocks, biggest losers/gainers, etc). The list will be updated as conditions warrant. We will activate the Stock Detail Page when a user taps a data row. As you would expect, users can locate a specific stock by tapping the search icon.
We’ll use our Xamarin Data Grid View to display stock information. To help implement the design above, we’ll use custom templates and group data within the grid.
Watchlist News Page
This page will display news items for stocks added to the app’s watchlist. Users will be able to tap a row in the News tab to read the entry.
Like the Market Conditions page, the Watchlist News page will use our Xamarin Grid to present information to the end-user. We’ll display news items within a single custom template column.
Watchlist Page
This page will contain a list of stocks added to the watchlist. User will be able to track up to 20 symbols. The application will open the Stock Detail Page when a user taps a data row. User will be able to search for a specific stock by tapping the search icon in the toolbar.
As our design mockup illustrates, our Xamarin Grid will display detailed stock information for each item and allows users to delete watchlist records via swipe gestures. Once again, we’ll use custom templates to create the best possible row/column layout.
Search Page
The search page will allow users to add stock symbols to their watchlist. Symbols returned by the search query will be grouped (In My Watchlist | Add to Watchlist). Like other modules, the page will update stock quotes automatically and will open the Stock Detail Page when a user taps a row.
Once again, we’ll use our Xamarin Data Grid and a custom template column to replicate the design pictured above.
Stock Detail Page
As its name implies, this page will display detailed stock information – from historical price data to key statistics and news items. Historical prices will be aggregated against multiple time frames. Key stats will include next dividend date, price to earnings ratio, 52-week price range, etc. The third tab will display a list of news items for the stock symbol.
We’ll use the TabPage page to navigate between the individual views pictured above.
This page will display a simple area chart plotted by closing price and complex candlesticks that will display Open-High-Low closing price. The page will also display volume via a bar chart positioned below the price chart. Needless to say, our high-performance Xamarin Chart control supports all chart types we expect to use in this app.
Portfolio Page
The Portfolio page will allow users to measure their stock market acumen by entering hypothetical buy/sell orders. This page will allow users to track earnings/losses over time, track purchase history, and review the stocks that generated the highest profit/loss.
Users will be able to add a new symbol to a portfolio using the add icon in the toolbar.
The Chart within this page will help visualize historical and statistical data. The TabView will allow users to switch between chart types. Note that both the chart and stock list will be placed in a shared vertical scrolling container. This is an interesting engineering task we will solve using our Xamarin Data Grid.
What’s Next in this Blog Series
In our next post, we’ll discuss navigation-related matters and how we expect to deliver the best possible user experience with our Xamarin UI controls. Our third post will discuss lists and use of our Xamarin Data Grid. We’ll wrap up this series with a in-depth dive into charting and describe how to leverage our cross-platform Xamarin charting library.
Your Feedback Matters
If you’ve yet to try our Xamarin.Forms UI controls or would like to discuss your business needs, please comment below or write to us at info@devexpress.com.