カレンダーメモアプリに保存ボタンを実装する

概要

カレンダーメモアプリを作っていて、カレンダーを表示するところまではできたのでいよいよメモを登録するところを実装しようと思います。
カレンダーの画面制作についてはこちらを見てください...
https://qiita.com/itaya

画面を作成する

現状の画面はこちら
スクリーンショット 2020-07-13 19.15.08.png

fragment_create.xml
<layout 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">

    <data>

        <variable
            name="monthData"
            type="String" />

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/design_default_color_on_primary"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/design_default_color_primary_variant"
            android:paddingVertical="10dp"
            android:text="新規メモ登録"
            android:textColor="@color/design_default_color_on_primary"
            android:textSize="30sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/save"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:src="@drawable/flame_style"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/label"
            app:srcCompat="@android:drawable/ic_btn_speak_now" />


        <TextView
            android:id="@+id/category_label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingVertical="10dp"
            android:text="カテゴリ選択"
            android:textSize="20sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/label" />

        <Spinner
            android:id="@+id/category"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/category_label" />

        <TextView
            android:id="@+id/title_label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingVertical="10dp"
            android:text="タイトル"
            android:textSize="20sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/category" />

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_title"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:hint="非必須"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/title_label">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:lines="1"
                android:maxLines="1" />
        </com.google.android.material.textfield.TextInputLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

保存ボタンを作成する

保存ボタンがなかったので、追加するのですが、下の方に自分の使ってるカレンダーアプリが追加ボタンが下ではなくタイトルのところにあったのでそこに実装することにします。

fragment_create.xml
<layout 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">

    <data>

        <variable
            name="monthData"
            type="String" />

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/design_default_color_on_primary"
        tools:context=".MainActivity">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/design_default_color_primary_variant"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/save"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="20dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@android:drawable/ic_menu_save" />

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingVertical="10dp"
                android:text="新規メモ登録"
                android:textColor="@color/design_default_color_on_primary"
                android:textSize="30sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />


        </androidx.constraintlayout.widget.ConstraintLayout>


        <TextView
            android:id="@+id/category_label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingVertical="10dp"
            android:text="カテゴリ選択"
            android:textSize="20sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/label" />

        <Spinner
            android:id="@+id/category"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/category_label" />

        <TextView
            android:id="@+id/title_label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingVertical="10dp"
            android:text="タイトル"
            android:textSize="20sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/category" />

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_title"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:hint="非必須"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/title_label">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:lines="1"
                android:maxLines="1" />
        </com.google.android.material.textfield.TextInputLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

スクリーンショット 2020-07-13 19.36.44.png

無事画面の右上の方に保存ボタンを表示することに成功しました!
次回以降余白等を調整していきたいと思います...


SNSでシェア

関連記事