Android Studio カメラアプリ作成その13(プレビューサイズ変更)
こんにちは かなで です。
今回はプレビューのサイズをいい感じにするのが目的の記事となります。
![](https://kanalabo.net/wp-content/uploads/2021/10/22c840e09640323bb7767c459520a99f.png)
↑こちらは前回までのカメラビューをした時。
下の方に、白い部分がありますよね。この部分にもカメラプレビューを大きくしたいということで、行った内容がこちらになります。
![](https://kanalabo.net/wp-content/uploads/2021/10/f1990befe583df3b0a2ab45358c11269.png)
もともと、フレームレイアウトと、PreviewViewの部分のサイズを、数字でサイズ指定していましたが、そもそもAndroidアプリづくりで、数字でサイズ指定するのはよくないらしいです。
というのも、スマホにはいろんな解像度があるので、数字しては現実的ではないというらしいです。
そんなわけで
<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:ignore="MissingConstraints" tools:layout_editor_absoluteX="1dp" tools:layout_editor_absoluteY="1dp"> <androidx.camera.view.PreviewView android:id="@+id/viewFinder" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout>
該当部分を「match_parent」というものにすべて変更してみました。
これは「画面いっぱいに」というものらしいです。
ただ、これを書いたものが「画面いっぱい」になるというわけでなく…
![](https://kanalabo.net/wp-content/uploads/2021/10/18c6c4b286738dd3a4d70c0147d2ab87.png)
ちょっと、こちらを見てください。
イメージ的には
「androidx.constraintlayout.widget.ConstraintLayout」の中の
「FrameLayout」の中の
「androidx.camera.view.PreviewView」が該当のカメラプレビューですが、
「androidx.camera.view.PreviewView」だけ「match_parent」にしても意味はなくて、全部変更する必要があるようです。
例えば、「androidx.constraintlayout.widget.ConstraintLayout」のサイズをmatch_parentにすると、これはスマホアプリの最大サイズになります。
じゃあ次に「FrameLayout」を100×100にすると、これは100x100固定となります。
そして、「androidx.camera.view.PreviewView」をmatch_parentにしても、スマホアプリ最大サイズとならず、こいつが入っているものの最大サイズ、つまり100x100にマッチするということで、結果的に100x100サイズになるというわけです。
(なんか余計わかりにくい説明してる気が…(汗
なので全部match_parentにしましょうということですね。
そして実行した結果がこちら!
![](https://kanalabo.net/wp-content/uploads/2021/10/2fe2b954d11d366f67a98f160c348cc4.gif)
下の白い部分はなくなって、全体的に表示されていることがわかると思います。
これで解決!!
なんですが…
![](https://kanalabo.net/wp-content/uploads/2021/10/2631ea2b71b426e4d9ea227b7dc5a4da.png)
今度はこちらの「Cam」というバーの存在が気になりませんか?(笑
こちらもどうにかしたいですよね…
検索中…
案外簡単でした。
![](https://kanalabo.net/wp-content/uploads/2021/10/2d59b86e9b3e956156a130302802bc6a.png)
app→res→values→themes→themes.xmlをクリックで開きます。
(すぐ下に同じ名前のファイルがありますが、間違わないように。
![](https://kanalabo.net/wp-content/uploads/2021/10/6747dbbafb8c9b10e628422e64c32a84.png)
入れる場所はこちら↑
入れる内容はこちら↓
<item name="windowNoTitle">true</item> <item name="windowActionBar">false</item> <item name="android:windowFullscreen">true</item> <item name="android:windowContentOverlay">@null</item>
![](https://kanalabo.net/wp-content/uploads/2021/10/d1cd9ddc69876944bd598fc4fab7999e.png)
<resources xmlns:tools="http://schemas.android.com/tools"> <!-- Base application theme. --> <style name="Theme.Cam" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <!-- Primary brand color. --> <item name="colorPrimary">@color/purple_500</item> <item name="colorPrimaryVariant">@color/purple_700</item> <item name="colorOnPrimary">@color/white</item> <!-- Secondary brand color. --> <item name="colorSecondary">@color/teal_200</item> <item name="colorSecondaryVariant">@color/teal_700</item> <item name="colorOnSecondary">@color/black</item> <!-- Status bar color. --> <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item> <!-- Customize your theme here. --> <item name="windowNoTitle">true</item> <item name="windowActionBar">false</item> <item name="android:windowFullscreen">true</item> <item name="android:windowContentOverlay">@null</item> </style> </resources>
入れるとこうなります↑
これを入れると…
![](https://kanalabo.net/wp-content/uploads/2021/10/f08f4a8e95925f18ec5ad2f0d8bb3e04.gif)
こうなります!(語彙力
![](https://kanalabo.net/wp-content/uploads/2021/10/5cbd90cbc159eee4cc6ca522dbfb4d2b.png)
Camのバーも、時間とかのバーもどちらも消えて、理想的なフルスクリーンになりました!
お次は縦横回転ですな。
最後までお読みいただきありがとうございました。
気になることがあったら、コメント頂けると嬉しいです。
自主学習も兼ねて記事にするかもしれません。