Androidアプリ開発の基本

Androidアプリで簡単な開発をする手順

APIの設定変更

現在のプロジェクトの設定が仮想デバイス、または実機のバージョンに合わない場合、設定を修正する必要がある。

• サイドバーをAndroidからProjectに変更
• app/build.gradle.ktsの設定の修正

app/build.gradle.kts

plugins {
    alias(libs.plugins.android.application)
    alias(libs.plugins.kotlin.android)
    alias(libs.plugins.kotlin.compose)
}

android {
    namespace = "com.example.myapplication"
    compileSdk = 35

    defaultConfig {
        applicationId = "com.example.myapplication"
        minSdk = 26 //ここがAPIの最低値を設定する場所になる
        targetSdk = 35
        versionCode = 1
        versionName = "1.0"

        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            isMinifyEnabled = false
            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
        }
    }
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_11
        targetCompatibility = JavaVersion.VERSION_11
    }
    kotlinOptions {
        jvmTarget = "11"
    }
    buildFeatures {
        compose = true
    }
}

dependencies {

    implementation(libs.androidx.core.ktx)
    implementation(libs.androidx.lifecycle.runtime.ktx)
    implementation(libs.androidx.activity.compose)
    implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.ui)
    implementation(libs.androidx.ui.graphics)
    implementation(libs.androidx.ui.tooling.preview)
    implementation(libs.androidx.material3)
    testImplementation(libs.junit)
    androidTestImplementation(libs.androidx.junit)
    androidTestImplementation(libs.androidx.espresso.core)
    androidTestImplementation(platform(libs.androidx.compose.bom))
    androidTestImplementation(libs.androidx.ui.test.junit4)
    debugImplementation(libs.androidx.ui.tooling)
    debugImplementation(libs.androidx.ui.test.manifest)
}

アイコンの変更手順

以下を参照
https://blog.8bit.co.jp/?p=19200#i

• Androidで app/res/ を選択して右クリック 新規(new)で画像アセット選択
• パスを自分が使いたいパスに変更
• パスの下にスクロールするとサイズなどの項目があるのでアイコンにする画像のサイズ変更が出来る。背景色なども変更可能
• 次の画面からはそのまま次へで進んでいけばOK！

メインファイルを簡単に編集

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme
import com.example.myapplication.R  // このインポートを追加

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApplicationTheme {
                MyScreen()
            }
        }
    }
}

@Composable
fun MyScreen() {
    var text by remember { mutableStateOf("ハローワールド") }
    var userInput by remember { mutableStateOf("") }

    Scaffold(
        modifier = Modifier.fillMaxSize()
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Text(text = text, style = MaterialTheme.typography.headlineMedium)
            Spacer(modifier = Modifier.height(16.dp))

            TextField(
                value = userInput,
                onValueChange = { userInput = it },
                label = { Text("テキストを入力") },
                modifier = Modifier.fillMaxWidth()
            )

            Spacer(modifier = Modifier.height(16.dp))

            Button(
                onClick = { text = userInput },
                modifier = Modifier.padding(8.dp)
            ) {
                Text(text = "ボタンをくりっっく")
            }

            Spacer(modifier = Modifier.height(32.dp))

            // 画像の表示
            Image(
                painter = painterResource(id = R.drawable.kirby),
                contentDescription = "Sample Image",
                modifier = Modifier.size(200.dp)
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun MyScreenPreview() {
    MyApplicationTheme {
        MyScreen()
    }
}

アプリで画像を使用したい場合

• app/src/main/res/drawable/ に移動
• drawable フォルダに使用する画像をドラッグで入れる(今回はkirby.png)

今回作成したアプリの実行結果