Android/frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style the Magnification Window - Window Mode

Browse Source 
Modifying the design of the magnification window in window mode:
1. We change the window to rounded rectangle with styled border.
2. We change the design of the window border when it is in "Edit"
   state.
3. We change the design of the drag handle to a solid shape.

Bug: 257272333
Test: manual - attach videos with the bug
Change-Id: I69310ae7db04cee116021ad951082362efc95fad
This commit is contained in:
chihtinglo
2022-12-28 16:50:46 +08:00
parent 00704fa616
commit 3576504774
11 changed files with 219 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/SystemUI/res/drawable/accessibility_window_magnification_background.xml Normal file
View File

@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright (C) 2023 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.
-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="@dimen/magnifier_corner_radius" />
<stroke
android:color="@color/magnification_border_color"
android:width="@dimen/magnifier_border_width"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="@dimen/magnifier_outer_corner_radius" />
<stroke
android:color="@android:color/black"
android:width="@dimen/magnifier_stroke_width"/>
</shape>
</item>
</layer-list>

36
packages/SystemUI/res/drawable/accessibility_window_magnification_background_change.xml Normal file
View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright (C) 2023 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.
-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="@dimen/magnifier_edit_corner_radius" />
<stroke
android:color="@color/magnification_border_color"
android:width="@dimen/magnifier_border_width"
android:dashWidth="@dimen/magnifier_edit_dash_gap"
android:dashGap="@dimen/magnifier_edit_dash_gap"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="@dimen/magnifier_edit_outer_corner_radius" />
<stroke
android:color="@android:color/black"
android:width="@dimen/magnifier_stroke_width"/>
</shape>
</item>
</layer-list>

25
packages/SystemUI/res/drawable/accessibility_window_magnification_drag_corner_background.xml Normal file
View File

@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?><!--
~ Copyright (C) 2023 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.
-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="@dimen/magnification_window_drag_corner_size"
android:height="@dimen/magnification_window_drag_corner_size"/>
<stroke
android:color="@android:color/black"
android:width="@dimen/magnification_window_drag_corner_stroke"/>
<solid android:color="@color/magnification_drag_corner_background" />
</shape>

23
packages/SystemUI/res/drawable/accessibility_window_magnification_drag_handle_background.xml Normal file
View File

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?><!--
~ Copyright (C) 2023 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.
-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:color="@android:color/black"
android:width="@dimen/magnifier_stroke_width"/>
<corners android:radius="@dimen/magnifier_corner_radius" />
<solid android:color="@color/magnification_border_color" />
</shape>

26
packages/SystemUI/res/drawable/ic_arrow_top_left_and_bottom_right.xml Normal file
View File

@@ -0,0 +1,26 @@
<!--
~ Copyright (C) 2023 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.
-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="12dp"
android:height="12dp"
android:viewportWidth="12"
android:viewportHeight="12">
<path
android:pathData="M4.304,5.717L8.731,10.141L6.903,11.969L11.959,11.953L11.973,6.899L10.131,8.74L5.703,4.318L3.229,1.843L5.073,0L0,0L0,5.071L1.83,3.243L4.304,5.717Z"
android:fillColor="#000000"
android:fillType="evenOdd"/>
</vector>

32
packages/SystemUI/res/drawable/ic_arrow_top_right_and_bottom_left.xml Normal file
View File

@@ -0,0 +1,32 @@
<!--
~ Copyright (C) 2023 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.
-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="12dp"
android:height="12dp"
android:viewportWidth="12"
android:viewportHeight="12">
<group
android:pivotX="6"
android:pivotY="6"
android:rotation="90">
<path
android:pathData="M4.304,5.717L8.731,10.141L6.903,11.969L11.959,11.953L11.973,6.899L10.131,8.74L5.703,4.318L3.229,1.843L5.073,0L0,0L0,5.071L1.83,3.243L4.304,5.717Z"
android:fillColor="#000000"
android:fillType="evenOdd"/>
</group>
</vector>

2
packages/SystemUI/res/drawable/ic_move_magnification.xml
View File

@@ -20,6 +20,6 @@
android:viewportHeight="24"
android:tint="?attr/colorControlNormal">
<path
android:fillColor="@android:color/white"
android:fillColor="@color/magnification_drag_handle_tint"
android:pathData="M12,15Q10.75,15 9.875,14.125Q9,13.25 9,12Q9,10.75 9.875,9.875Q10.75,9 12,9Q13.25,9 14.125,9.875Q15,10.75 15,12Q15,13.25 14.125,14.125Q13.25,15 12,15ZM12,22 L7.75,17.75 9.15,16.35 12,19.15 14.85,16.35 16.25,17.75ZM6.25,16.25 L2,12 6.25,7.75 7.65,9.15 4.85,12 7.65,14.85ZM9.15,7.65 L7.75,6.25 12,2 16.25,6.25 14.85,7.65 12,4.85ZM17.75,16.25 L16.35,14.85 19.15,12 16.35,9.15 17.75,7.75 22,12Z"/>
</vector>

34
packages/SystemUI/res/layout/window_magnifier_view.xml
View File

@@ -16,6 +16,7 @@
-->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
@@ -24,7 +25,7 @@
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="@dimen/magnification_outer_border_margin"
android:background="@color/magnification_border_color"/>
android:background="@drawable/accessibility_window_magnification_background"/>
<RelativeLayout
android:layout_width="match_parent"
@@ -66,54 +67,50 @@
<ImageView
android:id="@+id/top_right_corner"
android:background="@drawable/accessibility_window_magnification_drag_corner_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/magnification_outer_border_margin"
android:layout_margin="@dimen/magnification_drag_corner_margin"
android:layout_gravity="right|top"
android:paddingTop="@dimen/magnifier_drag_handle_padding"
android:paddingEnd="@dimen/magnifier_drag_handle_padding"
android:scaleType="center"
android:contentDescription="@string/magnification_drag_corner_to_resize"
android:src="@drawable/ic_magnification_corner_top_right"
android:src="@drawable/ic_arrow_top_right_and_bottom_left"
android:accessibilityTraversalAfter="@id/top_left_corner"/>
<ImageView
android:id="@+id/top_left_corner"
android:background="@drawable/accessibility_window_magnification_drag_corner_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/magnification_outer_border_margin"
android:layout_margin="@dimen/magnification_drag_corner_margin"
android:layout_gravity="left|top"
android:paddingTop="@dimen/magnifier_drag_handle_padding"
android:paddingStart="@dimen/magnifier_drag_handle_padding"
android:scaleType="center"
android:contentDescription="@string/magnification_drag_corner_to_resize"
android:src="@drawable/ic_magnification_corner_top_left"
android:src="@drawable/ic_arrow_top_left_and_bottom_right"
android:accessibilityTraversalAfter="@id/bottom_handle"/>
<ImageView
android:id="@+id/bottom_right_corner"
android:background="@drawable/accessibility_window_magnification_drag_corner_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/magnification_outer_border_margin"
android:layout_margin="@dimen/magnification_drag_corner_margin"
android:layout_gravity="right|bottom"
android:paddingEnd="@dimen/magnifier_drag_handle_padding"
android:paddingBottom="@dimen/magnifier_drag_handle_padding"
android:scaleType="center"
android:contentDescription="@string/magnification_drag_corner_to_resize"
android:src="@drawable/ic_magnification_corner_bottom_right"
android:src="@drawable/ic_arrow_top_left_and_bottom_right"
android:accessibilityTraversalAfter="@id/top_right_corner"/>
<ImageView
android:id="@+id/bottom_left_corner"
android:background="@drawable/accessibility_window_magnification_drag_corner_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/magnification_outer_border_margin"
android:layout_margin="@dimen/magnification_drag_corner_margin"
android:layout_gravity="left|bottom"
android:paddingStart="@dimen/magnifier_drag_handle_padding"
android:paddingBottom="@dimen/magnifier_drag_handle_padding"
android:scaleType="center"
android:contentDescription="@string/magnification_drag_corner_to_resize"
android:src="@drawable/ic_magnification_corner_bottom_left"
android:src="@drawable/ic_arrow_top_right_and_bottom_left"
android:accessibilityTraversalAfter="@id/bottom_right_corner"/>
<ImageView
@@ -124,7 +121,8 @@
android:layout_gravity="right|bottom"
android:padding="@dimen/magnifier_drag_handle_padding"
android:scaleType="center"
android:src="@drawable/ic_move_magnification"/>
android:src="@drawable/ic_move_magnification"
android:background="@drawable/accessibility_window_magnification_drag_handle_background"/>
<ImageView
android:id="@+id/close_button"

