33. 【Android/Kotlin】Vector Asset

はじめに
Vector Assetとは
Vector Assetでアイコン操作
アプリ起動
終わりに

はじめに

DreamHanksのMOONです。

前回はアンドロイドで絵を描けるペイント機能を追加しました。

32. 【Android/Kotlin】ペイント

今回はVector AssetというToolについて説明していきます。

Vector Assetとは

Vector AssetはSVG形式（Scalable Vector Graphics）のアイコンを提供するツールです。

SVG形式のアイコンが以下のような画像です。

Vector Assetでアイコン操作

「app」パッケージを右クリックして下の画像の「Vector Asset」選択

下の画像のClip Artをクリック

望むアイコンを選択

Nameを望むファイル名に変更してNextをクリック

「drawable」フォルダーに入ります。

ファイルを確認すると

ic_baseline_add_24.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>

<vector xmlns:android="http://schemas.android.com/apk/res/android"

android:width="24dp"

android:height="24dp"

android:viewportWidth="24"

android:viewportHeight="24"

android:tint="?attr/colorControlNormal">

<path

android:fillColor="@android:color/white"

android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>

</vector>

このようなアイコンを三つ作って画面に表示していきます。

・Activityを作成

VectorAssetActivity.kt

package com.example.practiceapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class VectorAssetActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_vector_asset)

    }

}

package com.example.practiceapplication

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

class VectorAssetActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_vector_asset)

}

・レイアウトのxmlファイルを作成

activity_vector_asset.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".VectorAssetActivity"
    android:gravity="center">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:id="@+id/add_iv"
        android:src="@drawable/ic_baseline_add_24"/>

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:id="@+id/setting_iv"
        android:src="@drawable/ic_baseline_settings_24"/>

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:id="@+id/alarm_iv"
        android:src="@drawable/ic_baseline_alarm_24"/>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".VectorAssetActivity"

android:gravity="center">

<ImageView

android:layout_width="200dp"

android:layout_height="200dp"

android:id="@+id/add_iv"

android:src="@drawable/ic_baseline_add_24"/>

<ImageView

android:layout_width="200dp"

android:layout_height="200dp"

android:id="@+id/setting_iv"

android:src="@drawable/ic_baseline_settings_24"/>

<ImageView

android:layout_width="200dp"

android:layout_height="200dp"

android:id="@+id/alarm_iv"

android:src="@drawable/ic_baseline_alarm_24"/>

</LinearLayout>

アプリ起動

終わりに

今回はVector AssetというToolについて説明しました。

次回はImage AssetというToolについて説明していきます。

34. 【Android/Kotlin】Image Asset