Kotlinアプリ開発 Vol.1-8 デザインを改良しよう -本編-

RM計算機

デザインが完成!

ずっとGitとかを説明してましたが、とりあえず完成しました。

まだまだやり切れてないことはありますが、初めてのアプリなのでこれくらいで妥協します。

学んだこと
  • Actionバーの消去
  • 前面/背面の変え方
  • 文字の色を変える
  • フォントを増やす
  • 枠の角を丸くする
  • 文字に影をつける
  • マテリアルデザインアイコンを使う

順に説明していきます。

デザインの変更方法

Actionバーの消去

これは前回も少し触れました。

Themeの中で “NoActionBar” と書かれているのが該当します。

themes.xml上でparent=” “の部分をNoActionBarのものに変更すればよいです。

前面/背面の変え方

Component Treeでの順番が上にあるものほど後ろに表示されます。

iv_backの位置を入れ替えてみます。

文字の色を変える

説明するほどでもないかもしれません。

textcolorでテキストの色が、backgroundで背景の色が変更できます。よく使うものはFavorite Attributesとしてまとめて表示できます。

フォントを増やす

以下を参考にしました。

XML フォント  |  Android デベロッパー  |  Android Developers

商用利用が可能なフォントもけっこうあるので探してみてください。

【無料&商用可】英語フリーフォント112選。おしゃれ/かわいい/ポップまで | Workship MAGAZINE(ワークシップマガジン)
この記事では、英語のフリーフォントを112個ご紹介しています。無料で商用利用可能なフォントを集めたので安心してお使いいただけます。おしゃれな筆記体のフォントから、ポップでかわいいフォントまで種類別に紹介しているので、たくさんの英字フォントを見比べたい方はぜひ参考にしてみてください。

枠の角を丸くする

以下を参考にしました。

AndroidでViewを角丸にする - Qiita
はじめに デザインの都合上ボタンとか、LinearLayoutを角丸にしたかった時に調べた時のメモ。 実装 基本的にはbackgroundを指定する際に、別ファイルで角丸を定義したものを読みこめばうまく行きます。 ボタ...

activity_main.xmlは以下の1文のみです。

        android:background="@drawable/shape_rouded_corners_5dp"

shape_rouded_corners_5dp.xmlで以下を定義します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners
                android:topRightRadius="5dp"
                android:bottomRightRadius="5dp"
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp"
                />
            <solid
                android:color="#ffffff"
                />
        </shape>
    </item>
</selector>

5dpの部分を変えると角の丸みが変わります。今回は背景を白にしたかったのでcolorは#ffffffにしました。

文字に影をつける

これ意外と簡単です。

        android:shadowColor="#000000"
        android:shadowDx="3"
        android:shadowDy="3"
        android:shadowRadius="3"

activity_main.xmlで上記のように書くだけです。影の色/xyにいくつずらすか/影の大きさをそれぞれ定義します。

マテリアルデザインアイコンを使う

以下を参考にしました。

アプリ内ボタンにマテリアルデザインアイコンを使う [Android] - Qiita
やりたいこと Androidアプリでよくあるこんな感じのアイコンを使いたい 開発環境 OS: macOS HighSierra Android Studio: 3.0.1 手順 ・使いたいアイコンを探す An...

Attributes > srcCompatという項目が見つからなかったので代わりに以下を使っています。

アイコンを上下左右どこにつけるか変更できます。

今回妥協したこと

ちょっと考えはしたんですが、一旦保留にしたことです。

・アプリのトップページをつくる (アニメーションのあと自動的にページ切り替わるイメージ)

・スマホの画面サイズに合わせて、文字サイズを切り替える(画面サイズを読み込んである比率で拡大縮小する?)

・ボタンデザインを変える/ボタン押下時に色を変える

次回作で挑戦したいと思います。

まとめ

簡単なデザイン変更のやり方を学んだ
実現できなかった3点はVol.2への課題とする
次回は実際のリリース手順を学ぶ

コメント

タイトルとURLをコピーしました