Create New Project

In this tutorial, we will create an app that will showcase a few of the Adobe CC apps.

1. Open Android Studio and select File > New > Project.
2. In the New Project dialog box that appears, type Adobe CC Apps for the Application name.
3. Type example.com as the Company Domain and accept the other defaults and then click the Next button.
4. In the Target Android Devices dialog box that appears, select only the Phone and Tablet checkbox, its default Minimum SDK and then click the Next button.
5. In the Add an activity to Mobile dialog box that appears, select the Blank Activity option and then click the Next button.
6. In the Customize the activity dialog box that appears, type Adobe CC Apps in the Title text field, accept the other defaults and then click the Finish button.

As in many objects that are created, we will:

1. Create objects (with elements and styles)
2. Give objects names (with ids and resource strings)
3. Tell objects to do something (with Java code)
   Even within the Java code, you still do the same thing:
   1. Create objects
   2. Give objects names
   3. Tell objects to do something
      NOTE: While you can do most of these items in any combination, we will do it in the order above to start with the simple concepts (creating and naming objects) and then move to the more advanced concept (adding code).

Create Objects with Elements

In this version, we will simple drag and drop components that are needed for the app onto the screen. These components are XML elements that get compiled to their appropriate Java objects type when the app is built.

1. From the Android view under the layouts folder, open content_main.xml.
2. In Design view, right-click on the Hello World text and select Delete from the menu.
   
3. From the Palette panel, drag-and-drop four buttons and center them horizontally on the stage with a margin of about 40dp between them.
   NOTE: You can see the margin value and center guide line as you drag a button on the phone.
   
   
   
   
4. Click on each button and in the dialog box that appear, in the text field, type:
   1. DREAMWEAVER
   2. PHOTOSHOP
   3. ILLUSTRATOR
   4. INDESIGN
5. Click on each button and then in the Properties panel change the:
   1. layout_width to match parent
   2. layout_height to 60dp
   3. background to #000000 (black)
   4. textSize to 35sp
   5. textColor to #FFFFFF (white)
      NOTE: The unit of measurement when working in Android Studio for text is sp which stands for scalable independent pixels. While dp (device independent pixels) is used for most everything else, sp is best used for text so that it can scale correctly. The sp suffix is used so that the text can scale based on the user's customize size preference.

Give Objects Names with IDs

While you could have done this at the SAME time you create each component above, we wanted to do it in a systematic approach. However, in real production it would be best to create the components and give them names at the same time they are created.
IMPORTANT CONCEPT TO REMEMBER: It is important to name every component that will be used by Java code with an id. The id is used to store a reference of the element in a Java object as you will see later.

• Double-click on each button and give them the following id names. In the Update Usages? dialog box that appears, click the Yes button.
  TIP: You could select the Don't ask again during this session checkbox so you wont be prompted again.
  
  • dw_buttonID
  • ps_buttonID
  • ai_buttonID
  • id_buttonID
    
    
    NOTE: Notice the id names for each button have been changed in the Component Tree:
    
    
    
    IMPORTANT CONCEPT TO REMEMBER: You will see later that it is important to set every strings in your app that can be converted to another language to a string resource (e.g., @id/my_string_name) instead of a string literal (e.g., "my literal string in quotes"). But for now, we will keep it simply.

Tell Objects To Do Something with Code

Again, you could have written some code as you created the components like adding an onClick handler to the button. However, we wanted to do this step in a a logical manner.

1. In the Properties panel, scroll to the onClick property field and type buttonEventHandler or whatever name you want to give it for EACH of the button.
   TIP: After entering the first buttonEventHandler text, copy and paste it for the other three button onClick property.
   NOTE: Each button will use the SAME event handler in the Java Code that will be created in the next two step.
