Create an Overlay view to cover whole activity including toolbar in coordinator layout
Asked Answered
S

0

2

I want to create an overlay kind of layout to be displayed above an activity including toolbar. I cannot use any library to do this as everything that I've written is custom. I was able to achieve it by adding my view to decor view directly, by using this code :

ViewGroup vg = (ViewGroup)(getWindow().getDecorView().getRootView());
tutorialViewContainer = (RelativeLayout) View.inflate(this, R.layout.layout_simple_overlay, null);
vg.addView(tutorialViewContainer, params);

but this code has an issue that it covers even the status bar and navigation bar. I only need to cover activity space including toolbar.

I have to make something similar to these post - here and here but the issue is I'm using a coordinator layout having a app bar added to it. So I'm unable to make the view visible above the toolbar.

Here is the xml code. simple_overlay_container is the view that I've added for overlay but it is displayed below the toolbar.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    style="@style/ActivityBaseStyle"
    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:fitsSystemWindows="false"
    tools:context=".activity.BaseAmcatQuestionActivity">
  <android.support.design.widget.AppBarLayout
      android:id="@+id/main.appbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:fitsSystemWindows="true"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <include
        android:id="@+id/toolbar_base_question_activity"
        layout="@layout/toolbar_test_custom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
  </android.support.design.widget.AppBarLayout>
  <FrameLayout
      android:id="@+id/fl_container_base_amcat"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
  <!--Question View Anchor Fab-->    
  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab1_language"
      android:layout_width="wrap_content"
      android:layout_height="@dimen/fab_size_40"
      android:layout_marginEnd="@dimen/activity_horizontal_margin"
      android:layout_marginRight="@dimen/activity_horizontal_margin"
      android:layout_marginTop="@dimen/margin_fab_first"
      android:clickable="true"
      android:scaleType="center"
      android:src="@drawable/ic_fab_language"
      app:backgroundTint="@color/bg_color_fab_language"
      app:layout_anchor="@+id/toolbar_base_question_activity"
      app:layout_anchorGravity="bottom|right|end"/>
  <!--info view anchor FAB-->
  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab2_info"
      android:layout_width="wrap_content"
      android:layout_height="@dimen/fab_size_40"
      android:layout_marginEnd="@dimen/activity_horizontal_margin"
      android:layout_marginRight="@dimen/activity_horizontal_margin"
      android:layout_marginTop="@dimen/margin_fab_second"
      android:clickable="true"
      android:scaleType="center"
      android:src="@drawable/ic_fab_info"
      android:visibility="gone"
      app:backgroundTint="@color/bg_color_fab_info"
      app:layout_anchor="@+id/fab1_language"
      app:layout_anchorGravity="bottom|center_horizontal"/>
  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab3_question"
      android:layout_width="wrap_content"
      android:layout_height="@dimen/fab_size_40"
      android:layout_marginEnd="@dimen/activity_horizontal_margin"
      android:layout_marginRight="@dimen/activity_horizontal_margin"
      android:layout_marginTop="@dimen/margin_fab_third"
      android:clickable="true"
      android:scaleType="center"
      android:src="@drawable/ic_fab_question"
      android:visibility="gone"
      app:backgroundTint="@color/bg_color_fab_question"
      app:layout_anchor="@+id/fab2_info"
      app:layout_anchorGravity="bottom|center_horizontal"/>
  <RelativeLayout android:id="@+id/simple_overlay_container"
                  xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:tools="http://schemas.android.com/tools"
                  app:layout_anchor="@+id/main.appbar"
                  app:layout_anchorGravity="top|left"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:background="@color/transparent_overlay_gray_75"
                  android:visibility="gone"
                  android:clickable="true">

    <ImageButton
        android:id="@+id/imageButton_zoom_image_answer_tutorial"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="@android:color/transparent"
        android:paddingEnd="@dimen/margin_12"
        android:paddingRight="@dimen/margin_12"
        android:paddingTop="@dimen/margin_12"
        android:src="@drawable/ic_zoom"
        android:visibility="gone"
        tools:ignore="RtlSymmetry"/>

  </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

I need help bring this view above the toolbar to cover the whole screen which include activity and toolbar not status bar or navigation bar.

I appreciate your help. Thanks in advance.

Sahaptin answered 20/7, 2017 at 13:41 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.