初心者向け Android アプリ開発

全携帯電話の 75% は Android 携帯電話であり、全インターネット ユーザーの 75% は自分の携帯電話のみを使用してインターネットにアクセスしています。したがって、Android アプリには大きな市場があります。

freeCodeCamp.org の YouTube チャンネルで、Android アプリ開発に関する短期集中コースを公開しました。このコースは、Android アプリ開発の初心者に最適です。

Rahul Pandey がこのコースを開発しました。 Rahul は Facebook の Android リードであり、スタンフォード大学の講師です。

このコースでは、チップ計算機を作成して Android 開発を学びます。このコースは、Android の経験がないことを前提としています。最終的には、アプリを公開できるようになります。

XML を使用してユーザー インターフェイスを作成する方法と、Kotlin プログラミング言語を使用してロジックをコーディングする方法を学習します。これらは、最新の Android アプリの基本的な構成要素です。

また、レイアウトに ConstraintLayout を使用する方法と、アプリ ロジックに 2 つのイベント リスナーを使用する方法も学習します。基本金額とチップのパーセンテージを入力すると、アプリがチップと合計を計算します。また、チップのパーセンテージ アニメーションとフッターを実装して、アプリをよりユニークなものにします。

以下のコースまたは freeCodeCamp.org YouTube チャンネルをご覧ください (1 時間の視聴)。

トランスクリプト

(自動生成)

この初心者向けコースでは、Rahul Pandey から Android アプリの作成方法を学びます。

Rahul は Facebook の Android エンジニアであり、スタンフォード大学で講義を行っています。最初から Android アプリを作成します。空のプロジェクトから始めて、実際に使用できるもので終わります。 Play ストアでは、チップ計算機を作成します。基本金額とチップ パーセンテージを入力すると、アプリがチップと合計金額を計算します。

kotlin プログラミング言語を使用してこのアプリを構築します。

したがって、プログラミングのバックグラウンドがあると想定しています。

ただし、kotlin を初めて使用する場合は、説明に、私が作成した言語に関する 12 分間の簡単な入門書へのリンクを残します。

私は Rahho です。しばらくの間、YouTube と YouTube 以外で Android を教えています。

準備ができたら、一緒にこのアプリを作成しましょう。

このビデオで取り上げたいことが 3 つあります。

まず、チップ計算アプリケーションの主な機能について説明したいと思います。

2 つ目は、Android を構築する際にカバーするコアの Android コンセプトについて説明します。

そして 3 番目に、アプリを意図的に非常にシンプルに保つため、アプリの構築に関しては触れない Android の概念についても言及したいと思います。

これらは、後でより洗練された、または複雑な Android アプリでカバーされます。

先ほど、彼がチュートリアルを終えたらすぐにこのアプリを実際に Google Play ストアに公開する方法について説明しました。

したがって、私たちが構築しようとしているものを試してみたい場合は、説明のリンクをチェックして、Android デバイスのいずれかにダウンロードしてください。

それでは、アプリのデモを行って、構築しようとしている主な機能を把握してみましょう。

この例では、私は非常に贅沢な一人ディナーに出かけ、83.15 ドルを使いました。

そして、私は 24% というかなり寛大なチップを残しています。リンゴはチップと合計金額を自動的に計算します。

計算を少し簡単にするために、基本金額を 100 ドルに更新してみませんか。

ご覧のとおり、表示されるキーボードでは数字と小数のみを入力できます。これは、ここで通貨を扱っているため意味があります。

また、食事で受けたサービスに本当に満足している場合は、チップの割合を増やして、最大額の 30% にすることができます.

ここで 2 つのことが起こります。

1 つは、チップと合計金額の計算を 30 で動的に更新することです。

合計は 130 です。

また、そのヒントのパーセンテージの説明も更新します。

そのため、素晴らしいものから驚くべきものになり、この明るい緑色にもなりました.

一方、サービスに本当に不満がある場合は、チップをゼロにするかもしれません。

そして、それはお粗末なヒントだと考えています。

そして、色がこの赤い色にどのように更新されたかを見ることができます.

そして、このフッターの下部には、アプリをパーソナライズする方法もあり、誰が作ったのか、どこから来たのかを言うことができます.

チップ計算ツールで取り上げる概念は、すべての Android アプリの基本となる概念と同じです。

最初は UI の作成です。

すべてのアプリにはユーザー インターフェースが必要です。

ここで利用するコア コンポーネントは制約レイアウトです。これには、他のウィジェット (TextView や seekpart など) が含まれ、ヒントのパーセンテージが入力されます。

次に、すべての興味深い Android アプリは、ユーザーの入力をリッスンして反応します。

したがって、アプリにデータを入力する方法は 2 つあります。1 つは基準額を入力する方法です。

2 つ目はチップの割合です。

それに基づいて、適切に対応し、UI を更新する必要があります。

そして 3 番目に、Android でのスタイリングとアニメーションの表面をかじっただけで、いくつかの色を更新する方法と、ヒントの説明を使用してアニメーションを実行し、その色を動的に変更する方法を示します。

チップ計算機で取り上げないこともたくさんあります。

これは、範囲を縮小し、このアプリを本当に迅速かつシンプルにするために重要です。

構築する。

Android を初めて使用する場合は、まず、複数の画面を使用しません。

つまり、ナビゲーションや Android のバックスタックなどを処理する必要はありません。

実際、私たちが持っている単一の画面は、管理する必要のあるリスト データがないため、実際には非常に単純です。

第二に、私たちはインターネットのネットワーキングとは何の関係もありません。

API やサーバーとの通信を開始するとすぐに、非同期プログラミングとそのデータの管理に対処する必要があるため、事態はかなり複雑になります。

そして 3 つ目は、ストレージをまったく扱っていないことです。すべてがローカルでメモリ内にあります。

したがって、データベース、ディスク、またはクラウドに書き込むつもりはありません。

そして、これら 3 つすべてにより、アプリの作成がはるかに簡単になります。

ですから、これを作ってレストランに足を踏み入れると、チップ生地を簡単かつ文字通り計算できるので、超人気者になると確信しています。あなたの名前がアプリに表示されます。

それでは、次のビデオでお会いしましょう。

このビデオでは、新しいエンター スタジオ プロジェクトから始めて、ビューをレイアウトします。特に、チップ計算機については、左から 4 つのテキスト ビューで内容を説明する 8 つのビューをレイアウトします。右に表示されているものの。

最初に行うことは、まったく新しいエンター スタジオ プロジェクトを作成することです。

だから私はここで私たちのスタジオで実行していて、ホッキョクギツネを実行していますが、最近のバージョンは新しいプロジェクトをタップする必要があります.

空のアクティビティ テンプレートを選択します。

これらの他のものは便利な場合もありますが、アプリケーションに多くの厄介な問題をもたらし、混乱を招く可能性があります.

通常は空のアクティビティを使用します。

アプリケーションを Tippie と呼びましょう。

パッケージ名は、通常、ドメイン名または電子メール アドレスを使用して逆さまにします。

そのままにして、場所を選択し、kotlin があることを確認し、この言語を選択します。

そして、API 21 の最小 SDK バージョンを選択します。

では、[完了] をタップします。

そして、まったく新しいプロジェクトを作成するときはいつでも、スターター コードを試して実行するのが好きです。

スターター コードを実行することさえできない場合は、何かがすでに間違っているからです。

コードを書き始める前に、既知の適切な場所にいることを確認しましょう。

スタジオで新しいプロジェクトを作成すると、すべての設定に時間がかかります。

アプリケーションを実行するには、メニューのドロップダウンに移動し、エミュレーターまたは物理デバイスのいずれかにアプリをデプロイすることを選択できます。

そこで、以前に作成したエミュレーターであるピクセル 2 API 29 を選択し、緑色の三角形をクリックして、エミュレーターがまだ存在しない場合は起動し、プロジェクトをビルドしてこのエミュレーターにデプロイします。

また、Android Studio の下部にステータスが表示され、現在の進行状況を確認できます。

これには 1 ～ 2 分かかる場合があります。

ただし、完了すると、アプリは自動的にデバイスに送信され、フォアグラウンドに表示されます。

したがって、エミュレータで何らかのアクションが表示されるまで待つだけです。

わかりました。

