[Android] 背景が半透明の Activity を作る

背景を半透明にしてクールなダイアログ風のActivityを作れます。

下はボタンをタップして新しい半透明背景のActivityに画面遷移した例
　

Android Studio
2021.2.1

Theme の設定

　
Activiyの半透明は、例えばレイアウトファイルで

android:background="#7f000000"

1	android:background="#7f000000"

のように黒の半透明を設定しても灰色の背景色になるだけです。

これを半透明にするには、半透明のThemeを作って紐づけすることで可能です。

（Android Studio のファイル構成が変わって res\values\ 以下にあった styles.xml がなくなり代わりに　Theme.xml になりました。)

新しく Them.TranslucentBackground のようなTheme名を作り、以下のようにstyleを追加し
item として透明背景の @android:color/transparent を設定します。

Theme.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.TranslucentBackground" parent="Theme.MaterialComponents.DayNight.ActionBar">
    ...
    </style>
    <style name="Theme.TranslucentBackground" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="android:windowBackground">@android:color/transparent</item>
    ...
    </style>
</resources>

...

</style>

<item name="android:windowBackground">@android:color/transparent</item>

...

</style>

</resources>

　
このテーマではActionBarを消したいので親ThemeをNoActionBarのものにしています
parent=”Theme.MaterialComponents.DayNight.NoActionBar”

これだけだと完全に背景が透明になってしまうので、半透明にするために
Activityのレイアウトで先ほどのバックグラウンドのカラー設定をします。

android:background="#7f000000"

1	android:background="#7f000000"

　
「7f」の箇所がアルファ値になるので、ここを変えて透明度の調整ができ、それに続くカラー値で色合いの調整も可能です

また、このThemeを新しいActivityのThemeとしてAndroidManifest.xmlに設定が必要です。

<activity android:name=".TranslucentActivity" 
    android:theme="@style/Theme.TranslucentBackground" >
</activity>

<activity android:name=".TranslucentActivity"

android:theme="@style/Theme.TranslucentBackground" >

</activity>

目次
1. サンプルコード
2. サンプル動画
3. Fragmentの半透明背景

サンプルコード

　
まとめてみると
　
res/values/Theme.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TestTranslucentActivity" 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. -->
    </style>
    <style name="Theme.TranslucentBackground" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>
</resources>

<item name="colorPrimary">@color/purple_500</item>

<item name="colorPrimaryVariant">@color/purple_700</item>

<item name="colorOnPrimary">@color/white</item>

<item name="colorSecondary">@color/teal_200</item>

<item name="colorSecondaryVariant">@color/teal_700</item>

<item name="colorOnSecondary">@color/black</item>

<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>

</style>

<item name="android:windowBackground">@android:color/transparent</item>

</style>

</resources>

　
画面遷移した先のActivityにこのThemeを設定します。
AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    <application
            ...
        </activity>
        
        <activity android:name=".TranslucentActivity"
            android:theme="@style/Theme.TranslucentBackground">
        </activity>
    </application>

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

...

<application

...

</activity>

<activity android:name=".TranslucentActivity"

android:theme="@style/Theme.TranslucentBackground">

</activity>

</application>

</manifest>

MainActivity.java
ここではボタンを設定して画面遷移するだけです

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = findViewById(R.id.button);
        button.setOnClickListener(v -> {
            Intent intent = new Intent(getApplication(), TranslucentActivity.class);
            startActivity(intent);
        });
    }
}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Button button = findViewById(R.id.button);

button.setOnClickListener(v -> {

Intent intent = new Intent(getApplication(), TranslucentActivity.class);

startActivity(intent);

});

}

　
遷移先のActivityです
TranslucentActivity.java

//package your.package.name; 

import androidx.appcompat.app.AppCompatActivity; 
import android.os.Bundle;

public class TranslucentActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_translucent);
    }
}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class TranslucentActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_translucent);

}

　
レイアウトのactivity_main.xmlでは画像表示とボタンです
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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=".MainActivity">

    <ImageView
        android:src="@drawable/backshot"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="30dp"
        android:text="@string/button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.95" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

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=".MainActivity">

<ImageView

android:src="@drawable/backshot"

android:scaleType="centerCrop"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:contentDescription="@string/description1"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<Button

android:id="@+id/button"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_margin="30dp"

android:text="@string/button"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.95" />

</androidx.constraintlayout.widget.ConstraintLayout>

　
遷移先のレイアウトは画面の中央に画像を表示します
activity_translucent.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    android:background="#7f000000" >

    <ImageView
        android:src="@drawable/frontshot"
        android:layout_marginTop="50dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

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"

android:background="#7f000000" >

<ImageView

android:src="@drawable/frontshot"

android:layout_marginTop="50dp"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:contentDescription="@string/description2"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

　
strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="button">Button</string>
    <string name="description1">backshot</string>
    <string name="description2">frontshot</string>
</resources>

<string name="app_name">YourAppName</string>

<string name="button">Button</string>

<string name="description1">backshot</string>

<string name="description2">frontshot</string>

</resources>

サンプル動画

　
Activityを使ったダイアログ風のスクリーンが作れました。
　

Fragmentの半透明背景

　
Activityは面倒な作業が必要でしたがFragmentはどうでしょうか
本来Activityに重ねることを前提にしているのか簡単にできます。

Fragmentのレイアウトを先にActivityで試した

android:background="#7f000000"

1	android:background="#7f000000"

を設定すると半透明のFragmentができます。

どうしてもActivityでの遷移が必要でない場合はFragmentでいいということでしょうか、今更ですが

　
　
　
Ref:
スタイルとテーマ | Android Developers