diff --git a/tools/winscope-ng/src/common/trace/flickerlib/common.js b/tools/winscope-ng/src/common/trace/flickerlib/common.js
index ddddda827..375c43273 100644
--- a/tools/winscope-ng/src/common/trace/flickerlib/common.js
+++ b/tools/winscope-ng/src/common/trace/flickerlib/common.js
@@ -310,4 +310,15 @@ export {
   toRegion,
   toMatrix22,
   toTransform,
+  // Constants
+  EMPTY_BUFFER,
+  EMPTY_COLOR3,
+  EMPTY_COLOR,
+  EMPTY_RECT,
+  EMPTY_RECTF,
+  EMPTY_POINT,
+  EMPTY_POINTF,
+  EMPTY_MATRIX22,
+  EMPTY_MATRIX33,
+  EMPTY_TRANSFORM,
 };
diff --git a/tools/winscope-ng/src/common/trace/flickerlib/layers/Layer.ts b/tools/winscope-ng/src/common/trace/flickerlib/layers/Layer.ts
index d7c7c4329..e9a02e800 100644
--- a/tools/winscope-ng/src/common/trace/flickerlib/layers/Layer.ts
+++ b/tools/winscope-ng/src/common/trace/flickerlib/layers/Layer.ts
@@ -96,4 +96,4 @@ function addAttributes(entry: Layer, proto: any) {
     entry.rect.label = entry.name;
 }
 
-export default Layer;
+export {Layer};
diff --git a/tools/winscope-ng/src/common/trace/flickerlib/layers/LayerTraceEntry.ts b/tools/winscope-ng/src/common/trace/flickerlib/layers/LayerTraceEntry.ts
index 9ffddff61..8b86aad42 100644
--- a/tools/winscope-ng/src/common/trace/flickerlib/layers/LayerTraceEntry.ts
+++ b/tools/winscope-ng/src/common/trace/flickerlib/layers/LayerTraceEntry.ts
@@ -15,7 +15,7 @@
  */
 
 import { Display, LayerTraceEntry, LayerTraceEntryBuilder, toRect, toSize, toTransform } from "../common"
