Bảy mươi lăm phần trăm tất cả điện thoại là điện thoại Android và bảy mươi lăm phần trăm tất cả người dùng Internet chỉ truy cập Internet bằng điện thoại của họ. Vì vậy, có một thị trường lớn cho các ứng dụng Android.
Chúng tôi vừa xuất bản khóa học về phát triển ứng dụng Android trên kênh YouTube freeCodeCamp.org. Khóa học này hoàn hảo nếu bạn là người mới bắt đầu phát triển ứng dụng Android.
Rahul Pandey đã phát triển khóa học này. Rahul là Trưởng nhóm Android tại Facebook và là giảng viên tại Đại học Stanford.
Trong khóa học này, bạn sẽ học cách phát triển Android bằng cách xây dựng một máy tính tiền boa. Khóa học này giả định không có kinh nghiệm trước với Android và cuối cùng, bạn sẽ có một ứng dụng nào đó mà bạn có thể xuất bản.
Bạn sẽ học cách tạo giao diện người dùng với XML và cách viết mã logic bằng ngôn ngữ lập trình Kotlin. Đây là những nền tảng cơ bản của bất kỳ ứng dụng Android hiện đại nào.
Bạn cũng sẽ học cách sử dụng ConstraintLayout cho bố cục và hai trình nghe sự kiện cho logic ứng dụng. Sau khi bạn nhập số tiền cơ bản và tỷ lệ phần trăm tiền boa, ứng dụng sẽ tính tiền boa và tổng số tiền boa cho bạn. Bạn cũng sẽ triển khai hoạt ảnh phần trăm mẹo và chân trang để làm cho ứng dụng của chúng tôi độc đáo hơn.
Xem khóa học bên dưới hoặc trên kênh YouTube freeCodeCamp.org (xem 1 giờ).
Bản ghi
(được tạo tự động)
Trong khóa học dành cho người mới bắt đầu này, bạn sẽ học cách tạo ứng dụng Android từ Rahul Pandey.
Rahul là một kỹ sư Android tại Facebook và giảng dạy tại Đại học Stanford, chúng tôi sẽ xây dựng một ứng dụng Android ngay từ đầu, chúng tôi sẽ bắt đầu với một dự án trống và kết thúc với một cái gì đó bạn thực sự có thể sử dụng và thậm chí xuất bản lên Play Store, chúng tôi sẽ xây dựng một máy tính tiền boa, nơi bạn có thể nhập số tiền cơ bản, tỷ lệ phần trăm tiền boa và ứng dụng sẽ tính toán tiền boa và tổng số tiền cho bạn.
Chúng tôi sẽ xây dựng ứng dụng này bằng ngôn ngữ lập trình kotlin.
Vì vậy, tôi sẽ giả sử bạn có một số kiến thức nền tảng về lập trình.
Nhưng nếu bạn là người mới sử dụng kotlin, tôi sẽ để lại một liên kết trong phần mô tả cho bài viết sơ lược nhanh 12 phút về ngôn ngữ tôi đã tạo.
Tôi là Rahho, tôi đã dạy Android trên YouTube và ngoài YouTube được một thời gian.
Vì vậy, khi bạn đã sẵn sàng, hãy bắt đầu và cùng nhau xây dựng ứng dụng này.
Có ba điều tôi muốn đề cập trong video này.
Đầu tiên, tôi muốn giới thiệu qua các tính năng chính của ứng dụng máy tính tiền boa.
Thứ hai, tôi sẽ giải thích các khái niệm Android cốt lõi mà chúng tôi sẽ đề cập trong khi xây dựng nó.
Và thứ ba, vì tôi chủ ý giữ ứng dụng, rất đơn giản, tôi cũng muốn nêu ra một số khái niệm Android mà chúng ta sẽ không gặp phải khi xây dựng nó.
Và những thứ đó sẽ được đề cập trong các ứng dụng Android phức tạp hoặc phức tạp hơn sau này.
Tôi đã đề cập trước đó về cách bạn thực sự có thể tiếp tục và xuất bản ứng dụng này trên Cửa hàng Google Play ngay sau khi anh ấy hoàn thành, hoàn thành hướng dẫn.
Và đó chính xác là những gì tôi đã làm.
Vì vậy, nếu bạn muốn thử những gì chúng tôi sẽ xây dựng, hãy xem liên kết trong phần mô tả và tải xuống trên một trong các thiết bị Android của bạn.
Vì vậy, hãy làm một bản demo của ứng dụng để chúng tôi có thể hiểu được các tính năng chính mà chúng tôi sẽ xây dựng.
Vì vậy, trong ví dụ này, tôi đã đi ăn tối một mình rất xa hoa và tôi đã chi 83,15 đô la.
Và tôi để lại một khoản tiền boa khá hào phóng là 24% và quả táo sẽ tự động tính tiền boa và tổng số tiền.
Vì vậy, chỉ để làm cho phép toán dễ dàng hơn một chút, tại sao chúng ta không cập nhật số tiền cơ bản thành $ 100.
Và những gì bạn có thể thấy là, bàn phím xuất hiện chỉ cho phép chúng tôi nhập số và số thập phân, điều này có ý nghĩa vì chúng tôi đang xử lý tiền tệ ở đây.
Và nếu tôi cảm thấy thực sự hài lòng với dịch vụ mà tôi nhận được trong bữa ăn, tôi có thể tăng tỷ lệ tiền boa và đưa nó lên mức tối đa là 30%.
Và hai điều xảy ra ở đây.
Một là chúng tôi tự động cập nhật tính toán mẹo và tổng số tiền ở mức 30.
Và tổng là 130.
Ngoài ra, chúng tôi cập nhật mô tả về tỷ lệ phần trăm tiền boa đó.
Vì vậy, đã đi từ tuyệt vời đến tuyệt vời và cũng trở thành màu xanh lá cây tươi sáng hơn.
Mặt khác, nếu tôi thực sự không hài lòng với dịch vụ, tôi có thể nhận tiền bằng không.
Và chúng tôi coi đó là một mẹo tồi.
Và bạn có thể thấy màu đã được cập nhật thành màu đỏ này như thế nào.
Và ở cuối trang ở đây, chúng tôi cũng có một cách để cá nhân hóa ứng dụng để bạn có thể nói bạn là ai đã tạo ra nó hoặc bạn đến từ đâu.
Các khái niệm mà chúng tôi đề cập trong công cụ tính tiền boa là những khái niệm cơ bản đối với mọi ứng dụng Android.
Đầu tiên là tạo giao diện người dùng.
Mọi ứng dụng đều cần có giao diện người dùng.
Và thành phần cốt lõi mà chúng tôi sẽ tận dụng ở đây là một bố cục ràng buộc, sẽ chứa các tiện ích con khác, ví dụ:TextView hoặc seekpart, nhập phần trăm tip.
Thứ hai, mọi ứng dụng Android thú vị sẽ lắng nghe và phản ứng với đầu vào của người dùng.
Vì vậy, chúng tôi có hai cách nhập dữ liệu trong ứng dụng của mình, một là nhập số tiền cơ bản.
Và thứ hai là tỷ lệ tiền boa.
Và dựa vào đó, chúng tôi cần phản ứng và cập nhật giao diện người dùng một cách thích hợp.
Và thứ ba, chúng tôi sẽ hầu như không làm trầy xước bề mặt tạo kiểu và hoạt ảnh trên Android, tôi sẽ chỉ cho bạn cách cập nhật một số màu sắc và cũng chỉ cho bạn cách tạo hoạt ảnh với mô tả mẹo và thay đổi màu sắc của nó một cách linh hoạt.
Ngoài ra còn có rất nhiều thứ mà chúng tôi sẽ không đề cập đến trong máy tính tiền boa.
Và điều quan trọng là để giảm phạm vi và làm cho ứng dụng này thực sự nhanh chóng và đơn giản.
Để xây dựng.
Nếu bạn là người mới sử dụng Android, trước tiên, chúng tôi sẽ không có nhiều màn hình.
Điều đó có nghĩa là chúng tôi không phải xử lý những thứ như điều hướng hoặc ngăn xếp phía sau trong Android.
Và trên thực tế, màn hình đơn mà chúng tôi có thực sự khá đơn giản, bởi vì chúng tôi không có bất kỳ loại dữ liệu danh sách nào mà chúng tôi cần quản lý.
Thứ hai, chúng tôi không liên quan gì đến kết nối mạng trên internet.
Ngay sau khi bạn bắt đầu nói chuyện với một API hoặc máy chủ, mọi thứ trở nên phức tạp hơn một chút vì bạn phải xử lý lập trình không đồng bộ và quản lý dữ liệu đó.
Và thứ ba, chúng tôi cũng không xử lý chút nào với bộ nhớ, mọi thứ sẽ là cục bộ và trong bộ nhớ.
Vì vậy, chúng tôi sẽ không ghi vào cơ sở dữ liệu hoặc vào đĩa hoặc lên đám mây ở bất kỳ đâu.
Và cả ba điều này đều giúp cho việc xây dựng ứng dụng trở nên đơn giản hơn nhiều.
Vì vậy, tôi chắc chắn rằng khi bạn xây dựng cái này và bạn bước vào một nhà hàng, bạn sẽ trở nên siêu nổi tiếng vì bạn sẽ có thể tính toán mẹo dễ dàng và theo đúng nghĩa đen Tên của bạn sẽ có trên ứng dụng.
Vì vậy, tôi sẽ gặp bạn trong video tiếp theo.
Trong video này, chúng ta sẽ bắt đầu với dự án studio hoàn toàn mới và bố trí các chế độ xem Đối với máy tính tiền boa của chúng ta, đặc biệt, chúng ta sẽ bố trí 8 chế độ xem trong đó 4 chế độ xem văn bản từ bên trái sẽ mô tả nội dung về những gì đang được hiển thị ở bên phải.
Điều đầu tiên chúng tôi sẽ làm là tạo một dự án studio hoàn toàn mới.
Vì vậy, tôi có trong studio của chúng tôi đang chạy ở đây, và tôi đang chạy cáo bắc cực, nhưng bất kỳ phiên bản gần đây nào cũng nên nhấn vào dự án mới.
Và tôi sẽ chọn mẫu hoạt động trống.
Những cái khác này đôi khi hữu ích, nhưng chúng mang lại nhiều rắc rối cho ứng dụng của chúng tôi, điều này có thể gây nhầm lẫn.
Vì vậy, thông thường, tôi sẽ chỉ sử dụng hoạt động trống.
Hãy gọi ứng dụng của chúng tôi là Tippie.
Tên gói, thông thường những gì tôi sẽ làm là tôi sẽ lấy tên miền hoặc địa chỉ email của mình và lật ngược lại.
Vì vậy, tôi sẽ để nguyên như vậy và sau đó chọn một vị trí, đảm bảo bạn có kotlin, chọn ngôn ngữ này.
Và tôi sẽ chọn phiên bản SDK tối thiểu của API 21.
Bây giờ tôi sẽ nhấn vào kết thúc.
Và điều đầu tiên tôi muốn làm bất cứ khi nào tôi có một dự án hoàn toàn mới, chỉ đơn giản là thử và chạy mã khởi động.
Bởi vì nếu chúng tôi thậm chí không thể chạy mã khởi động, thì có gì đó đã xảy ra lỗi.
Hãy đảm bảo rằng chúng ta đang ở một nơi tốt được biết đến trước khi bắt đầu viết bất kỳ mã nào.
Khi chúng tôi tạo một dự án mới trong studio của mình, chúng tôi sẽ mất một khoảng thời gian để thiết lập mọi thứ.
Để chạy ứng dụng của mình, chúng tôi có thể đi tới trình đơn thả xuống và chọn triển khai ứng dụng của mình trên trình giả lập hoặc thiết bị vật lý.
Vì vậy, tôi sẽ chọn pixel hai API 29, là một trình giả lập mà tôi đã tạo từ trước, nhấn vào hình tam giác màu xanh lá cây đó để khởi động trình mô phỏng của chúng tôi nếu nó chưa tồn tại, sau đó xây dựng và triển khai dự án của chúng tôi cho trình mô phỏng này.
Và bạn sẽ thấy trạng thái ở cuối Android Studio để xem tiến trình hiện tại.
Quá trình này có thể mất một hoặc hai phút.
Nhưng khi hoàn tất, ứng dụng sẽ tự động được gửi đến thiết bị và đưa lên nền trước.
Vì vậy, tất cả những gì chúng ta cần làm là đợi cho đến khi chúng ta thấy một số hành động trên trình mô phỏng.
Được rồi, tuyệt.
Điều này có vẻ đầy hứa hẹn.
Chúng tôi đang thấy một ứng dụng được gọi là trình giả lập mở với văn bản hello world, ứng dụng này là một ứng dụng mặc định cho một dự án trống.
Và điều này giúp chúng tôi tin tưởng rằng chúng tôi có thể chạy thành công dự án cơ bản.
Hãy vào studio bên trong và dành một phút ngắn ngủi để nói về các tệp khởi động.
Và thực ra, nó khá đơn giản bởi vì chỉ có hai tệp mà chúng ta sẽ quan tâm đến hoạt động chính dot kotlin và hoạt động chấm chính XML, bạn có thể coi một hoạt động trong thuật ngữ Android là đại diện cho một màn hình.
Vì vậy, với dự án mà chúng tôi có, hiện tại, chúng tôi chỉ có một màn hình.
Và đó được gọi là hoạt động chính hoặc màn hình chính.
Và đó là logic kinh doanh mà chúng tôi đang xác định ngay tại đây trong tệp được gọi là hoạt động chính.
Cụ thể, mã khởi động cung cấp cho chúng ta một hàm hoặc một phương thức đã bị ghi đè.
Và đó được gọi là onCreate, hệ thống Android sẽ tự động gọi hoặc gọi hàm này khi ứng dụng của chúng ta đang khởi động khi nó đang tạo màn hình của chúng ta.
Và dòng quan trọng ở đây là dòng chín setcontentview r dot layout activity main.
Vì vậy, R là viết tắt của tài nguyên.
Vì vậy, những gì chúng tôi đang nói ở đây là nội dung hoặc giao diện người dùng trên màn hình của chúng tôi phải là tệp bố cục trong tài nguyên, được xác định tại XML dot main hoạt động.
Và thực sự, nếu chúng ta chuyển sang định nghĩa của điều này, chúng ta có thể thấy điều đó chuyển trực tiếp đến XML dot main của hoạt động.
Vì vậy, tôi sẽ thu nhỏ cửa sổ công cụ dự án ở đây để có thêm không gian cho bản thân.
Và điều đó cũng thu nhỏ ngăn thuộc tính.
Vì vậy, đây chính xác là những gì chúng ta đang thấy trong ứng dụng, chỉ là một khung trống với HelloWorld.
Và đặc biệt, nếu bạn nhìn vào cây thành phần ở đây, nó có thể được thu nhỏ cho bạn.
Nhưng bạn có thể mở rộng nó bằng cách nhấn vào đây, chúng ta có thể thấy phần tử mẹ là thứ được gọi là bố cục ràng buộc.
Và nó có chính xác một phần tử con được gọi là TextView hoặc một nhãn.
Và nó có một thuộc tính có giá trị hello world.
Và đó là cách chúng tôi nhìn thấy dòng chữ Hello World trong ứng dụng đang chạy của chúng tôi.
Trong video này, chúng tôi sẽ dành toàn bộ thời gian cho hoạt động chính của dot XML, bởi vì hiện tại chúng tôi chỉ quan tâm đến việc xây dựng giao diện người dùng cho ứng dụng của mình.
Và đặc biệt, đây là cách chúng tôi muốn kết thúc, chúng tôi sẽ có tám thành phần trong màn hình.
Ở bên trái, chúng ta có bốn chế độ xem văn bản khác nhau, bạn có thể nghĩ về một văn bản, bạn muốn có một nhãn mà người dùng không thể chỉnh sửa.
Ở bên phải, chúng tôi có các thành phần thực tế đang được TextView mô tả.
Vì vậy, chúng tôi có một văn bản chỉnh sửa ở trên cùng, cho phép người dùng nhập số tiền trong hóa đơn, chúng tôi có một thanh tìm kiếm, cho phép người dùng nhập tỷ lệ phần trăm tiền boa và sau đó hai văn bản khác được sử dụng ở dưới cùng cho tiền boa và tổng số tiền.
Có một điều nữa tôi muốn nêu ra trước khi chúng ta bắt đầu xây dựng bố cục của mình, đó là có nhiều góc nhìn về giao diện người dùng của chúng tôi, những gì chúng tôi đang xem theo mặc định là bản xem trước thiết kế, đó là những gì thực sự sẽ hiển thị trên trình mô phỏng của bạn hoặc thiết bị.
Nhưng bạn cũng có thể thả xuống tab mã, đây là XML cơ bản thực sự.
Vì vậy, bạn có thể thấy cách chúng tôi có bố cục ràng buộc và sau đó một con xem chế độ xem văn bản giống như thiết kế.
Chia tách có nghĩa là bạn xem xét cả hai.
Và phần lớn thời gian của chúng tôi sẽ dành cho việc xem trước bản thiết kế.
Và những gì chúng ta có thể làm là vào bảng màu và kéo và thả các thành phần khác nhau như chế độ xem văn bản hoặc chỉnh sửa văn bản mà chúng ta muốn.
Và một lần nữa, điều đó sẽ được trình bày trong tab mã.
Vì vậy, chỉ cần ghi nhớ rằng có sự tương ứng 1-1 giữa bất kỳ thay đổi nào bạn thực hiện trong bản xem trước thiết kế và XML cơ bản.
Vì vậy, bây giờ, hãy quay lại thiết kế, xóa bất kỳ thành phần nào chúng ta có, để chúng ta có bố cục ràng buộc duy nhất không có con.
Tài liệu mô tả bố cục ràng buộc như một cách để tạo bố cục lớn và phức tạp với hệ thống phân cấp chế độ xem phẳng.
Chúng tôi có thể mô tả mối quan hệ giữa các chế độ xem anh chị em và bố cục mẹ thông qua một tập hợp các ràng buộc mà chúng tôi xác định.
Và điều đó cho phép hệ thống bên trong bố trí giao diện người dùng của chúng tôi một cách duyên dáng trên các điện thoại hoặc máy tính bảng có nhiều kích thước.
Và điều quan trọng ở đây là không có nhóm chế độ xem lồng nhau.
Trên Android, nếu bạn có hệ thống phân cấp chế độ xem lồng nhau rất sâu, điều này dẫn đến giảm hiệu suất rất nhiều và chúng tôi gọi là jank hoặc độ trễ giao diện người dùng.
Và do đó, bố cục ràng buộc cho phép chúng tôi tạo các chế độ xem phức tạp mà không cần có các nhóm chế độ xem lồng nhau.
Trở lại với dự án máy tính tiền boa, chúng ta sẽ bố trí tất cả tám chế độ xem trên màn hình ở đây trong một bố cục ràng buộc cha duy nhất, sẽ không có nhóm chế độ xem lồng nhau, điều này tốt nhất chúng ta có thể đạt được, không có bố cục tương đối hoặc bố cục tuyến tính bên trong bố cục ràng buộc chính của chúng tôi.
Vì vậy, ngay cả khi bạn chưa từng làm việc với bố cục ràng buộc trước đây, hãy dành một chút thời gian ngay bây giờ để suy nghĩ về cách bạn có thể định vị các chế độ xem trên màn hình ở đây so với nhau, để chúng tôi có thể mô tả nó trong một hệ thống phân cấp chế độ xem phẳng.
Quay lại Android Studio, điều đầu tiên chúng ta sẽ làm là kéo ra một TextView đại diện cho thành phần trên cùng bên trái của màn hình, đó là TextView đại diện cho bảng cơ sở.
Điều đầu tiên tôi làm bất cứ khi nào tôi kéo ra bất kỳ thành phần nào là cập nhật ID để có ý nghĩa hơn.
Vì vậy, tôi sẽ gọi đây là nhãn cơ sở TV và sau đó cập nhật văn bản thành cơ sở.
Và điều bạn sẽ nhận thấy ở đây là Android Studio đang phàn nàn rằng TextView này thiếu các ràng buộc.
Vì vậy, nó chỉ có các vị trí thời gian được thiết kế, nó sẽ nhảy đến vị trí 00, ở trên cùng bên trái của màn hình trong thời gian chạy trừ khi chúng ta thêm các ràng buộc.
Và đây là toàn bộ điểm của bố cục ràng buộc, chúng ta phải ràng buộc mọi thành phần theo chiều dọc và chiều ngang.
Vì vậy, theo chiều dọc, những gì chúng ta sẽ làm là kéo điểm neo trên cùng này của nhãn dựa trên TV và kéo nó lên đầu màn hình.
Và sau đó trong tab thuộc tính, chúng tôi sẽ chỉ định lề của khoảng cách chúng tôi muốn nó từ đầu màn hình và tôi sẽ nói 48 ở trên cùng.
Tương tự, chúng tôi muốn chỉ định một lề bên trái, vì vậy chúng tôi sẽ kéo điểm neo bên trái và kéo nó đến vị trí chính và chỉ định điều này là 32 dP tính từ đầu bên trái của màn hình.
Vì vậy, bây giờ bạn có thể thấy lỗi đã biến mất, chúng ta sẽ thực hiện quy trình tương tự bây giờ cho ba văn bản khác được sử dụng ở phía bên trái của màn hình.
Bắt đầu với nhãn ngay bên dưới nhãn cơ sở là nhãn phần trăm tip TV.
Tác giả văn bản ở đây là 24%.
TextView bên dưới sẽ là nhãn mẹo TV.
Văn bản sẽ là mẹo.
Và cuối cùng chúng ta sẽ có nhãn tổng số TV.
Và văn bản ở đây sẽ là toàn bộ.
Vì vậy, chúng tôi có cùng một vấn đề là chúng tôi phải giới hạn tất cả những thứ này theo chiều ngang và chiều dọc, chiều dọc, những gì chúng tôi sẽ làm là lấy điểm neo trên cùng cho mỗi TextView và kéo nó vào thành phần phía trên nó.
Và chúng tôi sẽ chỉ định lề 32 dP có nghĩa là mỗi văn bản bạn nên sống 32 pixel ở 32 dP bên dưới văn bản bạn ở trên nó, điều này sẽ kéo điểm neo trên cùng và kéo nó xuống điểm neo dưới cùng của văn bản phía trên nó .
Và một lần nữa, hãy làm điều tương tự 32 dP ràng buộc từng chế độ xem này theo chiều dọc.
Bây giờ còn về chiều ngang, nếu chúng ta quay lại trạng thái kết thúc mong muốn, điều bạn sẽ nhận thấy là nếu chúng ta vẽ một đường thẳng đứng ở đây, tất cả các thành phần ở phía bên trái, tất cả chúng sẽ được căn chỉnh ở đầu bên phải của nó. văn bản hàng đầu cho bạn bảng cơ sở TV này.
Đó là cách chúng tôi muốn giới hạn chúng theo chiều ngang.
Và chúng tôi thực sự có thể làm điều này trong tab Thiết kế, bạn có thể nói căn chỉnh và sau đó căn chỉnh các cạnh bên phải.
Nhưng tôi muốn chỉ cho bạn cách thực hiện việc này trong tab mã.
Vì vậy, nếu tôi mở tab mã, như chúng ta đã nói, mọi thay đổi bạn thực hiện trong tab Thiết kế đều có một thay đổi tương ứng trong tab mã.
Vì vậy, ngay bây giờ chúng ta có bốn kết cấu và đó chính xác là những gì chúng ta có thể thấy ở đây, chúng ta có 1234, giống như chúng ta đã nói, hiện tại có một lỗi là chúng ta không giới hạn các kết cấu này theo chiều ngang.
Đó là lý do tại sao chúng tôi có gạch chân màu đỏ này.
Ràng buộc theo chiều dọc là những gì bạn có thể thấy ở đây.
Vì vậy, những gì chúng tôi đang giao tiếp với dòng này là ở đầu nhãn phần trăm tip TV phải chính xác bằng phần cuối của TV cơ bản là TextView phía trên nó, cùng với biên độ 32 dP, có nghĩa là bạn muốn nó thấp hơn 32 pixel so với thành phần phía trên nó.
Vì vậy, tương tự, những gì chúng tôi muốn làm là chỉ định rằng phần cuối của thành phần này, nhãn phần trăm đầu TV phải bằng phần cuối của nhãn dựa trên TV.
Và chúng tôi muốn điều này được áp dụng cho từng thành phần ở phía bên trái Vì vậy, với điều đó, bạn có thể thấy lỗi đó đã biến mất như thế nào.
Và nếu chúng ta quay lại tab Thiết kế, bạn có thể thấy mọi thứ hiện được căn chỉnh như thế nào.
Một điều nữa tôi muốn nói ở đây là không gian tên công cụ chỉ được sử dụng cho mục đích hiển thị bản xem trước thiết kế.
Bởi vì chúng tôi hiện đã hạn chế hoàn toàn từng chế độ xem này theo chiều ngang và chiều dọc, chúng tôi thực sự không cần điều này nữa.
Vì vậy, tôi sẽ chọn từng thứ này và xóa nó.
Và một điều nữa là tôi khá quan tâm đến việc có một phong cách nhất quán và thứ tự các tên thuộc tính khác nhau.
Vì vậy, ví dụ:ở đây chúng ta có dấu ngoặc nhọn kết thúc trên cùng một dòng hoặc dòng mới.
Và để tự động sửa lỗi đó cho chúng tôi, tôi có thể nhấn đúp shift, sau đó chỉ cần tìm kiếm định dạng lại.
Và có một phím tắt để định dạng lại mã.
Nếu tôi làm điều đó, thì bạn có thể thấy Android Studio đã giúp chúng tôi sửa lỗi như thế nào trên toàn bộ tệp, điều này tôi thích hơn rất nhiều.
Được rồi, hãy quay lại tab Thiết kế.
Và trước khi chúng ta chuyển sang thành phần ở bên phải màn hình, một điều tôi muốn thực hiện chỉ là một vài chỉnh sửa thiết kế nhanh chóng.
Đầu tiên, tôi muốn làm cho văn bản lớn hơn một chút ở đây.
Vì vậy, tôi sẽ làm cho văn bản xuất hiện trung bình, bạn có thể thấy điều đó đã làm cho nó lớn hơn như thế nào.
Và sau đó, nhãn giới thiệu mẹo TV này hơi độc đáo, vì nó đại diện cho giá trị của những gì người dùng thực sự đã chọn.
Vì vậy, để chỉ ra rằng nó hơi khác một chút so với những cái khác, tôi sẽ tô đậm văn bản ở đây.
Tuyệt, tôi thích điều đó.
Bây giờ chúng ta hãy nghĩ về bốn thành phần ở cuối bên phải của màn hình.
Đây sẽ là văn bản chỉnh sửa, bên dưới chúng ta có thanh tìm kiếm.
Và bên dưới chúng ta có hai chế độ xem văn bản.
Vì vậy, hãy kéo ra một văn bản chỉnh sửa.
Và cái chúng ta sẽ kéo là cái cho biết một số thập phân.
Và sự khác biệt giữa tất cả các văn bản chỉnh sửa khác nhau này thực sự khá đơn giản.
Nó chỉ đơn giản là kiểu đầu vào.
Bởi vì chúng tôi đang xử lý tiền tệ, chúng tôi muốn các số và số thập phân trong của chúng tôi.
Dưới đây, chúng ta sẽ có một thanh tìm kiếm.
Và bên dưới đó, chúng tôi sẽ kéo ra TextView.
Được rồi, hãy cập nhật IDS tại đây để trở nên hợp lý hơn.
Vì vậy, đây sẽ được gọi là số tiền cơ bản.
Tiếp theo, chúng ta có đầu thanh tìm kiếm.
Sau đó, chúng tôi có số tiền boa TV.
Và cuối cùng chúng ta có tổng số tiền trên TV.
Hãy cập nhật văn bản ở đây thành 103 chấm 11.
Và điều này, tôi nghĩ chúng tôi đã nói năm 1996.
Hãy thực hiện một số chỉnh sửa thiết kế trước khi định vị các phần tử này.
Vì vậy, những kết cấu dưới cùng này, đây là phần quan trọng nhất của toàn bộ ứng dụng.
Vì vậy, tôi sẽ làm cho văn bản lớn.
Thanh tìm kiếm, tôi sẽ chỉ định chiều rộng được mã hóa cứng là 200 dP để làm cho nó rộng hơn một chút.
Và sau đó, có một thuộc tính ở đây được gọi là Max, là số tiền tối đa mà thanh seekbar sẽ giữ.
Và đó sẽ là 30.
Bởi vì chúng tôi chỉ cho phép tối đa 30%.
Đối với văn bản chỉnh sửa, tôi sẽ đặt EMAS là tám, có nghĩa là văn bản chỉnh sửa này sẽ rộng bao nhiêu ký tự và tám là đủ cho chúng tôi, tôi sẽ tăng kích thước văn bản lên. 24 SP.
Và cuối cùng, tôi sẽ thêm một gợi ý ở đây hoặc một trình giữ chỗ, đó là số tiền trong hóa đơn để người dùng biết văn bản chỉnh sửa này dùng để làm gì.
Bây giờ chúng ta hãy nghĩ về cách định vị chúng.
Vì vậy, theo chiều dọc, hai văn bản dưới cùng, bạn nên căn chỉnh theo chiều dọc, vì vậy tôi sẽ chọn cả hai văn bản và sau đó căn chỉnh các tâm theo chiều dọc.
Và tương tự cho những cái trên.
Và tương tự đối với phần trăm tiền boa và thanh tìm kiếm.
Và bạn có thể thấy cách trong tab Thiết kế, chúng tôi thực sự có thể xem bản xem trước tuyệt vời này về các ràng buộc được thêm vào.
Đối với số tiền trong hóa đơn.
Hãy nghĩ về cách hạn chế nó theo chiều ngang, nó sẽ cách văn bản tương ứng mà bạn ở phía bên trái là 32 dP.
Và theo chiều ngang, tất cả các thành phần khác ở phía bên phải, ba thành phần dưới cùng này phải được căn chỉnh về phía cuối bên trái của văn bản chỉnh sửa số tiền hóa đơn, phải chọn tất cả chúng và tôi sẽ chỉ định các cạnh bên trái phải được căn chỉnh.
Điều đó có vẻ tốt.
Điều duy nhất chúng ta phải làm bây giờ là nếu chúng ta di chuột qua đây, chúng ta đang thiếu một ràng buộc dọc đối với văn bản chỉnh sửa.
Vì vậy, để làm điều đó, tôi sẽ đi đến tab mã.
Đây là văn bản chỉnh sửa với số tiền cơ bản.
Và cách chúng ta sẽ giao tiếp vị trí theo chiều dọc là xem xét phần trên cùng của phần tử này với phần trên cùng của chế độ xem trên cùng bên trái, đó là một bảng đế TV và tương tự. Phần dưới cùng của chế độ xem này cũng phải là cuối bảng đế TV.
Vì vậy, nó sẽ nằm ngay giữa theo chiều dọc.
Vì vậy, nếu bạn quay lại tab Thiết kế, bạn có thể thấy rằng bây giờ các lỗi đã biến mất.
Và bạn có thể thấy trực quan những ràng buộc này trông như thế nào.
Nếu bạn quay lại tab Thiết kế, một lần nữa, chúng tôi không cần vùng tên công cụ này nữa, bởi vì chúng tôi hoàn toàn hạn chế mọi thứ.
Hãy định dạng lại mã thật nhanh.
Và một điều nữa tôi muốn làm là, mặc dù điều này không cần thiết, vì mục đích chạy chương trình, chỉ vì lợi ích của thông tin nhà phát triển, tôi muốn gắn nhãn những điều này bằng một nhận xét.
Đây là các chế độ xem ở phía bên trái.
Và sau đó đối với TextView, bắt đầu với văn bản chỉnh sửa, đây là các chế độ xem ở phía bên phải.
Đúng vậy để xem nó trông như thế nào.
Được rồi, thật tuyệt.
Giống như chúng tôi mong đợi, điều này phản ánh khá chính xác những gì chúng tôi thấy trong bản xem trước thiết kế.
Điều duy nhất mà tôi muốn khắc phục ở đây hoặc cải thiện là hơi kỳ lạ khi chúng tôi đã có các giá trị cho tiền boa và tổng số tiền, mặc dù người dùng chưa thực sự nhập bất kỳ thứ gì.
Và đó chính xác là mục đích của không gian tên công cụ mà chúng ta đã nói trước đó.
Vì vậy, những gì tôi sẽ làm là chọn chế độ xem văn bản tương ứng.
Và thay vì có một văn bản ở đây, tôi sẽ cuộn xuống.
Tôi sẽ chuyển phần này sang vùng văn bản cờ lê.
Và đó là không gian tên công cụ.
Vì vậy, tôi sẽ chuyển những điều này vào văn bản công cụ.
Và cuối cùng, điều tương tự ở đây.
Chỉ để cho bạn thấy điều đó đã làm, nếu chúng ta quay lại tab mã, nếu bạn nhìn vào nhãn phần trăm mẹo của TV ngay bây giờ thay vì có thuộc tính văn bản Android thì bây giờ là thuộc tính văn bản công cụ.
Nếu chúng tôi chạy ứng dụng lần cuối, hãy xem tác động của điều này đối với bố cục ban đầu.
Tuyệt vời, cái này trông khá ổn.
Hy vọng rằng video này đã giúp bạn hiểu rõ về sức mạnh của bố cục ràng buộc.
Một điều tôi có thể chỉ cho bạn để chứng minh những gì chúng tôi đã làm là với tám chế độ xem này trên màn hình, tất cả chúng đều được định vị thay vì một phụ huynh duy nhất.
Và nếu tôi kéo TextView trên cùng bên trái ra, mọi thứ sẽ di chuyển theo đó, đó là một cách thực sự tốt để hạn chế tất cả các chế độ xem với nhau.
Vì vậy, công việc trong video tiếp theo thực sự là kết nối logic nghiệp vụ trong hoạt động chính, vì vậy chúng tôi có thể phản ứng với đầu vào và tính toán tổng số mẹo.
Hẹn gặp lại các bạn trong video tiếp theo.
Trong video cuối cùng, chúng tôi đã đưa ra tám chế độ xem trên màn hình cho ứng dụng máy tính tiền boa của chúng tôi.
Trong video này, chúng tôi muốn thêm logic nghiệp vụ để thực sự làm cho ứng dụng của chúng tôi tương tác, chúng tôi muốn có thể làm được là khi người dùng chà trên thanh ghế, chúng tôi muốn cập nhật nhãn phần trăm tiền boa.
Và khi họ nhập số tiền cơ bản, thì chúng tôi muốn lấy giá trị đó rồi tính tổng số tiền boa.
Đặc biệt, bạn sẽ nhận thấy rằng không có nút Gửi.
Vì vậy, ngay sau khi người dùng thay đổi số tiền cơ bản hoặc phần trăm tiền boa, chúng tôi muốn tính toán động số tiền boa và tổng số tiền khi có bất kỳ điều gì thay đổi.
Vì vậy, như một bài tập đầu tiên, điều tôi muốn có thể làm là ngay sau khi người dùng thay đổi giá trị trên thanh seekbar, tôi muốn có thể cập nhật nhãn phần trăm.
Vì vậy, để làm điều đầu tiên chúng tôi sẽ làm là tham chiếu đến các chế độ xem trong màn hình mà chúng tôi thực sự cần để có thể đọc hoặc sửa đổi dữ liệu.
Và thực tế có năm widget khác nhau trên màn hình mà chúng tôi quan tâm đến nhãn phần trăm tip và sau đó là tất cả cho các thành phần ở phía bên phải của màn hình.
Vì vậy, trong studio của chúng tôi, cách chúng tôi sẽ làm điều này là khai báo một loạt các biến ở đây cho mỗi thành phần.
Vì vậy, ví dụ:chúng tôi có văn bản chỉnh sửa, văn bản đó sẽ ở mức cơ bản.
Và kiểu này sẽ là kiểu chỉnh sửa văn bản.
Nhưng đừng quá lo lắng về cú pháp ở đây.
Nếu nó khó hiểu, tất cả những gì chúng tôi đang nói là một biến riêng.
Đó là một lần khởi tạo muộn vì chúng ta sẽ khởi tạo nó bên trong phương thức onCreate chứ không phải trong phương thức khởi tạo, đó là lý do tại sao việc khởi tạo muộn là một biến và chúng ta đang gọi nó ở cơ sở mount, quy ước tôi theo đó là tên của biến chính xác bằng tên của ID.
Vì vậy, bây giờ trong onCreate.
Sau chế độ xem nội dung đã đặt, chúng ta sẽ nói ở chế độ xem tìm kiếm gắn kết cơ sở theo ID và số tiền cơ sở.
Và chúng ta sẽ lặp lại điều này ngay bây giờ cho bốn thành phần khác trên màn hình.
Vì vậy, chúng tôi có một mẹo trên thanh tìm kiếm.
Và loại đó ở đây là thanh tìm kiếm.
Và sau đó chúng tôi có phần trăm tiền boa trên TV.
Đó sẽ là tin nhắn cho bạn.
Và sau đó chúng tôi có thêm hai văn bản cho chúng tôi.
Một là số tiền boa trên TV và số còn lại là tổng số tiền trên TV.
Bây giờ tôi sẽ chỉ lấy ra các tham chiếu đến tất cả những thứ này bên trong onCreate Và cuối cùng chúng tôi có tổng số tiền.
Vì vậy, quay trở lại mục tiêu của chúng tôi, điều đầu tiên bạn muốn làm là khi người dùng lướt trên thanh ghế, chúng tôi muốn được thông báo về những thay đổi của đầu vào của người dùng đó và sau đó cập nhật nhãn phần trăm tip TV để chỉ ra điều đó.
Vì vậy, thực ra, hãy để tôi cập nhật tên của biến ở đây chỉ là nhãn TV 2% cho nhất quán.
Và cách chúng tôi nhận được thông báo về những thay đổi trên thanh ghế là bằng cách thêm một trình nghe vào đó, nó sẽ nói dấu chấm đầu thanh tìm kiếm được đặt trên trình nghe thay đổi trên thanh tìm kiếm.
Và bây giờ chúng ta cần nói cho người giải trí biết điều gì sẽ xảy ra khi thanh ghế đã thay đổi.
Và cú pháp ở đây là chúng ta sẽ nói đối tượng, tìm kiếm bar.on, thanh tìm kiếm, thay đổi trình nghe.
Và sau đó chúng ta sẽ định nghĩa lớp này bên trong đây.
Và enter hôm nay sẽ giúp chúng tôi thực hiện điều này, bạn sẽ có gạch chân màu đỏ bên dưới đối tượng để nhấn vào bóng đèn màu đỏ đó và nhấn vào các thành viên triển khai.
Có ba phương pháp mà chúng tôi phải ghi đè để tuân thủ định nghĩa của điều này trên thanh tìm kiếm, thay đổi trình nghe.
Và NRC sẽ giúp chúng tôi điều đó.
Và đừng quá lo lắng.
Một lần nữa, cú pháp khó hiểu.
Chi tiết ở đây là chúng tôi đang xác định một lớp ẩn danh triển khai giao diện này.
Vì vậy, nếu tôi đi đến định nghĩa ở đây, bạn có thể thấy rằng đây là một giao diện công cộng, có ba phương thức chính xác mà chúng tôi đã ghi đè.
Và bây giờ công việc của chúng tôi là cho hệ thống biết điều gì sẽ xảy ra khi mỗi phương thức này được gọi.
Và trên thực tế, chúng tôi không thực sự quan tâm đến việc bắt đầu theo dõi chạm hay khi dừng theo dõi.
Vì vậy, tôi sẽ xóa hai khoản phí ở đây và hãy để trống phần triển khai.
Trước khi chúng tôi cập nhật giao diện người dùng, trước tiên hãy thêm một câu lệnh nhật ký trong Android để dễ dàng tìm ra những gì đang xảy ra.
Vì vậy, tôi sẽ đăng nhập ngay vào i và đây là một phương thức có hai tham số.
Cái đầu tiên là một chuỗi, tôi sẽ gọi là tack, tôi sẽ xác định sau.
Và cái thứ hai cũng là một chuỗi, là một thông báo hoặc một câu lệnh nhật ký.
Và tôi sẽ nói về tiến trình đã thay đổi, đó là tên phương thức, cùng với tiến trình, là giá trị hiện tại của thanh tìm kiếm.
Vì vậy, hãy xác định thẻ này, tôi sẽ đi lên đầu lớp và xác định một thẻ const Val riêng tư.
Và quy ước ở đây là bất cứ khi nào bạn có bất kỳ loại ghi nhật ký nào, thẻ thường sẽ là tên lớp.
Được rồi, hãy thử.
Vì vậy, ý tưởng ở đây là mỗi khi tiến trình thay đổi trên thanh ghế, có nghĩa là người dùng đang kiểm tra, chúng tôi sẽ in ra giá trị hiện tại được hiển thị trong logcat, đó là nơi các bản ghi xuất ra.
Vì vậy, hãy mở logcat.
Mở trình giả lập.
Và các nhật ký mà chúng tôi quan tâm là nhật ký chỉ từ ứng dụng của chúng tôi, bình tĩnh, bình tĩnh, rk Pandey Tippi và chúng tôi cũng chỉ quan tâm đến nhật ký cấp thông tin vì đó là những gì log.io đại diện cho nhật ký cấp thông tin.
Chúng tôi cũng chỉ quan tâm đến nhật ký có thẻ cụ thể này, là hoạt động chính.
Vì vậy, hãy thêm hoạt động chính dưới dạng bộ lọc.
Và ở đây khi chúng tôi thay đổi thanh chỗ ngồi, bạn có thể thấy cách chúng tôi nhận được một dòng đầu ra logcat và nó thể hiện chính xác chỉ báo hiện tại của thanh chỗ ngồi đang hiển thị.
Vì vậy, nếu chúng ta tăng hết mức tối đa, chúng ta thấy 30 như chúng ta mong đợi và nếu chúng ta giảm hết mức, chúng ta sẽ đi đến con số không.
Vì vậy, bây giờ hãy cập nhật giao diện người dùng.
Và đặc biệt, chúng tôi muốn cập nhật nhãn phần trăm tip TV để cho biết tiến trình hiện tại của thanh tìm kiếm.
Vì vậy, chúng tôi sẽ nói TV 2%, gắn nhãn thuộc tính văn bản của thuộc tính đó, chúng tôi sẽ đặt thuộc tính đó bằng với tiến trình.
Nhưng trên thực tế, chúng tôi muốn tiến trình được biểu diễn dưới dạng một chuỗi, không phải là int.
Và chúng tôi cũng muốn nối một dấu phần trăm sau nó.
Vì vậy, chúng tôi sẽ nói tiến trình ký đô la, đó là cách chúng tôi thực hiện nội suy chuỗi trong kotlin.
Tương tự như chúng ta đã làm trong câu lệnh nhật ký, sau đó thêm dấu phần trăm vào cuối.
Hãy thử nó.
Vì vậy, khi chúng tôi xem xét thanh tìm kiếm, bạn có thể thấy nhãn phần trăm mẹo của TV được cập nhật như thế nào trong bước khóa với tiến trình hiện tại của thanh tìm kiếm, điều này thật tuyệt.
Tuy nhiên, một cải tiến ở đây là ban đầu, chúng tôi không chỉ ra bất kỳ phần trăm tiền boa nào trong nhãn.
Và để khắc phục điều đó, hãy xác định thêm một hằng số nữa, mà chúng ta sẽ gọi là mẹo ban đầu hiện tại.
Vì vậy, chúng tôi sẽ có một mẹo ban đầu const Val riêng tư và chúng tôi sẽ đặt nó bằng 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