Android Studio - Getting Started
===

* [name=Ander Liu]

###### tags: `Android Studio`

[TOC]

## 前情提要
* [Colde Garage Mobile APP](/ngnZwY3yRgirAnWF4G_3mw)
* [Java基礎](/x7PCkXtOR9yCMaI4DoRF1w)

## Getting Started
* [Getting Started | Android Developer](https://developer.android.com/guide/)

## What is Android Studio
* Android Studio 是一個為 Android 平台開發程式的 IDE(整合式開發環境)
* 由 Google 和 JetBrains 共同開發
* 基於 JetBrains IntelliJ IDEA，為 Android 開發特殊客製化

## Installation
1. 下載 [Android Studio](https://developer.android.com/studio/) 並安裝
2. 如果安裝上有任何問題可以來問我

### Reference
* [Install Android Studio | Android Developers](https://developer.android.com/guide/)

## Create an Android project

### 創一個新專案
1. 啟動 Android Studio
2. 點擊 **Start a new Android Studio Project**

3. * 在 **Application name** 輸入 "My first App"
* 在 **Company domain** 輸入 "`example.com`"!
* **Project location** 自己挑一個喜歡的地方吧
* 至於 **Include C++ support** 和 **Include Kotlin support** 皆不用勾選
* 都設定完後，點選 **Next**
4. 在 **Target Android Devices** 視窗，保持預設值不變，繼續 **Next**
5. 在 **Add an Activity to Mobile** 視窗，選擇 **Empty Activity**，再 **Next**
6. 在 **Configure Activity** 視窗，保持預設值不變，按下 **Finish** !!!
7. 此時你應該會看到這個畫面
:::success
大功告成~~
:::

### 介紹重要檔案
左上角有個直的 **Project** 按鈕，點下去便會開啟 **Project** 視窗，在此可以選擇檔案
整個 Android Project 中有兩種最重要的檔案， Java 與 XML
* app > java > com.example.myfirstapp > MainActivity
> 第一種為 Java，這個 project 的 main Activity，當你執行 APP，系統會啟動這個 [`Activity`](https://developer.android.com/reference/android/app/Activity) 並載入它的 layout
* app > res > layout > activity_main.xml
> 第二種則為 XML，XML檔定義這個 Activity UI(使用者介面) 的 layout
:::warning
有關 [`Activity`](https://developer.android.com/reference/android/app/Activity) 我們之後會再詳細介紹，這裡只要知道他是一個視窗就好
:::

### Reference
* [Create an Android project | Android Developers](https://developer.android.com/training/basics/firstapp/creating-project)

## Run your app
* 你可以在自己的手機或是在模擬器上跑這個 APP

### Run on a real device
* 你必須先開啟開發人員選項裡的USB偵錯功能，如果不知道如何開啟請 Google
1. 點擊右上角的 **Run**
2. 在 **Select Deployment Target** 視窗，選取你的裝置，再按 OK

### Run on an emulator
1. 點擊右上角的 **Run**
2. 在 **Select Deployment Target** 視窗，選取 **Create New Virtual Device**

4. 在 **Select Hardware** 視窗，任意選一個裝置，例如 Pixel，再點 **Next**
5. 在 **System Image** 視窗，選取最高 API level 的版本，如果沒有安裝過，要先下載。最後再按 **Next**
6. 在 **Android Virtual Device (AVD)** 視窗，保持預設值不變，按下 **Finish**
7. 回到 **Select Deployment Target** 視窗，選取你剛剛創的裝置，按下 **OK**
:::success
執行成功~~~
:::

### Reference
* [Run your app | Android Developers](https://developer.android.com/training/basics/firstapp/running-app)

## Build a simple UI
### 介紹元件
* [`TextView`](https://developer.android.com/reference/android/widget/TextView)
> 普通的文字方塊
* [`EditView`](https://developer.android.com/reference/android/widget/EditText)
> 可以編輯的文字方塊，你可以讀取裡面輸入了些什麼
* [`Button`](https://developer.android.com/reference/android/widget/Button)
> 就是按鈕，APP 可以在你按下時，執行其他程式
* [`AlertDialog`](https://developer.android.com/reference/android/app/AlertDialog)
> 如下圖這種警告視窗，這種物件 Android 已經幫我們寫好了，我們可以直接拿來用
> 

### 來做個會跟自己打招呼的APP吧!!!

#### Layout
1. 先切換到 **activity_main.xml**
2. 先把預設的 [`TextView`](https://developer.android.com/reference/android/widget/TextView)-"Hello world!" 刪掉

3. 再從 **Palette** 找到 [`TextView`](https://developer.android.com/reference/android/widget/TextView), [`Button`](https://developer.android.com/reference/android/widget/Button), Plain Text，並分別把他們拉進去 layout
 
4. 再來要介紹 Constraint，有三種對齊方式
* Constraint anchors
> 選取該物件，在四邊有圓點可以選取，可以往外拖動連接其他物件或邊界
> 
* Baseline
> 選取該物件，點擊 **Edit Baseline** ，拖動物件中的 baseline 連接到另一個物件的 baseline，兩個物件便會水平對齊
> 
* Chain
> 同時選取兩個物件，按下右鍵選擇 **Chain > Create Horizontal Chain** or **Vertical Chain**
5. 自行利用上述方法設計 layout，以下為範例

#### JAVA
1. 再切換到 **MainActivity.java**
2. 在code裡面加入 `sendMessage()`method，如下

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void sendMessage(View view){
	
    }
}

:::danger
你會發現有error, Cannot resolve symbol 'View'，此時將滑鼠移到 View 上方，同時按下 Alt + Enter，系統便會自己 import View這個Class
:::
3. 切回 **activity_main.xml**，選取 button
4. 在 **Attributes** 視窗的 **onClick** 屬性選擇 **sendMessage [MainActivity]**
5. 回到 **MainActivity.java**，加入 `sendMessage()` code，使APP讀取我們輸入的名字，並顯示在 [`TextView`](https://developer.android.com/reference/android/widget/TextView)上，如下

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void sendMessage(View view){
        EditText editText = findViewById(R.id.editText);
        TextView textView = findViewById(R.id.textView);
        String message = editText.getText().toString();
        textView.setText(message);
    }
}

:::warning
code講解
* [`findViewById()`](https://developer.android.com/reference/android/app/Activity#findViewById(int))為 Class [`Activity`](https://developer.android.com/reference/android/app/Activity) 內建的method，他可以透過id來取得這個物件，我們必須透過這個方式取得layout裡的物件，而id為`R.id.[物件名稱]`
* [`getText()`](https://developer.android.com/reference/android/widget/EditText#getText())為 [`EditView`](https://developer.android.com/reference/android/widget/EditText)的 method，可以取得你輸入的文字
* 但由於 [`getText()`](https://developer.android.com/reference/android/widget/EditText#getText())的回傳值不為 String，所以我們要使用 [`toString()`](https://developer.android.com/reference/java/util/Objects#toString(java.lang.Object))，java [`Object`](https://developer.android.com/reference/java/util/Objects)內建的method，來轉換成 String
* [`setText()`](https://developer.android.com/reference/android/widget/TextView#setText(java.lang.CharSequence))為 [`TextView`](https://developer.android.com/reference/android/widget/TextView)的 method，可以把字串參數顯示在 [`TextView`](https://developer.android.com/reference/android/widget/TextView)上
:::
6. 再實作 [`AlertDialog`](https://developer.android.com/reference/android/app/AlertDialog)的部分，如果名字輸入為空白即跳出警告視窗

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void sendMessage(View view){
        EditText editText = findViewById(R.id.editText);
        TextView textView = findViewById(R.id.textView);
        String message = editText.getText().toString();
        if(message.isEmpty()) {
            textView.setText("");
            AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
            builder.setMessage("Please enter your name!!!");
            builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int id) {
                }
            });
            AlertDialog dialog = builder.create();
            dialog.show();
        } else {
            textView.setText("Hello, " + message + "!!!");
        }
    }
}

:::warning
code講解
* [`isEmpty()`](https://developer.android.com/reference/java/lang/String?hl=zh-tw#isEmpty())為 [`String`](https://developer.android.com/reference/java/lang/String?hl=zh-tw)的 method，如果String == ""，便會回傳 1
* [`AlertDialog`](https://developer.android.com/reference/android/app/AlertDialog)必須透過 [`AlertDialog.Builder`](https://developer.android.com/reference/android/app/AlertDialog.Builder?hl=zh-tw)建立內容和版面配置，至於他的constructor參數要丟 [`Activity`](https://developer.android.com/reference/android/app/Activity)，所以要打 MainActivity.this
* [`setMessage()`](https://developer.android.com/reference/android/app/AlertDialog.Builder?hl=zh-tw#setMessage(java.lang.CharSequence))可以設定 [`AlertDialog`](https://developer.android.com/reference/android/app/AlertDialog)要顯示的訊息，參數輸入要顯示的字串即可
* [`setPositiveButton()`](https://developer.android.com/reference/android/app/AlertDialog.Builder?hl=zh-tw#setPositiveButton(java.lang.CharSequence,%20android.content.DialogInterface.OnClickListener))可以設定確認按鈕，第一個參數為要顯示在按鈕上的字串，第二個參數為 Listener，有關 Listener 之後會再提到
* 編輯完後，就可以創一個新的 [`AlertDialog`](https://developer.android.com/reference/android/app/AlertDialog)，呼叫 [`create()`](https://developer.android.com/reference/android/app/AlertDialog.Builder?hl=zh-tw#create())即可
* 最後呼叫 [`show()`](https://developer.android.com/reference/android/app/Dialog?hl=zh-tw#show())，讓 [`AlertDialog`](https://developer.android.com/reference/android/app/AlertDialog)顯示出來
:::
7. Run執行!!!
:::success
成功寫出第一個APP啦~~~
:::

### Reference
* [Build a simple user interface | Android Developers](https://developer.android.com/training/basics/firstapp/building-ui)
* [Start another activity | Android Developers](https://developer.android.com/training/basics/firstapp/starting-activity#java)
* [Dialogs | Android Developers](https://developer.android.com/guide/topics/ui/dialogs?hl=zh-tw)

## Demo
:::info
* 10/29-11/2那週，會再統計大家哪天可以
* 10/27 20:00-22:00 is office hour，其他時間也可以來找我問問題，先跟我說一聲即可
:::
:::danger
* 請demo上面那個打招呼APP
:::

## Homepage
* [Homepage](/@NDR/Homepage)

*[IDE]: Integrated Development Environment
*[XML]: Extensible Markup Language
*[UI]: User Interface