-import Layer from './Layer'
+import {Layer} from "./Layer";
 
 LayerTraceEntry.fromProto = function (protos: any[], displayProtos: any[],
         timestamp: number, hwcBlob: string, where: string = ''): LayerTraceEntry {
diff --git a/tools/winscope-ng/src/parsers/parser_surface_flinger.spec.ts b/tools/winscope-ng/src/parsers/parser_surface_flinger.spec.ts
index d67494dd6..c5e1ee786 100644
--- a/tools/winscope-ng/src/parsers/parser_surface_flinger.spec.ts
+++ b/tools/winscope-ng/src/parsers/parser_surface_flinger.spec.ts
@@ -16,10 +16,37 @@
 import {Timestamp, TimestampType} from "common/trace/timestamp";
 import {TraceType} from "common/trace/trace_type";
 import {LayerTraceEntry} from "common/trace/flickerlib/layers/LayerTraceEntry";
+import {Layer} from "common/trace/flickerlib/layers/Layer";
 import {UnitTestUtils} from "test/unit/utils";
 import {Parser} from "./parser";
 
 describe("ParserSurfaceFlinger", () => {
+  it("decodes layer state flags", async () => {
+    const parser =
+      await UnitTestUtils.getParser("traces/elapsed_and_real_timestamp/SurfaceFlinger.pb");
+    const timestamp = new Timestamp(TimestampType.REAL, 1659107089102062832n);
+    const entry = parser.getTraceEntry(timestamp);
+
+    {
+      const layer = entry.flattenedLayers.find((layer: Layer) => layer.id === 27);
+      expect(layer.name).toEqual("Leaf:24:25#27");
+      expect(layer.flags).toEqual(0x0);
+      expect(layer.verboseFlags).toEqual("");
+    }
+    {
+      const layer = entry.flattenedLayers.find((layer: Layer) => layer.id === 48);
+      expect(layer.name).toEqual("Task=4#48");
+      expect(layer.flags).toEqual(0x1);
+      expect(layer.verboseFlags).toEqual("HIDDEN (0x1)");
+    }
+    {
+      const layer = entry.flattenedLayers.find((layer: Layer) => layer.id === 77);
+      expect(layer.name).toEqual("Wallpaper BBQ wrapper#77");
+      expect(layer.flags).toEqual(0x100);
+      expect(layer.verboseFlags).toEqual("ENABLE_BACKPRESSURE (0x100)");
+    }
+  });
+
   describe("trace with elapsed + real timestamp", () => {
     let parser: Parser;
 
diff --git a/tools/winscope-ng/src/test/unit/layer_builder.ts b/tools/winscope-ng/src/test/unit/layer_builder.ts
new file mode 100644
index 000000000..c50593cc8
--- /dev/null
+++ b/tools/winscope-ng/src/test/unit/layer_builder.ts
@@ -0,0 +1,77 @@
+/*
+ * Copyright (C) 2022 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ActiveBuffer,
+  Layer,
+  LayerProperties,
+  EMPTY_COLOR,
+  EMPTY_RECT,
+  EMPTY_RECTF,
+  EMPTY_TRANSFORM
+} from "common/trace/flickerlib/common";
+
+class LayerBuilder {
+  setFlags(value: number): LayerBuilder {
+    this.flags = value;
+    return this;
+  }
+
+  build(): Layer {
+    const properties = new LayerProperties(
+      null /* visibleRegion */,
+      new ActiveBuffer(0, 0, 0, 0),
+      this.flags,
+      EMPTY_RECTF /* bounds */,
+      EMPTY_COLOR,
+      false /* isOpaque */,
+      0 /* shadowRadius */,
+      0 /* cornerRadius */,
+      "type" /* type */,
+      EMPTY_RECTF /* screenBounds */,
+      EMPTY_TRANSFORM /* transform */,
+      EMPTY_RECTF /* sourceBounds */,
+      0 /* effectiveScalingMode */,
+      EMPTY_TRANSFORM /* bufferTransform */,
+      0 /* hwcCompositionType */,
+      EMPTY_RECTF /* hwcCrop */,
+      EMPTY_RECT /* hwcFrame */,
+      0 /* backgroundBlurRadius */,
+      EMPTY_RECT /* crop */,
+      false /* isRelativeOf */,
+      -1 /* zOrderRelativeOfId */,
+      0 /* stackId */,
+      EMPTY_TRANSFORM /* requestedTransform */,
+      EMPTY_COLOR /* requestedColor */,
+      EMPTY_RECTF /* cornerRadiusCrop */,
+      EMPTY_TRANSFORM /* inputTransform */,
+      null /* inputRegion */
+    );
+
+    return new Layer(
+      "name" /* name */,
+      0 /* id */,
+      -1 /*parentId */,
+      0 /* z */,
+      0 /* currFrame */,
+      properties
+    );
+  }
+
+  private flags = 0;
+}
+
+export {LayerBuilder};
diff --git a/tools/winscope-ng/src/viewers/common/ime_utils.ts b/tools/winscope-ng/src/viewers/common/ime_utils.ts
index 99386124c..52d121f08 100644
--- a/tools/winscope-ng/src/viewers/common/ime_utils.ts
+++ b/tools/winscope-ng/src/viewers/common/ime_utils.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import Activity from "common/trace/flickerlib/windows/Activity";
-import Layer from "common/trace/flickerlib/layers/Layer";
+import {Layer} from "common/trace/flickerlib/layers/Layer";
 import {LayerTraceEntry} from "common/trace/flickerlib/layers/LayerTraceEntry";
 import {WindowContainer} from "common/trace/flickerlib/common";
 import {WindowManagerState} from "common/trace/flickerlib/windows/WindowManagerState";
diff --git a/tools/winscope-ng/src/viewers/components/property_groups.component.spec.ts b/tools/winscope-ng/src/viewers/components/property_groups.component.spec.ts
index 86336920c..ed7aedc40 100644
--- a/tools/winscope-ng/src/viewers/components/property_groups.component.spec.ts
+++ b/tools/winscope-ng/src/viewers/components/property_groups.component.spec.ts
@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 import {ComponentFixture, TestBed} from "@angular/core/testing";
-import { PropertyGroupsComponent } from "./property_groups.component";
-import { ComponentFixtureAutoDetect } from "@angular/core/testing";
 import { MatDividerModule } from "@angular/material/divider";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { PropertyGroupsComponent } from "./property_groups.component";
+import { LayerBuilder } from "test/unit/layer_builder";
 import { TransformMatrixComponent } from "./transform_matrix.component";
 
 describe("PropertyGroupsComponent", () => {
@@ -24,13 +25,11 @@ describe("PropertyGroupsComponent", () => {
   let component: PropertyGroupsComponent;
   let htmlElement: HTMLElement;
 
-  beforeAll(async () => {
+  beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        MatDividerModule
-      ],
-      providers: [
-        { provide: ComponentFixtureAutoDetect, useValue: true }
+        MatDividerModule,
+        MatTooltipModule
       ],
       declarations: [
         PropertyGroupsComponent,
@@ -38,9 +37,6 @@ describe("PropertyGroupsComponent", () => {
       ],
       schemas: []
     }).compileComponents();
-  });
-
-  beforeEach(() => {
     fixture = TestBed.createComponent(PropertyGroupsComponent);
     component = fixture.componentInstance;
     htmlElement = fixture.nativeElement;
@@ -49,4 +45,24 @@ describe("PropertyGroupsComponent", () => {
   it("can be created", () => {
     expect(component).toBeTruthy();
   });
+
+  it("it renders verbose flags if available", async () => {
+    const layer = new LayerBuilder().setFlags(3).build();
+    component.item = layer;
+    fixture.detectChanges();
+
+    const flags = htmlElement.querySelector(".flags");
+    expect(flags).toBeTruthy();
+    expect(flags!.innerHTML).toMatch("Flags:.*HIDDEN|OPAQUE \\(0x3\\)");
+  });
+
+  it("it renders numeric flags if verbose flags not available", async () => {
+    const layer = new LayerBuilder().setFlags(0).build();
+    component.item = layer;
+    fixture.detectChanges();
+
+    const flags = htmlElement.querySelector(".flags");
+    expect(flags).toBeTruthy();
+    expect(flags!.innerHTML).toMatch("Flags:.*0");
+  });
 });
diff --git a/tools/winscope-ng/src/viewers/components/property_groups.component.ts b/tools/winscope-ng/src/viewers/components/property_groups.component.ts
index e1f9d04b4..4ef851ce4 100644
--- a/tools/winscope-ng/src/viewers/components/property_groups.component.ts
+++ b/tools/winscope-ng/src/viewers/components/property_groups.component.ts
@@ -22,10 +22,10 @@ import { Layer } from "common/trace/flickerlib/common";
     <div class="group">
       <h3 class="group-header mat-subheading-2">Visibility</h3>
       <div class="left-column">
-        <p class="mat-body-1">
+        <p class="mat-body-1 flags">
           <span class="mat-body-2">Flags:</span>
           &ngsp;
-          {{ item.flags }}
+          {{ item.verboseFlags ? item.verboseFlags : item.flags }}
         </p>
         <p *ngFor="let reason of summary()" class="mat-body-1">
           <span class="mat-body-2">{{ reason.key }}:</span>