2. Click the Text tab at the bottom of the screen again.
3. Click inside the buttonEventHandler text for ANY one of the button, press ALT+ENTER and select Create onClick event handler from the list.
4. In the Choose Activity to Create the Method dialog box that appears, click the OK button.
   
   
   
   
5. CHECK POINT: Notice that the MainActivity.java opens and AUTOMATICALLY create the event handler stub for the onClick() method. You could have manually added the onClick attribute to the button in the *.xml file and manually type the loginEventHandler code in the *.java file (But why, when you can automate the process).
6. Add the following code between the curly braces:
   
   

   public void buttonEventHandler(View view) {
     Log.i("Info", "A button was clicked.");
   }

   
   
   CODE EXPLANATION:
   - The buttonEventHandler has two view arguments. The first defines the data type of View and the second is the name of the View (which is "viewed" with a lower case v).
   - The ".i" on the Log class refers to information. The first argument is a title that is used to filter the message and the second argument is the message itself.
   - IMPORTANT CONCEPT TO REMEMBER: While it is obvious that a button can be made clickable, it is important to remember that ANY viewable component can be made clickable (e.g., image, text, etc.).
   - It is best practice to create a static variable that will hold the String tag (e.g., private static final String TAG = "MainActiviry"). The word final means it is a constant and will not change.  Then, when you use it, you would type: Log.i(TAG, "String goes here...")
   TIP: If you did not create the String tag FIRST, you can still create it AFTER you write the Log statement (Log.i(TAG, "String goes here...");). Click inside of the word TAG and press ALT+ENTER and select Create constant field 'TAG' from list:
   
   
   
   Then, select a Target Class:
   
   
   
   Then, type the type name in quotes after the equal in the code that is automatically created:
   
   

   private static final String TAG = "MainActivity";
   // OR
   private static final String TAG = MainActivity.class.getSimpleName();

7. If necessary, press ALT+ENTER again to AUTOMATICALLY import the View class (e.g., import android.view.View;) at the top of the code.
   
   
8. Open the logcat panel at the bottom of the screen, right-click inside it and select Clear All from the menu, if neccessary to see the result easier.
9. CHECK POINT: To see if the code associated with the button is working correctly, switch to (or start) the AVD and then click the ANY button. You should see the message, "A button was clicked." in the logcat panel.
10. Delete or comment out the previous line of code and write the following highlighted code to the existing code block.
    
    

    public void buttonEventHandler(View view) {
      // Log.i("Info", "A button was clicked.");
      switch (view.getId()){
        case R.id.dw_buttonID:
            Log.i("Info", "The Dreamweaver button clicked.");
            break;
        case R.id.ps_buttonID:
            Log.i("Info", "The Photoshop button clicked.");
            break;
        case R.id.ai_buttonID:
            Log.i("Info", "The Illustrator button clicked.");
            break;
        case R.id.id_buttonID:
            Log.i("Info", "The InDesign button clicked.");
            break;
      }
    }

    
    
    CODE EXPLANATION:
    - The second view in the buttonEventHandler is called an event object. It "sneaks in" properties (e.g., name, id) of THE SPECIFIC object (button) that was clicked on. This way, you don't have to create a separate onClick event handler for EACH button. Then, a method like getID() can be used to ascertain the id of the specific button that was clicked.
    - The condition (view.getId()) in the switch statement is used to check for which button was clicked and the case statements are used to respond to the correct condition and perform the desire action (e.g., Log.i...).
11. CHECK POINT: To see if the code associated with the button is working correctly, switch to (or start) the AVD and then click the ANY button. You should see the message, "The <APP NAME> button was clicked." in the logcat panel. Where, APP NAME is the correct id name of the button that was clicked.

Create New Activities (Pages)

Now that we have all of the buttons created and working within the same activity (page), we will now create MULTIPLE activities (pages) that corresponds to each button. In the next version of this app, we will see how to create a SINGLE page that can be used for all buttons.

1. Select File > New > Activity > Blank Activity from the menu.
2. In the Customize the Activity dialog box that appears, type in DWActivity for the Activity Name.
   NOTE: Notice most of the other fields get updated automatically.
3. Click on the browser button () on the right of the Hierarchical Parent text field and click the OK button to select MainActivity, if it is not already selected.
   
   NOTE: This will add a BACK BUTTON and the Java code to this activity (page) so that a user can go back to the "home" page. The following line of code will be written which is responsible for showing the Back button on older Android devices:
   
   

   getSupportActionBar().setDisplayHomeAsUpEnabled(true);

   
   
4. Ensure the Package name is set to com.example.adobeccapps.
   
   
   
5. Click the Finish button to create the new activity.
   NOTE: This will create one file in the Java folder (DWActivity) and two files in the layout folder (activity_dw.xml and content_dw.xml). TheSE two xml files makes up the first page. If you open the activity_dw.xml file, you see that it has an include element to the content_dw.xml file (e.g., <include layout="@layout/content_dw" />).  It will also write another <activity> element in the manifest.xml file.
   
   

   <activity
       android:name=".DWActivity"
       android:label="@string/title_activity_dw"
       android:parentActivityName=".MainActivity"
       android:theme="@style/AppTheme.NoActionBar">
       <meta-data
           android:name="android.support.PARENT_ACTIVITY"
           android:value="com.example.adobeccapps.MainActivity" />
   </activity>

   
   
