Showing posts with label Android Studio. Show all posts

Announcing Jetpack Compose Alpha!

Posted by Karen Ng, Director, Product Management

Today, we’re releasing the alpha of Jetpack Compose, our modern UI toolkit designed to help you quickly and easily build beautiful apps across all Android platforms, with native access to the platform APIs. Bring your app to life with dramatically less code, interactive tools, and intuitive Kotlin APIs.

No matter where you’re working from -- whether it’s your kitchen table or an office, we know you need a programming language, an IDE and a powerful UI framework that can save you time and reduce how much code you need to write. So we built Jetpack Compose to make you (and us!) more productive with building UI.

We started with Android Jetpack — taking the hardest, most common developer problems on Android and creating a suite of libraries that ensure high quality apps that work across all versions of the platform. Today, 84% of the top 10,000 apps in the Play store are using a Jetpack library.

Then we heard how developers love Kotlin, with over 70% of the top 1000 apps and 60% of pro Android developers using Kotlin today. The Google Home app saw, in certain instances, an 80% reduction in lines of code by using Kotlin and a decrease of NullPointerExceptions by 33% compared to a similar past period. Duolingo, saw reduced line count by an average of 30%.

Finally, we heard strong feedback from the community that developers like the simplicity of declarative APIs for building UI. Jetpack Compose combines all three of these: APIs for high quality apps at scale, an intuitive language, and a reactive programming model.

Jetpack

Jetpack Compose: Now in Alpha

Jetpack Compose Alpha has what you need to build full-fledged Android apps, including powerful tools and interoperability with existing Android views so you don’t need to rewrite your app. Compose APIs are designed and developed hand-in-hand with a set of canonical sample apps that use Material Design that we’re excited to release today! You can import and explore the latest samples directly in Android Studio as well.

compose

The alpha release includes:

  • Animations
  • Constraint Layout
  • Initial A11Y support
  • Input and Gestures
  • Interoperability with Views (start mixing Composable functions in your existing app)
  • Lazy Lists
  • Material UI components
  • Performance optimizations
  • Testing
  • Text and editable Text
  • Theming and Graphics
  • Window management

We've also added a number of new capabilities to Android Studio 4.2 canary, in close partnership with the JetBrains Kotlin team, to help you build apps with Compose:

  • Compose Code completion
  • Compose Preview Annotations
  • Deploy individual composables to any device
  • Interactive Compose previews
  • Kotlin compiler plugin for code generation
  • Sample Data API for Compose

Thinking in Compose

Compose uses a programming model that is quite different from the existing model of building UI on Android. Historically, an Android view hierarchy has been represented as a tree of UI widgets. As the state of the app changes, the UI hierarchy needs to be updated to display the current data. The most common way of updating the UI is to walk the tree using functions like findViewById(), and change nodes by calling methods like:

 button.setText(String) 
container.addView(View) 
 img.setImageBitmap(Bitmap) 
These methods change the internal state of the widget. Not only can this be tedious, but updating views manually increases the likelihood of errors (e.g. forgetting to update a view).

Jetpack Compose is a fully declarative component-based approach, meaning you describe your UI as functions that transform data into a UI hierarchy. When the underlying data changes, the Compose framework automatically updates the UI hierarchy for you, making it simple to build UIs easily and quickly.

Full interop with existing Android views

Adopting any new framework is a big change for existing projects and codebases, which is why we’ve designed Compose to be as easy to adopt as Kotlin — it is fully interoperable with existing Android code, from day one.

Migrating to Compose depends on you and your team. If you're building a new app, the best option might be to implement your entire UI with Compose. We know that most of you have large existing codebases, so rather than rewriting your app, you can combine Compose with your existing UI design.

There are two main ways you can combine Compose with a view-based UI:

  • You can add Compose elements into your existing UI, either by creating an entirely new Compose-based screen, or by adding Compose elements into an existing fragment or view layout.
  • You can add a view-based UI element into your composable functions. Doing so lets you add non-Compose widgets, such as MapView or WebView, into a Compose-based design.

We’ve also published a new library, MDC Compose Theme Adapter, which allows you to reuse your existing Material Components themes within your Compose UI.

To learn more, try the Compose for existing apps codelab or check out these two samples:

  • Tivi and Sunflower are existing apps which are being integrated with Compose
  • Crane sample app, embeds a MapView in Compose

Powerful Tools

Jetpack Compose is built with powerful tooling in Android Studio, designed to help you iterate quickly on the piece of UI you’re working on.

The Compose layout preview enables you to preview your Compose components without having to deploy your app to a device or emulator. As you develop your app, your previews update to help you review your changes faster. To create a layout preview, write a composable function that does not take any parameters, and add the

 @Preview annotation 
After you build your app, the preview function's UI appears in Studio's Preview pane.

Jetpack

Android Studio provides an interactive preview mode. While you're in interactive preview mode, you can click or type in your UI elements, and the UI responds as if it were in the installed app.

Jetpack

You can also deploy a single composable to your physical device or Android Emulator. Android Studio creates a new activity containing the UI generated by that function, and deploys it to your app on the device. This lets you try out the UI on an actual device without needing to reinstall the entire app or navigate to its location.

Jetpack

Get started with Jetpack Compose

To get started with Jetpack Compose, try the Compose Tutorial and get setup. Or dive right into the sample apps and walk through those apps in ‘Compose by Example’:

To find a comprehensive set of Compose resources, from new codelabs and expanded documentation, see the Compose pathway.

Since we open-sourced Jetpack Compose last year, so many of you have given us invaluable feedback, logged bugs, or contributed CLs and have gotten us where we are today. Thank you!

Compose isn’t recommended for full production use yet, in particular as we work towards API stability and finish performance optimizations, but we’d love you to give it a try and share feedback. Join us in the discussion on the #compose channel at Kotlin Slack. Compose 1.0 is expected in 2021.

Happy Composing!

New language features and more in Kotlin 1.4

Posted by Wojtek Kaliciński, Developer Advocate, Android

When we adopted Kotlin as a supported language on Android, and then shifted to a Kotlin-first approach, one of the main drivers was the excitement and adoption from the developer community. As Kotlin has grown, we’ve seen continued investment in the language from JetBrains (Kotlin's creators), the open source community, and increasingly our own teams at Google.

Today we are excited to share the news about the Kotlin 1.4 release, the next milestone in the evolution of Kotlin, which contains new language features, improved compilers and tools. Below you'll find a brief rundown of some exciting new features in this release. You can read more about Kotlin 1.4 in the official announcement.

New language features

New language features introduced in Kotlin 1.4 improve the ergonomics of writing Kotlin code. Here's just one example:

SAM conversions for Kotlin interfaces

Previously, only functional interfaces (i.e. having just a Single Abstract Method - SAM) defined in the Java programming language benefited from the shorthand syntax in Kotlin:

executor.execute { println("This is shorthand for passing in a Runnable") }

In Kotlin 1.4 you can now mark your Kotlin interfaces as functional and get them to work in a similar manner by adding the fun keyword:

fun interface Transformer<T, U> {
   fun transform(x: T): U
}
val length = Transformer {
   x: String -> x.length
}

You can read more about new language features such as: mixing named and positional arguments, trailing comma, callable reference improvements, and using break and continue inside when included in loops on the Kotlin 1.4 release notes page.

Explicit API mode

One additional feature is the new Explicit API mode for authors of libraries written in Kotlin.

It enforces certain language properties of Kotlin that are normally optional, such as specifying visibility modifiers, as well as explicit typing for any public declarations, in order to prevent mistakes when designing the public API of your library. Refer to the linked documentation for instructions how to enable Explicit API mode and start using these additional checks.

Compiler improvements

The language features mentioned above are some of the most developer-facing changes in Kotlin 1.4, however the bulk of work went into improving the overall quality and performance of the Kotlin compiler.

One of the benefits all developers can take advantage of right now is the new, more powerful type inference algorithm, which is now enabled by default. It will help developers be more productive by supporting more smart-casts and cases where types can be inferred automatically.

Other than the type inference algorithm, Kotlin 1.4 also brings in optional, Alpha stability compiler backends for Kotlin/JVM and Kotlin/JS, which generate code in what's called internal representation (IR) also used in the Kotlin/Native backend.

The Kotlin/JVM IR backend is a requirement for Jetpack Compose, and Google engineers are working together with JetBrains to make it the default JVM compiler backend in the future.

That's why, even if you're not currently developing with Jetpack Compose, we encourage you to try out the new Kotlin/JVM backend, currently in alpha, and to file any issues and feature requests to the issue tracker.

To enable the new JVM IR backend, specify an additional compiler option in your Gradle build script:

kotlinOptions.useIR = true

Try Kotlin 1.4 now!

There are two steps to updating your projects and IDE to Kotlin 1.4.

First, make sure you are on the latest version of Android Studio to maximize the performance benefits and compatibility with the newest Kotlin plugin. Android Studio will prompt you when a Kotlin 1.4.0 plugin that is compatible with your IDE version is available. Alternatively, you can go to Preferences | Plugins and manually trigger the update.

Once the plugin is enabled, you can upgrade your app project to use Kotlin 1.4 by updating the Kotlin Gradle plugin version in your build.gradle scripts. Depending on how you manage your plugins, you either have to update the version in the top-level project's buildscript block:

buildscript {
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.0"
    }
}

Or change the version number in the plugins block in a module level build.gradle file:

plugins {
    id 'org.jetbrains.kotlin.android' version '1.4.0'
}

Make sure to read the language changes carefully and update your project's code to ensure compatibility with the latest release. Enjoy Kotlin 1.4!

Java is a registered trademark of Oracle and/or its affiliates.

11 Weeks of Android: Android Developer Tools

Posted by Jamal Eason, Product Manager, Android

11 Weeks of Android, Week 7 with badge

This blog post is part of a weekly series for #11WeeksOfAndroid. For each of the #11WeeksOfAndroid, we’re diving into a key area so you don’t miss anything. This week, we spotlighted Android Developer Tools; here’s a look at what you should know.

The big news

During the 11 weeks of Android, we launched a range of developer tool updates in Android Studio. As of today, you can find version 4.0 of Android Studio on the stable release channel, version 4.1 on the beta channel, and the very latest features of version 4.2 on the canary channel. The focus across each of these versions is a balance of app productivity and delivery of a high quality product that you can rely on for app development. For each day of this past week we highlighted improvements and tips in the key points of your development flow from app design, coding, deployment, build, app testing with the emulator, to app performance profiling. This blog highlights the content that we released during the Android Developer Tools week of 11 Weeks of Android.

What to watch and read

To see an overview of what is new in Android Developer Tools across the recent releases of Android Studio, check out this video from the #Android11 Beta launch which includes an exciting and in-depth demo.

What’s New in Android Development Tools

Design

At the beginning of the week we had a day of content focused on app design tools for developers. To start, watch this overview video of the latest updates in design tools:

What’s new in Design Tools

We also posted two in-depth blog posts for the design tools day:

  • Introducing the Motion Editor - provides a quick tour of the new Motion Editor and how to use the latest features to create animations for your app.

To debug your layouts, watch our video on the updates to the layout inspector:

Debugging UI issues with Layout Inspector

And lastly for design tools, we released a video about the latest developments for Jetpack Compose Design tools:

What's new in Compose Design Tools

Coding & Deployment

During the week, we posted tips and tricks to improve your coding experience and app deployment flow in Android Studio. Check out the following social media channels to review the latest postings:

  • @androidstudio - the Twitter channel for the official IDE for Android app development.
  • @androiddev - delivers news and announcements for developers from the Android team at Google

We also shared a new video on how to use the new database inspector in Android Studio:

Database Inspector

Additionally, you will find an updated blog on the development tools we have in place for Jetpack Hilt:

Build

In the middle of the week, we released four blogs posts around the build system in Android developer tools, which included:

  • Configuration Caching deep dive - a technical explanation on this new preview feature from Gradle and how to try it out in your project to speed up your builds.
  • Shrinking Your App with R8 - provides an overview of the features available in R8, the reduction in code size you might expect, and show how to enable these features in R8.

Android Emulator

On top of sharing a series of best practices and tips on social media about using the Android Emulator during the week, you can also a full summary in the following in-depth article:

Performance Profilers

We know improving app performance is critical for a great user experience. Therefore, we ended the week with a day on performance profilers content. To start, we posted a video about System Trace and how you can use it to troubleshoot app performance issues:

Troubleshooting app performance issues with System Trace in Android Studio

Plus, we published a blog post on C++ memory profiling:

Learning path

If you’re looking for an easy way to pick up the highlights of this week, check out the Developer Tools pathway. A pathway is an ordered tutorial that allows users to complete a pre-defined module that culminates in a quiz. It includes videos and blog posts. A virtual badge is awarded to each user who passes the quiz. Test your knowledge of key takeaways about Developer Tools to earn a limited edition badge.

Key takeaways

Thank you for tuning in and learning about the latest in Android Development tools. Thanks to all of you who chatted with us during the Reddit AMA this week. Throughout this past week, we showcased features that can be found either in the latest stable release or the canary release channel of Android Studio. If you want to try out what you learned this week, download Android Studio today.

Below, you will find a quick listing of where you will find each of the major features. Note, that features in non-stable versions may not land in a particular version until they have reached our quality bar:

Features found in Android Studio 4.0 (Stable Channel)

  • Motion Editor
  • Layout Inspector
  • Layout Validation
  • Custom View Preview
  • CPU Profiler Update
  • R8 Rules Editing
  • Build Analyzer
  • Dynamic Feature Dependency
  • Clangd support
  • Intellij 2019.3

Features found in Android Studio 4.1 (Beta Channel)

  • Database Inspector
  • Dependency Injection Tools
  • Faster Apply Changes
  • Gradle Configuration Caching (Preview)
  • Custom View Preview
  • Android Emulator in IDE
  • Instrumentation Testing
  • Profiler UI Updates
  • Native Memory Profiling
  • System Trace 2.0
  • New Gradle API
  • MLKit & TFLite Model Import
  • Intellij 2020.1

Features found in Android Studio 4.2 + (Canary Channel)

  • Compose Interactive Preview
  • Compose Animation Visualization
  • Compose Deploy to Device
  • Sample Data API for Compose
  • Compose Editing Support
  • Test Failure Retention
  • Android Emulator- 5G Connectivity and Foldable Support
  • Intellij 2020.2 - coming soon

Resources

You can find the entire playlist of #11WeeksOfAndroid video content here, and learn more about each week here. We’ll continue to spotlight new areas each week, so keep an eye out and follow us on Twitter and YouTube. Thanks so much for letting us be a part of this experience with you!

Introducing the Motion Editor

Posted by Scott Swarthout, Product Manager

We spoke with the Android developer community and learned that animations are important for making UIs more intuitive and memorable. However, we also heard that adding complex animation to Android apps has been a difficult task.To address this problem, we created a powerful set of APIs with Motion Layout and a corresponding tool – Motion Editor, that when combined make it easier to build pixel-perfect animations. This blog is a quick tour of the new Motion Editor and how to use the latest features during your animation development. Additionally today, you can now watch a new video series specifically created to teach you about the various APIs included with MotionLayout. Watch here.

Motion Editor is a visual design editor for the MotionLayout layout type, making it easier to create and preview animations. We just released the stable version Motion Editor in Android Studio 4.0 and we already see many developers using it to build animations.

Animation running in the Motion Editor

The Motion Editor is an extension of Android Studio’s layout editor, and automatically opens when you select the Design or Split view on an XML file containing a MotionLayout. From there, you can edit your layout and Motion Scene files using the familiar interactive tools of the Layout Editor as well as preview your animations right from the Android Studio preview pane.

Motion Editor

The Motion Editor is broken up into several panels which we will describe in this article. The main panels are: Overview, Selection, Attribute, and Preview.

The Motion Editor has four main panels


Overview panel

MotionLayout helps you animate layout changes, which you specify as transitions between ConstraintSets. The Motion Editor helps you visualize these states with the Overview panel. To edit constraints in a ConstraintSet, click on the corresponding box in the Overview panel.

MotionLayout Scene with two ConstraintSets, start and end, and a Transition between them


Selection panel

The Selection panel provides detailed controls based on the state of the Overview panel. It has three modes:

  1. Motion Layout selected
  2. ConstraintSet selected
  3. Transition selected

The selection panel has three modes depending on the state of the Overview panel

MotionLayout selected

The Motion Editor supports editing of the base Motion Layout. When Motion Layout is selected in the Overview panel, you can select components to see if they are properly constrained.

Check if components are properly constrained with the Selection panel

ConstraintSet selected

When a ConstraintSet is selected, the Selection panel displays the list of components and a checkmark to indicate if the component is constrained in this ConstraintSet.

Select components to be included in the ConstraintSet


Transition selected

When a transition is selected, you can control the playback of the animation with the animation toolbar. When an animation is selected, click Play ▶️ above the timeline to preview the animation.

Preview animations on the Motion Editor timeline

Keyframes

Sometimes you want to modify the path a view takes during an animation. To do this, MotionLayout uses keyframes. We build keyframe editing into the editor to make it easy to tweak animations. To create a new keyframe, click on the new keyframe icon in the top right of the selection panel. This action opens a dialog where you can set attributes for the keyframe. To edit a keyframe, click on the diamond ◆ icon to open the KeyFrame attribute panel.

Create keyframes with the selection panel


Attribute panel

Creating animations in MotionLayout involves editing lots of view parameters, so we brought the Attribute panel from the Layout Editor into the Motion Editor. The Attribute panel includes handy visualizations for Constraints as well as all the attributes set on each view in the Motion Scene file.

Constraint visualization in the Attribute panel

The Attribute panel is also where you can create custom attributes. You use custom attributes when you want to animate view properties that are not part of the ConstraintLayout or MotionLayout APIs, such as backgroundColor. We made it easy to create custom attributes with autocomplete and input validation for all view properties.

Preview panel

We wanted to make it easy to quickly edit and get immediate feedback when working on animations, so you can view animations right from the Preview panel. Now you don’t have to recompile and redeploy your app every time you want to make a small tweak to your animation.

We also added a number of features to the Preview panel to make it easier to understand how views are animating. You can preview animations with the Design view and Blueprint view to get a clearer idea of how your views are moving with fewer visual distractions.



We also added visualizations for the paths views take across the screen, including markers for keyframes. We hope these features make it easier to parse complex transitions and simplify the creation experience.



The Motion Editor is available in Android Studio 4.0, give it a try and let us know what you think! We are eager to see what the community builds with MotionLayout and the Motion Editor. The Android Studio team is constantly gathering feedback to improve the experience of using our tools, so if you have any ideas for new features or run into any issues using these tools, please file a bug.

The code used in this example, along with several other MotionLayout examples, are available on our GitHub sample page, found here.

For more information on MotionLayout, see the following links: