Wooa Studio

tesseract를 이용한 OCR 테스트

||| : ) ||| — Thu, 20 Aug 2020 10:51:41 +0900

tesseract를 이용한 OCR 테스트

파이썬을 설치했으니 가장 간단한 테스트를 하나 해볼까 합니다. tesseract를 이용해서 이미지에 있는 문자를 인식하는 코드를 작성해보도록 하겠습니다. 파이썬의 경우 라이브러리가 굉장히 잘되어 있기때문에 라이브러리를 잘 이용하면 구현하는데 크게 어려움이 없습니다.

파이썬에는 OCR 관련된 라이브러리도 많은데 그 중 구글에서 개발한 tesseract를 이용해서 문자인식을 진행해보았습니다. 그럼 아래에서 tesseract를 이용한 문자인식 하는 방법에 대해서 알아보도록 하겠습니다.

Photo by gfk DSGN on Pixabay

개발환경 : Windows 10 / 파이참

tesseract를 이용한 OCR 테스트

tesseract를 이용하기 위해서는 tesseract를 설치하고 라이브러리를 import 해야한다.

tesseract 설치는 아래의 tesseract github에서 진행할 수 있다.

https://github.com/tesseract-ocr/tesseract/wiki

tesseract-ocr/tesseract

Tesseract Open Source OCR Engine (main repository) - tesseract-ocr/tesseract

github.com

▼ tesseract github로 이동 후 스크롤을 아래로 내리면 Windows용 설치파일을 받을 수 있습니다.

'Tesseract at UB Mannheim'을 선택하고 환경에 맞는 버전을 선택해서 설치하면 됩니다.

▼ 파이참에서 tesseract를 이용하기 위해서 tessaract 모듈을 설치합니다.

File 메뉴를 선택해서 Settings 메뉴로 진입합니다.

▼ Project Interpreter를 선택해서 우측에 있는 + 메뉴를 선택합니다.

▼ pytesseract로 검색을 해서 하단의 install package를 선택하면 설치가 완료됩니다.

▼ 이제 tesseract 사용준비가 끝났습니다.

간단하게 코드를 작성해 보겠습니다.

from PIL import Image
from pytesseract import *

pytesseract.tesseract_cmd = r'C:\Program Files\Tesseract-OCR\tesseract'

img = Image.open('test_image.png')
text = pytesseract.image_to_string(img, lang='kor')

print(text)

▼ 인식하고자 하는 사진은 아래와 같습니다.

▼ 인식이 잘 되는것을 확인 할 수 있습니다.

문장이 길어지면 인식률이 많이 떨어지긴 하는데 그래도 간단한 문자는 인식됨을 확인할 수 있었습니다. 인식률을 올리기 위해서 open-cv를 이용해 이미지 전처리가 필요하기도 하지만 이번 포스팅에서는 여기까지만 진행하도록 하겠습니다.

[파이썬 시작하기] 파이썬 개발환경 구축(설치 및 환경설정)

||| : ) ||| — Wed, 19 Aug 2020 12:47:35 +0900

[파이썬 시작하기] 파이썬 개발환경 구축(설치 및 환경설정)

최근에 파이썬에 관심이 생겨서 파이썬 개발을 시작해볼까 합니다. 요즘 각광받는 인공지능이나 데이터 분석에서도 파이썬이 많이 사용되고 있으니 알아두면 도움이 되지 않을까 싶습니다. 파이썬은 한 번도 해본 적이 없어서 한편으로는 걱정도 되면서 한편으로는 재미있지 않을까 기대가 되기도 합니다.

파이썬 개발을 위한 IDE가 다양한데 저는 파이참을 이용할 예정입니다. 무료버전인 커뮤니티 버전도 쓸만하다고 하니 커뮤니티 버전으로 다운받아서 설치해보도록 하겠습니다.

오늘 포스팅 내용은 아래와 같습니다.

▼ 목 차 ▼

1. 파이썬 설치

2. 파이참 설치

3. HelloWorld 출력해보기

Photo by gfk DSGN on Pixabay

파이썬 설치하기

▼ 윈도우즈 OS를 이용하고 있기 때문에 아래 파이썬 홈페이지에서 윈도우즈 OS용 파이썬을 다운로드합니다.

https://www.python.org/downloads/

Download Python

The official home of the Python Programming Language

www.python.org

▼ 상단에는 최신버전을 다운로드 할 수 있는 버튼이 있고 이전 버전을 다운로드 하고 싶다면 스크롤을 하단으로 내려 'Looking for a specific release?'에서 원하는 버전으로 다운로드 할 수 있습니다.

▶ 설치 시 'Add Python 3.8 to PATH'를 체크하면 환경변수 설정까지 함께 진행이 됩니다.

파이참 설치하기

▼ 파이참은 JetBrain사의 개발환경으로 JetBrain사 홈페이지에서 다운로드가 가능합니다.

https://www.jetbrains.com/ko-kr/

JetBrains: Developer Tools for Professionals and Teams

JetBrains is a cutting-edge software vendor specializing in the creation of intelligent development tools, including IntelliJ IDEA – the leading Java IDE, and the Kotlin programming language.

www.jetbrains.com

▼ 우측상단에 다운로드 버튼을 선택해서 커뮤니티 버전으로 설치를 합니다.

HelloWorld 출력해보기

파이썬과 파이참 설치를 완료했으니 개발의 첫 단계인 Hello World를 출력해 보겠습니다.

▼ 파이참을 실행해서 프로젝트를 생성합니다.

▼ 프로젝트에서 마우스 우클릭으로 파이썬 파일을 생성합니다.

▼ Hello World 파일을 생성합니다.

▼ print('Hello World')를 입력하고 실행을 합니다.