5
packages/SystemUI/res/values/colors.xml
View File

@@ -168,10 +168,11 @@
<color name="GM2_yellow_200">#FDE293</color>
<!-- Window magnification colors -->
<color name="magnification_border_color">#FF9900</color>
<color name="magnification_border_color_change">#0000FF</color>
<color name="magnification_border_color">#F29900</color>
<color name="magnification_switch_button_color">#7F000000</color>
<color name="magnification_drag_corner_background">#E5FFFFFF</color>
<color name="magnification_drag_handle_color">#B3000000</color>
<color name="magnification_drag_handle_tint">#111111</color>
<color name="accessibility_magnifier_bg">#FCFCFC</color>
<color name="accessibility_magnifier_bg_stroke">#E0E0E0</color>
<color name="accessibility_magnifier_icon_color">#252525</color>

10
packages/SystemUI/res/values/dimens.xml
View File

@@ -1099,6 +1099,7 @@
<dimen name="magnification_outer_border_margin">15dp</dimen>
<dimen name="magnification_inner_border_margin">17dp</dimen>
<dimen name="magnification_mirror_surface_margin">20dp</dimen>
<dimen name="magnification_drag_corner_margin">8dp</dimen>
<dimen name="magnification_frame_move_short">5dp</dimen>
<dimen name="magnification_frame_move_long">25dp</dimen>
<dimen name="magnification_drag_view_size">36dp</dimen>
@@ -1111,6 +1112,15 @@
<dimen name="magnifier_left_right_controls_height">45dp</dimen>
<dimen name="magnifier_up_down_controls_width">45dp</dimen>
<dimen name="magnifier_up_down_controls_height">40dp</dimen>
<dimen name="magnifier_outer_corner_radius">30dp</dimen>
<dimen name="magnifier_corner_radius">28dp</dimen>
<dimen name="magnifier_edit_corner_radius">16dp</dimen>
<dimen name="magnifier_edit_outer_corner_radius">18dp</dimen>
<dimen name="magnifier_border_width">8dp</dimen>
<dimen name="magnifier_stroke_width">2dp</dimen>
<dimen name="magnifier_edit_dash_gap">20dp</dimen>
<dimen name="magnification_window_drag_corner_size">26dp</dimen>
<dimen name="magnification_window_drag_corner_stroke">3dp</dimen>
<!-- The extra padding to show the whole outer border -->
<dimen name="magnifier_drag_handle_padding">3dp</dimen>
<dimen name="magnification_max_frame_size">300dp</dimen>

15
packages/SystemUI/src/com/android/systemui/accessibility/WindowMagnificationController.java
View File

@@ -49,6 +49,7 @@ import android.provider.Settings;
import android.util.Log;
import android.util.Range;
import android.util.Size;
import android.util.TypedValue;
import android.view.Choreographer;
import android.view.Display;
import android.view.Gravity;
@@ -1273,9 +1274,19 @@ class WindowMagnificationController implements View.OnTouchListener, SurfaceHold
}
private void applyResourcesValues() {
mMirrorBorderView.setBackgroundColor(mResources.getColor(mEditSizeEnable
? R.color.magnification_border_color_change : R.color.magnification_border_color));
// Sets the border appearance for the magnifier window
mMirrorBorderView.setBackground(mResources.getDrawable(mEditSizeEnable
? R.drawable.accessibility_window_magnification_background_change
: R.drawable.accessibility_window_magnification_background));
// Changes the corner radius of the mMirrorSurfaceView
mMirrorSurfaceView.setCornerRadius(
TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,
mEditSizeEnable ? 16f : 28f,
mContext.getResources().getDisplayMetrics()));
// Sets visibility of components for the magnifier window
if (mEditSizeEnable) {
mDragView.setVisibility(View.GONE);
mCloseView.setVisibility(View.VISIBLE);