Quick Start Guide > Your First App > Creating your First SciChart Android App - Part 2
Creating your First SciChart Android App - Part 2

Adding the SciChartSurface to the Designer Window

When the previous step is finished, you should be able to access and use classes from SciChart libraries in the application.

Android Studio has the inbuilt designer which comes in handy when need to create not very complex layouts from scratch. To open the designer, double-click on the activity layout file located in the “res” and “layout” folders accessible from the project’s structure tab to the left. An activity with a simple layout, having the “Hello World!” text in it, should appear:

If the designer reports any rendering errors, you could try switching to another API version using the dropdown list from the menu:

At the left side of the designer window the Palette can be found, where all available UI elements can be picked and dragged to be placed at the desired position on the phone view at the center. SciChartSurface can be found at the very bottom of the Palette. To find it, scroll the list to the bottom and choose the “CustomView” item under the Custom section. The list with all the custom UI elements will appear. You can look through it or use the Android Studio search to find the SciChartSurface item:

Now Android Studio allows you to place the SciChartSurface at the desired location. In this tutorial, we placed it at the center, stretched to occupy all available space:



After that, you can see SciChartSurface appearing in the Component Tree in the top right corner of the designer. The Component Tree can be used to manage the added UI elements and change their properties, which appear in the Properties tab below:

Lets look for the property called “id” and change it to give a name to the SciChartSurface. You will be able to refer to this particular SciChartSurface by its ID in other parts of the application’s code. Clicking on the “id” row, it enters the edit mode and property’s value can be changed now. In this example application, we are going to refer to it as “chartView”:


You can notice now that the initial “Hello World!” textView is hidden beneath the SciChartSurface. In this tutorial, we will simply remove it from the UI. To do this, select the textView in the Component Tree and press the “Delete” key.

The SciChartSurface in the XML Text Editor Window

Although Android Studio opens xml layout files in the designer by default, it is possible to edit layout manually in the xml text view. To switch to the text mode, choose the “Text” tab at the bottom of the design view:

In the text mode, you can see the Component Tree laid out in the xml markup. Every UI element is represented here as an xml node with properties set as xml attributes on it. So far the SciChartSurface is the only child of the topmost RelativeLayout container: