9월 30, 2023

안드로이드 앱 Navigation Drawer Activity 따라하기

스마트 폰 앱의 제작은, 전문적인 프로그래머가 아닌 사람들에게는 엄두도 낼 수 없는 관계로, 어마어마한 제작비용도 당연하게 여겨지는 고급 분야로 치부된다. 하지만 구글의 안드로이드 스튜디오 프로그램은, 기본적인 html 지식만 있으면 유용한 앱을 쉽게 만들 수 있도록 해준다. 오늘날 블로그처럼 미래의 안드로이드 SDK는 누구나 쉽게 제작할 수 있되, 아이디어가 관건이 되도록 끝없는 진보를 거듭하고 있다. 그림은 약간의 블로그 제작 지식밖에 없는 필자가, 오로지 인터넷에 의존해서 만든 앱으로 플레이 스토어에도 등록되어 있다. 상업용이 아니더라도 단체나 개인의 용도로 손색없는 앱을 만들 수 있다. 젊은이들에게는 무한한 미래를 열고, 시니어들에게는 치매와 무료함을 동시에 해결해 주는 만병통치약과도 같아 소개한다. 특히 나의 천사이자 프로테제인 어린 손자가 참고하기를 희망하면서, 앱 제작 체험 여정을 시작한다.

앱 만들기

프로그램 설치

안드로이드 스튜디오는 자바를 기반으로 하는 관계로, 프로그램이 설치될 컴퓨터에 아래 사항이 반드시 선행되어야 한다. 포스팅의 흐름과 효율성을 위해서 ‘준비사항’은 전문성이 검증된 사이트의 훌륭한 게시글로 대신한다.

1. JAVA 설치

https://fluorite94.tistory.com/384

2. JDK 설치

https://dwfox.tistory.com/40

3. 프로그램 다운로드

아래의 다운로드 사이트를 방문하고, 자신의 컴퓨터 사양에 맞는 안드로이드 스튜디오 프로그램을 설치한다. 2021년 3월 기준으로 4.1.3버전이 개발 보급 중이다.

안드로이드 스튜디오 다운로드

앱 만들기

앞서 언급한 준비사항과 앱 제작 프로그램 안드로이드 SDK(Software development kit)가 설치되면, 기본으로 제공되는 여러 가지 앱 중에서 선호하는 것을 골라 실행하면 된다. 블로그 게시글처럼 영구적인 수정과 업데이트가 가능하다. 따라서 프로그램의 구조와 특성의 이해가 본 포스팅의 목적이기 때문에, 폴더 이름과 패키지 이름만 변경해서 기본적인 앱을 테스트 차원에서 일단 그대로 만들어 보기로 한다.

1. 새로만들기

메뉴에서 File과 New 및 New Project 순서로 클릭한다.

2. 앱 선택

앱 선택 팝업창에서 앱을(노란색) 선택하고 Next 버튼을 누른다.

3. 앱 정보 입력

  1. 제목
  2. 패키지 이름
  3. 디렉토리
  4. 프로그램 언어
  5. 실행할 안드로이드 최하 버전 

테스트 차원의 앱이기 때문에 아무런 정보 입력 없이 마침 버튼(Finish)을 누르면 된다.

앱 확인과 가상 전화기

앱 만들기는 위의 4단계 작업으로 간단하게 완료가 된다. 하지만 앱을 스마트 폰에 설치 전 제대로 제작된 여부를 확인하기 위해서는 가상기기에서 시험 작동을 거쳐야 한다. 물론 바로 스마트 폰에 설치해도 되지만 에러 시 복잡한 재설치 절차를 되풀이해야 하는 번거로움을 감수해야 한다.

에뮬레이터는 프로그램으로 만든 가상 전화기를 말하며, 작업 과정을 확인하기 위해서 꼭 필요하다. 컴퓨터 화면상에서 가상적인 전화기 에뮬레이션으로 앱을 구동해 볼 수 있다. 추가나 삭제 및 세팅은 AVD(android virtual device) 매니저를 이용하고, 실행은 앱 실행 아이콘을 클릭하면 된다. 가상 전화기를 구동하기 위해서는 아래 두 가지가 필수적으로 선행되어야 한다.

