christophesmet / android_maskable_layout Goto Github PK

In order to properly use a library with an Apache license, a copyright notice like "Copyright (C) 201x-2017 Christophe Smet" is required. Could you add this with the license in the README.md?

Thanks :)

Masking an opengl surface view doesnt seem to work. It just displays a blank white screen. Any idea how to fix this?

I've enclosed my linear layout with a maskable layout to mask the rounded edges. Within said linear layout contains a recycler view that has an item view with its elevation attribute set. Somehow, the shadows disappeared when I enclosed this linear layout within the maskable layout.

<com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout
            android:id="@+id/frm_mask_animated"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            app:porterduffxfermode="DST_IN"
            app:mask="@drawable/bottom_sheet_frame">
            <android.support.v7.widget.RecyclerView
                android:id="@+id/class_recycler"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/bottom_sheet_frame">
            </android.support.v7.widget.RecyclerView> 

</com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout>

Here's the original recycler view without the maskable frame layout:

<android.support.v7.widget.RecyclerView
       android:id="@+id/class_recycler"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@drawable/bottom_sheet_frame"> 
</android.support.v7.widget.RecyclerView>

From the layout code above, the original recycler view without the maskable layout allowed the elevation attribute for one of the items in the recycler view to render the drop shadow. However, when I enclosed it within the maskable layout, the shadows disappeared. Here's the view xml for the recycler view item:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@android:color/white">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:layout_marginTop="15dp"
        android:orientation="vertical"
        android:elevation="7dp"
        android:background="@drawable/button_active_bg">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="10dp"
            android:text="@string/level"
            android:gravity="center"
            android:textSize="12sp"
            android:layout_gravity="center"
            android:textColor="@android:color/black"/>
        <TextView
            android:id="@+id/column_floor_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingStart="45dp"
            android:paddingEnd="45dp"
            android:paddingBottom="10dp"
            android:text="G"
            android:textStyle="bold"
            android:gravity="center"
            android:textSize="24sp"
            android:layout_gravity="center"
            android:textColor="@android:color/black" />
    </LinearLayout>
    <TextView
        android:id="@+id/column_floor_cost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="RM5.00/hr"
        android:textColor="@android:color/black"
        android:textSize="13sp"
        android:layout_gravity="center"
        android:gravity="center"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"/>
</LinearLayout>

Note the linear layout contains elevation attribute set.

is there a way to do this? i'm trying to use this with Anko. Thanks.

fixed

It doesn't work with a video.
Could you make it work?

Report 1 of 4
java.lang.RuntimeException