▼ Hello World가 정상적으로 출력됨을 확인할 수 있습니다.

이상으로 파이썬 개발을 위한 개발환경 구축을 해보았습니다.

감사합니다:)

[네이버 지도 API] 지도 위에 인포윈도우(InfoWindow) 표시하기

||| : ) ||| — Wed, 3 Jun 2020 15:05:53 +0900

[네이버 지도 API] 지도 위에 인포윈도우(InfoWindow) 표시하기

이어서 네이버 지도 위에 인포윈도우를 표시하는 방법에 대해서 알아보도록 하겠습니다. 지도를 사용하는 앱을 살펴보면 지도 위에 있는 마커를 클릭했을 때 마커에 대한 정보가 뜨는 걸 볼 수 있습니다. 간단하게 구현해 볼 수 있으니 한 번 해보도록 하겠습니다.

혹시 지난 포스팅이 궁금하신 분들은 아래를 참고해 주세요.

[네이버 지도 API] 커스텀 마커, 마커 클릭이벤트 추가하기

[네이버 지도 API] UI 컨트롤 제어하기(나침반, 축척바, 줌버튼, 현위치 버튼, 네이버 로고)

[네이버 지도 API] 마커 / 현재위치 표시하기

[네이버 지도 API] 시작하기(Client ID 발급, 앱에 지도 띄우기)

오늘 포스팅 내용은 아래와 같습니다.

▼ 목 차 ▼

□ InfoWindow 객체 생성

□ DefaultTextAdapter 활용

□ DefaultViewAdapter 활용

□ 전체코드

Photo by gfk DSGN on Pixabay

InfoWindow 객체 생성

onMapReady 내에서 InfoWindow 객체를 생성합니다.

private InfoWindow mInfoWindow;

public void onMapReady(@NonNull NaverMap naverMap)
    mInfoWindow = new InfoWindow();
}

마커 클릭이벤트를 이용해서 InfoWindow가 잘 뜨는지 확인합니다.

    @Override
    public boolean onClick(@NonNull Overlay overlay) {
        if (overlay instanceof Marker) {
            Marker marker = (Marker) overlay;
            if (marker.getInfoWindow() != null) {
                mInfoWindow.close();
                Toast.makeText(this.getApplicationContext(), "InfoWindow Close.", Toast.LENGTH_LONG).show();
            }
            else {
                mInfoWindow.open(marker);
                Toast.makeText(this.getApplicationContext(), "InfoWindow Open.", Toast.LENGTH_LONG).show();
            }
            return true;
        }
        return false;
    }

▼ 아래 그림처럼 인포윈도우가 정상적으로 뜨는 걸 확인할 수 있습니다.

DefaultTextAdapter 활용

인포윈도우에 정보를 보여주기 위해서는 어댑터 설정이 필요합니다. 기본적인 Text만 보여줄 수 있는 DefaultTextAdapter와 복잡한 뷰를 보여줄 수 있는 DefaultViewAdapter가 있습니다.

먼저 DefaultTextAdapter를 사용해 보도록 하겠습니다.

DefaultTextAdapter를 이용하면 하나의 문자열을 인포윈도우에 표시할 수 있습니다. infoWindow에 adapter를 설정하고 보여주고자 하는 문자열을 리턴합니다.

       mInfoWindow.setAdapter(new InfoWindow.DefaultTextAdapter(this) {
            @NonNull
            @Override
            public CharSequence getText(@NonNull InfoWindow infoWindow) {
                return "Wooa Studio";
            }
        });

▼ 아래 그림처럼 인포윈도우에 리턴한 문자열이 보여지게 됩니다.

DefaultViewAdapter 활용

다음으로 DefaultViewAdapter를 사용해보겠습니다. DefaultViewAdapter를 이용하면 다양한 레이아웃을 인포윈도우에 표시할 수 있습니다. 저는 간단하게 텍스트뷰가 2개 있는 레이아웃을 설정해 보도록 하겠습니다.

       mInfoWindow.setAdapter(new InfoWindow.DefaultViewAdapter(this) {
            @NonNull
            @Override
            protected View getContentView(@NonNull InfoWindow infoWindow) {
                Marker marker = infoWindow.getMarker();
                PlaceInfo info = (PlaceInfo) marker.getTag();
                View view = View.inflate(MainActivity.this, R.layout.view_info_window, null);
                ((TextView) view.findViewById(R.id.title)).setText("Wooa Studio");
                ((TextView) view.findViewById(R.id.details)).setText("Info Window 테스트");
                return view;
            }
        });

view_info_window.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal"
        android:textStyle="bold"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/details"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal"
        android:textSize="12sp"
        android:textColor="@android:color/black"/>

</LinearLayout>

