はじめに 最近の Android は Material Design を適用することが多くなっています。 また、アプリアイコンには Android7.0 でラウンドアイコン(Round Icon)が登場して、Android8.0 ではアダプティブアイコン(Adaptive Icon)が登場しました。それによってOSごとに表示されるアイコンも変わります。 今回は普通のアイコンとアダプティブアイコン、ベクター画像といったどんな形式のアイコンにも対応できるツールバーのアイコン制御方法を紹介しようと思います。 【公式ドキュメント】アダプティブ アイコン サンプルアプリを作成 今回は簡単に Android Studio から New Project でサンプルアプリを作成します。 シンプルなアプリの「Empty Activity」を選択しました。 エミュレータでサンプルプロジェクトを実行してみると↓のようなアプリが起動されます。 ※OSはAndroid8.0以上 アプリのテーマ(Theme)を確認します 最近のアプリはアプリのActivityやViewに独自のテーマが設定され表示を制御しています。 Manifestファイルからテーマを確認していきます。 AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.********"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/Theme.MyApplication"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> @style/Theme.MyApplication という style が設定されているのでファイルを確認します。 Themes.xml <resources xmlns:tools="http://schemas.android.com/tools"> <!-- Base application theme. --> <style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <!-- Primary brand color. --> <item name="colorPrimary">@color/purple_500</item> <item name="colorPrimaryVariant">@color/purple_700</item> <item name="colorOnPrimary">@color/white</item> <!-- Secondary brand color. --> <item name="colorSecondary">@color/teal_200</item> <item name="colorSecondaryVariant">@color/teal_700</item> <item name="colorOnSecondary">@color/black</item> <!-- Status bar color. --> <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item> <!-- Customize your theme here. --> </style> </resources> Themes.xml をカスタマイズすることで表示を制御できます。 Toolbar（ツールバー）にアプリアイコンを表示する Themes.xml に navigationIcon の設定を追加します。 この設定によってテーマでアイコン表示が可能です。 <item name="navigationIcon">@mipmap/ic_launcher </item> Themes.xml <resources xmlns:tools="http://schemas.android.com/tools"> <!-- Base application theme. --> <style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <!-- Primary brand color. --> <item name="colorPrimary">@color/purple_500</item> <item name="colorPrimaryVariant">@color/purple_700</item> <item name="colorOnPrimary">@color/white</item> <!-- Secondary brand color. --> <item name="colorSecondary">@color/teal_200</item> <item name="colorSecondaryVariant">@color/teal_700</item> <item name="colorOnSecondary">@color/black</item> <!-- Status bar color. --> <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item> <!-- Customize your theme here. --> <!-- ナビゲーションのアイコン --> <item name="navigationIcon">@mipmap/ic_launcher </item> </style> </resources> エミュレータでサンプルプロジェクトを実行してみると↓のようなアプリが起動されます。 ※OS Android8.0以上の表示 ※OS Android8.0未満の表示 アイコンは表示できました。しかし、OSによって表示に差異があることがわかると思います。 OS差によるアイコン差異が発生する原因 style で navigationIcon の設定をして表示をしましたが OS によって差異が発生してしまいました。 これは Android8.0 から登場したアダプティブアイコン(adaptive icon)の影響です。 アイコンのファイルを確認します。 anydpi-v26 のディレクトリ内にあるファイルでアダプティブアイコンを定義しています。 ic_launcher.xml <?xml version="1.0" encoding="utf-8"?> <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@drawable/ic_launcher_background" /> <foreground android:drawable="@drawable/ic_launcher_foreground" /> </adaptive-icon> Android8.0以上のOSはアダプティブアイコンを表示しているので表示に差異があるということがわかりました。 アイコンサイズを調整 アダプティブアイコンの影響で表示差異があるのはわかったのですが、Android8.0以上はアイコンの表示サイズが大きいので調整したいです。 ic_launcher.png をコピーして drawable内に置いてその画像を読み込むという手が考えられますが、無駄に画像リソースを作成することになるので避けたいです。しかもこの方法だとアダプティブアイコンが適用されません。 layer-list を利用してサイズを調整するのが良いと思います。 今回は 縦横を 32dp のアイコンにしたいと思います。 drawable内に ic_launcher_32dp.xml というファイルを作成します。 ic_launcher_32dp.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:width="32dp" android:height="32dp" android:drawable="@mipmap/ic_launcher" /> </layer-list> このファイルを Themes.xml に記載します。 <item name="navigationIcon">@drawable/ic_launcher_32dp </item> エミュレータでサンプルプロジェクトを実行してみると↓のようなアプリが起動されます。 これでアイコンサイズを調整できました。 さらにAndroid8.0以上はアダプティブアイコンのアイコンが表示されます。 アダプティブアイコンと普通のアイコンでサイズ調整を変えたい アダプティブアイコンは OS 8.0 から適用されます。 APIレベルが26以上と未満で分岐させればアダプティブアイコンと普通のアイコンで表示を制御できます。 やり方は drawable-v26 のフォルダを作成するだけです。 そこに ic_launcher_32dp.xml のファイルも用意します。 あとはそれぞれ用意した ic_launcher_32dp.xml ファイルを変更することでアイコンの調整が可能です。 drawable-v26/ic_launcher_32dp.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- アダプティブアイコンを48dpで表示することも可能 --> <item android:width="48dp" android:height="48dp" android:drawable="@mipmap/ic_launcher" /> </layer-list> drawable/ic_launcher_32dp.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- pngファイルであればbitmapタグでも表示可能 --> <item android:width="32dp" android:height="32dp"> <bitmap android:src="@mipmap/ic_launcher" /> </item> </layer-list>

