質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

特定の要素をハイライトするとき、黒いViewを画面いっぱいにしたい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,352

score 104

前提・実現したいこと

Androidアプリで、FABのSpeed dialを実装したのですが、FABをハイライトする背景の黒いViewが画面いっぱいに被さっていません。ダイアログを表示したときの背景のように、画面いっぱいに暗い幕を表示させたいです。
ちなみに、View Pagerで切り替える画面のうちの一つにFABが含まれていて、できれば通知バーからナビゲーションボタンまでかぶせたいです。

イメージ説明
このように、一番上と一番下が被さりません

Teratailに質問するのは初めてなので、至らない点がありましたら何なりと言ってください。

該当のソースコード

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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="net.chikach.smmanager.activity.MemorizeActivity">

    <include layout="@layout/content_memorize" />

    <!-- ハイライト用View -->
    <View
        android:id="@+id/background_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:alpha="0"
        android:background="#000"
        android:visibility="gone" />
    <!-- タッチイベントを拾うためのView -->
    <View
        android:id="@+id/clicker_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:alpha="0"
        android:background="#444"
        android:visibility="gone" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabMem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@drawable/baseline_add_white_24" />

    <LinearLayout
        android:id="@+id/add_folder_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="25dp"
        android:layout_marginBottom="20dp"
        android:alpha="0"
        android:orientation="horizontal"
        android:visibility="gone">

        <TextView
            android:id="@+id/add_folder_textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            android:text="フォルダー追加"
            android:textColor="#fff" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/add_folder_fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:clickable="true"
            android:focusable="true"
            app:fabSize="mini"
            app:srcCompat="@drawable/baseline_create_new_folder_white_18" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/add_card_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="25dp"
        android:layout_marginBottom="20dp"
        android:alpha="0"
        android:orientation="horizontal"
        android:visibility="gone">

        <TextView
            android:id="@+id/add_card_textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            android:text="カード追加"
            android:textColor="#fff" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/add_card_fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:clickable="true"
            android:focusable="true"
            app:fabSize="mini"
            app:srcCompat="@drawable/baseline_add_white_18" />
    </LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

表示するViewPagerがあるレイアウト

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="net.chikach.smmanager.activity.Main2Activity">


    <net.chikach.smmanager.NonSwipeViewPager
        android:id="@+id/main_view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/adViewMain"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
        android:id="@+id/adViewMain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="@string/MAIN_AD_UNIT"
        ads:layout_constraintBottom_toTopOf="@+id/nav_view"
        tools:layout_editor_absoluteX="0dp" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>

試したこと

ViewPagerと同じレイアウトに黒いViewを配置してみました。しかし、AdViewは隠れましたがBottom NavigationとToolBarがかぶさりませんでした。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

すべてのViewの上にかぶさるようにしてViewを表示したいなら、Activityとは別のWindow上に表示することで実現できます。アプリ内に別のWindowを作成し表示する方法としては

  • Dialog
  • PopupWindow

などがありますが、ご質問のケースではさらにその上にFABを基準にしてSpeed Dialを表示する必要があるので、PopupWindowが有効でしょう。

PopupWindowの背景を暗くするには、以下のようにWindowManager.LayoutParamsにFLAG_DIM_BEHINDを設定します。参考: https://stackoverflow.com/a/29950606/1636033

val popup = PopupWindow(...)
popup.showAsDropdown(...) // 先に表示用メソッドを呼ぶ

val container = popup.contentView.takeIf { it.layoutParams is WindowManager.LayoutParams }
    ?: (popup.contentView.parent as? View)?.takeIf { it.layoutParams is WindowManager.LayoutParams }
    ?: (popup.contentView.parent.parent as? View)?.takeIf { it.layoutParams is WindowManager.LayoutParams }
    ?: throw IllegalStateException("NO WindowManager.LayoutParams!")

val wm = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
val lp = container.layoutParams as WindowManager.LayoutParams
lp.flags = lp.flags or WindowManager.LayoutParams.FLAG_DIM_BEHIND
lp.dimAmount = 0.3f
wm.updateViewLayout(container, lp)

また、PopupWindowの位置合わせは少しコツがいります。手前味噌ですが、こちらのリポジトリ に色々な位置にPopupWindowを表示するための実装を載せていますので、参考にしてください。ライブラリとしても配布していますので、よければご活用ください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/11 22:11

    回答頂きありがとうございます。結局Dialogを使ったほうがうまく行きそうです。PopupWindowだと、dismissしたときの動作がもたついたり、バックキーを押したときの処理が面倒くさそうだったので。
    丁寧に回答していただいたので、ベストアンサーにさせていただきます。

    キャンセル

+1

DialogFragmentを継承したクラスを作成し、該当のレイアウトを表示するのはいかがでしょうか。
この場合、背景を暗くしなくても勝手に暗くなります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る