전체코드

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback, Overlay.OnClickListener {

    private static final String TAG = "MainActivity";

    private static final int PERMISSION_REQUEST_CODE = 100;
    private static final String[] PERMISSIONS = {
            Manifest.permission.ACCESS_FINE_LOCATION,
            Manifest.permission.ACCESS_COARSE_LOCATION
    };

    private FusedLocationSource mLocationSource;
    private NaverMap mNaverMap;

    private InfoWindow mInfoWindow;

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

        // 지도 객체 생성
        FragmentManager fm = getSupportFragmentManager();
        MapFragment mapFragment = (MapFragment) fm.findFragmentById(R.id.map);
        if (mapFragment == null) {
            mapFragment = MapFragment.newInstance();
            fm.beginTransaction().add(R.id.map, mapFragment).commit();
        }

        // getMapAsync를 호출하여 비동기로 onMapReady 콜백 메서드 호출
        // onMapReady에서 NaverMap 객체를 받음
        mapFragment.getMapAsync(this);

        // 위치를 반환하는 구현체인 FusedLocationSource 생성
        mLocationSource =
                new FusedLocationSource(this, PERMISSION_REQUEST_CODE);
    }

    @Override
    public void onMapReady(@NonNull NaverMap naverMap) {
        Log.d(TAG, "onMapReady");

        // 지도상에 마커 표시
        Marker marker = new Marker();
        marker.setPosition(new LatLng(37.5670135, 126.9783740));
        marker.setMap(naverMap);

        marker.setWidth(100);
        marker.setHeight(100);
        marker.setIcon(OverlayImage.fromResource(R.drawable.tour));
        marker.setOnClickListener(this);

        // NaverMap 객체 받아서 NaverMap 객체에 위치 소스 지정
        mNaverMap = naverMap;
        mNaverMap.setLocationSource(mLocationSource);

        // UI 컨트롤 재배치
        UiSettings uiSettings = mNaverMap.getUiSettings();
        uiSettings.setCompassEnabled(false); // 기본값 : true
        uiSettings.setScaleBarEnabled(false); // 기본값 : true
        uiSettings.setZoomControlEnabled(false); // 기본값 : true
        uiSettings.setLocationButtonEnabled(false); // 기본값 : false
        uiSettings.setLogoGravity(Gravity.RIGHT | Gravity.BOTTOM);

        CompassView compassView = findViewById(R.id.compass);
        compassView.setMap(mNaverMap);
        ScaleBarView scaleBarView = findViewById(R.id.scalebar);
        scaleBarView.setMap(mNaverMap);
        ZoomControlView zoomControlView = findViewById(R.id.zoom);
        zoomControlView.setMap(mNaverMap);
        LocationButtonView locationButtonView = findViewById(R.id.location);
        locationButtonView.setMap(mNaverMap);

        // 권한확인. 결과는 onRequestPermissionsResult 콜백 매서드 호출
        ActivityCompat.requestPermissions(this, PERMISSIONS, PERMISSION_REQUEST_CODE);

        mInfoWindow = new InfoWindow();

//        mInfoWindow.setAdapter(new InfoWindow.DefaultTextAdapter(this) {
//            @NonNull
//            @Override
//            public CharSequence getText(@NonNull InfoWindow infoWindow) {
//                return "Wooa Studio";
//            }
//        });

        mInfoWindow.setAdapter(new InfoWindow.DefaultViewAdapter(this) {
            @NonNull
            @Override
            protected View getContentView(@NonNull InfoWindow infoWindow) {
                Marker marker = infoWindow.getMarker();
                PlaceInfo info = (PlaceInfo) marker.getTag();
                View view = View.inflate(MainActivity.this, R.layout.view_info_window, null);
                ((TextView) view.findViewById(R.id.title)).setText("Wooa Studio");
                ((TextView) view.findViewById(R.id.details)).setText("Info Window 테스트");
                return view;
            }
        });
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);

        // request code와 권한획득 여부 확인
        if (requestCode == PERMISSION_REQUEST_CODE) {
            if (grantResults.length > 0
                    && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                mNaverMap.setLocationTrackingMode(LocationTrackingMode.Follow);
            }
        }
    }

    @Override
    public boolean onClick(@NonNull Overlay overlay) {
        if (overlay instanceof Marker) {
            Marker marker = (Marker) overlay;
            if (marker.getInfoWindow() != null) {
                mInfoWindow.close();
                Toast.makeText(this.getApplicationContext(), "InfoWindow Close.", Toast.LENGTH_LONG).show();
            }
            else {
                mInfoWindow.open(marker);
                Toast.makeText(this.getApplicationContext(), "InfoWindow Open.", Toast.LENGTH_LONG).show();
            }
            return true;
        }
        return false;
    }
}

이상으로 네이버 지도 위에 인포윈도우를 표시하는 방법에 대해서 알아보았습니다.

감사합니다:)

[네이버 지도 API] 커스텀 마커, 마커 클릭이벤트 추가하기

||| : ) ||| — Mon, 1 Jun 2020 14:31:57 +0900

[네이버 지도 API] 커스텀 마커, 마커 클릭이벤트 추가하기

지난 포스팅에 이어 마커 이미지 변경하는 방법과 마커에 클릭이벤트를 추가하는 방법에 대해서 알아보도록 하겠습니다.

이전 포스팅은 아래와 같으니 참고해 주세요.

[네이버 지도 API] UI 컨트롤 제어하기(나침반, 축척바, 줌버튼, 현위치 버튼, 네이버 로고)

[네이버 지도 API] 마커 / 현재위치 표시하기

[네이버 지도 API] 시작하기(Client ID 발급, 앱에 지도 띄우기)

오늘 포스팅 내용은 아래와 같습니다.

▼ 목 차 ▼

□ 마커 이미지 변경

□ 마커 클릭이벤트 추가

□ 전체코드

Photo by gfk DSGN on Pixabay

마커 이미지 변경하기

마커 이미지 변경은 setIcon 함수를 이용해서 간단하게 할 수 있습니다.

        marker.setWidth(100);
        marker.setHeight(100);
        marker.setIcon(OverlayImage.fromResource(R.drawable.tour));

크기는 dimens.xml을 이용해서 적당히 조절해주면 되고 이미지는 본인이 사용하고자 하는 이미지를 drawble 폴더에 넣은 다음에 사용하면 됩니다.

▼ 아래 그림처럼 마커의 이미지를 원하는 이미지로 변경을 할 수 있습니다.

마커에 클릭이벤트 추가하기

1. 먼저 Overlay.OnClickListener 을 추가합니다.

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback, Overlay.OnClickListener

2. 마커에 클릭이벤트를 추가합니다.

marker.setOnClickListener(this);

