Androidアプリの作り方

画面レイアウトの作成

テキストや画像などを配置して画面のレイアウトを作成するにはxmlファイルを編集します。

画面レイアウトの作成
app->res->layout->activity_main.xmlを開いて編集します。
基本的なコードの書き方はテキスト(TextViewなど)やボタン(Button)をレイアウト(FrameLayoutなど)で囲む形になります。

画面レイアウトの作成
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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"
    tools:context="orust.co.jp.myapplication.MainActivity">
	
    <!--縦スクロール-->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="top|center_horizontal"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="20dp"
                android:background="@android:color/darker_gray"
                android:gravity="center"
                android:padding="10sp"
                android:text="@string/text_view1"
                android:textColor="@android:color/black"
                android:textSize="18sp"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="-10dp"
                android:layout_marginTop="-30dp"
                app:srcCompat="@drawable/image"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="20dp">

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="15dp"
                    android:layout_weight="1"
                    android:text="@string/text_view2"
                    android:textColor="@android:color/black"
                    android:textSize="18sp"/>

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="@string/text_view3"
                    android:textColor="@android:color/black"
                    android:textSize="18sp"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp">

                <EditText
                    android:id="@+id/edittext1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/frame_style1"
                    android:paddingBottom="8dp"
                    android:paddingLeft="8dp"
                    android:paddingRight="8dp"
                    android:paddingTop="8dp"
                    android:textColor="@android:color/black"
                    android:textSize="18sp"/>

                <TextView
                    android:layout_width="50dp"
                    android:layout_height="wrap_content"
                    android:textColor="@android:color/black"
                    android:textSize="18sp"/>

                <EditText
                    android:id="@+id/edittext2"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/frame_style1"
                    android:hint="@string/enter_digits"
                    android:inputType="numberDecimal"
                    android:paddingBottom="8dp"
                    android:paddingLeft="8dp"
                    android:paddingRight="8dp"
                    android:paddingTop="8dp"
                    android:textColor="@android:color/black"
                    android:textSize="18sp"/>

                <TextView
                    android:layout_width="50dp"
                    android:layout_height="wrap_content"
                    android:text="@string/person"
                    android:textColor="@android:color/black"
                    android:textSize="18sp"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp">

                <Button
                    android:id="@+id/Button1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/button_badkground1"
                    android:text="@string/button1"
                    android:textColor="@android:color/white"
                    android:textSize="18sp"/>

                <Button
                    android:id="@+id/Button2"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/button_badkground2"
                    android:text="@string/button2"
                    android:textColor="@android:color/black"
                    android:textSize="18sp"/>
            </LinearLayout>

        </LinearLayout>
    </ScrollView>
</FrameLayout>
              

レイアウトの種類

レイアウト 内容 属性 説明
LinearLayout 縦又は横の直線上に部品を配置 android:baselineAligned ベースラインに合わせて配置するかどうかを指定
android:baselineAlignedChildIndex baseline に対応させる子ビューを指定
android:divider 共通の区切り線を挿入
android:gravity オブジェクトの配置方法を指定
android:orientation 縦並びか横並びかを指定
android:weightSum 親に指定した数値を元に余白部分を子で分け合う
RelativeLayout 部品同士を相対的位置に配置 android:gravity オブジェクトの配置方法を指定
android:ignoreGravity gravityで指定した配置方法の影響を受けないWidgetを指定
AbsoluteLayout 部品を絶対的位置に配置(非推奨)
TableLayout 部品を表形式に配置。HTMLのテーブルのイメージ android:collapseColumns 折り畳む列を指定
android:shrinkColumns 縮小する列を指定
android:stretchColumns 幅を拡張できる列を指定
GridLayout 部品を表形式に配置。行、列を指定して直接的に配置出来る
(Android4以上)
android:alignmentMode 配置を合わせるときのモードを指定
android:columnCount 自動で子ビューを配置する時に作成する最大列数
android:columnOrderPreserved trueで列の境界が列のインデックスと同じ順序で表示されるように強制
android:orientation 縦並びか横並びかを指定
android:rowCount 自動で子ビューを配置する時に作成する最大行数
android:rowOrderPreserved trueで行の境界が行のインデックスと同じ順序で表示されるように強制
android:useDefaultMargins trueでいずれのマージンパラメータも指定されていない子ビューで、デフォルトのマージンがる使われる
FrameLayout 部品を常に左上に重ねて配置 android:foregroundGravity オブジェクトの配置方法を指定
android:measureAllChildren 子オブジェクトの描画領域を取得するかどうか指定

属性

属性 説明
xmlns:android="http・・・ 名前空間に関する定義(Androidのレイアウト用として定義)⇒ルート要素で一度だけ行う
xmlns:tools="http・・・ 名前空間に関する定義(tools属性が使用できるように)⇒ルート要素で一度だけ行う
tools:context="・・・ そのレイアウトがどのアクティビティで使われるものかを指定する(プレビューにのみ使用)
属性 定数 説明
android:layout_width
android:layout_height
wrap_content サイズを自動調整して表示する
match_parent 親オブジェクトのサイズ一杯に表示する
(数値)dp 数値で指定
属性 説明
android:layout_alignParentTop trueを指定した場合、親のViewに対して上寄せで配置
android:layout_alignParentBottom trueを指定した場合、親のViewに対して下寄せで配置
android:layout_alignParentLeft trueを指定した場合、親のViewに対して左寄せで配置
android:layout_alignParentRight trueを指定した場合、親のViewに対して右寄せで配置
android:layout_alignParentStart trueを指定した場合、親のViewに対して左寄せで配置
android:layout_alignParentEnd trueを指定した場合、親のViewに対して右寄せで配置
android:layout_centerHorizontal trueを指定した場合、親のViewに対して水平方向中央寄せで配置
android:layout_centerVertical trueを指定した場合、親のViewに対して垂直方向中央寄せで配置
android:layout_centerInParent trueを指定した場合、親のViewに対して水平垂直方向共に中央寄せで配置
android:layout_toLeftOf 指定したidのViewに対して左側に配置
android:layout_toRightOf 指定したidのViewに対して右側に配置
android:layout_toStartOf 指定したidのViewに対して左側に配置
android:layout_toEndOf 指定したidのViewに対して右側に配置
android:layout_above 指定したidのViewに対して上側に配置
android:layout_below 指定したidのViewに対して下側に配置
android:layout_alignTop 指定したidのViewの上端の位置とViewの上端を揃えて配置
android:layout_alignBottom 指定したidのViewの下端の位置とViewの下端を揃えて配置
android:layout_alignLeft 指定したidのViewの左端の位置とViewの左端を揃えて配置
android:layout_alignRight 指定したidのViewの右端の位置とViewの右端を揃えて配置
android:layout_alignStart 指定したidのViewの左端の位置とViewの左端を揃えて配置
android:layout_alignEnd 指定したidのViewの右端の位置とViewの右端を揃えて配置
android:layout_alignBaseline 指定したidのViewのベースラインの位置とViewのベースラインを揃えて配置