[안드로이드 / 코틀린] 카카오 내비게이션 연동하는 방법

안드로이드 앱에 카카오 내비게이션을 연동하는 방법에 대해 알아보겠습니다.

순서는 아래와 같이 진행됩니다.

 

<작업 순서>

Step 1. 프로젝트 생성

Step 2. 의존성 추가

Step 3. 인터넷 권한 설정

Step 4. GlobalApplication 클래스 생성

Step 4. 네이티브 앱 키 생성

Step 5. GlobalApplication 클래스 생성

 

시작하겠습니다.

---

Step 1. 프로젝트 생성

프로젝트를 생성합니다.

저는 kakao navigation 이라는 이름을 가진 프로젝트를 생성하였습니다.

참고로 아래에 제 안드로이트 스튜디오 버전을 올려놓겠습니다.

 

 

본인의 안드로이드 스튜디오 버전을 확인하는 방법은 아래 게시물을 통해서 확인할 수 있습니다.

 

[Windows OS]

 

https://boywin1992.tistory.com/entry/Windows-OS-%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4-%EB%B2%84%EC%A0%84-%ED%99%95%EC%9D%B8-%EB%B0%A9%EB%B2%95

[Windows OS] 안드로이드 스튜디오 버전 확인 방법

 

[Mac OS]

 

https://boywin1992.tistory.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4-%EB%B2%84%EC%A0%84-%ED%99%95%EC%9D%B8-%EB%B0%A9%EB%B2%95

[Mac OS] 안드로이드 스튜디오 버전 확인 방법

 

프로젝트 생성이 완료 되었습니다.

---

Step 2. 의존성 추가

프로젝트를 생성했으니 이제 카카오 내비게이션을 사용할 수 있도록 의존성을 추가해 주는 과정이 필요합니다.

의존성 설정은 카카오 내비게이션이라는 외부 앱을 우리가 만들고자 하는 앱에서 사용할 수 있도록 허락을 받는 과정이라고 볼 수 있습니다.

의존성 추가 설정은 총 두개의 파일에 진행을 해주셔 합니다.

하나씩 진행하겠습니다. 

 

2.1 의존성 추가 - 1 : Gradle Scripts\build.gradle (Module)

Gradle Scripts 하위의 build.gradle (Module) 파일을 실행 시킵니다.

그리고 dependencies 하위에 아래 코드를 입력입력합니다.

// kakao navigation
implementation "com.kakao.sdk:v2-navi:2.9.0"

그리고 우측 상단에 Sync Now 잊지 말고 클릭 해주세요.

코드 위치는 아래 화면 캡쳐 이미지를 확인해 주세요.

 

 

2.2 의존성 추가 - 2 : settings.gradle

다음으로는 위와 마찬가지로 Gradle Scripts 하위입니다.

settings.gradle 파일을 실행해주세요.

dependencyResolutionManagement 하위의 repositories 하위에 아래 코드를 입력해주세요.

마찬가지로 Sync Now 는 반드시 클릭 해주셔야 합니다.

// kakao
maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/' }

위치가 정말 중요해요. 아래 화면 캡쳐 이미지를 반드시 확인해주세요.

충분히 헛갈리실 수 있기에 이렇게 강조를 합니다.

두번, 세번 확인 해주세요. 다른 위치에 해당 코드를 입력하면 카카오 내비게이션과 관련된 코드를 입력할 수 없습니다.

 

 

의존성 추가가 마무리 되었습니다.

---

Step 3. 인터넷 사용 권한 설정

 

다음으로는 인터넷 사용 권한을 설정해볼 것입니다.

AndroidManifest.xml 파일을 실행해 주세요.

그리고 아래 코드를 입력해 주세요.

아래 코드는 앱에서 인터넷 통신을 사용할 수 있도록 권한을 부여 받는 코드입니다.

<uses-permission android:name="android.permission.INTERNET" />

코드가 입력 되어야 하는 위치는 아래 이미지를 참고해 주세요.

---

Step 4. 네이티브 앱 키 생성

다음 과정으로는 카카오 개발자 페이지에 접속해서 애플리케이션을 생성하고 네이티브 앱 키를 생성하는 과정이예요.

먼저 카카오 개발자 페이지에 접속해주세요.

https://developers.kakao.com/

Kakao Developers

로그인 해주시고, 카카오 개발자 페이지 상단의 내 애플리케이션을 클릭해 주세요.

빨간색 상자로 강조 표시를 해놨으니 아래 이미지를 참고해주세요.

 

 

다음으로는 애플리케이션 추가하기를 클릭하여 새로운 애플리케이션을 생성해 주세요.

 

 

다음 화면에서 생성하고자 하는 앱의 정보를 입력해 주세요.

저는 앱이름에 navigation 을 입력하고 사업자명에는 boywin1992 를 입력했습니다.

앱 이름을 프로젝트명과 동일하게 kakao navigation 으로 하려 했으나 kakao 라는 문구가 들어간 앱 이름은 허용해 주지 않는 것 같았아요.

그리고 이미지도 업로드 가능해요. 하지만 저는 하지 않았어요.

 

 

애플리케이션을 생성하고 나면 아래와 같은 화면으로 바뀔 것입니다.

빨간색 영역을 클릭하여 애플리케이션 상세보기 화면으로 진입합니다.

 

 

요약 정보에 들어가서 네이티브 앱 키를 확인해주세요.

다음 단계인 카카오 sdk 초기화 과정에서 네이티브 앱 키가 반드시 필요하답니다.

 

 

이렇게 우리는 카카오 개발자에서 네이티브 앱 키를 확인했습니다.

 

 

---

Step 5. GlobalApplication 클래스 생성

다음으로는 카카오 sdk 초기화를 위한 GlobalApplication 클래스를 생성해볼 거예요.

클래스 생성 위치는 개발자 본인 편한 위치에 생성을 하시면 됩니다.

저는 MainActivity 와 동일한 위치에 생성을 했습니다. 아래 이미지 참고 해주세요.

 

 

GlobalApplication 에 코드를 입력해 보겠습니다.

위에서 말씀 드린 대로 카카오 sdk 초기화를 위한 코드입니다.

package com.mandeum.kakaonavigation

import android.app.Application
import com.kakao.sdk.common.KakaoSdk

class GlobalApplication : Application() {
    override fun onCreate() {
        super.onCreate()

        // kakao
        KakaoSdk.init(this, getString(R.string.appKey))
    }
}

getString(R.string.appKey) 영역에 step 4 에서 확인한 네이티브 앱 키를 입력해서 넣으면 됩니다.

저는 values/strings.xml 파일에 네이티브 앱 키를 입력해 놓고 getString 함수를 이용하여 문자열을 불러와서 사용했어요.

 

values/strings.xml 파일에 문자열을 입력하는 방법 및 getString 함수 사용 방법이 궁금하신 분들은 아래 게시물을 참고해 주세요.

https://boywin1992.tistory.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C%EC%BD%94%ED%8B%80%EB%A6%B0-stringxml-%EC%97%90-%EB%AC%B8%EC%9E%90%EC%97%B4%EC%9D%84-%EC%9E%85%EB%A0%A5%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

---

Step 6. 레이아웃 제작

 

자, 이제 레이아웃을 만들어볼 예정이예요.

우리가 만들어볼 레이아웃은 세개의 edit text 와 네개의 버튼으로 구성된 단순한 형태의 레이아웃입니다.

 

 

activity_main.xml 의 전체 코드를 보여드리도록 할게요.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/latitudeTv"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:background="@drawable/shape_ff000000_ffffffff_1_0"
        android:gravity="center"
        android:hint="@string/latitude"
        android:importantForAutofill="no"
        android:inputType="numberDecimal"
        android:textSize="15sp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/longitudeTv"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:background="@drawable/shape_ff000000_ffffffff_1_0"
        android:gravity="center"
        android:hint="@string/longitude"
        android:importantForAutofill="no"
        android:inputType="numberDecimal"
        android:textSize="15sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/latitudeTv" />

    <EditText
        android:id="@+id/destinationTv"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:background="@drawable/shape_ff000000_ffffffff_1_0"
        android:gravity="center"
        android:hint="@string/destination"
        android:importantForAutofill="no"
        android:textSize="15sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/longitudeTv" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/navigateBtn"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:background="@color/black"
        android:text="@string/navigate"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/destinationTv" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/incheonBtn"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:background="@color/black"
        android:text="@string/incheon"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/navigateBtn" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/seoulBtn"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:background="@color/black"
        android:text="@string/seoul"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/incheonBtn" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/dangjinBtn"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:background="@color/black"
        android:text="@string/dangjin"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/seoulBtn" />

</androidx.constraintlayout.widget.ConstraintLayout>

---

Step 7. 기능 구현

 

기능 구현을 말씀드리기 앞서서 view binding 을 사용해서 기능을 구현했기 때문에 view binding 에 대한 이야기를 하지 않을 수 없겠어요.

