概要
スタート画面を作成し、アプリケーションを実行したときにスタート画面が表示できるようにする
目次
- タイトルバーを消去する
- styles.xmlを開く
- ファイルの修正
- 実行結果
- スタート画面を作成する
- 画面に背景を設定する
- RelativeLayoutを選択
- RelativeLayoutの属性を設定する
- 「おみくじを引く」のイメージボタン配置する
- RelativeLayout上でのビューの配置方法について
- Paletteからイメージボタンを配置する
- イメージボタンの属性を設定する
- 画面に背景を設定する
このステップのポイント
- 画面レイアウトのスタイルを変更する
- 背景とボタンに画像を設定する方法を学習する
タイトルバーを消去する
アプリケーションを作成した時や、新しくレイアウトリソースを作成した時などでは、
標準で画面上にタイトルバーというものが挿入されています。
このタイトルバーにメニューボタンや検索ボタンなどを置くことができるので、非常に便利なものですが、
ゲームや画面を広く使いたいアプリケーションを作成する際は、このタイトルバーが邪魔になってくる場合があります。
今回はこのタイトルバーを消し、画面のスペースを広くとれるようにしておきましょう。

styles.xmlを開く
タイトルバーを消去するためには、「styles.xml」を編集します。
styles.xmlファイルはレイアウトのスタイルを設定するファイルで、「res」フォルダの中にあります。
まずは、「res」フォルダの中にあるstyles.xmlをダブルクリックして下さい。

ダブルクリックすると、以下の画面が表示されます。このファイルは画面レイアウトファイルと同様、XML言語で書かれています。

ファイルの修正
先ほど開いたstyles.xmlを修正します。修正箇所は、styles.xmlファイルの4行目になります。
下記のコードをコピーして styles.xmlを作成します。
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> </style> </resources>
実行結果
activity_start.xmlのファイルを開いて、画面のレイアウトを確認してみましょう。
タイトルバーが消去されていたら成功です。

スタート画面を作成する
タイトルバーを消去したら、次にスタート画面を作成しましょう。
まずは、「Hello world!」というテキストビューが配置されていますが、今回は必要ないのでテキストビューを削除します。
削除の方法は、端末画像からテキストビューの部分をクリックし、「Delete」キーをクリックします。
以下のように画面上に何も置かれていない状態にしてください。

画面に背景を設定する
次に、このレイアウト画面の背景画像を設定します。
背景画像は、STEP1で手に入れたbackground_start.pngを使用します。

背景画像は、画面レイアウトの外枠にあるRelativeLayoutに属性として設定します。
RelativeLayoutを選択
まず、Component Tree内に表示されている「RelativeLayout」をクリックします。

クリックすると、画面右下のPropertiesがRelative Layoutに関する属性一覧に切り替わります。
RelativeLayoutの属性を設定する
RelativeLayoutをクリックしたら、画面右下のPropertiesの確認をして下さい。
今回ここで設定する属性は「background」属性です。
レイアウトと属性に以下の値を設定します。
属性名 | 設定内容 | 備考 |
---|---|---|
background | @drawable/background_start | レイアウトの背景画像を設定します。 |
設定をおこない、編集画面が以下のように表示されたら完了です。

「おみくじを引く」のイメージボタン配置する
次に「おみくじを引く」のイメージボタンを配置していきます。
イメージボタンはアンケートフォームの作成で学習したボタンのビューと同じような役割を持ちますが、
イメージボタンにはボタンに画像を設定することができます。
ボタン画像は、STEP1で手に入れたbutton_start.pngを使用します。

RelativeLayout上でのビューの配置方法について
イメージボタンを配置する前に、RelativeLayout上でビューの配置方法について解説します。
RelativeLayoutはLinearLayoutと同様に配置方法を設定するためのレイアウト要素で、
レイアウトファイルを作成した段階ではデフォルトでRelativeLayoutが設定されています。
Relativeは相対的なという意味を持っており、
RelativeLayoutはある位置を基準として、そこからの距離を指定してビューを配置するレイアウト要素です。
基準にできる位置は主に2つあり、1つ目は親のレイアウトの四隅からの相対位置、2つ目はすでに配置されているビューからの相対位置
RelativeLayout内でビューを配置するためには、縦方向と横方向それぞれに対して基準となるものを指定する必要があります。
親のレイアウトからの相対配置
まずは、親のレイアウトの四隅からの距離を基準とした相対配置についてみてみます。
親のレイアウトの四隅からの配置方法は以下のイメージのように設定をおこないます。

このように一つのビューに対して、縦方向は親のレイアウトの上端または下端からこの位置、
横方向は親のレイアウトの左端または右端からこの位置といった形で指定します。
また、端の位置からだけでなく、中央にも配置することができます。
すでに配置されているビューからの相対配置
親のレイアウトの四隅からの相対位置だけでなく、すでに配置されているビューを基準とした位置の設定をおこなうこともできます。
ビューからの配置方法は以下のイメージのように設定をおこないます。

親のレイアウトからの相対配置と同様に、縦方向、横方向それぞれの方向に対して基準となるビューからの位置を設定します。
ビューからの相対配置を行う場合は、ビューの真上に配置、ビューの端に合わせるといった配置方法を取ります。
Android Studio上でビューを配置する
Android Studio上にドラッグ&ドロップで配置するときは、カーソルの位置、プレビュー画面に表示されるオレンジ色の枠だけでなく、
プレビュー画面の下に表示されるメッセージ(属性)にも注目しながら配置をおこなってください。
上の行は横方向に対する属性、下の行は縦方向に対する属性となります。
それぞれの用語の意味は以下の表を参考にしてください。

■親のレイアウトを基準とした場合の属性
属性名 | 設定内容 |
---|---|
alignParentLeft | 親のレイアウトの左端 |
alignParentRight | 親のレイアウトの右端 |
alignParentTop | 親のレイアウトの上端 |
alignParentBottom | 親のレイアウトの下端 |
centerHorizontal | 親のレイアウトの中央(横方向) |
centerVertical | 親のレイアウトの中央(縦方向) |
■配置してあるビューを基準とした場合の属性
※xxxは基準とするビューに設定されているidです。
属性名 | 設定内容 |
---|---|
toLeftOf=xxx | 基準となるビューの左に配置 |
toRightOf=xxx | 基準となるビューの右に配置 |
above=xxx | 基準となるビューの上に配置 |
below=xxx | 基準となるビューの下に配置 |
alignLeft=xxx | 基準となるビューの左端に合わせる |
alignRight=xxx | 基準となるビューの右端に合わせる |
alignTop=xxx | 基準となるビューの上端に合わせる |
alignBottom=xxx | 基準となるビューの下端に合わせる |
Paletteからイメージボタンを配置する
では、画面にイメージボタンを配置しましょう。
今回は横方向は親のレイアウトの中央、縦方向は親のレイアウトの下端に配置するようにします。
マウスのカーソルを画面下の中央までクリックしたまま引っ張っていき、以下の図のようにcenterHorizontal alignParentBottomが表示されたらクリックを離します。

クリックを離すと、イメージボタンが配置されます。
イメージボタンにはまだ画像を設定していないので、この時点では以下の図のような状態になっています。

イメージボタンの属性を設定する
次に、イメージボタンに対する属性を設定します。
まずはイメージボタンをクリックで選択して、Propertiesの項目をイメージボタンの属性一覧に切り替えましょう。
今回ここで設定する属性は「id」、「src」、「background」、「scaleType」属性です。
レイアウトと属性に以下の値を設定します。
属性名 | 設定内容 | 備考 |
---|---|---|
id | buttonStart |
ボタンを識別するためのIDを設定します。 ボタンがクリックされたかどうかを識別するためには、ボタンに設定したIDが必要になります。 |
src | @drawable/button_start | イメージボタンで使用する画像を設定します。 |
background | #00000000 |
イメージボタンの背景の色を設定します。 ここでは、背景の透過処理をおこなっています。 |
scaleType | fitXY |
イメージを表示する領域を設定します。 fitXYは画像をフルサイズ表示する設定です。 |
設定をおこない、編集画面が以下のように表示されたら完了です。

実機で実行結果を確認
画面の作成が完了したら、接続した実記端末にアプリケーションを実行してみましょう。
作成した画面が表示されれば完了です。