3. 클릭을 했을 때 액션을 구현합니다. 저는 간단하게 마커가 클릭되었는지 체크 후 토스트를 띄워보았습니다.

    @Override
    public boolean onClick(@NonNull Overlay overlay) {
        if (overlay instanceof Marker) {
            Toast.makeText(this.getApplicationContext(), "마커가 선택되었습니다", Toast.LENGTH_LONG).show();
            return true;
        }
        return false;
    }

▼ 아래 그림처럼 마커를 클릭하면 토스트가 발생하는 것을 확인할 수 있습니다.

전체코드

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback, Overlay.OnClickListener {

    private static final String TAG = "MainActivity";

    private static final int PERMISSION_REQUEST_CODE = 100;
    private static final String[] PERMISSIONS = {
            Manifest.permission.ACCESS_FINE_LOCATION,
            Manifest.permission.ACCESS_COARSE_LOCATION
    };

    private FusedLocationSource mLocationSource;
    private NaverMap mNaverMap;

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

        // 지도 객체 생성
        FragmentManager fm = getSupportFragmentManager();
        MapFragment mapFragment = (MapFragment) fm.findFragmentById(R.id.map);
        if (mapFragment == null) {
            mapFragment = MapFragment.newInstance();
            fm.beginTransaction().add(R.id.map, mapFragment).commit();
        }

        // getMapAsync를 호출하여 비동기로 onMapReady 콜백 메서드 호출
        // onMapReady에서 NaverMap 객체를 받음
        mapFragment.getMapAsync(this);

        // 위치를 반환하는 구현체인 FusedLocationSource 생성
        mLocationSource =
                new FusedLocationSource(this, PERMISSION_REQUEST_CODE);
    }

    @Override
    public void onMapReady(@NonNull NaverMap naverMap) {
        Log.d(TAG, "onMapReady");

        // 지도상에 마커 표시
        Marker marker = new Marker();
        marker.setPosition(new LatLng(37.5670135, 126.9783740));
        marker.setMap(naverMap);

        marker.setWidth(100);
        marker.setHeight(100);
        marker.setIcon(OverlayImage.fromResource(R.drawable.tour));
        marker.setOnClickListener(this);

        // NaverMap 객체 받아서 NaverMap 객체에 위치 소스 지정
        mNaverMap = naverMap;
        mNaverMap.setLocationSource(mLocationSource);

        // UI 컨트롤 재배치
        UiSettings uiSettings = mNaverMap.getUiSettings();
        uiSettings.setCompassEnabled(false); // 기본값 : true
        uiSettings.setScaleBarEnabled(false); // 기본값 : true
        uiSettings.setZoomControlEnabled(false); // 기본값 : true
        uiSettings.setLocationButtonEnabled(false); // 기본값 : false
        uiSettings.setLogoGravity(Gravity.RIGHT | Gravity.BOTTOM);

        CompassView compassView = findViewById(R.id.compass);
        compassView.setMap(mNaverMap);
        ScaleBarView scaleBarView = findViewById(R.id.scalebar);
        scaleBarView.setMap(mNaverMap);
        ZoomControlView zoomControlView = findViewById(R.id.zoom);
        zoomControlView.setMap(mNaverMap);
        LocationButtonView locationButtonView = findViewById(R.id.location);
        locationButtonView.setMap(mNaverMap);

        // 권한확인. 결과는 onRequestPermissionsResult 콜백 매서드 호출
        ActivityCompat.requestPermissions(this, PERMISSIONS, PERMISSION_REQUEST_CODE);
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);

        // request code와 권한획득 여부 확인
        if (requestCode == PERMISSION_REQUEST_CODE) {
            if (grantResults.length > 0
                    && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                mNaverMap.setLocationTrackingMode(LocationTrackingMode.Follow);
            }
        }
    }

    @Override
    public boolean onClick(@NonNull Overlay overlay) {
        if (overlay instanceof Marker) {
            Toast.makeText(this.getApplicationContext(), "마커가 선택되었습니다", Toast.LENGTH_LONG).show();
            return true;
        }
        return false;
    }
}

이번 포스팅에서는 마커 이미지 변경하는 방법과 마커에 클릭이벤트를 추가해서 클릭이 되었을 때 액션을 추가하는 방법에 대해서 알아보았습니다.

감사합니다:)

Android WebView 사용하기

||| : ) ||| — Fri, 29 May 2020 11:48:44 +0900

Android WebView 사용하기

이번에는 안드로이드 WebView를 이용해서 웹사이트를 띄워보도록 하겠습니다. 웹뷰 사용은 굉장히 간단하므로 손쉽게 이용할 수 있습니다.

Photo by gfk DSGN on Pixabay

Android WebView 예제

1. Manifest에서 인터넷을 사용할 수 있는 권한 추가를 합니다.

그리고 <application> 부분에 usesCleartextTraffic을 추가합니다.

추가하지 않으면 'ERR CLEARTEXT NOT PERMITTED' 에러가 발생합니다.

AndroidManifest.xml

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

    <application
        android:usesCleartextTraffic="true">

2. xml 파일에 WebView 위젯을 추가합니다. 저는 화면을 가득 채우도록 했는데 원하는 사이즈로 설정을 하면 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

3. Activity에 WebView를 load하는 코드를 추가합니다.

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

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

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.getSettings().setJavaScriptEnabled(true);

        mWebView.loadUrl("https://www.tistory.com/");


    }
}

티스토리 메인화면이 정상적으로 출력됨을 확인 할 수 있습니다.,

이번 포스팅에서는 WebView이용해서 간단히 웹사이트를 띄워보는 방법에 대해서 알아보았습니다.

감사합니다.

[네이버 지도 API] UI 컨트롤 제어하기(나침반, 축척바, 줌버튼, 현위치 버튼, 네이버 로고)

