In this codelab, you'll learn how khổng lồ build và run your first app app in the Java programming language. (If you're looking for the Kotlin version of this codelab, you can go here.)

What you must know already

This codelab is written for programmers & assumes that you know either the Java or Kotlin programming language. If you are an experienced programmer and adept at reading code, you will likely be able lớn follow this codelab, even if you don't have much experience with Java.

Bạn đang xem: Aide

What you"ll learn

How khổng lồ use Studio to build your app.How khổng lồ run your app on a device or in the emulator.How to add interactive buttons.How lớn display a second screen when a button is pressed.

Use Studio and Java khổng lồ write game apps

You write app apps in the Java programming language using an IDE called app Studio. Based on JetBrains' IntelliJ IDEA software, app Studio is an IDE designed specifically for apk development.

Note: This version of the codelab requires apk Studio 3.6 or higher.

To work through this codelab, you will need a computer that can run app Studio 3.6 or higher (or already has app Studio 3.6 or higher installed).

2. Install apk Studio

Note: This version of the codelab requires game Studio 3.6 or higher.

You can download Studio 3.6 from the apk Studio page. Studio provides a complete IDE, including an advanced code editor và app templates. It also contains tools for development, debugging, testing, & performance that make it faster và easier to develop apps. You can use app Studio to demo your apps with a large range of preconfigured emulators, or on your own thiết bị di động device. You can also build production apps and publish apps on the Google Play store.

Note: apk Studio is continually being improved. For the latest information on system requirements & installation instructions, see the Studio tải về page. Studio is available for computers running Windows or Linux, & for Macs running macOS. The OpenJDK (Java Development Kit) is bundled with app Studio.

The installation is similar for all platforms. Any differences are noted below.

Accept the default configurations for all steps, và ensure that all components are selected for installation.After the install is complete, the setup wizard downloads & installs additional components, including the SDK. Be patient, because this process might take some time, depending on your mạng internet speed.When the installation completes, app Studio starts, and you are ready to create your first project.

Troubleshooting: If you run into problems with your installation, see the app Studio release notes or Troubleshoot apk Studio.

3. Task: Create your first project

In this step, you will create a new game project for your first app. This simple tiện ích displays the string "Hello World" on the screen of an apk virtual or physical device.

Here's what the finished ứng dụng will look like:


What you"ll learn

How to create a project in app Studio.How khổng lồ create an emulated game device.How to run your app on the emulator.How khổng lồ run your app on your own physical device, if you have one.

Step 1: Create a new project

Open Studio.In the Welcome to game Studio dialog, click Start a new Studio project.
Select Basic Activity (not the default). Click Next.
Give your application a name such as My First App.Make sure the Language is set to lớn Java.
Leave the defaults for the other fields.Click Finish.

After these steps, game Studio:

Creates a folder for your apk Studio project called MyFirstApp. This is usually in a folder called onaga.vnStudioProjects below your home directory.Opens the code editor showing your project.

Step 2: Get your screen phối up

When your project first opens in Studio, there may be a lot of windows and panes open. Lớn make it easier to get lớn know apk Studio, here are some suggestions on how khổng lồ customize the layout.

If there's a Gradle window mở cửa on the right side, click on the minimize button () in the upper right corner lớn hide it.
Depending on the size of your screen, consider resizing the pane on the left showing the project folders to take up less space.

At this point, your screen should look a bit less cluttered, similar to the screenshot shown below.


Step 3: Explore the project structure & layout

The upper left of the apk Studio window should look similar to lớn the following diagram:


Based on you selecting the Basic Activity template for your project, app Studio has mix up a number of files for you. You can look at the hierarchy of the files for your app in multiple ways, one is in Project view. Project view shows your files & folders structured in a way that is convenient for working with an apk project. (This does not always match the tệp tin hierarchy! khổng lồ see the tệp tin hierarchy, choose the Project files view by clicking (3).)

Double-click the app (1) folder to expand the hierarchy of phầm mềm files. (See (1) in the screenshot.)If you click Project (2), you can hide or show the Project view. You might need to select View > Tool Windows to see this option.The current Project view selection (3) is Project >

In the Project > view you see three or four top-level folders below your app folder: manifests, java, java (generated) & res. You may not see java (generated) right away.

Expand the manifests folder.

This folder contains onaga.vnManifest.xml. This file describes all the components of your app & is read by the apk runtime system when your app is executed. 2. Expand the java folder. All your Java language files are organized here. The java thư mục contains three subfolders:

com.example.myfirstapp: This folder contains the Java source code files for your app.

com.example.myfirstapp (onaga.vnTest): This thư mục is where you would put your instrumented tests, which are tests that run on an apk device. It starts out with a skeleton kiểm tra file.

com.example.myfirstapp (test): This thư mục is where you would put your unit tests. Unit tests don't need an app device lớn run. It starts out with a skeleton unit chạy thử file. 3. Expand the res folder. This folder contains all the resources for your app, including images, layout files, strings, icons, & styling. It includes these subfolders:

drawable: All your app's images will be stored in this folder.

layout: This folder contains the UI layout files for your activities. Currently, your tiện ích has one activity that has a layout file called activity_main.xml. It also contains content_main.xml, fragment_first.xml, and fragment_second.xml.

menu: This folder contains XML files describing any menus in your app.

mipmap: This thư mục contains the launcher icons for your app.

navigation: This folder contains the navigation graph, which tells Studio how to lớn navigate between different parts of your application.

values: This folder contains resources, such as strings and colors, used in your app.

Step 4: Create a virtual device (emulator)

In this task, you will use the game Virtual Device (AVD) manager lớn create a virtual device (or emulator) that simulates the configuration for a particular type of game device.

The first step is lớn create a configuration that describes the virtual device.

In app Studio, select Tools > AVD Manager, or click the AVD Manager icon in the toolbar.
Click +Create Virtual Device. (If you have created a virtual device before, the window shows all of your existing devices và the +Create Virtual Device button is at the bottom.) The Select Hardware window shows a list of pre-configured hardware device definitions.Choose a device definition, such as Pixel 2, & click Next. (For this codelab, it really doesn't matter which device definition you pick).In the System Image dialog, from the Recommended tab, choose the latest release. (This does matter.)If a Download links is visible next to lớn a latest release, it is not installed yet, & you need to tải về it first. If necessary, click the links to start the download, and click Next when it's done. This may take a while depending on your connection speed.

Note: System images can take up a large amount of disk space, so just download what you need.

In the next dialog box, accept the defaults, and click Finish.

The AVD Manager now shows the virtual device you added.

If the Your Virtual Devices AVD Manager window is still open, go ahead and close it.

Xem thêm: Unit 4 Lớp 6 Skills 1 - Skills 1 Unit 4: My Neighbourhood

Step 5: Run your tiện ích on your new emulator

In apk Studio, select Run > Run ‘app' or click the Run icon in the toolbar. The icon will change when your phầm mềm is already running.

If you get a dialog box stating "Instant Run requires that the platform corresponding lớn your target device ( N...) is installed" go ahead and click Install & continue.

In Run > Select Device, under Available devices, select the virtual device that you just configured. This thực đơn also appears in the toolbar.


The emulator starts & boots just lượt thích a physical device. Depending on the speed of your computer, this may take a while. You can look in the small horizontal status bar at the very bottom of game Studio for messages to lớn see the progress.

Messages that might appear briefly in the status bar

Gradle build running


Waiting for target device to lớn come on line


Installing APK


Launching activity


Once your ứng dụng builds and the emulator is ready, game Studio uploads the phầm mềm to the emulator và runs it. You should see your app as shown in the following screenshot.


Note: It is a good practice to start the emulator at the beginning of your session. Don't close the emulator until you are done testing your app, so that you don't have to wait for the emulator to lớn boot again. Also, don't have more than one emulator running at once, khổng lồ reduce memory usage.

Step 6: Run your tiện ích on a device (if you have one)

What you need:

An game device such as a phone or tablet.A data cable lớn connect your app device lớn your computer via the USB port.

Run your tiện ích on a device

To let apk Studio communicate with your device, you must turn on USB Debugging on your apk device.

On 4.2 và higher, the options screen is hidden by default. Lớn show options & enable USB Debugging:

On your device, open Settings > About phone and tap Build number seven times.Return khổng lồ the previous screen (Settings). options appears at the bottom of the list. Tap options.Enable USB Debugging.

Now you can connect your device và run the phầm mềm from app Studio.

Connect your device to your development machine with a USB cable. On the device, you might need lớn agree to allow USB debugging from your development device.In app Studio, click Run in the toolbar at the đứng đầu of the window. (You might need to select View > Toolbar to lớn see this option.) The Select Deployment Target dialog opens with the list of available emulators & connected devices.Select your device, and click OK. Apk Studio installs the phầm mềm on your device & runs it.

Note: If your device is running an platform that isn't installed in Studio, you might see a message asking if you want to install the needed platform. Click Install và Continue, then click Finish when the process is complete.


If you're stuck, quit game Studio và restart it.

If Studio does not recognize your device, try the following:

Disconnect your device from your development machine and reconnect it.Restart apk Studio.

If your computer still does not find the device or declares it "unauthorized":

Disconnect the device.On the device, mở cửa Settings-> Options.Tap Revoke USB Debugging authorizations.Reconnect the device to your computer.When prompted, grant authorizations.

If you are still having trouble, check that you installed the appropriate USB driver for your device. See the Using Hardware Devices documentation.

Check the troubleshooting section in the Studio documentation.

Step 7: Explore the app template

When you created the project & selected Basic Activity, game Studio set up a number of files, folders, and also user interface elements for you, so you can start out with a working app và major components in place. This makes it easier khổng lồ build your application.

Looking at your phầm mềm on the emulator or your device, in addition to the Next button, notice the floating kích hoạt button with an email icon.

If you tap that button, you'll see it has been phối up to lớn briefly show a message at the bottom of the screen. This message space is called a snackbar, and it's one of several ways to notify users of your app with brief information.


At the top right of the screen, there's a menu with 3 vertical dots.

If you tap on that, you'll see that apk Studio has also created an options thực đơn with a Settings item. Choosing Settings doesn't bởi vì anything yet, but having it mix up for you makes it easier to địa chỉ cửa hàng user-configurable settings to lớn your app.

Later in this codelab, you'll look at the Next button and modify the way it looks và what it does.

4. Task: Explore the layout editor

Generally, each screen in your app app is associated with one or more fragments. The single screen displaying "Hello first fragment" is created by one fragment, called FirstFragment. This was generated for you when you created your new project. Each visible fragment in an apk app has a layout that defines the user interface for the fragment. Studio has a layout editor where you can create and define layouts.

Layouts are defined in XML. The layout editor lets you define & modify your layout either by coding XML or by using the interactive visual editor.

Every element in a layout is a view. In this task, you will explore some of the panels in the layout editor, and you will learn how khổng lồ change property of views.

What you"ll learn

How lớn use the layout editor.How to lớn set property values.How to add string resources.How to add color resources.

Step 1: xuất hiện the layout editor

Find and mở cửa the layout folder (app > res > layout) on the left side in the Project panel.
Double-click fragment_first.xml.

Troubleshooting: If you don't see the tệp tin fragment_first.xml, confirm you are running app Studio 3.6 or later, which is required for this codelab.

The panels lớn the right of the Project view comprise the Layout Editor. They may be arranged differently in your version of Studio, but the function is the same.


On the left is a Palette (1) of views you can showroom to your app.

Below that is a Component Tree (2) showing the views currently in this file, & how they are arranged in relation khổng lồ each other.

In the center is the Design editor (3), which shows a visual representation of what the contents of the file will look like when compiled into an app app. You can view the visual representation, the XML code, or both.

In the upper right corner of the kiến thiết editor, above Attributes (4), find the three icons that look lượt thích this:
These represent Code (code only), Split (code + design), & Design (design only) views.Try selecting the different modes. Depending on your screen size and work style, you may prefer switching between Code & Design, or staying in Split view. If your Component Tree disappears, hide and show the Palette.

Split view:


At the lower right of the thiết kế editor you see + & - buttons for zooming in & out. Use these buttons khổng lồ adjust the kích thước of what you see, or click the zoom-to-fit button so that both panels fit on your screen.


The Design layout on the left shows how your phầm mềm appears on the device. The Blueprint layout, shown on the right, is a schematic view of the layout.

Practice using the layout menu in the đứng top left of the thiết kế toolbar to lớn display the kiến thiết view, the blueprint view, và both views side by side.

Depending on the kích thước of your screen & your preference, you may wish to only show the Design view or the Blueprint view, instead of both.

Use the orientation icon to change the orientation of the layout. This allows you to kiểm tra how your layout will fit portrait và landscape modes.
Use the device menu lớn view the layout on different devices. (This is extremely useful for testing!)


On the right is the Attributes panel. You'll learn about that later.

Step 2: Explore & resize the Component Tree

In fragment_first.xml, look at the Component Tree. If it's not showing, switch the mode khổng lồ Design instead of Split or Code.


This panel shows the view hierarchy in your layout, that is, how the views are arranged in relation khổng lồ each other. 2. If necessary, resize the Component Tree so you can read at least part of the strings. 3. Click the Hide icon at the đứng top right of the Component Tree.


The Component Tree closes. 4. Bring back the Component Tree by clicking the vertical label Component Tree on the left.


Step 3: Explore view hierarchies

In the Component Tree, notice that the root of the view hierarchy is a ConstraintLayout view.

Every layout must have a root view that contains all the other views. The root view is always a view group, which is a view that contains other views. A ConstraintLayout is one example of a view group. 2. Notice that the ConstraintLayout contains a TextView, called textview_first and a Button, called button_first.

Xem thêm: Choi Game Trồng Hoa Trong Vườn 1, Choi Game Trong Hoa Trong Vuon 1 Danh Cho Ban Gai


If the code isn't showing, switch khổng lồ Code or Split view using the icons in the upper right corner.In the XML code, notice that the root element is . The root element contains a element và a element.

Step 4: Change property values

In the code editor, examine the properties in the TextView element.Click on the string in the text property, & you'll notice it refers lớn a string resource,"