From UI Proposal to Code :notes::arrow_forward:

Related tags

Animations android music player music-player prototype transition transitions motion-design ui-proposal
Overview

Icon

Music Player: From UI Proposal to Code

This is a prototype made for the article. This is not a real music player and don't expect it is.

Some developers have difficult to code when the UI proposal is a bit “sophisticated” or “complex”. Many of them strip a lot of significant portion of the UI or even the Motion when they are coding, and the result ends up quite different of the original proposal.

This article talks about how would be to code an UI proposal, skipping some basic Android details and focusing on transition and animation approach...

Read more at here

Special thanks to michaelizer for the awesome logo.


License Apache 2.0 minSdkVersion 21 compileSdkVersion 27

Android Arsenal MaterialUp Music-Player Android Sweets #27 Awesome Android #22

Transition by Anish Chandran Code by André Mion
Transition by Anish Chandran Code by André Mion

Libraries and tools used in the project

  • Design Support Library The Design package provides APIs to support adding material design components and patterns to your apps.
  • MusicCoverView A Subclass of ImageView that 'morphs' into a circle shape and can rotates. Useful to be used as album cover in Music apps.
  • RecyclerView A flexible view for providing a limited window into a large data set.
  • PercentRelativeLayout Subclass of RelativeLayout that supports percentage based dimensions and margins.

License

Copyright 2016 André Mion

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.
Comments
  • How amazing the work is !

    How amazing the work is !

    Hello,I am a Chinese Android developer. I think your work is wonderful,it should be watched by more people,so I want to translate your article into Chinese and release it in my blog. Certainly,I will add reference and your link. Could I ? :-)

    opened by siegeout 5
  • a good amount of maintenance work

    a good amount of maintenance work

    • fix some english
    • update some links
    • target pie
    • java 1.8 compatibility
    • gradle 4.4 -> 4.10.2
    • android studio 3.1.3 -> 3.2.1
    • migrate app to appCompat
    • migrate to androidx
    opened by TacoTheDank 1
  • bug on music player demo

    bug on music player demo

    when i clicked the three dots, it didn't respond...i tried it several times but all to no avail. please kindly fix.

    android version----7.0

    get the link to the video i recordedhere

    invalid 
    opened by cckole 1
  • Unable to play any song on the Music player

    Unable to play any song on the Music player

    EXPECTED BEHAVIOR

    When i want to played any music of my choice I should be able to clicked and play.

    ACTUAL BEHAVIOUR

    When i clicked on any music to play, there was no response and i was unable to play any song

    HOW TO REPRODUCE

    Launch the app and open

    Click on any song of your choice and note the bug

    Device used: Tecno Droipad 7D

    Operating system: Android version 7.0

    App version: 1.0.1

    Recording of the Bug https://youtu.be/HJ-vFYmIWIk

    invalid 
    opened by darewealth 1
  • cant forward and next on music player demo

    cant forward and next on music player demo

    EXPECTED BEHAVIOR

    When i played music on the app I should be able to forward or next the music i am playing.

    ACTUAL BEHAVIOUR

    When music was played on the app i was unable to forward and next on the app

    HOW TO REPRODUCE

    Launch the app and open

    Click on play icon to play song click on next icon and forward icon and note the bug

    Device used: Tecno Droipad 7D

    Operating system: Android version 7.0

    App version 1.0.1

    Recording of the Bug

    https://youtu.be/RQZdaJlHnrY

    invalid 
    opened by darewealth 1
  • No sound while playing music

    No sound while playing music

    EXPECTED BEHAVIOR

    When i played music on the app I should be able to hear the music i am playing.

    ACTUAL BEHAVIOUR

    When i clicked on play icon on the app to play music, there was no sound and i was unable to hear any song

    HOW TO REPRODUCE

    Launch the app and open

    Click on play icon to play song and note the bug

    Device used: Tecno Droipad 7D

    Operating system: Android version 7.0

    App version 1.0.1

    Recording of the Bug

    https://youtu.be/Hj4ncHuHvTM

    invalid 
    opened by darewealth 1
Releases(SNAPSHOT3)
Owner
André Mion
🇧🇷 Android Engineer living in 🇵🇹 • Full time Husband and Dad • Occasionally Drummer and Inline Skater… I build mostly Android stuffs…
André Mion
GitHub https://medium.com/@andremion/music-player-3a85864d6df7#.iklz50r6n
Android StackBlur is a library that can perform a blurry effect on a Bitmap based on a gradient or radius, and return the result. The library is based on the code of Mario Klingemann.

Android StackBlur Android StackBlur is a library that can perform a blurry effect on a Bitmap based on a gradient or radius, and return the result. Th

Enrique López Mañas 3.6k Dec 29, 2022
BaseAnimation network Android animation set, custom controls, nearly 200 kinds of source code！ BaseAnimation, if a new version is updated automatically to remind everyone, I hope everyone will contribute their animated XML files or other source, together to create this open source app！