||| : ) ||| — Sun, 26 Apr 2020 00:29:03 +0900

[네이버 지도 API] UI 컨트롤 제어하기(나침반, 축척바, 줌버튼, 현위치 버튼, 네이버 로고)

이번에는 네이버 지도에서 유용하게 사용이 되는 UI 컨트롤을 제어해 보도록 하겠습니다.

이전 포스팅이 궁금하시다면 아래 링크를 참고해 주세요.

[Android 앱 개발/네이버 API 사용하기] - [네이버 지도 API] 마커 / 현재위치 표시하기

[Android 앱 개발/네이버 API 사용하기] - [네이버 지도 API] 시작하기(Client ID 발급, 앱에 지도 띄우기)

오늘 포스팅 내용은 아래와 같습니다.

▼ 목 차 ▼

□ UI 컨트롤 활성화 / 비활성화

□ UI 컨트롤 위치 변경

□ 전체코드

UI 컨트롤 활성화/비활성화

UI 컨트롤을 제어할 수 있는 UiSettings 객체를 받아서 활용합니다. UiSettings 객체는 하나의 NaverMap 객체와 1:1로 대응됩니다.

1. UiSettings 객체를 받아옵니다.

UiSettings uiSettings = mNaverMap.getUiSettings();

2. 나침반, 축척바, 줌버튼, 현위치 버튼을 활성화 합니다. 네이버 로고의 경우 항상 보여져야 하기 때문에 활성/비활성을 제어할 수 있는 API를 제공하지 않습니다.

        uiSettings.setCompassEnabled(true); // 기본값 : true
        uiSettings.setScaleBarEnabled(true); // 기본값 : true
        uiSettings.setZoomControlEnabled(true); // 기본값 : true
        uiSettings.setLocationButtonEnabled(true); // 기본값 : false

위 코드 실행 시 아래와 같이 표시됩니다. 우측 중간에 줌버튼, 좌상단에 나침반, 좌하단에 현위치 버튼 / 네이버 로그 / 축척바가 위치합니다.

나침반의 경우는 바로 나타나지 않고 카메라가 회전되거나 틸트 되었을 때 활성화되고 원복 되면 자동으로 사라집니다.

해당 위치가 네이버 지도에서 제공하는 UI 컨트롤의 기본 위치입니다.

3. 나침반, 축척바, 줌버튼, 현위치 버튼을 비활성화 합니다. 당연히 화면에 아무것도 안보이겠죠.

        uiSettings.setCompassEnabled(false); // 기본값 : true
        uiSettings.setScaleBarEnabled(false); // 기본값 : true
        uiSettings.setZoomControlEnabled(false); // 기본값 : true
        uiSettings.setLocationButtonEnabled(false); // 기본값 : false

UI 컨트롤 위치 변경

UI 컨트롤의 위치를 변경시켜 보겠습니다. UiSettings로는 활성화 여부만 제어가 가능합니다. UI 컨트롤 위치를 변경시키기 위해서는 layout파일에서 위치를 변경하고자 하는 컨트롤을 뷰 형태로 추가해야 합니다.

UI 컨트롤들을 모두 우측(네이버 로고는 우하단, 나머지는 모두 우상단)으로 이동시켜 보겠습니다.

        MainActivity.java
        
        UiSettings uiSettings = mNaverMap.getUiSettings();
        uiSettings.setCompassEnabled(false); // 기본값 : true
        uiSettings.setScaleBarEnabled(false); // 기본값 : true
        uiSettings.setZoomControlEnabled(false); // 기본값 : true
        uiSettings.setLocationButtonEnabled(false); // 기본값 : false
        uiSettings.setLogoGravity(Gravity.RIGHT|Gravity.BOTTOM);

        CompassView compassView = findViewById(R.id.compass);
        compassView.setMap(mNaverMap);
        ScaleBarView scaleBarView = findViewById(R.id.scalebar);
        scaleBarView.setMap(mNaverMap);
        ZoomControlView zoomControlView = findViewById(R.id.zoom);
        zoomControlView.setMap(mNaverMap);
        LocationButtonView locationButtonView = findViewById(R.id.location);
        locationButtonView.setMap(mNaverMap);

activity_main.xml

    <com.naver.maps.map.widget.LocationButtonView
        android:id="@+id/location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true" />

    <com.naver.maps.map.widget.ZoomControlView
        android:id="@+id/zoom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/location"
        android:layout_alignParentRight="true"/>

    <com.naver.maps.map.widget.CompassView
        android:id="@+id/compass"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/zoom"
        android:layout_alignParentRight="true"/>

    <com.naver.maps.map.widget.ScaleBarView
        android:id="@+id/scalebar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/compass"
        android:layout_alignParentRight="true"/>

전체 코드