6. In the layout folder, double-click on the content_dw.xml file to open it.
7. Drag-and-drop a Large Text component to the top center of the screen and double click on it and give it a name of DREAMWEAVER and an id of dw_headingID.
8. In the Properties panel, change the textSize to 35sp and textStyle to Bold
9. Click on the Show Expert Property icon () and then scroll down to textAllCaps and deselect it.
10. Drag-and-drop a scrollView component below the Large Text component and in the Properties panel change the layout_width to match parent and the layout_height to 380dp.
11. Drag a textView component not to the screen but to the Component Tree and drop it on top of the scrollView component to nest it inside of the scrollView component.
12. Copy and paste a large amount of text inside the textView component in the Text View.
13. Repeat steps 1-11 but change any reference of Dreamweaver or DW to the other three apps:
    1. Photoshop and PS
    2. Illustrator and AI
    3. InDesign and ID
       

Navigate To New Activities (Pages)

Now that we have created new activities, we need to write the code to navigate to those activities.

1. Comment out or delete the four Log statements.
2. In the MainActivity.java file, add the following highlighted code in the first part of the "if" statement:
   
   

       public void buttonEventHandler(View view) {
           // Log.i("Info", "A button was clicked.");
           switch (view.getId()){
               case R.id.dw_buttonID:
                   // Log.i("Info", "The Dreamweaver button clicked.");
                   Intent dwPage = new Intent(MainActivity.this, DWActivity.class);
                   startActivity(dwPage);
                   break;
               case R.id.ps_buttonID:
                   // Log.i("Info", "The Photoshop button clicked.");
                   Intent psPage = new Intent(MainActivity.this, PSActivity.class);
                   startActivity(psPage);
                   break;
               case R.id.ai_buttonID:
                   // Log.i("Info", "The Illustrator button clicked.");
                   Intent aiPage = new Intent(MainActivity.this, AIActivity.class);
                   startActivity(aiPage);
                   break;
               case R.id.id_buttonID:
                   // Log.i("Info", "The InDesign button clicked.");
                   Intent idPage = new Intent(MainActivity.this, IDActivity.class);
                   startActivity(idPage);
                   break;
           }
       }
   }

   
   
   CODE EXPLANATION:
   - The startActivity method takes one argument which is the Intent (e.g., detailPage) itself. The intent is respondable for:
       > Triggering a Broadcast Receiver
       > Starts a Service via an activity or Broadcast Receiver
       > Navigate from activity to activity
       > Pass data from one activity to another and back
   - Instead of using MainActivity.this, use could have used getApplicationContext(). Doing so makes it easier to reference without having to target the parent element (See Commented code above).
   (e.g., Intent detailPage = new Intent(getApplicationContext(), DetailActivity.class);)
   - If you are not passing additional information to another activity as we will do i the next step, instead of using two lines of code to start another activity, you could use a single line of code by passing the intent as an argument in the startActivity() method: startActivity(new Intent(MainActivity.this, DetailActivity.class));
3. CHECK POINT: To see if the code associated with the button is working correctly, switch to (or start) the AVD and then click the ANY button. You should see that it will take you to the corresponding activity (page). Click the Back button ( ) to return to the main activity (home page).

(OPTIONAL) Create Custom Button

While the default button works fine, we will customize them by using a selector to get it two custom states (normal and pressed).

1. Create two rectangle shapes or images that can be used as the button normal and pressed state and name them button_background_default.png and button_background_pressed.png
   
   
   
   
2. Copy them and paste them in the drawable folders.
3. Right-click on the drawable folder and select File > New > Layout XML File.
4. In the Customize the Activity dialog box that appears, type custom_button_states as the Layout File Name and selector as the Root Tag.
   
   
   
5. Click the Finish button.
6. In the custom_button_states.xml file that appears, add the following highlighted code:
   
   

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       <item android:drawable="@drawable/button_background_pressed" android:state_pressed="true" />
       <item android:drawable="@drawable/button_background_default" />
   </selector>

   
   
   CODE EXPLANATION:
   - The two <item> elements are used to define the default and pressed states of a button.
   - The state_pressed="true" attribute is used to register the press state. There is no need to have an attribute for the default state.
7. In the content_main.xml file REPLACE the background property (android:background="#000000") for EACH button with:
   
   

   android:background="@drawable/custom_button_states"

   
   
   CODE EXPLANATION:
   - Notice that the background color property was replaced an *xml file.
8. CHECK POINT: To see if the code associated with the button is working correctly, switch to (or start) the AVD and then click the ANY button. Press and hold on any button and you should see that the state of the button change to the pressed state that was defined in the custom_button_state.xml file. Once you release the button, it should take you to the corresponding activity page.