com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout.dispatchDraw
java.lang.RuntimeException:
at android.graphics.BaseCanvas.throwIfCannotDraw (BaseCanvas.java:55)
at android.graphics.BaseCanvas.drawBitmap (BaseCanvas.java:120)
at android.graphics.Canvas.drawBitmap (Canvas.java:1434)
at android.graphics.drawable.BitmapDrawable.draw (BitmapDrawable.java:529)
at android.widget.ImageView.onDraw (ImageView.java:1370)
at android.view.View.draw (View.java:19328)
at android.view.View.draw (View.java:19192)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout.dispatchDraw (MaskableFrameLayout.java:204)
at android.view.View.buildDrawingCacheImpl (View.java:18549)
at android.view.View.buildDrawingCache (View.java:18415)
at android.view.View.draw (View.java:19037)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at android.view.View.updateDisplayListIfDirty (View.java:18243)
at android.view.View.draw (View.java:19045)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at android.view.View.updateDisplayListIfDirty (View.java:18243)
at android.view.View.draw (View.java:19045)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at android.view.View.updateDisplayListIfDirty (View.java:18243)
at android.view.View.draw (View.java:19045)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at android.view.View.draw (View.java:19331)
at android.view.View.updateDisplayListIfDirty (View.java:18257)
at android.view.View.draw (View.java:19045)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at android.view.View.updateDisplayListIfDirty (View.java:18243)
at android.view.View.draw (View.java:19045)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at android.view.View.updateDisplayListIfDirty (View.java:18243)
at android.view.View.draw (View.java:19045)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at android.view.View.updateDisplayListIfDirty (View.java:18243)
at android.view.View.draw (View.java:19045)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at android.view.View.draw (View.java:19331)
at android.view.View.updateDisplayListIfDirty (View.java:18257)
at android.view.View.draw (View.java:19045)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at com.xiaopo.flying.sticker.StickerView.dispatchDraw (StickerView.java:199)
at android.view.View.draw (View.java:19331)
at android.view.View.updateDisplayListIfDirty (View.java:18257)
at android.view.View.draw (View.java:19045)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at android.view.View.updateDisplayListIfDirty (View.java:18243)
at android.view.View.draw (View.java:19045)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at android.view.View.updateDisplayListIfDirty (View.java:18243)
at android.view.View.draw (View.java:19045)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at android.view.View.updateDisplayListIfDirty (View.java:18243)
at android.view.View.draw (View.java:19045)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at android.view.View.updateDisplayListIfDirty (View.java:18243)
at android.view.View.draw (View.java:19045)
at android.view.ViewGroup.drawChild (ViewGroup.java:4401)
at android.view.ViewGroup.dispatchDraw (ViewGroup.java:4180)
at android.view.View.draw (View.java:19331)
at com.android.internal.policy.DecorView.draw (DecorView.java:974)
at android.view.View.updateDisplayListIfDirty (View.java:18257)
at android.view.ThreadedRenderer.updateViewTreeDisplayList (ThreadedRenderer.java:676)
at android.view.ThreadedRenderer.updateRootDisplayList (ThreadedRenderer.java:682)
at android.view.ThreadedRenderer.draw (ThreadedRenderer.java:790)
at android.view.ViewRootImpl.draw (ViewRootImpl.java:3091)
at android.view.ViewRootImpl.performDraw (ViewRootImpl.java:2884)
at android.view.ViewRootImpl.performTraversals (ViewRootImpl.java:2437)
at android.view.ViewRootImpl.doTraversal (ViewRootImpl.java:1446)
at android.view.ViewRootImpl$TraversalRunnable.run (ViewRootImpl.java:6954)
at android.view.Choreographer$CallbackRecord.run (Choreographer.java:925)
at android.view.Choreographer.doCallbacks (Choreographer.java:737)
at android.view.Choreographer.doFrame (Choreographer.java:669)
at android.view.Choreographer$FrameDisplayEventReceiver.run (Choreographer.java:911)
at android.os.Handler.handleCallback (Handler.java:790)
at android.os.Handler.dispatchMessage (Handler.java:99)
at android.os.Looper.loop (Looper.java:192)
at android.app.ActivityThread.main (ActivityThread.java:6671)
at java.lang.reflect.Method.invoke (Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:438)
at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:826)

I need to fit MaskableFrameLayout to my activity so I need to make a fixed rate between width and height for the mask image. How it's possible?

in function makeBitmapMask:
Canvas canvas = new Canvas(mask);
drawable.setBounds(0, 0, getMeasuredWidth(), getMeasuredWidth());
as above:
the last line should be: drawable.setBounds(0, 0, getMeasuredWidth(), getMeasuredHeight());

you made a typo.

Please add a border around the mask.

I've tried with implementation 'com.github.christophesmet:android_maskable_layout:v1.2.0' (or 'compile') but I have these errors:

Only 'com.github.christophesmet:android_maskable_layout:d51245736a' works.

Unable to resolve dependency for ':app@debug/compileClasspath': Could not resolve com.github.christophesmet:android_maskable_layout:v1.1.0.
Unable to resolve dependency for ':app@debugAndroidTest/compileClasspath': Could not resolve com.github.christophesmet:android_maskable_layout:v1.1.0.
Unable to resolve dependency for ':app@debugUnitTest/compileClasspath': Could not resolve com.github.christophesmet:android_maskable_layout:v1.1.0.
Unable to resolve dependency for ':app@release/compileClasspath': Could not resolve com.github.christophesmet:android_maskable_layout:v1.1.0.
Unable to resolve dependency for ':app@releaseUnitTest/compileClasspath': Could not resolve com.github.christophesmet:android_maskable_layout:v1.1.0.

    <com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout
        android:id="@+id/maskable_frame_layout"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_below="@id/spacer_between_logo_and_map"
        app:porterduffxfermode="DST_IN"
        app:mask="@drawable/circle">

        <fragment xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/map"
            android:transitionName="@string/map"
            android:layout_width="200dp"
            android:layout_height="200dp"
            tools:context="com.example.gyang.android.MapActivity"
            class="com.google.android.gms.maps.SupportMapFragment"/>

    </com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout>