MainActivity.java

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback {

    private static final String TAG = "MainActivity";

    private static final int PERMISSION_REQUEST_CODE = 100;
    private static final String[] PERMISSIONS = {
            Manifest.permission.ACCESS_FINE_LOCATION,
            Manifest.permission.ACCESS_COARSE_LOCATION
    };

    private FusedLocationSource mLocationSource;
    private NaverMap mNaverMap;

    // 마커를 찍을 데이터
    private ArrayList<PlaceInfo> mPlaceInfoList;

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

        // 지도 객체 생성
        FragmentManager fm = getSupportFragmentManager();
        MapFragment mapFragment = (MapFragment)fm.findFragmentById(R.id.map);
        if (mapFragment == null) {
            mapFragment = MapFragment.newInstance();
            fm.beginTransaction().add(R.id.map, mapFragment).commit();
        }

        // getMapAsync를 호출하여 비동기로 onMapReady 콜백 메서드 호출
        // onMapReady에서 NaverMap 객체를 받음
        mapFragment.getMapAsync(this);

        // 위치를 반환하는 구현체인 FusedLocationSource 생성
        mLocationSource =
                new FusedLocationSource(this, PERMISSION_REQUEST_CODE);
    }

    @Override
    public void onMapReady(@NonNull NaverMap naverMap) {
        Log.d( TAG, "onMapReady");

        // 지도상에 마커 표시
        Marker marker = new Marker();
        marker.setPosition(new LatLng(37.5670135, 126.9783740));
        marker.setMap(naverMap);

        // NaverMap 객체 받아서 NaverMap 객체에 위치 소스 지정
        mNaverMap = naverMap;
        mNaverMap.setLocationSource(mLocationSource);

        // UI 컨트롤 재배치
        UiSettings uiSettings = mNaverMap.getUiSettings();
        uiSettings.setCompassEnabled(false); // 기본값 : true
        uiSettings.setScaleBarEnabled(false); // 기본값 : true
        uiSettings.setZoomControlEnabled(false); // 기본값 : true
        uiSettings.setLocationButtonEnabled(false); // 기본값 : false
        uiSettings.setLogoGravity(Gravity.RIGHT|Gravity.BOTTOM);

        CompassView compassView = findViewById(R.id.compass);
        compassView.setMap(mNaverMap);
        ScaleBarView scaleBarView = findViewById(R.id.scalebar);
        scaleBarView.setMap(mNaverMap);
        ZoomControlView zoomControlView = findViewById(R.id.zoom);
        zoomControlView.setMap(mNaverMap);
        LocationButtonView locationButtonView = findViewById(R.id.location);
        locationButtonView.setMap(mNaverMap);

        // 권한확인. 결과는 onRequestPermissionsResult 콜백 매서드 호출
        ActivityCompat.requestPermissions(this, PERMISSIONS, PERMISSION_REQUEST_CODE);
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);

        // request code와 권한획득 여부 확인
        if (requestCode == PERMISSION_REQUEST_CODE) {
            if (grantResults.length > 0
                    && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                mNaverMap.setLocationTrackingMode(LocationTrackingMode.Follow);
            }
        }
    }
}

activity_main.xml

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

    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/map"
        android:name="com.naver.maps.map.MapFragment" />

    <com.naver.maps.map.widget.LocationButtonView
        android:id="@+id/location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true" />

    <com.naver.maps.map.widget.ZoomControlView
        android:id="@+id/zoom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/location"
        android:layout_alignParentRight="true"/>

    <com.naver.maps.map.widget.CompassView
        android:id="@+id/compass"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/zoom"
        android:layout_alignParentRight="true"/>

    <com.naver.maps.map.widget.ScaleBarView
        android:id="@+id/scalebar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/compass"
        android:layout_alignParentRight="true"/>


</RelativeLayout>

간단하게 UI 컨트롤을 제어하는 방법에 대해서 알아보았습니다.

읽어주셔서 감사합니다:)

[네이버 지도 API] 마커 / 현재위치 표시하기

||| : ) ||| — Wed, 22 Apr 2020 03:12:39 +0900

[네이버 지도 API] 마커 / 현재위치 표시하기

지난 포스팅에 이어 네이버 지도에 마커와 현재위치를 표시해 보도록 하겠습니다.

아직 네이버 지도 사용을 위한 준비가 되지 않았다면 아래 포스팅을 참고해 주세요.

[네이버 지도 API] 시작하기(Client ID 발급, 앱에 지도 띄우기)

[네이버 지도 API] 시작하기(Client ID 발급, 앱에 지도 띄우기)

[네이버 지도 API] 시작하기(Client ID 발급, 앱에 지도 띄우기) 네이버 지도를 사용하기 위해서는 네이버 클라우드 플랫폼 가입 후 Client ID를 발급받아야 합니다. 이번 포스팅에서는 네이버 클라우드 플랫폼 가..

wooastudio.tistory.com

오늘 포스팅의 내용은 아래와 같습니다.

▼ 목 차 ▼

□ 마커 표시하기

□ 현재위치 표시하기

□ 전체 코드

Photo by andrekheren on Pixabay

마커 표시하기

xml에 정의하였던 MapFragment 객체를 받아옵니다. 그리고 getMapAsync() 함수를 호출합니다. Map이 준비가 완료되면 onMapReady() 콜백 메서드가 비동기적으로 호출됩니다. onMapReady()가 호출된 후에 지도를 정상적으로 사용할 수 있습니다.

1. OnMapReadyCallback을 구현하기 위해 선언합니다.