これは有望に見えます。

空のプロジェクトのデフォルトである、hello world のテキストを含む非常にオープンなエミュレーターと呼ばれるアプリケーションが表示されます。

これにより、基本的なプロジェクトを正常に実行できるという自信が得られます。

インナー スタジオに入り、スターター ファイルについて簡単に説明しましょう。

そして実際には、メイン アクティビティ ドット kotlin とアクティビティ メイン ドット XML に関係するファイルが 2 つしかないため、非常に単純です。Android 用語でのアクティビティは、1 つの画面を表すものと考えることができます。

そのため、現在のプロジェクトでは、画面は 1 つしかありません。

これをメイン アクティビティまたはメイン画面と呼びます。

これが、メイン アクティビティと呼ばれるこのファイルで定義しているビジネス ロジックです。

特に、スターター コードは、既にオーバーライドされている 1 つの関数または 1 つのメソッドを提供します。

これは onCreate と呼ばれ、アプリケーションが画面を作成しているときに、アプリケーションの起動時に Android システムがこの関数を自動的に呼び出すか呼び出します。

ここで重要な行は、9 行目の setcontentview r dot layout activity main です。

つまり、R はリソースの略です。

ここで言っているのは、画面のコンテンツまたは UI はリソース内のレイアウト ファイルであり、アクティビティ メイン ドット XML で定義される必要があるということです。

実際、これの定義にジャンプすると、アクティビティのメイン ドット XML に直接移動することがわかります。

そこで、ここでプロジェクト ツール ウィンドウを最小化して、より多くのスペースを確保します。

また、属性ペインを最小化します。

これがまさにアプリケーションで表示されているもので、HelloWorld を含む空白のキャンバスです。

特に、こちらのコンポーネント ツリーを見ると、最小化されている可能性があります。

ただし、ここをタップして展開できます。親要素が制約レイアウトと呼ばれるものであることがわかります。

そして、TextView またはラベルと呼ばれる子が 1 つだけあります。

そしてそれは、値 hello world を持つ属性を持っています。

これが、実行中のアプリケーションで Hello World テキストが表示されている方法です。

このビデオでは、アクティビティのメイン ドット XML にすべての時間を費やします。今は、アプリケーションの UI を構築することだけに関心があるからです。

具体的には、画面に 8 つのコンポーネントを配置することで、次のように終了します。

左側には、4 つの異なるテキスト ビューがあります。ユーザーが編集できないテキストを考えることができます。ラベルが必要です。

右側には、TextView によって記述されている実際のコンポーネントがあります。

そのため、ユーザーが請求額を入力できる編集テキストが上部にあり、ユーザーがチップのパーセンテージを入力できるシーク バーがあり、下部にチップ用の 2 つのテキストが使用されています。および合計金額。

レイアウトの構築を開始する前に、もう 1 つ注意しておきたいことがあります。それは、UI には複数のパースペクティブがあるということです。デフォルトで見ているのはデザイン プレビューであり、実際にエミュレーターに表示されるものです。またはデバイス。

ただし、実際の基礎となる XML であるコード タブにドロップダウンすることもできます。

このように、制約レイアウトがあり、1 つの子がデザインと同じようにテキスト ビューを表示する方法を確認できます。

分割とは、両方を見ることを意味します。

そして、私たちの時間のほとんどは、デザイン プレビューを見ることに費やされます。

できることは、パレットに移動して、テキスト ビューなどのさまざまなコンポーネントをドラッグ アンド ドロップするか、必要なテキストを編集することです。

繰り返しますが、これはコード タブに表示されます。

そのため、デザイン プレビューで行った変更と基になる XML の間には 1 対 1 の対応があることに注意してください。

とりあえず、設計に戻り、コンポーネントを削除して、子のない単一の制約レイアウトを作成します。

このドキュメントでは、フラットなビュー階層を使用して大規模で複雑なレイアウトを作成する方法として、制約レイアウトについて説明しています。

定義した一連の制約を通じて、兄弟ビューと親レイアウトの間の関係を記述することができます。

これにより、内部システムは複数のサイズの携帯電話やタブレットで UI を適切にレイアウトできます。

ここで重要なことは、ビュー グループがネストされていないことです。

Android では、ビュー階層が非常に深くネストされている場合、パフォーマンスが大幅に低下し、ジャンクまたは UI ラグと呼ばれるものが発生します。

そのため、制約レイアウトにより、ネストされたビュー グループを使用せずに複雑なビューを作成できます。

チップ計算プロジェクトに戻ると、ここでは画面上の 8 つのビューすべてを単一の親制約レイアウトでレイアウトします。ネストされたビュー グループはありません。親制約レイアウト内の線形レイアウト。

したがって、以前に制約レイアウトを使用したことがない場合でも、フラットなビュー階層で説明できるように、画面上のビューを相互に相対的に配置する方法を今すぐ考えてみてください。

Android Studio に戻り、最初に、画面の左上のコンポーネントを表す TextView をドラッグします。これは、ベース テーブルを表す TextView です。

コンポーネントをドラッグするたびに最初に行うことは、ID をより意味のあるものに更新することです。

そこで、この TV ベース ラベルを呼び出し、テキストをベースに更新します。

ここで気付くのは、Android Studio が、この TextView に制約がないことを訴えていることです。

したがって、設計された時間位置のみがあり、制約を追加しない限り、実行時に画面の左上である位置 00 にジャンプします。

これが制約レイアウトの要点です。すべてのコンポーネントを垂直方向と水平方向に制約する必要があります。

垂直に、TV ベースのラベルのこの上部のアンカー ポイントをドラッグして、画面の上部にドラッグします。

次に、属性タブで、画面の上部からどれだけ離すかのマージンを指定します。上部に 48 とします。

同様に、左マージンを指定したいので、左のアンカー ポイントをドラッグして親にドラッグし、これを画面の左端から 32 dP 離すように指定します。

これで、エラーが消えたことがわかります。画面の左側で使用されている他の 3 つのテキストについても同じプロセスを実行します。

ベース ラベルのすぐ下にあるのは、TV ヒントのパーセント ラベルです。

ここのテキストは 24% になるように作成してください。

その下の TextView は TV ヒント ラベルになります。

テキストはヒントになります。

そして最後に、TV トータル ラベルを取得します。

ここのテキストは合計になります。

したがって、これらすべてを水平方向と垂直方向、垂直方向に制約する必要があるという同じ問題があります。各 TextView の上部アンカー ポイントを取得し、その上のコンポーネントにドラッグします。

そして、32 dP のマージンを指定します。これは、各テキストが、その上のテキストの下に 32 dP で 32 ピクセル存在する必要があることを意味します。これにより、上部のアンカー ポイントがドラッグされ、その上のテキストの下部のアンカー ポイントにドラッグされます。 .

そして再び、同じことを行い、これらの各ビューを垂直方向に 32 dP 制約します。

では、水平方向についてはどうでしょうか。目的の最終状態に戻ると、ここに垂直線を引くと、左側のすべてのコンポーネントが右端に揃えられることに気付くでしょう。この TV ベース テーブルの上にテキスト メッセージを送信してください。

これは [デザイン] タブで実際に行うことができます。「整列」と言って、右端を整列させることができます。

しかし、コード タブでこれを行う方法をお見せしたいと思います。

したがって、コード タブを開くと、前述のように、[デザイン] タブで行ったすべての変更に対応する変更が [コード] タブに反映されます。

現在 4 つのテクスチャがあり、これがまさにここにある 1234 であることがわかります。前述のように、これらを水平方向に拘束していないというエラーが現在発生しています。

そのため、この赤い下線が引かれています。

垂直方向の制約は、ここで確認できるものです。

したがって、この行で通信しているのは、TV ヒントのパーセント ラベルの上部にあり、その上にある TextView である TV Basic の下部と正確に等しくなる必要があり、32 dP のマージンが必要であることを意味します。その上のコンポーネントの 32 ピクセル下にあります。

同様に、このコンポーネントの末尾である TV ヒントのパーセント ラベルが、TV ベースのラベルの末尾と等しくなるように指定します。

そして、これを左側の各コンポーネントに適用したいと考えています。これで、エラーがどのように解消されたかがわかります。

[デザイン] タブに戻ると、すべてがどのように調整されているかがわかります。