Any ideas?

Hey! I just need some help because I'm trying to use a mask that is a JPEG file that has white background and the mask part is black. It kinda works but how can I change the color of the mask? I tried applying backgroundTint but It didn't work.
This is what I have.

<com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout
            android:id="@+id/car_bg_base_mask"
            app:porterduffxfermode="OVERLAY"
            app:mask="@drawable/m3_overlay"
            android:elevation="-1dp"
            android:backgroundTint="@color/blue"
            android:layout_height="match_parent"
            android:layout_width="match_parent">

            <ImageView
                android:id="@+id/car_bg_base"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@string/car_background"/>

        </com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout>

I'm doing a 'pop' animation on a profile picture that's using your code to make it a circle. When I have the scale animation attached to the container it's in then the edges of the circle are really jagged. When I don't have any animation on the profile picture it looks complete fine.

I'm also not quite sure why the size of the image changes either. I'm scaling from 1.0 to 0.9 back to 1.0.

Thanks!

Hello,
After clicking on the JitPack link: "https://jitpack.io/#christophesmet/android_maskable_layout"
I'm getting this text:
"Repo not found or no access token provided".

Also in my project, it says: "Error:(125, 13) Failed to resolve: com.github.christophesmet:android_maskable_layout:-SNAPSHOT".

Hi,

Found your project looking for something to crop my Google map to a rounded corners shape. Nothing worked so far. I tried yours and it seems to remove too much. Somehow all the map content is removed, while the minimal Google Map UI can notice is cropped off to the shape I used.

Left side using the maskable_layout, right side plain map fragment. https://drive.google.com/file/d/16aivbVtTkgFm7eOSF6BWaYlagUwTkFO_/view?usp=sharing

Any idea what is happening and why the entire map layer is disappearing?

Thanks.

I am facing low performance and out of memory issues when i use MaskableLayout in RecyclerView item layout.
Let's assume that there are 2 types of items (A & B).
In my adapter i change the applied mask (setMask) according to the items type (A=A mask, B=B mask).

Is there a better way to handle that, because as far as i understand the masks keep invalidating causing me performance issues.

E/dalvikvm-heap: **Out of memory on a 9193040-byte allocation.**
I/dalvikvm: "main" prio=5 tid=1 RUNNABLE
I/dalvikvm:   | group="main" sCount=0 dsCount=0 obj=0x41763ca8 self=0x41641488
I/dalvikvm:   | sysTid=5961 nice=0 sched=0/0 cgrp=apps handle=1073865044
I/dalvikvm:   | state=R schedstat=( 0 0 0 ) utm=23035 stm=2509 core=1
I/dalvikvm:     at android.graphics.Bitmap.nativeCreate(Native Method)
I/dalvikvm:     at android.graphics.Bitmap.createBitmap(Bitmap.java:822)
I/dalvikvm:     at android.graphics.Bitmap.createBitmap(Bitmap.java:799)
I/dalvikvm:     at android.graphics.Bitmap.createBitmap(Bitmap.java:766)
I/dalvikvm:     **at  MaskableFrameLayout.makeBitmapMask(MaskableFrameLayout.java:140)**
I/dalvikvm:     **at MaskableFrameLayout.setMask(MaskableFrameLayout.java:172)**
I/dalvikvm:     at MainActivity$1.onResourceReady(MainActivity.java:211)
I/dalvikvm:     at ObCShapeMainActivity$1.onResourceReady(MainActivity.java:201)
I/dalvikvm:     at com.bumptech.glide.request.SingleRequest.onResourceReady(SingleRequest.java:558)
I/dalvikvm:     at com.bumptech.glide.request.SingleRequest.onResourceReady(SingleRequest.java:530)
I/dalvikvm:     at com.bumptech.glide.load.engine.EngineJob.handleResultOnMainThread(EngineJob.java:218)
I/dalvikvm:     at com.bumptech.glide.load.engine.EngineJob$MainThreadCallback.handleMessage(EngineJob.java:324)

I have got this error when I set a huge amount of Mask into setMask method one by one. Then sometimes it gives me OutOfMemory Error.

So my I hope you solve this error.

Suggestion for solving this error.
Make bitmap variable global and when you have used it then recycle your bitmap.

I'm using lib and i dont know how to use lib with multi image. please help me, Thank so much!