CIとは？ そもそもCIとは何なのでしょうか。正直私も今回初めてCIを扱うので腑に落ちる理解はできていませんが、すごく簡単にいうと自動的にアプリが正常かどうかチェックしてくれるシステムかなと考えています。 GitHub Actionsを利用してCIをセットアップできる CIを行うには様々なツールが存在するみたいですが、Github Actionsを利用すると他のCIツールと同じようにプッシュやプルリクなどの操作をトリガーにして処理を実行させることができます。 セットアップしてみよう CIを導入したいプロジェクトのリポジトリに行くと画面上部にActionsというタブ？があるのでそれをクリックします。 これをクリックするとワークフローをセットアップしようねみたいな画面が出てくるのでその中から自分が作成したプロジェクトの言語と一致するものを選びましょう。今回はAndroidなので以下のカードのSet up this workflowを選択すればOKです。 このボタンを押下すると以下のような画面が出てくるので、このエディタみたいな部分にワークフローを記述していきます。ワークフローとは何をトリガーにして処理を実行させるかなどのルールのことを意味します。 ワークフローを記述しよう 今回は以下のように書きました。 ci.yml name: CI on: push: branches: - main paths-ignore: - docs/** - README.md - LICENSE pull_request: branches: - main paths-ignore: - docs/** - README.md - LICENSE jobs: build: runs-on: ubuntu-latest steps: # チェックアウト - uses: actions/checkout@v2 # JDKのセットアップ - name: set up JDK 11 uses: actions/setup-java@v2 with: distribution: 'zulu' java-version: '11' # Gradleのキャッシュ復元 - uses: actions/cache@v2 with: path: ~/.gradle/caches key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*') }} restore-keys: | ${{ runner.os }}-gradle- # 依存関係の出力 - name: Displays the Android dependencies of the project run: ./gradlew androidDependencies # コンパイル - name: Run Compile run: ./gradlew assembleDebug test: runs-on: ubuntu-latest steps: # チェックアウト - uses: actions/checkout@v2 # JDKのセットアップ - name: set up JDK 11 uses: actions/setup-java@v2 with: distribution: 'zulu' java-version: '11' # Gradleのキャッシュ復元 - uses: actions/cache@v2 with: path: ~/.gradle/caches key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*') }} restore-keys: | ${{ runner.os }}-gradle- # テスト - name: Test with Gradle run: ./gradlew test --stacktrace lint: runs-on: ubuntu-latest steps: # チェックアウト - uses: actions/checkout@v2 # 静的解析 - name: Run Inspection run: ./gradlew lint # 結果の表示 - uses: yutailang0119/action-android-lint@v1 with: xml_path: '**/build/reports/lint-results-*.xml' # アーティファクトへアップロード - name: Upload results Artifact uses: actions/upload-artifact@v2 if: success() || failure() with: name: results path: | **/build/reports/lint-results-*.html **/build/reports/lint-results-*.xml if-no-files-found: error retention-days: 14 こんな感じになっていれば、成功です 参考記事です： GitHub ActionsでAndroidアプリのCIを構築する方法