ここでもう 1 つ強調しておきたいのは、tools 名前空間はデザイン プレビューをレンダリングする目的でのみ使用されるということです。

これらの各ビューを水平方向と垂直方向に完全に制限したので、これは実際にはもう必要ありません。

そこで、これらをそれぞれ選択して削除します。

もう 1 つは、一貫したスタイルとさまざまな属性名の順序付けに非常に力を入れていることです。

たとえば、ここでは、同じ行または新しい行に終わりの山かっこがあります。

それを自動的に修正するには、ダブル シフトをタップして、re format を検索します。

コードを再フォーマットするためのショートカットがあります。

これを行うと、Android Studio がどのようにファイル全体を修正するのに役立ったかがわかります。これは私がより気に入っていることです。

では、[デザイン] タブに戻りましょう。

画面の右側にあるコンポーネントに移る前に、デザインを簡単に微調整する必要があります。

まず、ここでテキストを少し大きくしたいと思います。

そこで、テキストの外観を中程度にします。これにより、どのように大きくなったかがわかります。

そして、このテレビ ヒント プレゼント ラベルは、ユーザーが実際に選んだプレゼントの価値を表しているため、少しユニークです。

他のものとは少し違うことを示すために、ここではテキストを太字にします。

いいね、いいね。

次に、画面の右端にある 4 つのコンポーネントについて考えてみましょう。

これは編集テキストで、その下にシークバーがあります。

その下には 2 つのテキスト ビューがあります。

それでは、編集テキストをドラッグしてみましょう。

ドラッグするのは、10 進数を示すものです。

そして、これらすべての異なる編集テキストの違いは、実際には非常に単純です。

単純に入力タイプです。

通貨を扱っているので、数字と小数が必要です。

この下に、シーク バーがあります。

その下で、TextView にドラッグします。

よし、ここで IDS を更新して、より賢明なものにしよう。

したがって、これはベース金額で呼び出されます。

次はシークバーのヒントです。

次に、テレビのチップ額です。

そして最後に、テレビの合計額を取得します。

ここのテキストを 103 dot 11 に更新しましょう。

これは 1996 年と言ったと思います。

これらの要素を配置する前に、デザインを微調整しましょう。

これらの下部テクスチャは、アプリ全体で最も重要な部分です。

ですから、テキストを大きくします。

シークバー。幅を少し広くするためにハード コードされた 200 dP の幅を指定します。

また、Max と呼ばれる属性もあり、これはシークバーが保持する最大量です。

そして、それは 30 になります。

30% までしか許可されていないためです。

編集テキストについては、EMAS を 8 に設定します。これは、この編集テキストが何文字幅になるかを意味し、8 で十分です。テキスト サイズを大きくします。 24 SP.

そして最後に、ここにヒントまたはプレースホルダーを追加します。これは、ユーザーがこの編集テキストの目的を理解するための請求金額です。

では、これらをどのように配置するかを考えてみましょう。

縦に、下の 2 つのテキストを縦に揃える必要があるので、両方を選択してから、縦の中央を揃えます。

上のものも同様です。

次に、チップ パーセントとシークバーについても同様です。

また、[デザイン] タブで、追加された制約の素晴らしいプレビューを実際に確認できます。

請求金額について。

水平方向に制約する方法を考えてみましょう。左側の対応するテキストから 32 dP 離れます。

水平方向には、右側の他のすべてのコンポーネント、これらの下の 3 つを請求額の編集テキストの左端に揃える必要があります。それらすべてを選択する必要があります。左端をすべて揃える必要があることを指定します。

いいですね。

ここにカーソルを合わせると、編集テキストの垂直方向の制約が失われます。

そのために、コード タブに移動します。

これが基本金額の編集テキストです。

垂直方向の位置を伝える方法は、この要素の上部を TV ベース テーブルである左上のビューの上部と見なすことです。同様に、このビューの下部も TV ベース テーブルの下部である必要があります。

したがって、垂直方向の真ん中になります。

したがって、[デザイン] タブに戻ると、エラーがなくなっていることがわかります。

そして、これらの制約がどのように見えるかを視覚的に確認できます。