public class MainActivity extends AppCompatActivity 
		implements OnMapReadyCallback {

2. getMapAsync()에 this를 넣어줘서 onMapReady()가 호출될 수 있게 합니다.

        // 지도 객체 생성
        FragmentManager fm = getSupportFragmentManager();
        MapFragment mapFragment = (MapFragment)fm.findFragmentById(R.id.map);
        if (mapFragment == null) {
            mapFragment = MapFragment.newInstance();
            fm.beginTransaction().add(R.id.map, mapFragment).commit();
        }

        // getMapAsync를 호출하여 비동기로 onMapReady 콜백 메서드 호출
        // onMapReady에서 NaverMap 객체를 받음
        mapFragment.getMapAsync(this);

3. onMapReady()가 호출되면 지도상에 마커를 표시합니다.

    @Override
    public void onMapReady(@NonNull NaverMap naverMap) {
        Log.d( TAG, "onMapReady");

        // 지도상에 마커 표시
        Marker marker = new Marker();
        marker.setPosition(new LatLng(37.5670135, 126.9783740));
        marker.setMap(naverMap);
    }

현재위치 표시하기

현재위치를 받기 위해서는 위치정보 사용을 위한 권한이 필요합니다. 그리고 구글에서 제공하는 FusedLocationSource를 이용해서 위치를 받아옵니다.

1. AndroidManifest.xml에 위치정보 사용을 위해 권한을 추가합니다.

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

2. FusedLocationSource를 사용하기 위해 앱 모듈의 build.gradle에 play-services-location 라이브러리를 추가합니다.

implementation 'com.google.android.gms:play-services-location:17.0.0'

3. MainActivity에서 FusedLocationSource를 생성합니다.

mLocationSource =
                new FusedLocationSource(this, PERMISSION_REQUEST_CODE);

4. onMapReady() 함수 내에서 NaverMap 객체를 받아서 위치소스를 지정합니다. 그리고 위치정보 사용을 위해서 권한이 정상적으로 있는지 확인합니다.

        // NaverMap 객체 받아서 NaverMap 객체에 위치 소스 지정
        mNaverMap = naverMap;
        mNaverMap.setLocationSource(mLocationSource);

        // 권한확인. 결과는 onRequestPermissionsResult 콜백 매서드 호출
        ActivityCompat.requestPermissions(this, PERMISSIONS, PERMISSION_REQUEST_CODE);

5. 권한 확인의 결과는 onRequestPermissionsResult() 에서 받을 수 있습니다. 권한이 정상적으로 부여가 되었다면 현재위치를 표시합니다.

setLocationTrackingMode() 함수를 이용해서 위치 추적 모드를 변경할 수 있습니다.

(None, NoFollow, Follow, Face)

    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);

        // request code와 권한획득 여부 확인
        if (requestCode == PERMISSION_REQUEST_CODE) {
            if (grantResults.length > 0
                    && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                mNaverMap.setLocationTrackingMode(LocationTrackingMode.Follow);
            }
        }
    }

전체 코드

MainActivity 전체 코드는 아래와 같습니다.

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback {

    private static final String TAG = "MainActivity";

    private static final int PERMISSION_REQUEST_CODE = 100;
    private static final String[] PERMISSIONS = {
            Manifest.permission.ACCESS_FINE_LOCATION,
            Manifest.permission.ACCESS_COARSE_LOCATION
    };

    private FusedLocationSource mLocationSource;
    private NaverMap mNaverMap;

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

        // 지도 객체 생성
        FragmentManager fm = getSupportFragmentManager();
        MapFragment mapFragment = (MapFragment)fm.findFragmentById(R.id.map);
        if (mapFragment == null) {
            mapFragment = MapFragment.newInstance();
            fm.beginTransaction().add(R.id.map, mapFragment).commit();
        }

        // getMapAsync를 호출하여 비동기로 onMapReady 콜백 메서드 호출
        // onMapReady에서 NaverMap 객체를 받음
        mapFragment.getMapAsync(this);

        // 위치를 반환하는 구현체인 FusedLocationSource 생성
        mLocationSource =
                new FusedLocationSource(this, PERMISSION_REQUEST_CODE);
    }

    @Override
    public void onMapReady(@NonNull NaverMap naverMap) {
        Log.d( TAG, "onMapReady");

        // 지도상에 마커 표시
        Marker marker = new Marker();
        marker.setPosition(new LatLng(37.5670135, 126.9783740));
        marker.setMap(naverMap);

        // NaverMap 객체 받아서 NaverMap 객체에 위치 소스 지정
        mNaverMap = naverMap;
        mNaverMap.setLocationSource(mLocationSource);

        // 권한확인. 결과는 onRequestPermissionsResult 콜백 매서드 호출
        ActivityCompat.requestPermissions(this, PERMISSIONS, PERMISSION_REQUEST_CODE);
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);

        // request code와 권한획득 여부 확인
        if (requestCode == PERMISSION_REQUEST_CODE) {
            if (grantResults.length > 0
                    && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                mNaverMap.setLocationTrackingMode(LocationTrackingMode.Follow);
            }
        }
    }
}

이상으로 네이버 지도에 마커와 현재위치를 표시하는 방법을 알아보았습니다.

읽어주셔서 감사합니다.

[네이버 지도 API] 시작하기(Client ID 발급, 앱에 지도 띄우기)

||| : ) ||| — Tue, 21 Apr 2020 20:27:07 +0900

[네이버 지도 API] 시작하기(Client ID 발급, 앱에 지도 띄우기)

네이버 지도를 사용하기 위해서는 네이버 클라우드 플랫폼 가입 후 Client ID를 발급받아야 합니다.

이번 포스팅에서는 네이버 클라우드 플랫폼 가입 / Client ID 발급과 이를 활용해서 네이버 지도를 띄우는 안드로이드 앱을 만들어 봅니다.

▼ 목 차 ▼

□ 네이버 클라우드 플랫폼 가입 / Client ID 발급

□ 안드로이드 앱에 네이버 지도 띄우기

Photo by andrekheren on Pixabay

네이버 클라우드 플랫폼 가입 / Client ID 발급

1. 네이버 클라우드 플랫폼 사이트로 이동합니다.

ncloud.com

NAVER CLOUD PLATFORM

cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification

www.ncloud.com

2. 상단 메뉴 중 서비스 -> Application Service의 Maps를 선택합니다.

3. 이용 신청하기 버튼을 선택합니다.

4. 계정이 없으므로 계정을 생성합니다.

5. 회원가입 완료 후 하단에 있는 결제 수단 등록을 선택합니다. 네이버 지도 같은 경우 무료로 이용을 할수 있지만 결제 수단을 등록하지 않으면 네이버 API를 사용할 수 없으므로 결제 수단을 등록합니다.

현재 이벤트가 진행되고 있어서 할인 크레딧도 신청해 봅니다.

6. 가입이 완료 되었으므로 3번 화면에서 이용 신청하기를 다시 선택합니다.

