Table of Content
Create an Android Project for Phone and Tablet using Empty Activity template
Change app name, app icon, and app theme
Change attributes of a widget
Add a new widget and change its attributes
Add Click event and event listener to a button
Creating an Android Project for Phone and Tablet using Empty Activity template
Run Android Studio. Click New Project button.
Select Phone and Tablet tab then select Empty Activity. Click Next.
Enter name and language (keep default values for other details):
4. Click Finish. The project is created and loaded in Android Studio as follows
5. Please wait until you see a message like "Gradle sync finished in 4m 53s 311ms" or "daemon started successfully" at the bottom, this means the project is ready to run. It takes a while for Gradle to build and index the project.
6. On the menu bar, select an emulator then click the green triangle 4button to run the project. You will see the app in the emulator as follows.
Change App Name
7. The current app name is Mobile Tech App. To change this app name, open AndroidManifest.xml file (located in app/manifests/ folder).
8. Change Mobile Tech App to Week 2 App as follows
10. You can change the title at runtime (when the app is running) as follows. Open MainActivity.java and add the line setTitle("Mobile Tech App"); as follows
11. Run the project. The title is now Mobile Tech App. Note: the text (Week 2 App) defined in AndroidManifest.xml is the app name, and the text (Mobile Tech App) appeared on top of this main activity (main window) is the activity title. They are not always the same.
Change App Icon
12. Stop running the project. On the emulator, swipe up to see the list of installed apps in this phone. You can find this app with the green android icon (the app name is still Week 2 App)
In the next steps, you will create a new icon with your own image file, then use it as the app icon.
14. Right click on the mipmap folder, select New then Image Asset as follows.
Change Colours and App Theme
In the next steps, you will change the colours in this app from purple to blue as seen below. The colours are defined in the app/res/values/colors.xml file and how these colours are applied to the app are defined in the app/res/values/themes.xml file.
18. Open colors.xml and add the xml code for two colours blue and navy as follows.
20. Run the project and verify the colours on the main activity.
Change attributes of a widget (UI element)
You will change some attributes of the existing TextView widget in the main activity layout.
21. Open activity_main.xml (this file is in the app/res/layout/ folder).
The current layout is Constraint Layout (you will use other layouts later).
23. You change the text attribute of the current TextView from Hello World! to Mobile Tech and make the text bigger with the line android:textSize="32sp" as seen below
25. Change the constraint values for the TextView widget as seen in the following screenshot.
26. Run your project to see the main activity on the emulator.
27. To change the view from the current portrait mode to landscape mode, swipe down from the top to see options, tap Auto rotate to turn it on.
Add a new widget and change its attributes
In the next steps, you will add a new widget that is a Plain Text (EditText) and make some changes on the text Mobile Technologies when the app is running. These changes will be done in Java so you need to give the TextView widget an id and use this id to modify the TextView widget at runtime.
30. Add a Plain Text (EditText) widget to the middle of the main activity as follows (drag the EditText around until you see a vertical line in the middle then drop it).
31. Change its constraints and other attributes (textSize, input type, id and hint) as seen below (click on the Plain Text to see its attributes).
32. Add a Button widget to the Layout Editor and make constraints as follows. Change id and text attributes of the Button widget as seen below (click on the Plain Text to see its attribute
33. Run the app to see the design on the emulator in both portrait and landscape modes. It shows that you need to redesign the UI in landscape mode.
34. To redesign the UI in landscape mode, use Windows Explorer to open the res folder as seen below. Select the layout folder then use Ctrl+c and Ctrl+v to make a copy of this folder and rename it to layout-land (no white space included in this name).
35. Now back to Android Studio, expand activity_main in the layout folder then double click the activity_main.xml (land) to open it. Click on the TextView widget then change its top constraint from 160dp to 32dp (you can change more attributes). Run the project.
Add click event and event listener to the OK button
In the next steps you will implement the project for the following task: the user enters a message to the edit text then clicks the OK button. The current text Mobile Technologies will be replaced with the entered message.
36. Open MainActivity.java, add the following displayMessage method (below the onCreate method) to implement the Click event listener.
public void displayMessage(View view) {
TextView textView = findViewById(R.id.textViewOutput);
EditText editText = findViewById(R.id.editTextInput);
textView.setText(editText.getText());
}
The first line TextView textView = findViewById(R.id.textViewOutput); is to find the TextView widget by its id then assign all its attribute values to the textView object. The second line is doing a similar task for the EditText widget. The third line textView.setText(editText.getText()); is to get text from the editText object using the getText method and assigns the text to the textView object using the setText method.
38. This is done at design time. There is another option to attach the click event listener to the button when the app is running (regarded as at runtime). Run the app. The click event listener method displayMessage gets text from inputText then sets it to textViewOutput. Now you can test it (enter a message then tap the OK button, the current Mobile Technologies text will be replaced with the input message).
40. To comment out a line of code, click on that line then press Ctrl+/. Press Ctrl+/ again to uncomment that line.