Hi, in api level 18 when set a vector drawable to "mask" attribute I get this error:

... android.content.res.Resources$NotFoundException: File {address to resource} from drawable resource ...

the problem was from this function:

//Mask functions
@Nullable
private Drawable loadMask(TypedArray a) {
    return a.getDrawable(R.styleable.MaskableLayout_mask);
}

I found a solution here and by using AppCompatResources solved my problem.

I changed loadMask to this:

//Mask functions
 @Nullable
 private Drawable loadMask(TypedArray a) {
     final int drawableResId = a.getResourceId(R.styleable.MaskableLayout_mask, -1);
     return AppCompatResources.getDrawable(getContext(), drawableResId);
 }

I have a masklayout in a recyclerview (so masking to adapter view). But when I go to next screen and come back, masking disappears. How can I fix this please.

I was using a container which had two MaskableFrameLayouts. That container is animated as a popup when opening it.

The animation was laggy, especially when other UI work was happening, such as showing images in the popup.

I noticed that turning setDrawingCacheEnabled off dramatically improved the performance.

Is there a reason it is turned on?

If not I can make a pull request.

Thanks

Hello there, I have some code improvements that I want to add to this amazing library.
Would you mind if I start PRing it?

Ive already did some initial PR bumping to the update gradle and Android Studio 3.0.

I am facing out of memory issue on carsh report in huge ammount -

java.lang.OutOfMemoryError: Failed to allocate a 4170132 byte allocation with 3545088 free bytes and 3MB until OOM

1 at dalvik.system.VMRuntime.newNonMovableArray(Native Method)
2 at android.graphics.Bitmap.nativeCreate(Native Method)
3 at android.graphics.Bitmap.createBitmap(Bitmap.java:975)
4 at android.graphics.Bitmap.createBitmap(Bitmap.java:946)
5 at android.graphics.Bitmap.createBitmap(Bitmap.java:913)
6 at com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout.android.graphics.Bitmap makeBitmapMask(android.graphics.drawable.Drawable)(MaskableFrameLayout.java:151)
7 at com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout.access$200(MaskableFrameLayout.java:29)
8 at com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout$1.void onGlobalLayout()(MaskableFrameLayout.java:233)
9 at android.view.ViewTreeObserver.dispatchOnGlobalLayout(ViewTreeObserver.java:982)
10 at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2410)
11 at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1437)
12 at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7397)
13 at android.view.Choreographer$CallbackRecord.run(Choreographer.java:920)
14 at android.view.Choreographer.doCallbacks(Choreographer.java:695)
15 at android.view.Choreographer.doFrame(Choreographer.java:631)
16 at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:906)
17 at android.os.Handler.handleCallback(Handler.java:739)
18 at android.os.Handler.dispatchMessage(Handler.java:95)
19 at android.os.Looper.loop(Looper.java:158)

How does one easily create an animation mask?

hi
I use this library
My question is, how can I disable its mask mode with code? Supposedly for weak devices.
thanks

This is my code that has no lag with frame layout and i animate the inner views very well:

<FrameLayout
        android:id="@+id/maskFrameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.q42.android.scrollingimageview.ScrollingImageView
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:layout_gravity="bottom"
            scrolling_image_view:speed="0.25dp"
            scrolling_image_view:src="@drawable/world_map" />

        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:animateLayoutChanges="true">
        </FrameLayout>
    </FrameLayout>

But when i change it to maskable frame layout it gives whole UI a huge lag in animations:

<com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout
        android:id="@+id/maskFrameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:mask="@drawable/contact_default_thumb"
        app:porterduffxfermode="SRC_IN">

        <com.q42.android.scrollingimageview.ScrollingImageView
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:layout_gravity="bottom"
            scrolling_image_view:speed="0.25dp"
            scrolling_image_view:src="@drawable/world_map" />

        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:animateLayoutChanges="true">
        </FrameLayout>
    </com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout>

What is wrong that makes this lag appear in the UI?

I converted it to kotlin and it gave a overwrite error so I though I mention it :)

How can I put stroke around circular mask?

How to set mask to layout programmatically no only in xml?.

When creating a drawable programmatically it doesn't seem to set the mask.

GradientDrawable drawable = new GradientDrawable();
drawable.setShape(GradientDrawable.RECTANGLE);
drawable.setCornerRadius(16);
drawable.setColor(Color.WHITE);
mask.setMask(drawable);