#BaseAnimation (below chart) #动画合集 （下面有效果图）修改分支 主干 English Description BaseAnimation network Android animation set, custom controls, nearly 200 kinds

DuGuang 1k Dec 14, 2022
AppIntroAnimation is a set of code snippets to make cool intro screen for your app with special Image Translation and Transformation animation effects. It is very easy to use and customize without adding third party library integrations.

AppIntroAnimation AppIntroAnimation is a set of code snippets to make cool intro screen for your app with special Image Translation and Transformation

Chandrasekar Kuppusamy 799 Nov 14, 2022
Animated Loader or Animated Progress Dialog android code.

AnimatedLoadingIndicator LoadingIndicator This is a simple but effective animated Loading Indicator which can easily ready to use integrated few lines

Yash Agarwal 95 Nov 15, 2022
From UI Proposal to Code :notes::arrow_forward:

Music Player: From UI Proposal to Code This is a prototype made for the article. This is not a real music player and don't expect it is. Some develope

André Mion 3.5k Jan 9, 2023
Music Player: From UI Proposal to Code

Some developers have difficult to code when the UI proposal is a bit “sophisticated” or “complex”. Many of them strip a lot of significant portion of the UI or even the Motion when they are coding, and the result ends up quite different of the original proposal.

André Mion 3.5k Dec 28, 2022
The project's proposal is the creation of a calculator app

Calculadora ?? Índice Sobre Tecnologias utilizadas Preview ?? Preview videoApp.mp4 ?? Sobre A proposta do projeto é a criação do app de uma calculador

Henrique Marinho Teixeira 2 Jan 26, 2022
Notes is a simple and private notes app. Organize your thoughts, discoveries, and ideas and simplify planning important moments in your life with your digital notepad.

Notes Example Download Download the latest version of the Android app from this link. Building Using Android Studio Clone the repo, open it in Android

Dmitry Savin 1 Jan 3, 2022
CatatanKu-SimpleNoteApp - CatatanKu helps to create your notes. You can edit and delete notes too. All Changes in database is pushed to Firebase Realtime Database

?? CatatanKu CatatanKu helps to create your notes. You can edit and delete notes

Julham 1 Jan 2, 2022
Notes-App-Kotlin - Notes App Built Using Kotlin

Notes-App-Kotlin Splash Screen Home Page Adding New Notes Filter Feature Search

Priyanka 4 Oct 2, 2022
Built the ccp code on compose. Country Code Picker is an android library which provides an easy way to search and select country or international phone code.

Built the ccp code on compose. Country Code Picker is an android library which provides an easy way to search and select country or international phone code.

utku glsvn 7 Oct 23, 2022
Android library to make notes drop animation for music players

VusikView Min SDK 11 Screnshots How to use If you want use this library, you can download project and import it into your workspace and add the projec

Chetan Kaushik 119 Nov 29, 2022
A simple notes app to demo Room + LiveData implementation in Android

RoomDb-Sample This is a demo app on how to implement Room persistance library, making use of LiveData in Android app How to implement Room: a SQLite o

Anitaa Murthy 117 Dec 23, 2022
Subclass of ImageView that 'morphs' into a circle shape and can rotates. Useful to be used as album cover in Music apps. :dvd::notes:

Music Cover View A Subclass of ImageView that 'morphs' into a circle shape and can rotates. Useful to be used as album cover in Music apps. It's used

André Mion 254 Dec 23, 2022
A simple textfield for adding quick notes without ads.

Simple Notes A simple textfield for adding quick notes. Need to take a quick note of something to buy, an address, or a startup idea? Then this is the

Simple Mobile Tools 670 Dec 31, 2022
A simple textfield for adding quick notes without ads.

Simple Notes A simple textfield for adding quick notes. Need to take a quick note of something to buy, an address, or a startup idea? Then this is the

Simple Mobile Tools 670 Dec 31, 2022
Take beautiful markdown notes and stay organized with task lists.

Take beautiful markdown notes whenever you feel inspired. Place them in notebooks and tag them accordingly. Stay organized by making task lists, set reminders and keep everything in one place by attaching related files.

null 412 Dec 27, 2022
A simple Notes Android app

Taskie - A Note Taking MVVM Application! Designed a simple Notes Android app following features A simple Notes Android app following features Single a

Chetan Gupta 13 Aug 1, 2022
OpenNoteScanner - Android application for scanning and manipulating handwritten notes and documents.

OpenNoteScanner This little application provides a way on scanning handwritten notes and printed documents. It automatically detect the edge of the pa

Claudemir Todo Bom 1.2k Jan 1, 2023
Kotlin Leaning Notes from Udacity Course | Kotlin Bootcamp for Programmers by Google

Kotlin Beginners Notes These are all personal notes taken from the Udacity Course (ud9011) of Kotlin Bootcamp for Programmers by Google as well as oth

Süha Tanrıverdi 34 Dec 10, 2022