• Guest
HabraHabr
  • Main
  • Users

  • Development
    • Programming
    • Information Security
    • Website development
    • JavaScript
    • Game development
    • Open source
    • Developed for Android
    • Machine learning
    • Abnormal programming
    • Java
    • Python
    • Development of mobile applications
    • Analysis and design of systems
    • .NET
    • Mathematics
    • Algorithms
    • C#
    • System Programming
    • C++
    • C
    • Go
    • PHP
    • Reverse engineering
    • Assembler
    • Development under Linux
    • Big Data
    • Rust
    • Cryptography
    • Entertaining problems
    • Testing of IT systems
    • Testing Web Services
    • HTML
    • Programming microcontrollers
    • API
    • High performance
    • Developed for iOS
    • CSS
    • Industrial Programming
    • Development under Windows
    • Image processing
    • Compilers
    • FPGA
    • Professional literature
    • OpenStreetMap
    • Google Chrome
    • Data Mining
    • PostgreSQL
    • Development of robotics
    • Visualization of data
    • Angular
    • ReactJS
    • Search technologies
    • Debugging
    • Test mobile applications
    • Browsers
    • Designing and refactoring
    • IT Standards
    • Solidity
    • Node.JS
    • Git
    • LaTeX
    • SQL
    • Haskell
    • Unreal Engine
    • Unity3D
    • Development for the Internet of things
    • Functional Programming
    • Amazon Web Services
    • Google Cloud Platform
    • Development under AR and VR
    • Assembly systems
    • Version control systems
    • Kotlin
    • R
    • CAD/CAM
    • Customer Optimization
    • Development of communication systems
    • Microsoft Azure
    • Perfect code
    • Atlassian
    • Visual Studio
    • NoSQL
    • Yii
    • Mono и Moonlight
    • Parallel Programming
    • Asterisk
    • Yandex API
    • WordPress
    • Sports programming
    • Lua
    • Microsoft SQL Server
    • Payment systems
    • TypeScript
    • Scala
    • Google API
    • Development of data transmission systems
    • XML
    • Regular expressions
    • Development under Tizen
    • Swift
    • MySQL
    • Geoinformation services
    • Global Positioning Systems
    • Qt
    • Dart
    • Django
    • Development for Office 365
    • Erlang/OTP
    • GPGPU
    • Eclipse
    • Maps API
    • Testing games
    • Browser Extensions
    • 1C-Bitrix
    • Development under e-commerce
    • Xamarin
    • Xcode
    • Development under Windows Phone
    • Semantics
    • CMS
    • VueJS
    • GitHub
    • Open data
    • Sphinx
    • Ruby on Rails
    • Ruby
    • Symfony
    • Drupal
    • Messaging Systems
    • CTF
    • SaaS / S+S
    • SharePoint
    • jQuery
    • Puppet
    • Firefox
    • Elm
    • MODX
    • Billing systems
    • Graphical shells
    • Kodobred
    • MongoDB
    • SCADA
    • Hadoop
    • Gradle
    • Clojure
    • F#
    • CoffeeScript
    • Matlab
    • Phalcon
    • Development under Sailfish OS
    • Magento
    • Elixir/Phoenix
    • Microsoft Edge
    • Layout of letters
    • Development for OS X
    • Forth
    • Smalltalk
    • Julia
    • Laravel
    • WebGL
    • Meteor.JS
    • Firebird/Interbase
    • SQLite
    • D
    • Mesh-networks
    • I2P
    • Derby.js
    • Emacs
    • Development under Bada
    • Mercurial
    • UML Design
    • Objective C
    • Fortran
    • Cocoa
    • Cobol
    • Apache Flex
    • Action Script
    • Joomla
    • IIS
    • Twitter API
    • Vkontakte API
    • Facebook API
    • Microsoft Access
    • PDF
    • Prolog
    • GTK+
    • LabVIEW
    • Brainfuck
    • Cubrid
    • Canvas
    • Doctrine ORM
    • Google App Engine
    • Twisted
    • XSLT
    • TDD
    • Small Basic
    • Kohana
    • Development for Java ME
    • LiveStreet
    • MooTools
    • Adobe Flash
    • GreaseMonkey
    • INFOLUST
    • Groovy & Grails
    • Lisp
    • Delphi
    • Zend Framework
    • ExtJS / Sencha Library
    • Internet Explorer
    • CodeIgniter
    • Silverlight
    • Google Web Toolkit
    • CakePHP
    • Safari
    • Opera
    • Microformats
    • Ajax
    • VIM
  • Administration
    • System administration
    • IT Infrastructure
    • *nix
    • Network technologies
    • DevOps
    • Server Administration
    • Cloud computing
    • Configuring Linux
    • Wireless technologies
    • Virtualization
    • Hosting
    • Data storage
    • Decentralized networks
    • Database Administration
    • Data Warehousing
    • Communication standards
    • PowerShell
    • Backup
    • Cisco
    • Nginx
    • Antivirus protection
    • DNS
    • Server Optimization
    • Data recovery
    • Apache
    • Spam and antispam
    • Data Compression
    • SAN
    • IPv6
    • Fidonet
    • IPTV
    • Shells
    • Administering domain names
  • Design
    • Interfaces
    • Web design
    • Working with sound
    • Usability
    • Graphic design
    • Design Games
    • Mobile App Design
    • Working with 3D-graphics
    • Typography
    • Working with video
    • Work with vector graphics
    • Accessibility
    • Prototyping
    • CGI (graphics)
    • Computer Animation
    • Working with icons
  • Control
    • Careers in the IT industry
    • Project management
    • Development Management
    • Personnel Management
    • Product Management
    • Start-up development
    • Managing the community
    • Service Desk
    • GTD
    • IT Terminology
    • Agile
    • Business Models
    • Legislation and IT-business
    • Sales management
    • CRM-systems
    • Product localization
    • ECM / EDS
    • Freelance
    • Venture investments
    • ERP-systems
    • Help Desk Software
    • Media management
    • Patenting
    • E-commerce management
    • Creative Commons
  • Marketing
    • Conferences
    • Promotion of games
    • Internet Marketing
    • Search Engine Optimization
    • Web Analytics
    • Monetize Web services
    • Content marketing
    • Monetization of IT systems
    • Monetize mobile apps
    • Mobile App Analytics
    • Growth Hacking
    • Branding
    • Monetize Games
    • Display ads
    • Contextual advertising
    • Increase Conversion Rate
  • Sundry
    • Reading room
    • Educational process in IT
    • Research and forecasts in IT
    • Finance in IT
    • Hakatonas
    • IT emigration
    • Education abroad
    • Lumber room
    • I'm on my way

From Dribbble to Android Motion

From Dribbble to Android Motion  
 
On the Internet, there are many interesting animated templates with beautiful user interfaces for mobile applications, but not many examples with the implementation of these interfaces. Despite the abundance of various built-in frameworks and tools in the Android SDK, a beginner is often not easy to implement a beautiful user interface, including when there is a ready-made template.
 
 
In this article we will create a user interface, developed by Ivan Parfenov for the studio PLLTES .
 
ViewPropertyAnimator .
 
 

All in order


 
  1.  
  2. We calculate the final coordinates of the selected element from the list (its coordinates in DerailsFragment ), The list is RecyclerView ;  
  3. We store the current coordinates (coordinates in ? RecyclerFragment ) And transfer them to DetailsFragment (this is necessary for backward animation with API < 21);  
  4. Create a copy of the item selected from the list;  
  5. Make the selected element invisible (not a copy, but the element itself);  
  6. Add the copy created in point 3 to the root layout of the parent fragment, in our case this is RecyclerFragment ;  
  7. We start the animation of the other interface elements and move the created copy to the final coordinates from point 1;  
  8. When the animation is finished, create the transaction and show DetailsFragment ;  
  9. We start animation of interface elements in DetailsFragment .  

 

Animation of elements UI


 
For the animation Toolbar we will create an additional View in RecyclerFragment and place it behind the screen on top. This View will be animated in Toolbar container in DetailsFragment (blue for gif) using ViewPropertyAnimator .
 
 
    
//In RecyclerFragment
details_toolbar_helper.translationY = -details_toolbar_helper.height

 
 

 
 
Animation BottomNavigationView and RecyclerView Also implemented using ViewPropertyAnimator , nothing complicated (changing transparency and moving).
 
 

A little bit from the Transition framework


 
In simple words, the android transition framework, when it starts the transition element animation, creates a copy of the content of this transition element (something like a print screen), makes a copy of the ImageView from this copy, then adds this picture to the additional layer of the overlay layer in the and launches the animation.
 
 
We android transition framework does not quite fit, because when the animation of the transition element begins, then all other elements of the user interface in the fragment are destroyed and we can not animate them. Those. when we are in RecyclerFragment click on the list item to open DetailsFragment and start the transition animation, then all other elements of the interface in RecyclerFragment are destroyed without animation.
 
 
To get the desired result, we will manually create a copy of the item selected from the list, add it to the overlay layer and then animate it. But here there is a small problem, in the documentation to the method ViewGroupOverlay add (view: View) It is written:
 
If the view has a parent, the view will be removed from that parent.

 
But for RecyclerView this does not work, the selected item is not deleted from RecyclerView after it is added to the overlay layer.
 
 
Here's what happens when we add the selected element to the overlay layer:
 
 

 
 
And we need this:
 
 

 
 
Therefore, we will not use the overlay layer, and we will add a copy directly to the root layout. Create a copy of the content of the selected item, add it to ImageView and set the coordinates:
 
 
    fun View.copyViewImage (): View {
val copy = ImageView (context)
val bitmap = drawToBitmap ()
copy.setImageBitmap (bitmap)
//In pre-Lollipop when creating a copy, the shadow from the card view is also copied, and we do not need an additional card view
return (if (Build.VERSION.SDK_INT> = Build.VERSION_CODES.LOLLIPOP) {
CardView (context) .apply {
.cardElevation = resources.getDimension (R.dimen.card_elevation)
radius = resources.getDimension (R .dimen.card_corner_radius)
addView (copy)
}
} else {
copy
}). apply {
layoutParams = [email protected]
layoutParams.height = [email protected]
layoutParams.width = [email protected]
x = [email protected]
y = [email protected]
}
}

 
 
Why create a copy, if you can just animate directly selected item from the list?
 
 
Because he himself is RecyclerView too, will be animated and correspondingly all of its elements, including the selected one, which we want to animate separately.
 
 
After that, add a copy to the root markup and start the animation.
 
 
    override fun onclick (view: View) {
val fragmentTransaction = initFragmentTransaction (view)
val copy = view.createCopyView ()
root.addView (copy)
view.visibility = View.INVISIBLE
startAnimation (copy, fragmentTransaction)
}

 
 
And here's what we got:
 
 

 
 

The finishing line is


 
Animation on gif above occurs in RecyclerFragment , and after its completion we need to show DetailsFragment .
 
 
    .withEndAction {
fragmentTransaction? .commitAllowingStateLoss ()
}

 
Why do we use commitAllowingStateLoss ?
 
 
If you do not use it and at the moment of animation it will be, for example, changing the screen orientation, then we get IllegalStateException . Here it is it is well written about it.
 
 
Next, run the animation of the necessary elements of the user interface in DetailsFragment .
 
 

Run it all together


 

 
 
Not exactly like on the original, but it looks like it.
 
 

Examples


 
The source code is available at GitHub , an example of an application with a similar design can be downloaded from Google Play , also the article is available at English . Thank you for attention!
 
 

It may be interesting

  • Comments
  • About article
  • Similar news
This publication has no comments.

weber

Author

15-09-2018, 17:14

Publication Date

Development of mobile applications / Programming

Category
  • Comments: 0
  • Views: 377
Flutter 1.0 - December 4 release
RecyclerView tree list (without
A complete guide to the correct use of
Developed for Android. A little about
Animated numbers on Android
Use the debugger Android Studio to a
Write a comment
Name:*
E-Mail:


Comments
Quickly this site  could indisputably generally always be dominant relating to every one of web  site buyers, as a consequence of fastidious stories plus exams https://www.pizzahutcouponcode.com/pizza-hut-coupons-code/


Helpful information. Fortunate me I discovered your web site accidentally,
and I am stunned why this accident did not happen earlier! I bookmarked it. Thanks, I've recently been looking for information about this topic for [hide]a[https://www.pizzahutcouponcode.com/pizza-hut-coupons-code/
] long time and yours is the greatest I've discovered so far. But, what concerning the conclusion? Are you positive about the source?


Today, 09:15

Alytani

this is really nice to read..informative post is very good to read..thanks a lot! How is the cost of house cleaning calculated?
Yesterday, 17:14

Legend SEO

It’s very informative and you are obviously very knowledgeable in this area. You have opened my eyes to varying views on this topic with interesting and solid content.

entegrasyon programları
Yesterday, 17:09

taxiseo2

I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.

entegrasyon programları
Yesterday, 17:02

taxiseo2

I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work...먹튀

Yesterday, 16:50

raymond weber

Adv
Website for web developers. New scripts, best ideas, programming tips. How to write a script for you here, we have a lot of information about various programming languages. You are a webmaster or a beginner programmer, it does not matter, useful articles will help to make your favorite business faster.

Login

Registration Forgot password