Update UI and refactor welcome layout

View mode: View your layout in either code mode (XML editor), Design mode (design view and Blueprint view), or Split mode icon (mix between code and design view)

Palette: Contains various views and view groups that you can drag into your layout.

Design editor: Edit your layout in Design view, Blueprint view, or both.

Component Tree: Shows the hierarchy of components in your layout. It is sometimes useful to select a given widget

Constraint widget : Helps to place an item in relation to those around it

Attributes: Controls for the selected widget’s attributes.

Layout Toolbar: Click these buttons to configure your layout appearance in the editor and change layout attributes as target phone, orientation, light, locale…​

Widget Toolbar: Click these buttons to align your view. Button with red cross is useful to clear all widget constraints

Select it and delete it with Suppr key

We will add an image. Copy this xml file ic_logo.xml in your directory _res > drawable. This file is a vector drawable image. Directory drawable contains all your images. Several formats are available (png, jpg…​) but the most optimized is a Vector drawable

In Common Palette on the left of the screen click on ImageView and drag into your layout. A window is opened to select an image. You will choose the imported image ic_logo.xml.

Click on OK button to import image in your layout

We will use the blueprint view to add constraint to this image, to place it on the top of the screen and define a height. See video below for more detail

We will add a new readonly text below image to introduce our app. In common palette select a Textview widget and drag into your layout.

In blueprint view you can add constraints to this textview

In text palette select a Plain Text widget (editable text view) and drag into your layout below your welcome message. This widget should have these properties

In common palette select a Button widget and drag into your layout below your welcome message. This button should have these properties

Click on Run button to test your app (see chapter Run your app)

Click on this button to see different problems (a window is opened on the bottom of your screen).

You can double click on an item to see the problem and have an explaination. Android studio display also a Fix button to help you to resolve problem

You added a Text Field and a text inside. As your application can be used by different people who speak different languages, you should always use text internalization mechanisms provided by Android.

In the file app > java > com.faircorp > MainActivity, add the following openWindow() method stub:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    /** Called when the user taps the button */
    fun openWindow(view: View) {
        // Extract value filled in editext identified with txt_window_name id
        val windowName = findViewById<EditText>(R.id.txt_window_name).text.toString()
        // Display a message
        Toast.makeText(this, "You choose $windowName", Toast.LENGTH_LONG).show()
    }
}

Return to the activity_main.xml file and select the button in the Layout Editor. In Attributes window, locate onClick property and select openLight [MainActivity] from its drop-down list.

You can now relaunch your app,

Go on Material color tool to defined your own app color combination. You define your prmiary color and the tool is able to compute complementary color

Choose different colors

Run your app to see the new app rendering