androidlayoutviewmirrorhud

How can I create HUD (mirrored) layout/screen Android?


Well, I want to create a simple app. that reverse the look of the layout, even if the widget is DigitalClock or something else. I've tried it with the android:scaleX="-1"; but it works only on text and images.

How can I create a layout that reversed the whole screen, to look like a mirrored view?

thanks ahead.

normal view:

normal view the view I want:

the view I want


Solution

  • Just make a custom ViewGroup (or extend an existing one) and scale the canvas before it draws its children:

    public class MirrorRelativeLayout extends RelativeLayout {
        public MirrorRelativeLayout(Context context) {
            super(context);
        }
    
        public MirrorRelativeLayout(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public MirrorRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
        }
    
        @Override
        protected void dispatchDraw(Canvas canvas) {
            canvas.save();
            // Scale the canvas in reverse in the x-direction, pivoting on
            // the center of the view
            canvas.scale(-1f, 1f, getWidth() / 2f, getHeight() / 2f);
            super.dispatchDraw(canvas);
            canvas.restore();
        }
    
        @Override
        public void draw(Canvas canvas) {
            canvas.save();
            // Scale the canvas in reverse in the x-direction, pivoting on
            // the center of the view
            canvas.scale(-1f, 1f, getWidth() / 2f, getHeight() / 2f);
            super.dispatchDraw(canvas);
            canvas.restore();
        }
    }
    

    Then just use that ViewGroup as the root of your layout:

    <com.your.packagename.MirrorRelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <TextView
            android:text="Mirror Text!"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    
    </com.your.packagename.MirrorRelativeLayout>