테크 지식
[커뮤니티] Android Studio로 구글 예제 앱 만들어보기
* 주의사항1. 본 글은 개인이 공부한 내용을 바탕으로 정리한 게시글입니다.2. 본 글은 구글 공식 가이드를 기반으로 개인이 실습하는 과정을 적은 글입니다. 공식 가이드 문서를 보시려면 아래의 링크를 클릭해서 이동해주세요 :)
어쩌다보니 사실상 간단한 수정 이외에는 거의 손대지 않는 안드로이드와 관련해서 다시 손잡고 건들 일이 생겼습니다. 바로 앱 개발입니다. 안드로이드 앱 개발 같은 경우 이클립스시절 잠시 건들여보고 그 이후로 한 번도 안건들였기 때문에 사실생 새로배우는 것이나 다름없기 때문에 차근차근 공부해보면 한 번 구글 공식 문서의 기초를 실습해보았습니다.
Android Studio로 구글 예제 앱 만들어보기
Android Studio 설치
먼저 아래의 링크를 통해서 안드로이드 스튜디오를 설치해주세요. 설치과정에서 필요로하다, 추가적인 설치가 필요로 하는 것들에 대해서는 전부 다 설치해주세요.(본인이 필요없다 싶으면 알아서 해주세요XD 저 같은 경우 중간중간에 설치하는게 귀찮아서 다 설치하고 시작합니다.)
프로젝트 생성
안드로이드 스튜디오를 실행하면 위와 같은 페이지가 나타납니다. "Start a new Android Studio project"를 클릭해주세요. 그러고나면 "Create Android Project" 페이지로 넘어옵니다. 기입해야되는 항목에 아래를 참고해서 기입해주세요 :)
Application name → "My First App" 기입 Company domain → "example.com" 기입 Include C++ support & Include Kotlin support → 체크해제
이후 Next 를 눌러주세요 :)
Target Android Devices 에서는 다양하게 API 버전 별로 있습니다. 본인이 원하시는대로 선택해주시면 됩니다.
"Add an Activity to Mobile"은 가장 기본 페이지(메인 페이지, 첫 페이지)를 어떠한 레이아웃을 가지고 시작할 것인지 정하는 페이지입니다. "Empty Activity"를 선택하고 Next, "Configure Activity"는 손댈 것이 없습니다. "Finish"를 눌러서 프로젝트 생성을 완료해주세요.
이후 프로젝트 폴더 및 소스 파일들이 생성되어서 위와 같은 IDE화면으로 전환되며 프로젝트 생성이 완료됩니다.
AVD(Android Virtual Device) 생성하기
안드로이드 앱을 작성하면 테스트 해볼 필요성이 있겠죠? ADB를 통해서 기기에서 직접 실행하는 방법도 있지만, 가상의 안드로이드 기기를 구성해서 테스트를 진행할 수 있습니다. 한 번 가상의 안드로이드 기기를 구성해보도록 하겠습니다.
먼저 우측 상단에 보면 네모단 기기 앞에 안드로이드가 그려진 아이콘이 있을 것입니다. 위의 아이콘을 클릭해주세요.
"Your Virtual Devices" 페이지가 열립니다. 처음 시작한 경우 가상기기가 생성되어있는 것이 없을 것입니다. 좌측 하단의 "Create Virtual Device"를 클릭해주세요 :)
"Select Hardware"페이지는 기기의 종류를 선택하는 페이지입니다. 본인이 원하시는 기기를 선택하고 "Next"를 클릭해주세요."Select Image"페이지는 안드로이드 버전을 지정하는 페이지입니다. 몇 버전의 안드로이드에서 테스트할 지 선택하고 "Download"를 눌러서 이미지를 다운받은 후 "Next"를 클릭해주세요.
마지막으로 "AVD Name"을 지정하고 "Finish"를 누르면 생성이 완료되었습니다.
구글 공식 가이드 예제 앱 만들어보기
기본적인 셋팅은 끝났으니 한 번 예제 앱을 만들어보도록 하겠습니다. 예제의 앱은 메인 페이지에서 메세지를 작성하여 버튼을 누르면 다른 페이지에서 작성한 메세지가 나타나는 앱입니다. 조금 내용이 많지만 쉽게 보고 따라 할 수 있도록 이미지 중심으로 준비했으니, 차근차근 읽으시면서 따라와주세요 :)
먼저 왼쪽 프로젝트 메뉴에서 "app > res > layout > activity_main.xml" 을 열어주세요. 그럼 위의 이미지처럼 Hello World! 가 적힌 페이지가 나타납니다.간단하게 위의 화면을 설명하면 제일 왼쪽은 프로젝트 메뉴, 가운데는 Layout Design, 오른쪽은 Attributes 로 Layout 요소들에 대한 설정 메뉴입니다.일단, "Hello World!"는 필요없으니 해당 텍스트를 클릭하고 "Delete"키를 눌러서 지워주세요 :)
프로젝트 메뉴 옆 "Palette" 메뉴에서 "Plain Text"를 클릭하고 드래그하여 App 화면 위로 가져와주세요. 그럼 대략적으로 위치가 잡힙니다.* "Plain Text"는 텍스트 입력 창입니다.
이후 드래그하여 가져온 "Plain Text"를 클릭하면 "Attributes"창에 설정 메뉴가 나타납니다. 제일 위의 여백 설정에서 왼쪽과 위쪽의 "+"를 누른 후 16으로 설정해주세요.
텍스트 입력창을 만들었으니 이번에는 버튼을 만들어야겠죠? "Palette"에서 "Button"을 선택 한 후 드래그하여 우측으로 가져와주세요. 그리고 "Attributes" 창의 여백설정에서 오른쪽 "+"를 클릭하여 여백을 16으로 지정합니다.
가져온 것들에 대해서 이리저리 흐트러져 있는 것보단 하나의 기준선으로 맞추어져 있는 것이 더 보기 깔끔하겠죠? 기준선을 맞추는 작업을 진행해보겠습니다.버튼을 클릭하면 아래에 "AB"라 적힌 아이콘이 나타납니다. 해당 아이콘을 클릭하면 버튼의 글자 밑으로 타원이 생성되며, 타원을 클릭해서 드래그하여 옆의 입력창에 가져가면 기준선이 맞추어집니다.
좌우로 여백이 크게 있는 것보다는 꽉 차보이게 하는 것이 더 보기좋겠죠? 텍스트 입력창의 크기가 자유롭게 변할 수 있도록 설정해보겠습니다.먼저 텍스트 입력창을 클릭하면 우측 선에 동그라미가 나타납니다. 해당 동그라미를 클릭, 드래그하여 버튼으로 이어주면 버튼과 이어지며 좌우 여백의 크기가 늘어납니다. 이후 "Attributes" 의 여백설정에서 사각형 안의 ">>>" 모양을 클릭하여 톱니모양으로 바꾸어주면, 입력창이 늘어나며 좌우 여백이 줄어드는 것을 확인 할 수 있습니다. 그리고 우측 청사진을 보게되면 가로선들이 톱니모양으로 되어있는 것을 확인 할 수 있습니다. 해당 모양으로 바뀌게되면 크기가 기기의 해상도에 맞추어서 늘어났다 줄어들었다 하게되었다는 것입니다.
기본적인 레이아웃 작업이 완료되었으니, 안에 텍스트 문구들에 대해서 변경을 해보겠습니다.먼저 "app > res > values > strings.xml" 을 클릭하여 열어주세요.
그리고 우측 상단에 "Open Editor"를 클릭합니다. 그러면 "Translation Editor"가 열리며 Key 값들에 대해서 작성 할 수 있게 됩니다. * 해당 페이지는 이름 그대로 목적이 언어별 값 지정용도입니다. 나중에 앱을 각 국가별 언어로 UI를 번역하는데도 사용 할 수 있습니다.
중앙의 "+" 를 클릭하고 "Add Key" 창을 열어 아래와 같이 작성하고 "OK"를 눌러서 생성합니다.Key : edit_messageDefault Value : Enter a messageKey : button_sendDefault Value : Send
키 값을 생성한 이후 "strings.xml"을 열어보면 자동으로 리소스에 대해서 출력할 글자들이 작성되어있는 것을 확인 할 수 있습니다.
이제 출력할 문자들을 연결시켜주어야 되겠죠? "app > res > layout > activity_main.xml" 로 돌아와서 텍스트 입력창을 클릭하고 "Attributes" 창에서 "TextView" 부분의 "text" 옆 "…"을 클릭합니다. 이후 "Resource"창이 나타나며, "edit_message"를 클릭하고 "OK"를 눌러주면 연결이 끝납니다. 버튼도 동일하게 진행해서 "button_send"로 연결해주세요 :)
이제 메인 페이지의 UI 작업이 얼추 끝났습니다. 이제 버튼을 클릭했을때 어떠한 코드를 실행시킬지 지정하는 작업을 진행해봅시다.
먼저 "app > manifests > java > com.example.myfirstapp > MainActivity"를 클릭하여 열어주세요. 그리고 아래와 같이 입력을 진행해주세요.
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } /** 사용자가 Send 버튼을 눌렀을때 호출됩니다. */ public void sendMessage(View view) { // 눌렀을때 어떠한 작업을 할지 작성하세요 :) } }
작성하고나면 위의 이미지처럼 "? android.view.View? Alt+Enter"라는 구름이 나타납니다. View 에 관련된 부분이 import(들여오기, 추가)되지 않아 발생하는 문제로 "Alt+Enter"를 누르면 자동으로 추가 작업을 진행해줍니다.
이후 다시 "app > res > layout > activity_main.xml" 로 돌아와서 버튼을 클릭합니다. 그리고 "Attributes" 창에서 "onClick" 항목을 보면 "sendMessage"가 추가된 것을 확인하실 수 있습니다. "sendMessage"로 변경해주면, 앞으로 버튼을 클릭하면 "sendMessage" 함수가 호출되어 사용됩니다.
그럼 "sendMessage" 함수를 사용했을때 동작이 이루어져야 되는 부분을 마무리지어야되겠죠? 이 예제에서는 "새로운 페이지에 입력한 값을 출력" 하도록 되어있습니다. "app > manifests > java > com.example.myfirstapp > MainActivity"로 돌아가서 아래처럼 코드를 수정하고 "Alt+Enter"를 이용하여 Import 시켜서 작성을 마무리해줍니다.
public class MainActivity extends AppCompatActivity { public static final String EXTRA_MESSAGE = "com.example.myfirstapp.MESSAGE"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } /** 사용자가 Send 버튼을 눌렀을때 호출됩니다. */ public void sendMessage(View view) { Intent intent = new Intent(this, DisplayMessageActivity.class); EditText editText = (EditText) findViewById(R.id.editText); String message = editText.getText().toString(); intent.putExtra(EXTRA_MESSAGE, message); startActivity(intent); } }
이제 버튼을 누르고 난 다음 새로운 값을 가져올 창을 만들어보도록 하겠습니다. 프로젝트메뉴에서 "app"을 우클릭, "new > Activity > Empty Activity"를 클릭합니다.
새로 만들 창의 이름(Activity Name)을 "DisplayMessageActivity"로 지정하고, 나머지 값은 병경하지 않고 Finish를 눌러서 생성합니다.
이후 "app > res > layout > activity_display_message.xml" 를 클릭해서 들어가면 공백 페이지가 나타납니다. "Palette"에서 "TextView"를 드래그해서 배치 한 다음 위에 진행했던 것들을 바탕으로 "Attributes"를 이용해서 중앙에 표기되게끔 지정하고 글자 크기 등을 하고싶은대로 꾸며줍니다.
그리고 "app > manifests > java > com.example.myfirstapp > DisplayMessageActivity"를 열어서 아래와 같이 코드를 작성해줍니다.
public class DisplayMessageActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_display_message); // 이 Activity를 실행한 Intent에서 문자열을 가져옵니다. Intent intent = getIntent(); String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE); // 레이아웃의 TextView에 추출한 문자열을 입력합니다. TextView textView = findViewById(R.id.textView); textView.setText(message); } }
마지막으로 "DisplayMessageActivity"의 상단에 "뒤로가기" 를 추가해서 다시 처음 페이지인 "MainActivity"로 넘어가도록 만드는 것만 남았습니다. "app > manifests > AndroidManifest.xml" 을 열어서 "DisplayMessageActivity" 부분을 아래와 같이 수정해주세요.
<activity android:name=".DisplayMessageActivity" android:parentActivityName=".MainActivity" > <!-- The meta-data tag is required if you support API level 15 and lower --> <meta-data android:name="android.support.PARENT_ACTIVITY" android:value=".MainActivity" /> </activity>
축하합니다. 예제 앱 작성이 완료되었습니다.
작성한 앱 실행시키기(테스트하기)
이제 작성한 예제 앱을 한 번 AVD를 통해서 실행(테스트) 해보도록 하겠습니다. "Shift+F10"을 누르던가 우측 상단 메뉴의 재생버튼 모양의 화살표를 눌러주세요.
테스트 목적의 안드로이드 기기 또는 AVD가 실행되어있지 않다면 "Select Deployment Target" 페이지가 나타납니다. "Available Virtual Devices"에서 테스트에 사용할 이미지를 선택해주세요. 이후 해당 AVD가 실행되며 안드로이드 스튜디오에서는 작성한 APP에 대해서 컴파일 작업을 시작, 완료가 되면 자동으로 AVD에 설치하여 작성한 APP을 보여줍니다.
한 번 입력창에 텍스트를 작성하고 Send 버튼을 눌러봅시다. 그러면 새로운 창이 열리면서 입력한 텍스트가 나타나는 것을 확인하실 수 있습니다.
마무리
구글 공식 가이드 문서를 참고해서 예제 앱 만드는 과정을 한 번 실습해보았습니다. 이 실습을 통해서 대략적으로 어떻게 안드로이드 스튜디오를 통해서 애플리케이션을 작성하는지 충분히 알 수 있었을 것이라 생각됩니다. 이제 부가적으로 다른 요소들에 대해서도 공부해서 마켓에 올라가있는 앱처럼 만들 수 있기를 바랍니다.
참조문서
https://developer.android.com/training/basics/firstapp/index.htmlhttps://developer.android.com/training/basics/firstapp/creating-project.htmlhttps://developer.android.com/training/basics/firstapp/running-app.htmlhttps://developer.android.com/training/basics/firstapp/building-ui.htmlhttps://developer.android.com/training/basics/firstapp/starting-activity.html