[デザイン] タブに戻ると、すべてを完全に制限しているため、このツール名前空間はもう必要ありません。

コードをすばやく再フォーマットしましょう。

そして、もう 1 つやりたいことがありますが、これは必要ではありませんが、プログラムを実行する目的で、開発者向けの情報のために、これらにコメントのラベルを付けたいと思います.

これらは左側のビューです。

そして、TextView の後に、編集テキストから始めて、これらは右側のビューです。

これがどのように見えるかを見るのは正しい.

わかりました、素晴らしいです。

予想どおり、これはデザイン プレビューで見たものをほぼ正確に反映しています。

ここで修正または改善したい唯一の点は、ユーザーが実際には何も入力していないにもかかわらず、チップと合計金額の値が既にあるというのは少し奇妙だということです。

そして、これこそまさに、先ほどお話ししたツール名前空間の目的です。

そこで、対応するテキスト ビューを選択します。

ここにテキストを表示するのではなく、下にスクロールします。

これをレンチ テキスト領域に移動します。

それがツールの名前空間です。

そこで、これらをツール テキストに移動します。

そして最後に、こちらも同じです。

これが何をしたかをお見せするために、コード タブに戻って、テレビのヒントのパーセント ラベルを見ると、Android のテキスト属性がツールのテキスト属性になっています。

最後にもう一度アプリを実行して、これが初期レイアウトに与える影響を見てみましょう。

すごい、これはかなりいいですね。

このビデオで、制約レイアウトの威力を十分に理解していただければ幸いです。

私たちが行ったことを示すために 1 つだけお見せできるのは、これらの 8 つのビューが画面に表示されているため、単一の親ではなく、すべてのビューが配置されていることです。

左上の TextView をドラッグすると、すべてがそれに応じて移動します。これは、すべてのビューを互いに相対的に制約する非常に優れた方法です。

したがって、次のビデオの実際の仕事は、メイン アクティビティにビジネス ロジックを接続することです。これにより、入力に反応して全体のヒントを計算できるようになります。

次のビデオでお会いしましょう。

最後のビデオでは、チップ計算アプリケーションの画面に 8 つのビューを配置しました。

このビデオでは、アプリを実際にインタラクティブにするビジネス ロジックを追加したいと考えています。ユーザーがシート バーをこすったときにチップ パーセント ラベルを更新できるようにしたいと考えています。

彼らが基本金額を入力すると、その値を取得して合計金額でチップを計算します。

特に、[送信] ボタンがないことに気付くでしょう。

そのため、ユーザーが基本額またはチップの割合を変更するとすぐに、何かが変更されたときにチップと合計額を動的に計算したいと考えています。

最初の演習として、ユーザーがシークバーの値を変更するとすぐに、パーセント ラベルを更新できるようにしたいと考えています。

したがって、最初に行うことは、実際にデータを読み取ったり変更したりできるようにする必要がある、画面内のビューへの参照を取得することです。

そして、実際には画面上に 5 つの異なるウィジェットがあり、チップ パーセント ラベルと、画面の右側にあるすべてのコンポーネントを対象としています。

したがって、私たちのスタジオでこれを行う方法は、コンポーネントごとにここで一連の変数を宣言することです.

たとえば、基本金額になる編集テキストがあります。

そして、これのタイプはタイプ編集テキストになります。

ただし、ここでは構文についてあまり心配しないでください。

紛らわしい場合は、私たちが言っているのはプライベート変数だけです。

コンストラクターではなく onCreate メソッド内で初期化するため、初期化が遅れます。これが、初期化が変数であり、ベース マウントでそれを呼び出している理由です。変数は ID の名前と正確に同じです。

設定されたコンテンツ ビューの後、ID とベース金額によるベース マウント検索ビューで言います。

画面上の他の 4 つのコンポーネントについても、これを繰り返します。

シークバーのヒントがあります。

ここでのそのタイプはシークバーです。

そして、テレビのチップ パーセントがあります。

それはあなたへのテキストになります。

そして、さらに 2 つのテキストがあります。

1 つは TV のチップ額で、もう 1 つは TV の合計額です。

ここで、onCreate 内のこれらすべてへの参照を引き出して、最終的に合計金額を取得します。