概要 Androidでデバッグ実行しても、エラー発生もなしでインストール状態が続く 環境 Mac OS Big Sur 11.6 原因 裏でアプリのキャッシュデータみたいなのが残っている可能性がある 対策 adb uninstall ${packageName} で Successと表示されればデバッグ実行できるようになる 参考 https://stackoverflow.com/questions/51809421/flutter-is-not-able-to-install-the-apk-into-the-real-device-suddenly

はじめに 知り合いのAndroidエンジニア方たちとZOZOTOWNのアプリのUIを再現しようというハッカソン的なことを始めました。そこで実装していく上で考えたことや詰まったことなどを何回かに分けて記事として投稿していこうかなと思います。 ZOZOTOWNのアプリは画面下に5つのタブがついています(著作権的なことが怖いので画像は載せません?‍♂️)。今回は一人が一つのタブ毎の画面を担当するという構成になりました。僕はお気に入りタブの担当になったので、お気に入りタブに関して書いていきます！ 今回はTabLayoutとViewPager2の接続部分をやっていこうと思います。 今回の完成像 全体の構成 TabLayout + ViewPager2 + FragmentStateAdapterという構成になっています。下のタブ毎にFragmentを持っています。お気に入りのFragment(以下FavoriteFragment)の内部で、新着、アイテム、ブランド、のタブ毎に子Fragmentを１つずつ持ってそれをViewPager2で切り替えるという実装になっています。 TabLayoutMediatorの部分でTabLayoutとViewPager２を接続しています。 全体のコード FavoriteFragmentのコード全体です。 class FavoriteFragment : Fragment() { private var _binding: FragmentFavoriteBinding? = null private val binding: FragmentFavoriteBinding get() = _binding!! override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { _binding = FragmentFavoriteBinding.inflate(inflater, container, false) return binding.root } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) val adapter = FavoriteViewPagerAdapter(this) setUpViewPager2(adapter) connectTabLayoutAndViewPager2() } override fun onDestroyView() { super.onDestroyView() _binding = null } private fun setUpViewPager2(adapter: FavoriteViewPagerAdapter) { binding.favoriteViewPager.adapter = adapter } private fun connectTabLayoutAndViewPager2() { TabLayoutMediator(binding.favoriteTabLayout, binding.favoriteViewPager) { tab, position -> val tabTitle = when (position) { FragmentsOrder.NEW_ITEM.ordinal -> FragmentsOrder.NEW_ITEM.title FragmentsOrder.ITEM.ordinal -> FragmentsOrder.ITEM.title FragmentsOrder.BRAND.ordinal -> FragmentsOrder.BRAND.title else -> "" } tab.text = tabTitle }.attach() } private class FavoriteViewPagerAdapter(parentFragment: Fragment) : FragmentStateAdapter(parentFragment) { override fun getItemCount(): Int = FragmentsOrder.values().size override fun createFragment(position: Int): Fragment { return when (position) { FragmentsOrder.NEW_ITEM.ordinal -> FavoriteNewItemFragment.newInstance() FragmentsOrder.ITEM.ordinal -> FavoriteItemFragment.newInstance() FragmentsOrder.BRAND.ordinal -> FavoriteBrandFragment.newInstance() else -> throw IllegalArgumentException("予想外のFragmentです") } } } private enum class FragmentsOrder(val title: String) { NEW_ITEM("新着"), ITEM("アイテム"), BRAND("ブランド") } } 終わりに 次はFavoriteFragmentのお気に入りタブの下の部分をRecyclerViewで実装していきます！ ハッカソンのメンバー レビュアー: どすこいさん https://twitter.com/dosukoi_android ホームタブ担当(&主催): みっちゃんさん https://twitter.com/mimimi_engineer 探すタブ担当: らべさん https://twitter.com/wawatantanwawa 他２人 リポジトリ 参考文献