Clone.Binance.Home.Screen.with.Jetpack.Compose.mp4
In this home screen, there are some tricky parts. Let me highlight a few things:
-
Animation: Jetpack Compose did very well with animation api. It’s very easy to use and very smooth too.
- Search bar
- Navigate between tabs Coin List: Favorites, Hot, New Listings .etc.
- Button notification when viewing feed discover.
- Button move to top when view feed discover and is scrolling up
- React popup: scale when hover
-
Custom view: Draw the background has 2 triangles with different color.
-
Sticky header in discover/news feed
-
Feed post:
- Support 2 types: post with title or only body
- Limit lines bases on post type. For example post with title has a maximum number of body lines of 3. Otherwise other posts are not limited to the number of lines.
- Support #hashtag
- List featured coins with horizontal scrolling
- Reaction popup: show below or above anchor depending on the remaining space at the top. Also has animation when hover
[🚧 WIP] Custom chart using jetpack compose
Note: For sake of simplicity, this sample I passed view model down to compose components. You shouldn't do this in real-world project which may cause hard to debug, less reusable and harder to test. Learn more