7. 콘솔로 이동이 되고 AI NAVER API 하단의 Application 메뉴를 선택합니다.

스크롤을 하단으로 내려 '+ Application 등록' 버튼을 선택합니다.

8. 이용약관에 동의하고 확인을 선택합니다.

9. 모바일앱을 개발할 예정이므로 Mobile Dynamic Map을 선택합니다.

스크롤을 아래로 내려 개발하고자 하는 앱의 패키지명을 입력하고 등록 버튼을 선택합니다.

10. 앱이 정상적으로 등록되었습니다. 앱 이름 아래에 인증정보 버튼을 누르면 Client ID를 확인할 수 있습니다.

안드로이드 앱에 네이버 지도 띄우기

1. 가이드 문서를 확인합니다.

Mobile Dynamic Map(v3) Android 시작하기

설명서

시작하기 네이버 지도 SDK를 사용하기 위해서는 네이버 클라우드 플랫폼에서 클라이언트 ID를 발급받고, 발급받은 ID를 SDK에 지정해야 합니다. 클라이언트 ID 발급 네이버 지도 모바일 SDK API를 사용하려면 다음과 같이 애플리케이션을 등록하고 클라이언트 ID를 발급받아야 합니다. 콘솔의 AI·Application Service > AI·NAVER API > Application에서 애플리케이션을 등록합니다.(자세한 방법은 Application 사용

docs.ncloud.com

2. 안드로이드 프로젝트를 생성하고 생성한 프로젝트에 의존성을 추가합니다.

- 프로젝트 수준 build.gradle에 저장소 추가

build.gradle (<project>/build.gradle)

allprojects {
    repositories {
        google()
        jcenter()

        // 네이버 지도 저장소
        maven {
            url 'https://navercorp.bintray.com/maps'
        }
    }
}

- App 수준 build.gradle에 의존성 추가

build.gradle (<project>/<app-module>/build.gradle)

dependencies {
    implementation 'com.naver.maps:map-sdk:3.7.1'
}

3. Client ID 설정

AndroidManifest.xml에 Client ID를 설정합니다.

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="YOUR_CLIENT_ID_HERE" />

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

4. xml에 네이버 지도 추가

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">

    <fragment android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/map"
        android:name="com.naver.maps.map.MapFragment" />

</androidx.constraintlayout.widget.ConstraintLayout>

5. 확인

네이버 지도가 정상적으로 출력됨을 확인할 수 있습니다.

이번 포스팅에서는 네이버 지도 API 사용을 위해 기본 준비사항 진행 및 간단하게 네이버 지도를 앱에 띄워보았습니다.

다음에는 네이버 지도에 마커를 표시하는 포스팅을 진행하겠습니다.

읽어주셔서 감사합니다.

ExtendedFloatingActionButton 사용 방법

||| : ) ||| — Wed, 1 Apr 2020 14:55:56 +0900

ExtendedFloatingActionButton 사용 방법

ExtendedFloatingActionButton 사용법에 대해서 알아보겠습니다. FloatingActionButton의 확장형으로 기존 FloatingActionButton이 이미지 하나로만 디스플레이 되었다면 ExtendedFloatingActionButton은 이미지와 텍스트를 같이 보여줄 수 있습니다. FloatingActionButton을 사용해서 비슷하게 구현할 수 있지만 ExtendedFloatingActionButton을 사용하면 그런 수고를 덜할 수 있겠죠. 아래 예제를 통해서 자세히 알아보도록 하겠습니다.

ExtendedFloatingActionButton 사용 예

좌 : ExtendedFloatingActionButton, 우 : FloatingActionButton(삼성 기본 문자 앱)

ExtendedFloatingActionButton과 FloatingActionButton을 비교해 보았습니다. 이미지와 텍스트를 함께 디스플레이 할 때는 ExtendedFloatingActionButton을 사용하고 이미지만 사용할 때는 FloatingActionButton을 사용하면 됩니다.

그럼 아래에서는 실제 코드를 통해 ExtendedFloatingActionButton을 어떻게 구현할 수 있는지 알아보겠습니다.

ExtendedFloatingActionButton 구현

1. Gradle에 라이브러리 추가

build.gradle (Module:app)

dependencies {
    implementation 'com.google.android.material:material:1.2.0-alpha05'
}

ExtendedFloatingActionButton을 사용하기 위해 Gradle에 라이브러리를 추가합니다. material components이므로 관련 라이브러리를 추가합니다.(현재 최신 버전이 1.2.0-alpha05입니다.)

2. 레이아웃 작성

activity_main.xml

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:theme="@style/MaterialTheme"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:text="Test"
        app:icon="@drawable/share" />

activity_main.xml에 ExtendedFloatingActionButton을 정의합니다. 저는 MainActivity에서 바로 사용을 하였는데 다른 곳에서 쓰실 분들은 관련 xml에 정의하시면 됩니다.

3. styles.xml에 theme 적용

styles.xml

<style name="MaterialTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

ExtendedFloatingActionButton 사용을 위해서 Material 테마 적용이 필수입니다. 위와 같이 MaterialComponents 테마를 적용해 주시고 Color값들은 원하는 값으로 적용을 하면 됩니다.

4. MainActivity 구현

MainActivity.java

ExtendedFloatingActionButton fab = (ExtendedFloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // to do
            }
        });

버튼이 클릭되었을 때 특정 동작을 수행할 수 있도록 구현하였습니다.

FloatingActionButton에 버튼도 같이 사용하고 싶으셨던 분들은 이제부터 ExtendedFloatingActionButton을 사용해서 간편하게 FloatingActionButton에 이미지와 텍스트를 디스플레이 하실 수 있습니다.

감사합니다:)