따로 게시물을 제작해 놓았으니 view binding 사용 방법에 대해 궁금하신 분들은 아래 게시물을 확인해 주세요.

https://boywin1992.tistory.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C%EC%BD%94%ED%8B%80%EB%A6%B0-view-binding-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

 

아래 코드를 활용하여 카카오 네비게이션을 연동할 수 있을 것입니다.

 

package com.boywin1992.kakaonavigation

import android.content.Intent
import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import com.kakao.sdk.common.util.Utility
import com.kakao.sdk.navi.Constants
import com.kakao.sdk.navi.NaviClient
import com.kakao.sdk.navi.model.CoordType
import com.kakao.sdk.navi.model.NaviOption
import com.boywin1992.kakaonavigation.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    // binding
    private lateinit var binding: ActivityMainBinding

    // tag
    private val tag = this.javaClass.simpleName + ".tag"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // set binding
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // get key hash
        val keyHash = Utility.getKeyHash(this)
        Log.d(tag, "keyHash = $keyHash")

        // navigate button
        val navigateBtn = binding.navigateBtn
        navigateBtn.setOnClickListener {
            val isInstalled = NaviClient.instance.isKakaoNaviInstalled(this)
            if (isInstalled) { // if kakao navigation is not installed
                // get destination data
                val name = binding.destinationTv.text.toString()
                val longitude = binding.longitudeTv.text.toString()
                val latitude = binding.latitudeTv.text.toString()
                // run kakao navigation
                val intent =
                    NaviClient.instance.navigateIntent(
                        com.kakao.sdk.navi.model.Location(name, longitude, latitude),
                        NaviOption(coordType = CoordType.WGS84)
                    )
                startActivity(intent)
            } else { // if kakao navigation is installed
                // show kakao navigation installation guide page
                val intent = Intent(Intent.ACTION_VIEW, Uri.parse(Constants.WEB_NAVI_INSTALL))
                    .addFlags(Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TOP)
                startActivity(intent)
            }
        }

        // incheon button
        val incheonBtn = binding.incheonBtn
        incheonBtn.setOnClickListener {
            val isInstalled = NaviClient.instance.isKakaoNaviInstalled(this)
            if (isInstalled) {
                val name = getString(R.string.incheon)
                val longitude = "126.7059157"
                val latitude = "37.4560897"
                val intent =
                    NaviClient.instance.navigateIntent(
                        com.kakao.sdk.navi.model.Location(name, longitude, latitude),
                        NaviOption(coordType = CoordType.WGS84)
                    )
                startActivity(intent)
            } else {
                val intent = Intent(Intent.ACTION_VIEW, Uri.parse(Constants.WEB_NAVI_INSTALL))
                    .addFlags(Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TOP)
                startActivity(intent)
            }
        }

        // seoul
        val seoulBtn = binding.seoulBtn
        seoulBtn.setOnClickListener {
            val isInstalled = NaviClient.instance.isKakaoNaviInstalled(this)
            if (isInstalled) {
                val name = getString(R.string.seoul)
                val longitude = "126.9779451"
                val latitude = "37.5662952"
                val intent =
                    NaviClient.instance.navigateIntent(
                        com.kakao.sdk.navi.model.Location(name, longitude, latitude),
                        NaviOption(coordType = CoordType.WGS84)
                    )
                startActivity(intent)
            } else {
                val intent = Intent(Intent.ACTION_VIEW, Uri.parse(Constants.WEB_NAVI_INSTALL))
                    .addFlags(Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TOP)
                startActivity(intent)
            }
        }

        // dangjin
        val dangjinBtn = binding.dangjinBtn
        dangjinBtn.setOnClickListener {
            val isInstalled = NaviClient.instance.isKakaoNaviInstalled(this)
            if (isInstalled) {
                val name = getString(R.string.dangjin)
                val longitude = "126.6461706"
                val latitude = "36.8896751"
                val intent =
                    NaviClient.instance.navigateIntent(
                        com.kakao.sdk.navi.model.Location(name, longitude, latitude),
                        NaviOption(coordType = CoordType.WGS84)
                    )
                startActivity(intent)
            } else {
                val intent = Intent(Intent.ACTION_VIEW, Uri.parse(Constants.WEB_NAVI_INSTALL))
                    .addFlags(Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TOP)
                startActivity(intent)
            }
        }
    }
}

 

위도칸에 위도값을 입력하고 경도칸에 경도값을 입력한 후에 목적지명을 입력하고 길안내를 누르면 해당 위치로 카카오내비가 길 안내해주는 기능이 실행되는 것을 확인하실 수 있을 것입니다.