Differences
This shows you the differences between two versions of the page.
|
mdad:laboratoare:02 [2020/10/07 13:55] 127.0.0.1 external edit |
mdad:laboratoare:02 [2020/11/04 21:21] (current) ioana_maria.culic |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Laboratorul 02. ====== | + | ====== Lab 2 - Android Studio ====== |
| - | **LinearLayout**\\ | + | ==== Objectives ==== |
| - | LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the __android:orientation__ attribute.\\ | + | * Install and use the Android Studio IDE. |
| - | LinearLayout has one goal in life: lay out children in a single row or column (depending on if its android:orientation is horizontal or vertical).\\ | + | * Create a simple ''Hello World'' Android project. |
| - | Another Layouts: RelativeLayout, FrameLayout, GridLayout, CoordinatorLayout etc\\ | + | ==== Install Android Studio ==== |
| - | \\ | + | Android Studio provides a complex integrated development environment (IDE) including an advanced code editor and a set of application templates. In addition, it contains tools for development, debugging, testing, and performance evaluations, which enable a faster and easier application development process. You can test your apps with a large range of pre-configured emulators, or on your own mobile device, build production apps, and publish them on the Google Play store. |
| - | {{:mdad:laboratoare:linearlayout_vs_relativelayout.png?600|}} | + | |
| - | \\ | + | |
| - | \\ | + | |
| - | **Fill_parent**(renamed **MATCH_PARENT** in API Level 8 and higher) vs **Wrap_content** \\ | + | |
| - | - Setting the layout of a widget to __fill_parent__ will force it to expand to take up as much space as is available within the layout element it's been placed in. It's roughly equivalent of setting the dockstyle of a Windows Form Control to Fill.\\ | + | |
| - | - Setting a View's size to __wrap_content__ will force it to expand only far enough to contain the values (or child controls) it contains. For controls -- like text boxes (TextView) or images (ImageView) -- this will wrap the text or image being shown.\\ | + | |
| - | \\ | + | |
| - | {{:mdad:laboratoare:vertical_vs_horizontal_linearlayout.png?700|}} | + | |
| - | \\ | + | |
| - | \\ | + | |
| - | **Difference Between OnClickListener vs OnClick:**\\ | + | |
| - | __OnClickListener__ is what waits for someone to actually click, __onclick__ determines what happens when someone clicks\\ | + | |
| - | An OnClickListener enable you to separate the action/behavior of the click event from the View that triggers the event. \\ | + | |
| - | Since OnClickListener is an interface, the class that implements it has flexibilities in determining the instance variables and methods that it needs in order to handle the event.\\ | + | |
| - | \\ | + | |
| - | Lately android added a xml attribute to views called android:onclick, that can be used to handle clicks directly in the view's activity without need to implement any interface.\\ | + | |
| - | The onClick with function binding in XML Layout is a binding between onClick and the function that it will call. The function have to have one argument (the View) in order for onClick to function. | + | |
| - | //example :// \\ | + | Android Studio is available for Windows, Linux, and MacOS. The newest OpenJDK (Java Development Kit) is bundled with Android Studio. |
| - | setOnClickListener Code Implementation:\\ | + | |
| - | Button btn = (Button) findViewById(R.id.mybutton); | + | |
| - | btn.setOnClickListener(new View.OnClickListener() { | + | |
| - | @Override | + | |
| - | public void onClick(View v) { | + | |
| - | myFancyMethod(v); | + | |
| - | } | + | |
| - | }); | + | |
| - | // some more code | + | |
| - | public void myFancyMethod(View v) { | + | |
| - | // does something very interesting | + | |
| - | } | + | |
| - | XML Implementation:\\ | + | To get up and running with Android Studio, first check the [[https://developer.android.com/studio/#Requirements|system requirements]] to ensure that your system meets them. The installation is similar for all platforms. Any differences are noted below. |
| - | <Button android:id="@+id/mybutton" | + | |
| - | android:layout_width="wrap_content" | + | |
| - | android:layout_height="wrap_content" | + | |
| - | android:text="Click me!" | + | |
| - | android:onClick="myFancyMethod" /> | + | |
| - | **LOGS** \\ | + | === Installation process === |
| - | System logs are the most important information that DDMS can provide. \\ | + | - Navigate to the [[https://developer.android.com/studio/|Android developers site]] and follow the instructions necessary to download and [[https://developer.android.com/studio/install|install Android Studio]]. |
| - | System logs describe all the actions performed by the device, the exceptions that occurred, and the information required for troubleshooting. The logs will appear in the panel named LogCat (do not confuse with Console). Each message in this list is accompanied by the following data (each one per column):\\ | + | - Accept the default configurations for all steps, and ensure that all components are selected for installation. |
| + | - After completing the install process, the Setup Wizard will download and install some additional components including the Android SDK. Be patient, this might take some time depending on your Internet speed, and some of the steps may seem redundant. | ||
| + | - When the download completes, Android Studio will start, and you are ready to create your first project. | ||
| + | === Installation videos === | ||
| + | Below are installation videos for different platforms: | ||
| + | * [[https://developer.android.com/studio/install#windows|Windows installation]] | ||
| + | * [[https://developer.android.com/studio/install#linux|Linux installation]] | ||
| + | * [[https://developer.android.com/studio/install#mac|Mac installation]] | ||
| + | ==== Create a Hello World app ==== | ||
| + | === Create the app project === | ||
| + | - Open Android Studio if it is not already opened. | ||
| + | - In the main **Welcome to Android Studio** window, click **Start a new Android Studio project**. | ||
| + | - In the **Create New Project** window, choose **Empty Activity** for the **Phone or Tablet** and click **Next**: {{:dapm:laboratoare:lab01_choose_empty_activity.png?400|400 }} | ||
| + | - In the **Configure your project** section, enter **Hello World** for the **Application Name**, leave the other settings to their default state{{:dapm:laboratoare:lab01_hello_world_name.png?400|400 }} | ||
| - | - Type of message\\ | + | - Click **Finish** |
| - | * **I** - Information - informative message\\ | + | |
| - | * **D** - Debug - useful debugging message\\ | + | |
| - | * **W** - Warning - warning message (exceptions that are not very important and do not have an important impact on the component appear as such messages)\\ | + | |
| - | * **E** - Error - error message (exceptions that break a component appear as such messages)\\ | + | |
| - | * **V** - Verbose - additional information displayed by the programs (generally on request, they are used to detect problems generally resulting from misconfiguration of programs)\\ | + | |
| - | - Time - Date and time at which the message was written\\ | + | Android Studio creates a folder for your projects, and builds the project with [[https://gradle.org/|Gradle]] (this may take a few moments). |
| - | - PID - The ID of the process that generated the message\\ | + | |
| - | - Tag - Label or category of message (useful for filters)\\ | + | |
| - | - Message - the actual message (text)\\ | + | |
| + | Tip: See the [[https://developer.android.com/studio/build/|Configure your build]] developer page for detailed information. | ||
| - | ====== Exercises : ====== | + | You may also see a "Tip of the day" message with keyboard shortcuts and other useful tips. Click Close to close the message. |
| - | + | ||
| - | **Ex 1** A) Make a new app. Transform the layout into a LinearLayout with __orientation vertical__. \\ | + | |
| - | B) Make two Buttons with __width match_parent__ and __height wrap_content__.\\ | + | |
| - | On click the first one must show messages using the __Toast__. \\ | + | |
| - | For the first button use the **android:onClick="push"** – with __push function__ \\ | + | If you completed all the previous steps correctly, you should see something like this: |
| - | For the second button use the **set on click listener.**\\ | + | {{:dapm:laboratoare:lab01_project_opened.png?500|500}} |
| + | ====Use a virtual device (emulator)==== | ||
| + | For the Hello World app will use the Android Virtual Device (AVD) manager to create a virtual device (also known as an emulator) that simulates the configuration for a particular type of Android device, and use that virtual device to run the app. Note that the Android Emulator has additional requirements beyond the basic system requirements for Android Studio. | ||
| - | Toast.makeText(MainActivity.this,"You pushed the button from on create", Toast.LENGTH_LONG).show(); | + | Using the AVD Manager, you define the hardware characteristics of a device, its API level, storage, skin and other properties and save it as a virtual device. With virtual devices, you can test apps on different device configurations (such as tablets and phones) with different API levels, without having to use physical devices. |
| - | Toast.makeText(this, "You pushed the button from push function", Toast.LENGTH_SHORT).show(); | + | ===Create an Android virtual device (AVD)=== |
| + | In order to run an emulator on your computer, you have to create a configuration that describes the virtual device. | ||
| - | **Ex 2** In onCreate function, write logs (Verbose, Debug, Info, Warning, Error). | + | - In Android Studio, select **Tools** > **AVD Manager** and a Virtual Devices screen will appear. If you've already created virtual devices, the screen will display them (as shown in the figure below); otherwise you will see a blank list.{{:dapm:laboratoare:lab01_avd_manager.png?400|400 }} |
| - | View them with Logcat (The Logcat window in Android Studio displays system messages, such as when a garbage collection occurs.\\ | + | - Click the **+Create Virtual Device** and wait for the **Select Hardware** window to show up. This will display a list of pre-configured hardware devices. For each device, the table provides a column for its diagonal display size (**Size**), screen resolution in pixels (**Resolution**), and pixel density (**Density**).{{:dapm:laboratoare:lab01_select_hardware.png?400|400 }} |
| - | It displays messages in real time and keeps a history so you can view older messages)\\ | + | - Choose a device such as **Nexus 5x** or **Pixel XL**, and click **Next**. The **System Image** screen will show up. |
| - | The **tag** of a system log message is a short string indicating the system component from which the message originates. | + | - Click the **Recommended** tab, if it is not already selected, and choose which version of the Android system to run on the virtual device (such as **Oreo**).{{:dapm:laboratoare:lab01_emulator_system_image.png?400|400 }} |
| - | Logcat message format : Log.d(tag, message) | + | - After choosing a system image, click **Next** and the **Android Virtual Device** (AVD) window will appear. You can also change the name of the AVD. Check your configuration and click **Finish**. |
| + | === Run the app on the virtual device === | ||
| + | Now we will run the Hello World app | ||
| + | - In Android Studio, choose **Run** > **Run app** or click the Run icon {{:dapm:laboratoare:run_app.png?15|15}} in the toolbar. | ||
| + | - The **Select Deployment Target** window, under **Available Virtual Devices**, select the virtual device, which you just created, and click **OK**{{:dapm:laboratoare:lab01_select_deployment_target.png?400|400 }} | ||
| - | **Ex 3** Do an activity overwritten by the following event features. Display a log message with the Event Tag in each of these features. The log message text must contain the name of the event.\\ | + | The emulator starts and boots just like a physical device. Depending on the speed of your computer, this may take a while. Your app will start building, and once the emulator is ready, Android Studio will upload the app to the emulator and run it. |
| - | For example, in onCreate() you can display a text message called onCreate (). | + | |
| - | •onCreate | + | You should see the Hello World app as shown in the following figure. |
| - | •onRestart | + | {{:dapm:laboratoare:lab01_app_running.png?200|200}} |
| - | •onStart | + | |
| - | •onResume | + | |
| - | •onPause | + | |
| - | •onStop | + | |
| - | •onDestroy | + | |
| - | **Ex 4** Write Logs in all the functions above and turn off the app. View them in Logcat | + | **Tip**: When testing on a virtual device, it is good practice to launch it at the very beginning of your session and don't close it until you are done testing your app, so that the deployment doesn't have to go through the device startup process again. To close the virtual device, click the **X** button at the top of the emulator, choose **Quit** from the menu, or press **Control-Q** in Windows or **Command-Q** in macOS. |
| + | |||
| + | ===Bonus=== | ||
| + | - Change the app so it displays your name instead of the Hello World message. | ||
| + | - Run the app on a physical device instead of the emulator. | ||