1. BIOS 수정

컴퓨터 부팅 전 Del 키를 눌러 노란색 사각형 부분을 Enabled 로 설정해야 한다.

2. 전화기 추가

메뉴의 Tools 와 AVD Manager 를 순차적으로 눌러 전화기를 추가하면 된다.

3. 에러 수정

가상기기의 복잡한 메카니즘 때문에 자주 에러가 발생한다. 그때마다 그림처럼 디렉토리의 가상전화기 파일을 삭제하고 AVD Manager 에서 다시 추가하면 된다.

앱 제작 종료 및 확인

이제 모든 작업이 끝났다. 앱 만들기 4단계 작업 후에 앱 실행 버튼을 누르면 아래와 같이 가상기기가 팝업된다. 제대로 작동된다면 성공적으로 앱이 만들어진 것이며, 계속해서 포스팅대로 수정하기와 앱 등록 절차를 진행하면 되고, 아닐 경우는 위의 내용을 다시 점검해야 한다.

앱 설치

가상기기가(에뮬레이터) 아닌 스마트 폰에서 앱을 실행하기 위해서는 두 가지 방법이 있다. 첫 번째는 apk 파일을 스마트 폰에 물리적으로 복사해 넣고 클릭해서 실행하는 방법과, 두 번째는 apk 파일을 구글 플레이에 등록하고 실행하는 방법이다. 따라서 무조건 apk 파일을 만들어야 하며 다음 사이트를 참고하면 된다.

https://www.codingfactory.net/11386

앱 등록

안드로이드 앱은 약 25,000 정도만 보증금으로 지급하면, 평생 여러 개의 앱을 구글 플레이에 등록하여 활용할 수 있다.

유용한 팁

메뉴 배경 색상

color.xml

<resources>

    <color name="timeb">#ccff99</color>

    <color name="timet">#000000</color>

    </resources>

themes.xml

<style>

    <!--To change the background of options menu-->

    <item name="android:itemBackground">@color/timeb</item>

    <item name="android:textColor">@color/timet</item>

 </style>

fab 배경 투명

<com.google.android.material.floatingactionbutton.FloatingActionButton

        android:id="@+id/fab"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="bottom|end"

        android:layout_margin="@dimen/fab_margin"

        android:scaleType="fitCenter"

        android:contentDescription="@string/StringValue"

        app:fabCustomSize="80dp"

        android:layout_alignParentEnd = "true"

        android:background="@null"

        app:backgroundTint="@android:color/transparent"//배경 테두리 제거

        android:outlineProvider="none"

        app:tint="@null"

        android:src="@drawable/sun_mk"/>

메뉴 관리

<com.google.android.material.navigation.NavigationView

        android:id="@+id/menu_gx"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:layout_marginTop="10dp"

        android:layout_gravity="start"

        android:layout_marginStart="15dp"

        android:fitsSystemWindows="true"

        android:background="#0000ffff"//메뉴 전체 배경 투명

        app:itemTextColor="#660000"//글자 색상

        app:itemIconSize="40dp"//아이콘 크기

        app:itemIconTint="#660000"//아이콘 색상

        app:elevation="0dp"테두리 배경 제거

        app:layout_constraintStart_toStartOf="parent"

        app:menu="@menu/gxmenu"

        app:itemTextAppearance="@style/menuStyle"//스타일 지정

        />

메뉴 관리 연계

<style name="menuStyle">

        <item name="android:textColor">#000000</item>//불능

        <item name="android:textSize">25sp</item>

        <item name="android:fontFamily">@font/letter</item>

    </style>

아이콘 바꾸기

Toolbar toolbar = findViewById(R.id.toolbar);

        toolbar.setOverflowIcon(ContextCompat.getDrawable(getApplicationContext(),R.drawable.aerobic));

        setSupportActionBar(toolbar);