MaterialFavoriteButton
Animated favorite/star/like button
Install / Use
/learn @IvBaranov/MaterialFavoriteButtonREADME
Material Favorite Button
Material spinning favorite/star/like button.

Download
compile 'com.github.ivbaranov:materialfavoritebutton:0.1.5'
Usage
Declare in XML (see xml attributes below for customization):
<com.github.ivbaranov.mfb.MaterialFavoriteButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Or static initializer (see xml attributes below for customization):
MaterialFavoriteButton favorite = new MaterialFavoriteButton.Builder(this)
.create();
Configure using xml attributes or setters in code:
app:mfb_state="false" // default button state
app:mfb_animate_favorite="true" // to animate favoriting
app:mfb_animate_unfavorite="false" // to animate unfavoriting
app:mfb_padding="12" // image padding
app:mfb_favorite_image="@drawable/ic_fav" // custom favorite resource
app:mfb_not_favorite_image="@drawable/ic_not_fav"// custom not favorite resource
app:mfb_rotation_duration="400" // rotation duration
app:mfb_rotation_angle="360" // rotation angle
app:mfb_bounce_duration="300" // bounce duration
app:mfb_color="black" // black or white default resources (enum)
app:mfb_type="star" // star or heart shapes (enum)
app:mfb_size="48" // button size
Make sure:
- you are using either (
mfb_favorite_imageandmfb_not_favorite_image) or (mfb_colorandmfb_type). - if you change
mfb_sizeattribute you should also provide your own combination ofmfb_favorite_imageandmfb_favorite_imageresources andmfb_paddingattribute that will fit your new dimensions, otherwise you can get blurred icon
Set an OnFavoriteChangeListener to MaterialFavoriteButton:
favorite.setOnFavoriteChangeListener(
new MaterialFavoriteButton.OnFavoriteChangeListener() {
@Override
public void onFavoriteChanged(MaterialFavoriteButton buttonView, boolean favorite) {
//
}
});
Set an OnFavoriteAnimationEndListener to MaterialFavoriteButton:
favorite.setOnFavoriteAnimationEndListener(
new MaterialFavoriteButton.OnFavoriteAnimationEndListener() {
@Override
public void onAnimationEnd(MaterialFavoriteButton buttonView, boolean favorite) {
//
}
});
Usage in RecyclerView
To avoid triggering animation while re-rendering item view make sure you set favorite button state in onBindViewHolder without animation:
favoriteButton.setFavorite(isFavorite(data.get(position)));
Developed By
Ivan Baranov
License
Copyright 2015 Ivan Baranov
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.
Related Skills
diffs
341.0kUse the diffs tool to produce real, shareable diffs (viewer URL, file artifact, or both) instead of manual edit summaries.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
1.9kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
ui-ux-designer
Use this agent when you need to design, implement, or improve user interface components and user experience flows. Examples include: creating new pages or components, improving existing UI layouts, implementing responsive designs, optimizing user interactions, building forms or dashboards, analyzing existing UI through browser snapshots, or when you need to ensure UI components follow design system standards and shadcn/ui best practices.\n\n<example>\nContext: User needs to create a new dashboard page for team management.\nuser: "I need to create a team management dashboard where users can view team members, invite new members, and manage roles"\nassistant: "I'll use the ui-ux-designer agent to design and implement this dashboard with proper UX considerations, using shadcn/ui components and our design system tokens."\n</example>\n\n<example>\nContext: User wants to improve the user experience of an existing form.\nuser: "The signup form feels clunky and users are dropping off. Can you improve it?"\nassistant: "Let me use the ui-ux-designer agent to analyze the current form UX and implement improvements using our design system and shadcn/ui components."\n</example>\n\n<example>\nContext: User wants to evaluate and improve existing UI.\nuser: "Can you take a look at our pricing page and see how we can make it more appealing and user-friendly?"\nassistant: "I'll use the ui-ux-designer agent to take a snapshot of the current pricing page, analyze the UX against Notion-inspired design principles, and implement improvements using our design tokens."\n</example>
