1. Open Android Studio, if it's not already open.
2. If a project is already open in Android Studio, select File > New > New Project.

3. if a project is not already open, select + Start a new Android Studio project in the Welcome to Android Studio dialog

4.In the Create New Project dialog, in the Phone and Tablet tab, select the Empty Activity template. Click Next. 5. In the next Create New Project dialog, set the following parameters and click Finish.

Android Studio will take a moment to generate the project files.

6.Run your app. You will see the string "Hello World" on the blank screen.

In this task, you change the generated root ViewGroup to a LinearLayout. You also arrange the UI elements vertically. View groups

A ViewGroup is a view that can contain child views, which are other views and view groups. Views that make up a layout are organized as a hierarchy of views with a view group as the root.

In a LinearLayout view group, the UI elements are arranged either horizontally or vertically.

Change the root layout so that it uses a LinearLayout view group:

Select the Project > Android pane. In the app/res/layout folder, open the activity_main.xml file.
Select the Text tab and change the root view group from ConstraintLayout to LinearLayout.
Remove the TextView. In the LinearLayout element, add the android:orientation attribute and set it to vertical.

Before:

To see the Layout Editor, click the Design tab. The screenshot below shows the parts of the Layout Editor.

1. Design editor: Displays a visual representation of your screen layout in design view, blueprint view, or both. The design editor is the main part of the Layout Editor.

2. Toolbar: Provides buttons to configure your layout's appearance in the design editor, and to change some layout attributes. For example, to change the display of your layout in the design editor, use the Select Design Surface drop-down menu:

   • Use Design for a real-world preview of your layout.
   • Use Blueprint to see only outlines for each view.
   • Use Design + Blueprint to see both displays side by side.

Step 1: Add a TextView 1.Open the res/layout/activity_main.xml file, if it's not already open.

2.Switch to the Text tab and inspect the code. The code has a LinearLayout as its root view group. (View groups are views that contain other views.)) and inspect the code. The code has a LinearLayout as its root view group. (View groups are views that contain other views.)

The LinearLayout has the required attributes layout_height, layout_width, and orientation, which is vertical by default. 3. Switch to the Design tab to open the Layout Editor.

3. Drag a text view from the Palette pane onto the design editor.

Create a string resource In the Component Tree, next to the TextView, you will notice a warning icon To see the warning text, click the icon or point to it, as shown in the screenshot below.

In the Component Tree, next to the TextView, you will notice a warning icon To see the warning text, click the icon or point to it, as shown in the screenshot below.

1.In the Attributes pane, click the three dots next to the text attribute that you set to your name. The resource editor opens.

2.In the Resources dialog, select Add new resource > New string Value. 3.In the New String Value Resource dialog, set the Resource name field to name. Set the Resource value field to your own name. Click OK. Notice that the warning is gone.

4.Open the res/values/strings.xml file and look for the newly created string resource called name.

<string name="name">Aleks Haecky</string>

You just added a resource using the resource editor. You can also extract resources in the XML code editor to create new resources: 1.In the activity_main.xml file, switch to the Text tab. 2.On the textSize line, click on the number (20sp) and type Alt+Enter (Option+Enter on a Mac). Select Extract dimension resource from the popup menu. 3.In the Extract Resource dialog, enter text_size in the Resource name field. Click OK.

4.Open the res/values/dimens.xml file to see the following generated code: <dimen name="text_size">20sp</dimen>

5.Open MainActivity.kt file, and look for the following code at the end of the onCreate() function:

setContentView(R.layout.activity_main)

6. The setContentView() function connects the layout file with the Activity. The specified layout resource file is R.layout.activity_main:

   R is a reference to the resource. It is an auto-generated class with definitions for all the resources in your app. layout.activity_main indicates that the resource is a layout named activity_main.

   Run your app. A TextView with your name is displayed.

An ImageView is a view for displaying image resources. For example, an ImageView can display Bitmap resources such as PNG, JPG, GIF, or WebP files, or it can display a Drawable resource such as a vector drawing.

There are image resources that come with Android, such as sample icons, avatars, and backgrounds. You will add one of these resources to your app.

1.Display the layout file In the Design tab, then drag an ImageView from the Palette pane to below name_text in the Component Tree. The Resources dialog opens.
2.Select Drawable if it's not already selected.
3.Expand android, scroll, and select btn_star_big_on. It's the yellow star ed9e7408639f572a.png.
4. Click OK.

The star image is added to the layout below your name. Because you have a vertical LinearLayout, views you add are vertically aligned.

5.Switch to the Text tab and look at the generated ImageView code. The width is set to match_parent, so the view will be as wide as its parent element. The height is set to wrap_content, so the view will be as tall as its content. The ImageView references the btn_star_big_on drawable.

<ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="wrap_content" app:srcCompat="@android:drawable/btn_star_big_on" />

6.To rename the id of the ImageView, right-click on "@+id/imageView" and select Refactor > Rename.
7.In the Rename dialog, set the id to @+id/star_image. Click Refactor.

8.In the Design tab, in the Component Tree, click the warning icon ffb7c8bfebfde1ca.png next to star_image. The warning is for a missing contentDescription, which screen readers use to describe images to the user.
9.In the Attributes pane, click the three dots ... next to the contentDescription attribute. The Resources dialog opens.
10.In the Resources dialog, select Add new resource > New string Value. Set the Resource name field to yellow_star, and set the Resource value field to Yellow star. Click OK.
11.Use the Attributes pane to add a top margin of 16dp (which is @dimen/layout_margin) to the yellow_star**,** to separate the star image from the name.
12.Run your app. Your name and the star image are displayed in your app's UI.