모든 휴대전화의 75%가 Android 휴대전화이고 모든 인터넷 사용자의 75%가 휴대전화를 사용하여 인터넷에 액세스합니다. 따라서 Android 앱에 대한 큰 시장이 있습니다.
freeCodeCamp.org YouTube 채널에 Android 앱 개발에 대한 집중 과정을 게시했습니다. 이 과정은 Android 앱 개발을 처음 접하는 경우에 적합합니다.
Rahul Pandey가 이 과정을 개발했습니다. Rahul은 Facebook의 Android 리드이자 Stanford University의 강사입니다.
이 과정에서는 팁 계산기를 구축하여 Android 개발을 배웁니다. 이 과정은 Android에 대한 사전 경험이 없다고 가정하며 결국에는 게시할 수 있는 앱을 갖게 될 것입니다.
XML로 사용자 인터페이스를 만드는 방법과 Kotlin 프로그래밍 언어를 사용하여 논리를 코딩하는 방법을 배웁니다. 이는 최신 Android 앱의 기본 구성 요소입니다.
또한 레이아웃에 ConstraintLayout을 사용하고 앱 로직에 두 개의 이벤트 리스너를 사용하는 방법을 배우게 됩니다. 기본 금액과 팁 비율을 입력하면 앱에서 팁과 합계를 계산합니다. 또한 팁 비율 애니메이션과 바닥글을 구현하여 앱을 더욱 독특하게 만들 것입니다.
아래의 과정을 시청하거나 freeCodeCamp.org YouTube 채널(1시간 시청)을 시청하세요.
대본
(자동 생성)
이 초급 과정에서는 Rahul Pandey에서 Android 앱을 만드는 방법을 배우게 됩니다.
Rahul은 Facebook의 Android 엔지니어이자 Stanford University의 강의입니다. 우리는 처음부터 Android 앱을 만들 것입니다. 빈 프로젝트로 시작하여 실제로 사용할 수 있는 것으로 끝내고 심지어 게시할 수도 있습니다. Play 스토어에서 기본 금액, 팁 비율을 입력할 수 있는 팁 계산기를 구축하고 앱에서 팁과 총 금액을 계산합니다.
우리는 kotlin 프로그래밍 언어를 사용하여 이 앱을 빌드할 것입니다.
따라서 프로그래밍에 대한 배경 지식이 있다고 가정하겠습니다.
하지만 kotlin을 처음 사용하는 경우 설명에 내가 만든 언어에 대한 12분짜리 입문서 링크를 남겨둘 것입니다.
저는 Rahho입니다. 한동안 YouTube와 YouTube 밖에서 Android를 가르쳤습니다.
준비가 되면 함께 이 앱을 구축해 봅시다.
이 동영상에서 다루고 싶은 세 가지가 있습니다.
첫째, 팁 계산기 애플리케이션의 주요 기능을 살펴보겠습니다.
두 번째로, Android를 구축하면서 다룰 핵심 Android 개념을 설명하겠습니다.
그리고 세 번째로, 저는 앱을 의도적으로 매우 단순하게 유지하고 있기 때문에 앱을 구축할 때 접하지 않을 몇 가지 Android 개념도 언급하고 싶습니다.
그리고 나중에 더 정교하거나 복잡한 Android 앱에서 다룰 것입니다.
앞에서 튜토리얼을 끝내고 완료하는 즉시 이 앱을 Google Play 스토어에 실제로 게시하는 방법에 대해 언급했습니다.
그게 바로 제가 한 일입니다.
따라서 우리가 만들려는 것을 시험해보고 싶다면 설명에 있는 링크를 확인하고 Android 기기 중 하나에서 다운로드하세요.
이제 우리가 구축할 주요 기능을 이해할 수 있도록 앱의 데모를 실행해 보겠습니다.
그래서 이 예에서는 매우 호화로운 단독 저녁 식사를 하러 갔고 $83.15를 썼습니다.
그리고 24%라는 꽤 관대한 팁을 남기고 사과는 팁과 총 금액을 자동으로 계산합니다.
계산을 조금 더 쉽게 하기 위해 기본 금액을 $100로 업데이트하지 않겠습니까.
그리고 보시다시피 나타나는 키보드는 숫자와 소수만 입력할 수 있도록 합니다. 여기에서 통화를 다루고 있기 때문에 의미가 있습니다.
그리고 식사 때 받은 서비스가 정말 만족스럽다면 팁 비율을 높여 최대 30%까지 올릴 수 있습니다.
그리고 여기서 두 가지 일이 발생합니다.
하나는 팁과 총 금액 계산을 30에서 동적으로 업데이트한다는 것입니다.
그리고 합계는 130입니다.
하지만 팁 비율에 대한 설명도 업데이트합니다.
그래서 훌륭함에서 놀라운 것으로 바뀌었고 더 밝은 녹색이 되었습니다.
반면에 서비스가 정말 불만족스러웠다면 팁을 0으로 줄 수도 있습니다.
그리고 우리는 그것이 좋지 않은 팁이라고 생각합니다.
그리고 색상이 어떻게 이 빨간색으로 업데이트되었는지 확인할 수 있습니다.
그런 다음 바닥글의 하단에는 앱을 개인화하는 방법이 있으므로 누가 앱을 만들었는지 또는 어디에서 왔는지 알 수 있습니다.
팁 계산기에서 다루는 개념은 모든 Android 앱의 기본 개념과 동일합니다.
먼저 UI를 만드는 것입니다.
모든 앱에는 사용자 인터페이스가 필요합니다.
여기에서 활용할 핵심 구성 요소는 다른 위젯을 포함하는 제약 조건 레이아웃입니다. 예를 들어 TextView 또는 Seekpart는 팁 백분율을 입력합니다.
둘째, 모든 흥미로운 Android 앱은 사용자 입력을 듣고 반응합니다.
따라서 앱에 데이터를 입력하는 두 가지 방법이 있습니다. 하나는 기본 금액을 입력하는 것입니다.
두 번째는 팁 비율입니다.
그리고 이를 바탕으로 UI를 적절하게 반응하고 업데이트해야 합니다.
셋째, Android에서 스타일 및 애니메이션의 표면을 거의 긁지 않을 것입니다. 일부 색상을 업데이트하는 방법과 팁 설명으로 애니메이션을 수행하고 색상을 동적으로 변경하는 방법도 보여드리겠습니다.
팁 계산기에서 다루지 않을 내용도 많이 있습니다.
이는 범위를 줄이고 이 앱을 정말 빠르고 간단하게 만드는 데 중요합니다.
구축합니다.
Android를 처음 사용하는 경우 먼저 여러 화면을 사용하지 않을 것입니다.
즉, Android에서 탐색이나 백 스택과 같은 작업을 처리할 필요가 없습니다.
그리고 실제로 우리가 가지고 있는 단일 화면은 관리해야 하는 목록 데이터의 종류가 없기 때문에 실제로는 매우 간단합니다.
둘째, 우리는 인터넷 네트워킹과 관련이 없습니다.
API나 서버와 대화를 시작하자마자 비동기 프로그래밍을 처리하고 해당 데이터를 관리해야 하기 때문에 상황이 상당히 복잡해집니다.
셋째, 우리는 또한 스토리지를 전혀 다루지 않으며 모든 것이 로컬 및 메모리에 있습니다.
따라서 우리는 데이터베이스, 디스크 또는 클라우드 어디에도 쓰지 않을 것입니다.
그리고 이 세 가지 모두 앱을 훨씬 더 간단하게 구축할 수 있게 해줍니다.
따라서 이것을 만들고 레스토랑에 들어갈 때 팁 반죽을 쉽고 문자 그대로 계산할 수 있기 때문에 당신의 이름이 앱에 표시될 것이기 때문에 매우 인기가 있을 것이라고 확신합니다.
그럼 다음 영상에서 뵙겠습니다.
이 비디오에서는 새로운 enter studio 프로젝트와 레이아웃 레이아웃으로 시작합니다. 특히 팁 계산기의 경우 왼쪽에서 4개의 텍스트 보기가 내용을 설명하는 8개의 보기를 레이아웃할 것입니다. 오른쪽에 표시되는 내용입니다.
가장 먼저 할 일은 완전히 새로운 enter studio 프로젝트를 만드는 것입니다.
그래서 저는 여기 스튜디오에서 실행하고 있고 arctic fox를 실행하고 있지만 최신 버전은 새 프로젝트를 탭해야 합니다.
빈 활동 템플릿을 선택하겠습니다.
이러한 다른 것들은 때때로 유용하지만 우리의 애플리케이션에 많은 것을 가져오기 때문에 혼란스러울 수 있습니다.
그래서 보통은 그냥 빈 활동으로 갑니다.
응용 프로그램을 Tippie라고 합시다.
패키지 이름은 일반적으로 도메인 이름이나 이메일 주소를 거꾸로 뒤집는 것입니다.
그대로 두고 위치를 선택하고 kotlin이 있는지 확인하고 이 언어를 선택하겠습니다.
그리고 API 21의 최소 SDK 버전을 선택하겠습니다.
이제 마침을 탭하겠습니다.
그리고 새로운 프로젝트가 있을 때마다 가장 먼저 하고 싶은 일은 시작 코드를 시도하고 실행하는 것입니다.
시작 코드를 실행할 수 없다면 이미 문제가 발생한 것입니다.
코드 작성을 시작하기 전에 알려진 좋은 위치에 있는지 확인합시다.
스튜디오에서 새 프로젝트를 만들 때 모든 것을 설정하는 데 시간이 걸립니다.
애플리케이션을 실행하려면 메뉴의 드롭다운으로 이동하여 에뮬레이터 또는 물리적 장치에 앱을 배포하도록 선택할 수 있습니다.
그래서 이전에 만든 에뮬레이터인 픽셀 2 API 29를 선택하고 녹색 삼각형을 눌러 에뮬레이터가 없는 경우 부팅한 다음 프로젝트를 빌드하고 이 에뮬레이터에 배포합니다.
Android Studio 하단에서 현재 진행 상황을 확인할 수 있습니다.
1~2분 정도 걸릴 수 있습니다.
하지만 완료되면 앱이 자동으로 기기로 전송되어 포그라운드로 이동합니다.
따라서 에뮬레이터에서 작업이 표시될 때까지 기다리기만 하면 됩니다.
좋아요.
이것은 유망해 보입니다.
빈 프로젝트의 기본값인 hello world 텍스트를 사용하여 개방형 에뮬레이터로 호출되는 애플리케이션을 보고 있습니다.
이것은 우리가 기본 프로젝트를 성공적으로 실행할 수 있다는 확신을 줍니다.
이너 스튜디오로 와서 스타터 파일에 대해 잠시 이야기해 보겠습니다.
그리고 실제로 main activity dot kotlin과 activity main dot XML과 관련된 두 개의 파일만 있기 때문에 매우 간단합니다. Android 용어로 액티비티를 하나의 화면을 나타내는 것으로 생각할 수 있습니다.
그래서 지금 우리가 가지고 있는 프로젝트에는 하나의 화면만 있습니다.
이를 메인 액티비티 또는 메인 화면이라고 합니다.
이것이 바로 여기 메인 액티비티라는 파일에서 정의하고 있는 비즈니스 로직입니다.
특히 시작 코드는 이미 재정의되고 있는 하나의 함수 또는 하나의 메서드를 제공합니다.
그리고 이를 onCreate라고 하며, Android 시스템은 화면을 생성할 때 애플리케이션이 시작될 때 이 함수를 자동으로 호출하거나 호출합니다.
그리고 여기서 중요한 줄은 9번째 줄 setcontentview r dot layout activity main입니다.
따라서 R은 자원을 의미합니다.
따라서 여기서 말하는 내용은 화면의 콘텐츠 또는 UI가 액티비티 기본 도트 XML에 정의된 리소스의 레이아웃 파일이어야 한다는 것입니다.
그리고 실제로 이것의 정의로 넘어가면 액티비티 기본 도트 XML로 직접 이동하는 것을 볼 수 있습니다.
그래서 여기에서 프로젝트 도구 창을 최소화하여 더 많은 공간을 확보하겠습니다.
또한 속성 창을 최소화합니다.
여기 애플리케이션에서 볼 수 있는 것과 정확히 일치하며 HelloWorld가 있는 빈 캔버스입니다.
특히 여기 구성 요소 트리를 보면 최소화될 수 있습니다.
하지만 여기를 탭하여 확장할 수 있습니다. 상위 요소가 제약 조건 레이아웃이라는 것을 볼 수 있습니다.
그리고 TextView 또는 레이블이라는 정확히 하나의 자식이 있습니다.
그리고 그것은 hello world 값을 갖는 속성을 가지고 있습니다.
이것이 실행 중인 애플리케이션에서 Hello World 텍스트를 보는 방법입니다.
이 비디오에서는 현재 애플리케이션의 UI를 구성하는 데만 관심이 있기 때문에 활동 기본 도트 XML에 모든 시간을 할애할 것입니다.
그리고 특히, 화면에 8개의 구성요소가 있을 것이므로 끝내고자 합니다.
왼쪽에는 4가지 다른 텍스트 보기가 있습니다. 텍스트를 생각할 수 있고 사용자가 편집할 수 없는 레이블을 원할 수 있습니다.
오른쪽에는 TextView에서 설명하는 실제 구성 요소가 있습니다.
따라서 상단에는 사용자가 청구 금액을 입력할 수 있는 편집 텍스트가 있고, 사용자가 팁 비율을 입력할 수 있는 탐색 표시줄이 있으며, 하단에는 팁에 대해 두 개의 추가 텍스트가 사용됩니다. 총 금액입니다.
레이아웃 구성을 시작하기 전에 한 가지 더 말씀드리고 싶은 것이 있습니다. 즉, UI에 대한 여러 관점이 있으며 기본적으로 보고 있는 것은 디자인 미리보기이며, 이는 실제로 에뮬레이터에 표시되는 것입니다. 또는 장치.
그러나 실제 기본 XML인 코드 탭으로 드롭다운할 수도 있습니다.
그래서 당신은 우리가 어떻게 제약 레이아웃을 가지고 있는지 볼 수 있고 한 자식은 디자인과 동일한 텍스트 보기를 봅니다.
분할은 둘 다 보는 것을 의미합니다.
그리고 우리는 대부분의 시간을 디자인 미리보기를 보는 데 할애할 것입니다.
그리고 우리가 할 수 있는 것은 팔레트로 이동하여 텍스트 보기와 같은 다른 구성 요소를 끌어다 놓거나 원하는 텍스트를 편집하는 것입니다.
그리고 다시 코드 탭에 표시됩니다.
따라서 디자인 미리보기에서 변경한 내용과 기본 XML 간에는 일대일 대응 관계가 있다는 점을 염두에 두십시오.
이제 디자인으로 돌아가서 모든 구성 요소를 삭제하여 자식이 없는 단일 제약 조건 레이아웃을 갖습니다.
문서에서는 평면 보기 계층 구조로 크고 복잡한 레이아웃을 만드는 방법으로 제약 조건 레이아웃을 설명합니다.
우리는 우리가 정의한 일련의 제약 조건을 통해 형제 보기와 상위 레이아웃 간의 관계를 설명할 수 있습니다.
이를 통해 내부 시스템은 다양한 크기의 휴대폰이나 태블릿에 UI를 우아하게 배치할 수 있습니다.
여기서 중요한 것은 중첩된 보기 그룹이 없다는 것입니다.
Android에서 매우 깊이 중첩된 뷰 계층 구조가 있는 경우 성능 저하가 많이 발생하고 이를 버벅거림 또는 UI 지연이라고 합니다.
따라서 제약 레이아웃을 사용하면 중첩된 보기 그룹 없이 복잡한 보기를 만들 수 있습니다.
팁 계산기 프로젝트로 돌아가서 여기 화면의 8개 보기를 모두 단일 상위 제약 조건 레이아웃으로 배치할 것입니다. 중첩된 보기 그룹이 없을 것입니다. 상위 제약 조건 레이아웃 내부의 선형 레이아웃입니다.
따라서 이전에 제약 조건 레이아웃으로 작업한 적이 없더라도 지금 잠시 시간을 내어 여기에서 서로에 대해 화면의 보기를 배치하여 평면 보기 계층 구조로 설명할 수 있는지 생각해 보세요.
Android Studio로 돌아가서 가장 먼저 할 일은 화면의 왼쪽 상단 구성요소를 나타내는 TextView를 끌어내는 것입니다. 이 구성요소는 기본 테이블을 나타내는 TextView입니다.
컴포넌트를 드래그할 때 가장 먼저 하는 일은 ID를 더 의미 있는 것으로 업데이트하는 것입니다.
따라서 이 TV 기본 레이블을 호출한 다음 텍스트를 기본으로 업데이트하겠습니다.
여기서 알 수 있는 것은 Android Studio가 이 TextView에 제약 조건이 없다고 불평한다는 것입니다.
따라서 시간 위치만 설계했으며 제약 조건을 추가하지 않는 한 런타임에 화면 왼쪽 상단인 위치 00으로 점프합니다.
그리고 이것이 Constraint 레이아웃의 요점입니다. 모든 구성 요소를 수직 및 수평으로 제한해야 합니다.
따라서 수직으로 TV 기반 레이블의 이 상단 앵커 포인트를 드래그하여 화면 상단으로 드래그합니다.
그런 다음 속성 탭에서 화면 상단에서 원하는 거리의 여백을 지정하고 상단에서 48이라고 하겠습니다.
마찬가지로 왼쪽 여백을 지정하려고 하므로 왼쪽 앵커 포인트를 드래그하여 상위 지점으로 드래그하고 이를 화면 왼쪽 끝에서 32dP 떨어진 위치로 지정합니다.
이제 오류가 사라진 것을 볼 수 있습니다. 이제 화면 왼쪽에서 사용하는 다른 세 개의 텍스트에 대해 동일한 프로세스를 수행할 것입니다.
기본 레이블 바로 아래에서 시작하는 것이 TV 팁 백분율 레이블입니다.
여기에 텍스트를 24%로 작성하십시오.
아래의 TextView는 TV 팁 레이블이 됩니다.
텍스트가 팁이 됩니다.
그리고 마침내 우리는 TV 토탈 레이블을 갖게 될 것입니다.
그리고 여기에 있는 텍스트는 전체가 됩니다.
따라서 이 모든 것을 수평 및 수직, 수직으로 제한해야 하는 동일한 문제가 있습니다. 우리가 할 일은 각 TextView의 상단 기준점을 가져와 그 위의 구성 요소로 드래그하는 것입니다.
그리고 우리는 32dP의 여백을 지정할 것입니다. 즉, 각 텍스트는 위의 텍스트 아래 32dP에서 32픽셀 떨어져 있어야 합니다. 그러면 상단 앵커 포인트를 드래그하고 그 위에 있는 텍스트의 하단 앵커 포인트로 드래그합니다. .
그리고 다시 동일한 작업을 32dP로 이러한 각 보기를 세로로 제한합니다.
이제 수평은 어떻습니까? 원하는 끝 상태로 돌아가면 여기에 수직선을 그리면 왼쪽에 있는 모든 구성 요소가 모두 오른쪽 끝에 정렬됩니다. 이 TV 기본 테이블에서 맨 위로 문자를 보냅니다.
이것이 우리가 수평으로 제한하는 방법입니다.
디자인 탭에서 실제로 이 작업을 수행할 수 있습니다. 정렬이라고 말한 다음 오른쪽 가장자리를 정렬할 수 있습니다.
하지만 코드 탭에서 이 작업을 수행하는 방법을 보여드리고 싶습니다.
따라서 앞서 언급한 것처럼 코드 탭을 열면 디자인 탭에서 변경한 모든 사항이 코드 탭에서 그에 상응하는 변경 사항이 적용됩니다.
그래서 지금 우리는 4개의 텍스처를 가지고 있고 그것이 바로 여기에서 볼 수 있는 것입니다. 우리가 말했듯이 1234가 있습니다. 우리가 이것을 수평으로 제한하지 않는다는 오류가 있습니다.
그래서 빨간색 밑줄이 있습니다.
수직 제약 조건은 여기에서 볼 수 있는 것입니다.
따라서 우리가 이 라인과 통신하는 것은 TV 팁의 상단에 있다는 것입니다. 백분율 레이블은 TV 하단과 정확히 같아야 합니다. 기본적으로 그 위에 있는 TextView가 무엇인지, 여백은 32dP입니다. 위 구성요소 아래 32픽셀이어야 합니다.
유사하게, 우리가 하고자 하는 것은 이 구성요소의 끝, TV 팁 백분율 레이블이 TV 기반 레이블의 끝과 같아야 함을 지정하는 것입니다.
그리고 이것을 왼쪽의 각 구성 요소에 적용하기를 원합니다. 그러면 해당 오류가 어떻게 사라졌는지 확인할 수 있습니다.
디자인 탭으로 돌아가면 이제 모든 것이 어떻게 정렬되어 있는지 확인할 수 있습니다.
여기서 한 가지 더 언급하고 싶은 것은 도구 네임스페이스가 디자인 미리보기를 렌더링할 목적으로만 사용된다는 것입니다.
이제 이러한 각 보기를 가로 및 세로로 완전히 제한했기 때문에 실제로 더 이상 필요하지 않습니다.
따라서 각각을 선택하여 삭제하겠습니다.
그리고 한 가지 더, 저는 일관된 스타일과 다양한 속성 이름의 순서를 유지하는 데 큰 관심을 갖고 있습니다.
예를 들어, 여기에 같은 줄이나 새 줄에 끝 꺾쇠 괄호가 있습니다.
자동으로 수정하려면 더블 시프트를 탭한 다음 포맷 변경을 검색하면 됩니다.
코드 서식을 다시 지정할 수 있는 바로 가기가 있습니다.
그렇게 하면 Android Studio가 전체 파일에서 문제를 수정하는 데 어떻게 도움이 되었는지 알 수 있습니다. 이 부분은 제가 훨씬 더 좋아합니다.
자, 이제 디자인 탭으로 돌아가 보겠습니다.
그리고 화면 오른쪽에 있는 구성 요소로 넘어가기 전에 한 가지 빠르게 디자인을 수정하고 싶습니다.
먼저 여기에서 텍스트를 조금 더 크게 만들고 싶습니다.
그래서 저는 텍스트 모양을 중간으로 만들 것입니다. 어떻게 더 크게 만들었는지 알 수 있습니다.
그리고 이 TV 팁 선물 라벨은 사용자가 실제로 선택한 선물의 가치를 나타내기 때문에 조금 독특합니다.
그래서 다른 것들과 조금 다르다는 것을 나타내기 위해 여기에서 텍스트를 굵게 표시하겠습니다.
멋지네요. 마음에 듭니다.
이제 화면 오른쪽 끝에 있는 네 가지 구성 요소에 대해 생각해 보겠습니다.
이것은 텍스트를 편집할 것입니다. 그 아래에는 탐색 막대가 있습니다.
그리고 그 아래에 두 개의 텍스트 보기가 있습니다.
이제 편집 텍스트를 드래그해 보겠습니다.
그리고 우리가 드래그할 것은 소수점 이하 자릿수를 말하는 것입니다.
그리고 이 모든 다른 편집 텍스트의 차이점은 실제로 매우 간단합니다.
단순히 입력 유형입니다.
우리는 통화를 다루기 때문에 숫자와 소수를 원합니다.
이 아래에 탐색 표시줄이 있습니다.
그런 다음 그 아래에서 TextView로 드래그합니다.
좋습니다. 여기에서 IDS를 보다 합리적인 것으로 업데이트하겠습니다.
따라서 기본 금액으로 호출됩니다.
다음은 탐색 막대 팁입니다.
그런 다음 TV 팁 금액이 있습니다.
그리고 마침내 우리는 TV 총액을 얻었습니다.
여기의 텍스트를 103 dot 11로 업데이트하겠습니다.
그리고 이것은 1996년이라고 했던 것 같습니다.
이러한 요소를 배치하기 전에 디자인을 약간 조정해 보겠습니다.
따라서 이 바닥 텍스처는 전체 앱에서 가장 중요한 부분입니다.
텍스트를 크게 만들겠습니다.
탐색 막대, 하드 코딩된 너비를 200dP로 지정하여 조금 더 넓게 만들겠습니다.
그리고 여기에 최대라는 속성이 있습니다. 이 속성은 탐색 막대가 보유할 최대 양입니다.
그러면 30이 됩니다.
최대 30%까지만 허용하기 때문입니다.
편집 텍스트의 경우 EMAS를 8로 설정하겠습니다. 즉, 이 편집 텍스트의 너비는 몇 자이고 8이면 충분합니다. 텍스트 크기를 다음과 같이 늘릴 것입니다. 24 SP.
그런 다음 마지막으로 여기에 힌트를 추가하거나 사용자가 이 편집 텍스트의 용도를 알고 있는 청구 금액인 자리 표시자를 추가하겠습니다.
이제 이러한 위치를 지정하는 방법에 대해 생각해 보겠습니다.
따라서 세로로 아래쪽 두 텍스트를 세로로 정렬해야 하므로 두 텍스트를 모두 선택한 다음 세로 가운데를 정렬하겠습니다.
그리고 그 위에 있는 것들도 마찬가지입니다.
그런 다음 팁 백분율과 탐색 막대에 대해서도 유사합니다.
디자인 탭에서 실제로 추가된 제약 조건의 멋진 미리보기를 볼 수 있는 방법을 볼 수 있습니다.
청구 금액에 대해.
수평으로 제한하는 방법을 생각해 봅시다. 왼쪽에 있는 해당 텍스트에서 32dP 떨어져 있습니다.
그리고 수평으로, 오른쪽에 있는 다른 모든 구성요소, 이 하단 3개는 청구액 편집 텍스트의 왼쪽 끝에 정렬되어야 합니다. 거기에서 모두 선택해야 하며 왼쪽 가장자리가 모두 정렬되어야 한다고 지정하겠습니다.
좋은 것 같습니다.
이제 우리가 해야 할 일은 여기로 마우스를 가져가면 편집 텍스트에 대한 수직 제약 조건이 누락된다는 것입니다.
그렇게 하려면 코드 탭으로 이동하겠습니다.
다음은 기본 금액의 편집 텍스트입니다.
수직 위치를 전달하는 방법은 이 요소의 상단을 TV 기본 테이블인 왼쪽 상단 뷰의 상단으로 고려하고 마찬가지로 이 뷰의 하단도 TV 기본 테이블의 하단이어야 한다는 것입니다.
따라서 수직으로 가운데에 맞을 것입니다.
따라서 디자인 탭으로 돌아가면 이제 오류가 사라진 것을 볼 수 있습니다.
그리고 이러한 제약 조건이 어떻게 생겼는지 시각적으로 확인할 수 있습니다.
다시 디자인 탭으로 돌아가면 모든 것을 완전히 제한하기 때문에 이 도구 네임스페이스가 더 이상 필요하지 않습니다.
코드를 정말 빠르게 다시 포맷해 봅시다.
그리고 한 가지 더 하고 싶은 것은 이것이 필요하지는 않지만 프로그램을 실행하기 위한 목적으로 개발자 정보를 위해 주석으로 레이블을 지정하는 것입니다.
왼쪽에서 본 모습입니다.
그런 다음 TextView의 경우 편집 텍스트부터 시작하여 오른쪽에 있는 보기입니다.
이것이 어떻게 생겼는지 보는 것이 맞습니다.
좋습니다.
우리가 예상하는 것처럼 이것은 디자인 미리보기에서 보는 것과 거의 정확히 일치합니다.
여기서 수정하거나 개선하고 싶은 유일한 점은 사용자가 실제로 아무 것도 입력하지 않았음에도 불구하고 팁과 총액에 대한 값이 이미 있다는 것이 조금 이상하다는 것입니다.
그리고 이것이 바로 도구 이름 공간의 목적이 바로 앞에서 이야기한 것입니다.
그래서 내가 할 일은 해당하는 텍스트 보기를 선택하는 것입니다.
그리고 여기에 텍스트가 있는 대신 아래로 스크롤하겠습니다.
이것을 렌치 텍스트 영역으로 이동하겠습니다.
이것이 바로 도구 이름 공간입니다.
그래서 이것을 도구 텍스트로 옮기겠습니다.
그리고 마지막으로 여기도 마찬가지입니다.
그 작업을 보여주기 위해 코드 탭으로 돌아가서 Android 텍스트 속성 대신 이제 TV 팁 백분율 레이블을 보면 이제 도구 텍스트 속성이 됩니다.
마지막으로 앱을 실행하면 초기 레이아웃에 미치는 영향을 살펴보겠습니다.
굉장합니다. 꽤 좋아 보입니다.
이 동영상이 제약 조건 레이아웃의 힘에 대해 잘 이해하셨기를 바랍니다.
우리가 한 일을 보여주기 위해 보여드릴 수 있는 한 가지는 화면에 이러한 8개의 보기가 있으면 단일 부모가 아니라 모두 위치한다는 것입니다.
그리고 왼쪽 상단의 TextView를 드래그하면 모든 것이 그에 따라 이동합니다. 이는 모든 보기를 서로에 대해 상대적으로 제한하는 정말 좋은 방법입니다.
따라서 다음 비디오의 작업은 실제로 기본 활동에 비즈니스 로직을 연결하여 입력에 반응하고 총 팁을 계산할 수 있도록 하는 것입니다.
다음 영상에서 만나요.
지난 비디오에서는 팁 계산기 응용 프로그램의 화면에 8가지 보기를 배치했습니다.
이 비디오에서는 실제로 앱을 대화형으로 만들기 위한 비즈니스 로직을 추가하고 싶습니다. 사용자가 시트 바를 문지르면 팁 백분율 레이블을 업데이트할 수 있기를 바랍니다.
그리고 그들이 기본 금액을 입력할 때 우리는 그 값을 취하고 총 금액에서 팁을 계산하려고 합니다.
특히 제출 버튼이 없다는 것을 알 수 있습니다.
따라서 사용자가 기본 금액이나 팁 비율을 변경하는 즉시 변경 사항이 있을 때 팁과 총 금액을 동적으로 계산하려고 합니다.
따라서 첫 번째 연습으로 사용자가 탐색 막대의 값을 변경하는 즉시 백분율 레이블을 업데이트할 수 있기를 바랍니다.
따라서 가장 먼저 할 일은 화면에서 실제로 데이터를 읽거나 수정할 수 있어야 하는 뷰에 대한 참조를 얻는 것입니다.
그리고 실제로 화면에는 팁 백분율 레이블에 대해 관심을 갖는 다섯 가지 위젯이 있고 화면 오른쪽에 있는 구성 요소에 대한 모든 것입니다.
그래서 우리 스튜디오에서 이 작업을 수행하는 방법은 여기 각 구성 요소에 대해 많은 변수를 선언하는 것입니다.
예를 들어 편집 텍스트가 있는데 기본 금액이 됩니다.
그리고 이것의 유형은 유형 편집 텍스트가 될 것입니다.
그러나 여기서 구문에 대해 너무 걱정하지 마십시오.
혼란스럽다면 우리가 말하는 것은 개인 변수뿐입니다.
생성자가 아닌 onCreate 메소드 내부에서 초기화할 것이기 때문에 늦은 초기화입니다. 이것이 늦은 초기화가 변수이고 기본 마운트에서 호출하는 이유입니다. 변수는 ID의 이름과 정확히 동일합니다.
이제 onCreate에서.
콘텐츠 보기 설정 후, 베이스 마운트에서 ID 및 베이스 금액으로 보기를 찾습니다.
이제 화면의 다른 4개 구성요소에 대해 이 작업을 반복할 것입니다.
그래서 검색바 팁이 있습니다.
여기에서 그 유형은 탐색 막대입니다.
그리고 TV 팁 비율이 있습니다.
그것이 당신에게 문자가 될 것입니다.
그리고 두 개의 텍스트가 더 있습니다.
하나는 TV 팁 금액, 다른 하나는 TV 총 금액입니다.
이제 onCreate 내부에서 이 모든 것에 대한 참조를 꺼내겠습니다. 그리고 마침내 총 금액이 생겼습니다.
따라서 우리의 목표로 돌아가서 가장 먼저 하고 싶은 일은 사용자가 시트 바를 스크럽할 때 해당 사용자 입력의 변경 사항에 대한 알림을 받은 다음 이를 나타내도록 TV 팁 백분율 레이블을 업데이트하는 것입니다.
따라서 실제로 일관성을 위해 여기에서 변수 이름을 TV 2% 레이블로 업데이트하겠습니다.
그리고 시트 바의 변경 사항에 대한 알림을 받는 방법은 시트 바에 리스너를 추가하는 것입니다. 검색 바 변경 리스너에 설정된 검색 바 팁 점이 표시됩니다.
그리고 이제 시트바가 바뀌었을 때 어떤 일이 일어나야 하는지 연예인에게 알려야 합니다.
여기 구문은 object, seek bar.on, seekbar, change listener를 말하는 것입니다.
그리고 여기 안에 이 클래스를 정의할 것입니다.
그리고 오늘 입력하면 이를 구현하는 데 도움이 됩니다. 이 빨간색 밑줄이 물체 아래에 표시되어 빨간색 전구를 탭하고 기구 구성원을 탭할 수 있습니다.
이 정의를 준수하기 위해 재정의해야 하는 세 가지 메서드가 있습니다. 탐색 표시줄, 변경 리스너.
NRC가 이를 도와줄 것입니다.
너무 걱정하지 마세요.
다시 말하지만, 구문이 혼란스럽습니다.
여기서 세부 사항은 이 인터페이스를 구현하는 익명 클래스를 정의하고 있다는 것입니다.
따라서 여기 정의로 이동하면 이것이 우리가 재정의한 세 가지 메서드가 있는 공용 인터페이스임을 알 수 있습니다.
이제 이러한 각 메서드가 호출될 때 어떤 일이 발생해야 하는지 시스템에 알리는 것이 우리의 일입니다.
그리고 실제로 터치 추적 시작 또는 터치 추적 중지에 대해서는 별로 신경 쓰지 않습니다.
여기에서 두 개의 회비를 제거하고 구현을 비워 두겠습니다.
UI를 업데이트하기 전에 먼저 Android에 로그 문을 추가하여 진행 상황을 보다 쉽게 파악해 보겠습니다.
그래서 나는 i에 바로 로그온할 것이고 이것은 두 개의 매개변수를 취하는 방법입니다.
첫 번째는 문자열입니다. 이것을 택이라고 하고 나중에 정의하겠습니다.
그리고 두 번째 것은 메시지 또는 로그 문인 문자열이기도 합니다.
그리고 메서드 이름인 progress 변경과 탐색바의 현재 값인 progress를 말씀드리겠습니다.
이제 이 태그를 정의하겠습니다. 클래스의 맨 위로 올라가 private const Val 태그를 정의하겠습니다.
그리고 여기서 관례는 어떤 종류의 로깅이 있을 때마다 태그가 일반적으로 클래스 이름이 된다는 것입니다.
좋습니다. 시도해 보겠습니다.
그래서 여기서 아이디어는 사용자가 스크러빙을 하고 있음을 의미하는 시트 바에서 진행 상황이 변경될 때마다 로그가 출력하는 logcat에 표시된 현재 값을 인쇄한다는 것입니다.
그러니 logcat을 여십시오.
에뮬레이터를 엽니다.
그리고 우리가 관심을 갖고 있는 로그는 저희 애플리케이션의 로그입니다. 이는 조용하고 차분하며 rk Pandey Tippi이며 log.io가 정보 수준 로그를 나타내는 것이기 때문에 정보 수준 로그에만 관심이 있습니다.
또한 주요 활동인 이 특정 태그가 있는 로그에만 관심이 있습니다.
이제 주요 활동을 필터로 추가해 보겠습니다.
그리고 여기에서 시트 바를 변경할 때 한 줄의 logcat 출력을 얻는 방법을 볼 수 있으며 이는 시트 바의 현재 표시기가 정확히 무엇을 표시하는지 나타냅니다.
따라서 최대값까지 올라가면 예상한 대로 30이 표시되고 완전히 다시 내려오면 0이 됩니다.
이제 UI를 업데이트하겠습니다.
특히, 우리는 탐색 막대의 현재 진행 상황을 나타내기 위해 TV 팁 백분율 레이블을 업데이트하려고 합니다.
그래서 우리는 TV 2%라고 하고 그 속성에 레이블을 붙이고 진행률과 동일하게 설정합니다.
그러나 실제로 우리는 진행 상황이 int가 아닌 문자열로 표현되기를 원합니다.
또한 그 뒤에 퍼센트 기호를 연결하려고 합니다.
그래서 우리는 kotlin에서 문자열 보간을 수행하는 방식인 달러 기호 진행률을 말할 것입니다.
log 문에서 했던 것과 유사하고 끝에 퍼센트 기호를 추가합니다.
시도해 봅시다.
따라서 탐색 막대를 스크러빙할 때 TV 팁 백분율 레이블이 탐색 막대의 현재 진행 상황과 일치하여 업데이트되는 방식을 볼 수 있습니다. 이는 훌륭합니다.
그러나 여기서 한 가지 개선 사항은 처음에는 레이블에 팁 백분율을 표시하지 않는다는 것입니다.
이를 수정하기 위해 상수를 하나 더 정의해 보겠습니다. 이를 초기 팁 존재라고 부를 것입니다.
따라서 개인 const Val 초기 팁이 있고 이를 15로 설정합니다.
So initially, the default tip is going to be 15%.
So with that diviner the constant before we do anything in the listener, great in the onCreate method, will they seek bar tip dot progress is equal to initial tip percent.
And we also want to update the label appropriately.
So we'll say TV tip percent label dot text is equal to initial tip percent, with the percent sign after.
Now when we run the app, we should see instead of the blank 2% label, we should see 15% like we do and the progress bar indicator is exactly in the middle of the width of the whole seat bar.
Next, similar to how we are able to react to changes in the seat bar, we also want to be able to react to changes In the edit text, so there's a analogous method on the ET base mount we'll call add text change listener.
And the syntax is similar, we pass in an object here, which is an anonymous class is an implementation of the text watcher.
And we'll have Enter to help us once again, there are some methods that we have to override.
So I'm going to tap on that red light bulb and implement the members three, override all them.
And then similar to before, the only thing that we care about is after text change, I'm going to go ahead and delete the body of implementation here.
Just to get a better understanding of what's happening here.
Again, let's add a log statement after text changed.
dollar sign ups.
Alright, let's try it.
So dollar sign s is the parameter passed in.
And that is actually what the user is typing at that moment.
Run this, let's open up logcat once again.
Alright, so like before, if I modify the seek bar, you can see that it is changing appropriately.
And then if I add the value into the edit text, you can see 800 it is being updated appropriately in log.
Two quick notes.
First, I sometimes see students will get tripped up when they invoke functions in kotlin.
The MSG that you're seeing when we call log into it is a hint from energy about what that parameter represents.
So if you actually type MSG, that will lead to a compile error.
So let's make sure you don't do this.
Second, I want to demystify what the object keyword means.
So the object expressions like we're using twice so far, are examples of how to create anonymous classes, which are one time use classes that are commonly used to implement interfaces.
So we have both text watcher and on seekbar change listener as interfaces defined by the Android system.
And these methods that we're overriding will automatically be invoked for us when the user takes the appropriate action on the underlying edit text or seekbar.
So now we have all the ingredients in place to actually make this app functional.
Whenever the Edit Text changes, I'm going to call a method called compute, tip, and total.
And this is actually what will take the values from the edit text and seekbar and then update the tip and total amount appropriately.
So this method doesn't exist yet.
But again, let's leverage the utility of Android Studio and have to create this function for us inside of main activity.
And there are a couple things that have to happen in this method.
First, we want to get the value of the basic tip present.
Second, we'd like to compute the tip in total.
And third, we need to update the UI to show those values.
So to get the value of the basic tip, that's pretty straightforward, we just look at the edit text at base amount, grab the text, and then call to string on it.
And then on a string, we know it's going to be a currency like a decimal, so we'll call to double on it, in order to turn it into a number that we can work with.
And we'll call this base amount.
And then similarly, for the 2%, we want to get the value of the progress on the seat bar, this attribute called progress, and that'll be saved in a variable that I'm going to call tip percent.
Quite Next, we want to compute the tip and total amount.
So the tip amount is going to be the base amount, times the tip percent divided by 100.
So for example, if the base amount is $100, I went for $100 meal, and the tip percent is 20, then I expect the tip amount to be $20.
So that'd be 20 divided by 100 is 20% times 100.
And that gives me $20.
So that'll be tip amount.
And then we have the total amount, and the total amount is simply going to be the base amount, plus the tip amount.
Okay, finally, we need to update the UI.
And again, this turns out to be pretty straightforward, because we have a reference to the two text views which show the tip and total amount, which is TV tip amount, and we're going to set the text attribute there to be tip amount.
And this is going to throw an error because tip amount is a number it's a double right, but we actually require something called a car sequence.
And to give it a car sequence, we can just call to string on this.
And then similarly, we call we need to say TV total amount is that the text attribute here to be the total amount to string.
And this should be a plus sign.
Wait, this is the whole brain of our application.
So if we run this, then what we're doing is anytime that the edit text value has changed, we're going to call this method and we should be updating the UI To have the correct amount for the tip and total amount, right, so we have 15%.
For the tip, if I add in $100 here, then you do see immediately we get the correct tip and total computation.
And we would like to have the same logic get executed if I change the seat bar, the 2%.
And that turns out to be really easy, because we've abstracted all the logic away into this method.
So I'm going to call compute tip and total, right here in on progress changed.
Alright, so if you try this now, we should have a pretty functional app.
So similar to before, if I put in 100.
Here, we do correctly compute 115.
And if I change the percent, you can see it does appropriately updated.
Alright, so this is working actually pretty well.
But there are two things that I think are incorrect or could be improved.
But just take a moment right now think about what are two improvements that you could do to the app that we have right now try playing around with it, see if you can identify any issues.
Okay, so the first improvement that we can make is actually a bug.
So notice what will happen now if I Backspace on the base amount, so that there's nothing there, so you can see the app actually crashed.
So if we look at logcat, let's take a look at what actually was the error.
So I'm going to scroll up to the very top of the stack trace.
And you can see here we have a number format exception.
This is the important part, there's an empty string.
And and the stack trace tells us exactly where the issue happened is a main activity line 58.
And so the issue that's happening is that when the edit text has an empty value, then it doesn't make sense to try and convert an empty string into a double.
The very first thing we shouldn't be doing here is actually checking if at base amount done dot txt, if that is empty, then we need to do an earlier turn.
Additionally, we should be clearing out the values of the TV tip and total amount.
Because if the edit text is empty, that means there's nothing to tap on.
And we should be showing nothing for those two textures, then we call return, so that none of the rest of the function will get executed.
The second improvement we'll make is about formatting the output of the tip and total amount.
So it's not that noticeable when we enter in 100 for the base amount.
But if we add in 100.9, then you can see the total amount becomes very long and unwieldy.
Because we're dealing with currency, we should really be mandating that there are exactly two decimal points in both a tip and total amount.
And the way we'll do that is right here, instead of just calling to string, we want to format the string before we put it into the TextView.
So the way we do that is by using this format method.
So we define the format like this percent.to F, which means we only want two numbers after after the decimal point dot format.
And we pass in the tip amount.
And then similarly for the total amount, a percent dot two f format.
Let's try it.
For hopefully now, in this scenario, we should actually end up with 116.04 instead of this very long decimal that had happened 100 right away, you can see instead of only having one decimal point now we have two.
And the true test is when I type in 100.9.
Now, the display of this is way better, we have 116.04 rather than that huge decimal which becomes unreadable.
So at this point, we have a very functional app, what we've done is gotten references to the relevant views on layout, and then added listeners to the seekbar into the Edit Text because there's no Submit button.
Anytime there's any change in the seekbar or the edit text, we are dynamically computing the tip and total amount and updating the views appropriately in this compute tip a total amount.
So in the next video, what I want to show you is some style improvements along with a way to personalize it and add a really cool animation.
So I'll see you in the next one.
At this point, we're done with the implementation of our tip calculator.
In this video, our goal is to add some color animation and personalization into the app.
So we'll start off with the footer at the bottom.
A lot of apps or websites have this where it says you know made with love in California or made with love by this person.
So we're gonna start off by adding a text at the bottom of the screen.
So let's go into enter studio, open up the activity main dot XML and scroll down to the bottom and we're going to drag out one TextView here.
Let's give it an ID of TV footer.
And then the text will be made with love by raw and of course you can personalize however you want to constrain it.
We're going to have this horizontally be in the center of the screen.
So we're gonna add a left and right Straight to make it centered, and then we're gonna make it 32 dP from the bottom of the screen.
I also want to add a couple different style tweaks here.
First is all caps, I want to make everything here capitalized.
And I want to change the font to be sans serif, condensed, slight.
And then finally, I want to make this a little bit larger text, appearance, medium weight.
And finally, I want to change the love word with the emoji.
And you can either add this to your keyboard, or another way to do this is if you Google for heart emoji, then the first result that comes up, gives me an option here to copy and paste the emoji.
paste that in.
And it looks a little bit weird in the preview, but it does show up properly when you render it in the design.
And if we check it out in the app.
Awesome, that looks pretty good.
The next thing I like to do is a bit the color scheme.
So we move away from these default status bar color color primary in this background white.
So let me explain where these colors are coming from.
There's one very important file that must exist in every single Android app.
And that's called the Android manifest file.
So if we open that up, then this file describes all the different components of your application, the permissions, for example, if your app needs internet permission, and much more.
And the important line for us is right here on line 11, where we're describing the theme of our application, and this is a file that automatically gets created for us when we create the empty project.
So I'm going to jump to the definition here.
And you'll see you have two different files here, one for normal theme and one for the night theme.
And the one that we're currently looking at is normal, I'm gonna open that up.
And this is where we're getting the colors for the default application that we have.
So in order to update the colors, we're going to have to define new colors and then replace them here, we can take a look at where this file lives by hitting this option, select Open File, and we can see that it lives inside of resources, values, and themes directory.
And the colors are also defined inside of colors XML in the values directory.
And each of the colors is defined as a hexadecimal value, purple, 500, and so on.
So our job is let's figure out what colors we want, and then add them here.
And then we'll reference them inside of the themes XML file.
So in order to figure out what colors you want, there's a couple different options, I'll show you what I typically do if you go to color.adobe.com.
There's this really nice tool where you figure out what kind of color scheme you want.
So there's a couple different options here, you can pick the color harmony rule, analogous monochrome chromatic triad, and so on.
Once you're happy with something, then you can scroll down and grab the hexadecimal values here.
So I did this exercise already.
And here are the colors I came up with, I'm going to have one which is called primary blue, darker blue and background blue.
So let's go ahead into the colors XML and define these for the first one is going to be called primary blue now has this value.
The next one is background blue, or the next one's a darker blue.
And then finally, we have background blue.
So now in themes XML, I updated the color primary to be primary blue.
And then I updated the primary variant to be darker blue, and that's gonna be the color of the status bar.
And then finally, in order to have a background color on the whole app, I'm going to add one more attribute here, which is called background color, Android color background.
And that is going to be the background blue that we have.
Let's try it.
Awesome, that looks great.
So we're getting very close now, to the desired end state, we have the footer, and we have the customized color.
The last thing I want to talk about is this animation on the tip description.
And here's actually what this looks like.
As the user is scrubbing, we will dynamically update the color of that word that's used to describe the current tip percentage, and it'll go from Red if it's a very bad tip to a really bright green if it's really good tip.
Not only that, but we're also going to be changing that word or that adjective used to describe the tip percentage.
So it gives the user some really nice interactive feedback about what kind of tip they're leaving.
Alright, so the first thing we'll do is just added text you need the seek bar and increase the vertical distance between these two texts.
So close out these other editor windows because we don't need to look at them again.
In activity main.
What we'll do is first increase the distance between the 24% which is the 2% label and the TV tip label.
Let's increase the margin here to be 56 Next, let's drag out one more text you.
And we'll call this TV tip description.
And then the text should be empty, because that will depend on the initial tip percent, which is set programmatically.
But to get a better sense of what this might look like, we are going to use a tools namespace and to say acceptable here.
That looks good.
And now we need to position this horizontally and vertically.
So vertically, it's going to be right below the seek bar tip bar, and we'll add a margin here of maybe eight dp.
And then we want these two to be horizontally aligned.
So horizontal centers, great.
And you can see how it added the left and right constraints.
So it'll be right in the middle.
And you can see the error also went away.
So now back in MainActivity, we need to get a reference to that TextView.
So let's say the ID here was TV tip description.
So when I say TV tip description, get a reference to it here.
And every time the C part is changed, that is where we have the potential now, to update the language on that text, you want to have one more method here called update tip description.
And let's have Enter to help us to create this because this method doesn't exist yet.
And one thing we'll do actually is as a parameter into the update tips, description method, I'd like to pass in the progress and progress.
And again, energy video can now help us to add this as a parameter into the function that we have defined.
The tap that red light bulb, and have Enter to help us to add the parameter and all I did here is added a parameter.
And instead of calling it progress, I'm going to call it tip percent.
And it's I've typed in.
So now the idea is that based on the value of tip percent, we'd like to be able to say TV tip description dot txt, and we'd like to be able to set it to be something like good.
And of course, this good will change based on the value.
And the construct in kotlin.
To be able to decide a value of something based on a set of conditionals is called when which is similar to a switch in Java.
So I'm going to save our tip description is equal to when and then depending on the value of 2% will take certain action.
So if tip description, if 10% is between zero and nine, then the string should be poor.
If it's between 10 and 14, we'll call it acceptable 15 and 19, it'll be good.
And when it's between 20 and 24.
It'll be great.
And there should be one extra period in here.
And finally, anything else meaning that the value is above 24 then we will say amazing.
And so now instead of using good here, we will say tip description.
And finally before we test this out one more thing I want to do is at the very beginning, when we are setting up our screen, which is you know in the onCreate method, as soon as we get all the references to each of the views, we also would like to call that method update tip description right here with the initial tip percent just so that language is always going to be in sync with what we start out with.
Let's try it.
So now hopefully we should see a text you right underneath the seekbar and the text on in that text you should change according to what we have selected through the seekbar.
Okay, this looks promising already because initially the 2% is 15, which means we fall into this branch of the wine statement and that means that the value should be good.
That's good.
And then if we bring it down to zero, we get poor and if we go all the way up, we should get amazing which we do.
One quick thing want to do is back in activity main.
I want to set the font weight of this to be bold.
The textile should be bold to make it stand out a little bit more.
Finally, the last thing I want to show is this interactive color animation where if the user picks a very good tip we show bright green and if the user picks a bad dip, then we show a red color indicating something went wrong.
Coming back into Android Studio in minute tivity kotlin update tip description is where we're going to add the logic for updating the color based on the tip percent.
The question is how do we dynamically compute a color based Based on an integer, the way we'll do this is through a concept called interpolation, which is actually a fancy word for something which is conceptually quite simple.
If I tell you I'm running 100 miles, and I'm 75% of the way done, then you would tell me that I'm roughly at the 75 mile mark.
And what you're doing in your head is linear interpolation, you're assuming I'm going at a constant speed starting at zero ending at 100.
Therefore, I'm at 75 miles, the same thing is exactly applying here.
Every color can be represented as integer.
So if I'm tipping 20%, then we're two thirds of the way between the very worst color and the very best color, which are two integers.
And all we need to do is some simple math in order to compute what exactly that color value is, for the tip description.
The first thing we'll do is define the color for the worst invest tip.
So open up colors, XML, and let's add in color words tip color, best tip and I picked a red and green color like we talked about, we're going to paste these values in for color worse and color best.
So we have these defined.
And now our job is simply to do some math at zero, we should show worst tip at 30, we should show the best tip and everything else is some value in between.
and this turns out to be so common that Android actually has something called a RGB evaluator to help with this, where we represent colors as integer values.
A stands for alpha, RGB is red, green, blue, and it will help compute the color for us.
So coming back into main activity, we're going to define a color.
And that will be coming from argb evaluator dot evaluate.
And then this takes in three parameters.
One is the fraction of where are we on this progress bar between zero and 32nd is a start value, which is the very worst color and the end value is the best color.
So the fraction is simply going to be the tip percent, which is the perimeter pass 10 divided by the maximum amount of tip which is 30.
And that's going to be seapark tip dot max.
Next, we need to get the very worst color.
And the way we'll do that is context compat dot get color pass in this which is referring to the context and then the actual color that we just defined in the colors XML, which is color first.
And then finally, we're going to provide the best color here.
One issue you'll notice is that there's a type mismatch, we require a float, but we found integer.
So by default, because both the numerator and denominator are integers, we're gonna do some sort of truncation, which we don't want.
So the way to handle this is to cast one of the numerator or denominator to a float value.
And that will resolve that.
So now we have this color, all we need to do is set the color on the tip description text, set text color, with the color.
And finally before before we try this, we need to cast the result of the evaluate function call to be an integer, because we know the values we're computing between are integers, so the color should be an int.
And now we should be able to compile and run this just fine.
So two things should happen now.
One is we should bold the text.
And second, there should be a color applied immediately.
And based on what present we pick, it should adapt as well.
Right, this looks good.
So initially, we have a color right in between the green and red.
And if I go all the way down to zero, you can see how it changes to red.
And if I scrub upward to the best tip, which is 30, you can see how it slowly transforms from red to green.
I like that a lot just because it feels much more interactive and dynamic now compared to what we had before.
Alright, so let's give it one last try.
We're going to put in $9 here for the bill.
And then as I scrub, you can see how everything updates appropriately.
If I Backspace, there's no crash, I can enter in another amount.
And everything works just as we expect.
Awesome.
So if this is your first ever entered app, that's amazing.
Congratulations.
Let me know in a comment.
The reason I really liked the tip calculator, there's so many ways you can extend this basic project that we have to make it more interesting.
So a couple ideas I had number one, you could split the bill by n people.
So you could imagine that you go out to dinner with the number of people you add in three or four and then you should divide that total amount by three or four in order to make it easy for everyone to pay a certain amount.
Second, you could add a button or some sort of component which allows the user to round the final amount up or down.
So there's no need to deal with change.
And of course, there's a lot more that you could do in terms of design or color updates.
So what I recommend now is complete any number of extensions, other ones that we talked about, or something that you came up with on your own, and then you can more or less publish exactly what you have on the Play Store.
I won't walk through that here, but I'll leave a video in the description where I talk about how to do that and I hope that you use This tip calculator as a starting point in your journey as an Android developer and you build many more apps in the future.
If you enjoyed this, please drop a like and comment.
We'd love to hear from you.
Thanks so much for watching and I will see you in the next one.
Bye