ANDROid studio

CS 2340

how to navigate

ANDROid studio

Team 45

Installing Android Studio

CS 2340

CLICK ME!

Creating a Project

Open Android Studio.

Click [New Project].

Select [Basic Views Activity], then Click [Next].

Give your application a name such as My First App.

Make sure the Language is set to Java.

This will...

Create a folder for your Android Studio project called MyFirstApp in a folder called AndroidStudioProjects.
Build your project (this may take a few moments). Android Studio uses Gradle as its build system. You can follow the build progress at the bottom of the Android Studio window.
Open the code editor showing your project.

Leave the defaults for the other fields. (The SDK and Build Configuration Language is not important for this tutorial)

Click [Finish].

CS 2340

Running your app on a device/emulator

On the top right, click on [Device Manager]

Click on [Create Virtual Device]

Click [Next] until [Finish] appears

Click [Run ‘app’] on the top to run

CS 2340

Adding interactive buttons

On the top left, click [App→ res → fragment_first.xml]

Click and pull out a button in [Palette→Common → Button]

Click on the button to see Attributes
Change attribute settings according to how you wish

text = text on button
fontFamily = font of button

CS 2340

Displaying Second Screen

When the button is pressed

Go to app→java→com.example.myfirstapp→FirstFragment

Type code in onViewCreated

Using the Layout Editor

Find and open the fragment_first.xml (Click project > app > res > layout > fragment_first.xml)
(Troubleshooting: Verify that you are using Android Studio version 3.6 or a newer release if the file fragment_first.xml is not visible.)

Looking to the left...

Locate the trio of icons resembling above the upper right corner of the Design editor. These icons (left to right) signify Code - code only, Split - code + design, and Design - design only views.

Examine the Component Tree in the fragment_first.xml file. (If it is not visible, change the mode to Design instead of Split or Code)

In the Component Tree, notice that the root of the view hierarchy is a ConstraintLayout view. Take note that this ConstraintLayout includes a TextView named textview_first and a Button labeled button_first.
In the XML code, observe that the root element is <androidx.constraintlayout.widget.ConstraintLayout>. Within this root element, there is a <TextView> element and a <Button> element.

Setting property values...

Examine the properties in the TextView element.
Click on the string in the text property, and you'll notice it refers to a string resource, hello_first_fragment. (android:text="@string/hello_first_fragment")
Find and open strings.xml (Click project > app > res > values > strings.xml)
Change the value of the string property to Hello World! (<string name="hello_first_fragment">Hello first fragment</string>)
Run the app to see the change you made in strings.xml. Your app now shows "Hello World!".

Setting

Color resources

CS2340

Code whatever colors you want

Similar to setting property values...

In the Project panel on the left, double-click on res > values > colors.xml to open the color resource file.

Austen Tech

Examine the navigation graph

Open nav_graph.xml (app > res > navigation > nav_graph.xml).

A screen similar to the Layout Editor in Design view appears. It shows the two fragments with some arrows between them. You can zoom with + and - buttons in the lower right, as you did with the Layout Editor. You can freely move the elements in the navigation editor.

For example, if the fragments appear with SecondFragment to the left, drag FirstFragment to the left of SecondFragment so they appear in the order you work with them.

Enable SafeArgs

Open Gradle Scripts > build.gradle (Project: “”)

find dependencies section in the buildscript section, and add:

Open Gradle Scripts > build.gradle (App: “”)

Add a line to enable SafeArgs below:

Click Sync Now

Create the argument for the navigation action

In the navigation graph, click on FirstFragment, and look at the Attributes panel to the right.

Click on SecondFragment, and look at the Attributes panel.

Click on the + in the Arguments section.

In the Add Argument dialog, enter myArg for the name and set the type to Integer, then click the Add button.

Sending the count to the second fragment

Open FirstFragment.java

(app > java > com.example.myfirstapp > FirstFragment)

Find the method onViewCreated()

Look for the section of code that sets up the click listener to go from the first fragment to the second.

Replace the code in that click listener with a line to find the count text view, textview_first.

int currentCount = Integer.parseInt(ShowCountTextView.getText().toString();

Thank you!

Feel free to approach us if you have any questions.