Android Studio でエラーが発生する。

Question

実現したいこと

画像とテキストを表示する初歩的なアプリを作りたい。

発生している問題・分からないこと

リンク内容
上記サイトであるDeveloper.Androidの初心者向けトレーニングコースに取り組んでいます。
「2.実践Compose記事」という課題です。
前の段階で画像とテキストを表示するアプリを作成したので、そのコードを流用すればいいと思いコピペして使ったのですが、そのアプリで使用されていたはずの「HappyBirthdayTheme」というところでエラーが出ます。この部分はコピペしただけでほとんど触っていないのにエラーが出ます。
なぜエラーが出るのでしょうか。また、解決方法についても教えていただきたいです。

エラーメッセージ

Unresolved reference 'HappyBirthdayTheme'

該当のソースコード

package com.example.compose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MaterialTheme.colorScheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    GreetingImage(
                        title = stringResource(R.string.jetpack_compose_tutorial),
                        first = stringResource(R.string.jetpack_compose_is_a_modern_toolkit_for_building_native_android_ui_compose_simplifies_and_accelerates_ui_development_on_android_with_less_code_powerful_tools_and_intuitive_kotlin_apis),
                        second = stringResource(R.string.in_thi),
                        modifier = Modifier . padding (8.dp)
                    )

                }
            }
        }
    }
}

@Composable
fun GreetingText(title: String, first: String, second: String, modifier: Modifier = Modifier) {
    Column(verticalArrangement = Arrangement.Center,modifier = modifier.padding(8.dp))  {
        Text(
            text = title, fontSize = 100.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = first,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.CenterHorizontally)
        )
        Text(
            text = second,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.CenterHorizontally)
        )
    }
}
@Composable
fun GreetingImage(title: String, second: String, modifier: Modifier = Modifier, first: String) {
    val image = painterResource(R.drawable.androidparty__2_)
    Box(modifier) {
        Image(
            painter = image,
            contentDescription = null,
            contentScale = ContentScale.FillWidth,
            alpha = 0.5F
        )
        GreetingText(
            title = title,
            second = second,
            first = first,
            modifier = Modifier
                .fillMaxSize()
                .padding(8.dp)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingImage(title = "Happy Birthday Sam!",first = "From Emma",second = "aa")
    }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

エラーコードをネット検索したのですが、「定義がされていない」？ようなときに出ることはわかりました。（誤字など）
誤字はなさそうです。
確かに＠コンポーズもつけていないし、パスカルケースを使用してこっちでつけた名前なのでなにか作業が必要なのかな、と思いましたが、その必要な作業がわかりませんでした。

補足

プログラミングについてはc言語の基礎を大学で習ったのと、JavaScriptを10時間ほど独学した程度の初学者です。回答について理解できない点があればすみません。

Answer 1

前の段階で画像とテキストを表示するアプリを作成したので、そのコードを流用すればいいと思いコピペして使ったのですが

ということなら、コピー元のプロジェクトにはあって、コピーが足りないということではないでしょうか。
自動生成されるものなら、コピー先に生成されているモノに合わせて名前を変える必要があるとかかもしれません。

Comments

[ちゃんこ]

解決しました！ありがとうございます！
関数の名前が原因でした！

Answer 2

参考にしている記事にあるサンプルプログラムは以下で、

　ComposeQuadrant/app/src/main/java/com/example/composequadrant/MainActivity.kt

@Preview(showBackground = true)
@Composable
fun ComposeQuadrantAppPreview() {
    ComposeQuadrantTheme {
        ComposeQuadrantApp()
    }
}

「該当のソースコード」との対応は以下の様になっているものと思われます。

参考記事のソースコード	該当のソースコード
ComposeQuadrantAppPreview()	BirthdayCardPreview()
ComposeQuadrantTheme	HappyBirthdayTheme
ComposeQuadrantApp()	GreetingImage()

HappyBirthdayTheme に対応する ComposeQuadrantTheme は別のソースコードファイルからインポートされています。

　ComposeQuadrant/app/src/main/java/com/example/composequadrant/MainActivity.kt

import com.example.composequadrant.ui.theme.ComposeQuadrantTheme

そのソースコードは以下です。

　ComposeQuadrant/app/src/main/java/com/example/composequadrant/ui/theme/Theme.kt

@Composable
fun ComposeQuadrantTheme(
        :

なので、ComposeQuadrantTheme と同様に HappyBirthdayTheme 関数を定義する必要があります。

Comments

[ちゃんこ]

できました！ありがとうございます！
別のソースコードファイルでの定義された名前がファイル名に倣って変えられていました。関数名を変更すれば解決しました！

Answer 3

あなたが追加したHappyBirthdayThemeは関数なのでその関数を定義して、そのファイルで読み込む必要があるということです

Comments

[u2025]

プロジェクト立ち上げた時にデフォルトであるんですかね？
まあプロジェクトごとに動作する状態で残しておいてどう動いているのかを勉強してもいいと思います。
調べた結果ここにあると思いますが、なんの断りもなく登場してくるのでチュートリアルとしてどう定義されたものかは分からなかったです。
com.example.happybirthday.ui.theme.HappyBirthdayTheme

https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables?hl=ja#9

[u2025]

(なんか、雰囲気的にIDEがプロジェクト名を元に自動で作るテーマコンポーネントっぽいな)

[ちゃんこ]

解決しました！ありがとうございます！
ファイル名に合わせて関数名を変えたら動きました！

[u2025]

解決おめでとうございます、関数やIDEの挙動なんかもこれから学習していくと良いと思います