Android Studio

背景のデザインをグラデーション背景にしたい

  /

グラデーション背景

単調な単色よりも深みが出て、モダンな印象になります。

実装手順

  1. グラデーションの色を定義する
    ui.theme/Color.kt ファイルにグラデーションに使用する色を追加します（または既存の色を使用します）。
  2. TodoListScreen の背景にグラデーションを適用する
    Column の modifier にグラデーションの背景を設定します。

具体的な手順（グラデーション背景）

MainActivity.kt ファイルの TodoListScreen 関数を編集します。

1. 必要なimportを追加

ファイルの先頭あたりに、以下を追加してください。（既にあるものもあるかもしれません）

import androidx.compose.ui.graphics.Brush // グラデーション用

2. TodoListScreen の Column にグラデーション背景を適用する

TodoListScreen 関数の一番外側の Column の modifier を以下のように変更します。ここでは例として、水色から緑色へのリニアグラデーションを設定します。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TodoListScreen(navController: NavController) {
    // ... (既存のコード) ...

    Column(
        modifier = Modifier
            .fillMaxSize()
            // ここでグラデーション背景を適用
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        Color(0xFFE0F7FA), // 上部の色 (例: 薄い水色)
                        Color(0xFFE8F5E9)  // 下部の色 (例: 薄い緑色)
                    )
                )
            ),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // ... (既存のAdBanner、ToDoリストコンテンツ、削除確認ダイアログ) ...
    }
}
  • Brush.verticalGradient: 垂直方向のグラデーションを作成します。colors リストに指定した順序で色が変化します。
  • Color(0xFFE0F7FA): 16進数で色を指定する方法です。0xFF の後にRRGGBB（赤緑青）の16進数コードを続けます。ウェブカラーピッカーなどで好きな色を見つけてみてください。

これで、アプリの背景が美しいグラデーションになります。

※Google AI Studioによる回答を参考にしました

目次に戻る