目的に戻ると、最初にユーザーがシートバーをこすったときに、そのユーザー入力の変更を通知して、それを示すためにテレビのヒントのパーセント ラベルを更新する必要があります。

実際には、一貫性を保つために、ここで変数の名前を TV 2% ラベルに更新させてください。

そして、シート バーの変更を通知する方法は、リスナーを追加することです。シーク バーの変更リスナーに設定されたシーク バー チップ ドットが表示されます。

次に、シート バーが変更されたときに何が起こるべきかをエンターテイナーに伝える必要があります。

ここでの構文は、object、seek bar.on、seekbar、change listener と言うものです。

そして、このクラスをここで定義します。

今日入力すると、これを実装するのに役立ちます。オブジェクトの下にこの赤い下線が表示され、その赤い電球をタップして実装メンバーをタップします。

this on seekbar, change listener の定義に準拠するためにオーバーライドする必要がある 3 つのメソッドがあります。

NRC はそれを支援してくれます。

あまり心配しないでください。

繰り返しますが、構文はわかりにくいです。

ここでの詳細は、このインターフェースを実装する匿名クラスを定義していることです。

したがって、ここの定義を見ると、これがパブリック インターフェイスであることがわかります。これには、オーバーライドした 3 つのメソッドが含まれています。

そして今、私たちの仕事は、これらの各メソッドが呼び出されたときに何が起こるべきかをシステムに伝えることです.

そして実際には、追跡開始のタッチや追跡停止のタッチはあまり気にしません。

そこで、ここでは 2 つの会費を削除し、空の実装のままにします。

UI を更新する前に、まず Android にログ ステートメントを追加して、何が起こっているかをより簡単に把握しましょう。

では、i にログオンします。これは、2 つのパラメーターを受け取るメソッドです。

最初のものは文字列で、tack と呼びます。後で定義します。

2 つ目も文字列で、メッセージまたはログ ステートメントです。

そして、メソッド名である on progress changed と、シークバーの現在の値である progress について説明します。

それでは、このタグを定義しましょう。クラスの先頭に移動して、プライベート const Val タグを定義します。

ここでの規則は、何らかの種類のロギングがある場合は常に、タグは通常クラス名になるというものです.

よし、やってみよう。

したがって、ここでの考え方は、シート バーで進行状況が変化するたびに、つまりユーザーがスクラブしているときに、logcat に表示されている現在の値を出力し、ログがそれを出力するということです。

logcat を開いてください。

エミュレーターを開きます。

そして、私たちが気にするログは、私たちのアプリケーションのみからのログです。これは、落ち着いていて、落ち着いていて、パンディ・ティッピであり、情報レベルのログのみを気にします。これは、log.io が情報レベルのログを表すものであるためです。

また、主なアクティビティであるこの特定のタグを持つログのみを考慮します。

それでは、メイン アクティビティをフィルターとして追加しましょう。

ここでシート バーを変更すると、1 行の logcat 出力がどのように得られるかがわかります。これは、シート バーが表示している現在のインジケーターを正確に表しています。

したがって、最大値まで行くと、予想どおり 30 になり、最後まで下げると、0 になります。

それでは、UI を更新しましょう。

特に、TV ヒントのパーセント ラベルを更新して、シークバーの現在の進行状況を示したいと考えています。

そこで、TV 2% と言い、そのテキスト属性にラベルを付け、それを進行状況に等しく設定します。

しかし実際には、進行状況を int ではなく文字列として表現したいと考えています。

また、その後にパーセント記号を連結したいと考えています。

したがって、ドル記号の進行状況と言うことにします。これは、kotlin で文字列補間を行う方法です。

ログ ステートメントで行ったのと同様に、最後にパーセント記号を追加します。

試してみましょう。

シークバーをスクラブすると、TV ヒントのパーセント ラベルがシークバーの現在の進行状況に合わせてどのように更新されるかがわかります。これはすばらしいことです。

ただし、ここでの改善点の 1 つは、最初はラベルにチップの割合を示していないことです。

それを修正するために、もう 1 つの定数を定義しましょう。これを初期チップ プレゼントと呼びます。

したがって、プライベートな 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