christophesmet / android_maskable_layout Goto Github PK
View Code? Open in Web Editor NEWA library that easily allows you to mask layouts/viewgroups
License: Apache License 2.0
A library that easily allows you to mask layouts/viewgroups
License: Apache License 2.0
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.
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?
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);
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
How can I put stroke around circular mask?
I'm using lib and i dont know how to use lib with multi image. please help me, Thank so much!
It doesn't work with a video.
Could you make it work?
I converted it to kotlin and it gave a overwrite error so I though I mention it :)
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.
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.
Please add a border around the mask.
How does one easily create an animation mask?
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".
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.
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>
hi
I use this library
My question is, how can I disable its mask mode with code? Supposedly for weak devices.
thanks
fixed
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.
How to set mask to layout programmatically no only in xml?.
<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?
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 am facing out of memory issue on carsh report in huge ammount -
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)
Thanks :)
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.
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!
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 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?
is there a way to do this? i'm trying to use this with Anko. Thanks.
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.
Masking an opengl surface view doesnt seem to work. It just displays a blank white screen. Any idea how to fix this?
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.
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.