PRESENTS

“ ROCK PAPER SCISSORS ”

Let’s code…

​

Google Developer Student Clubs

NATIONAL INSTITUTE OF TECHNOLOGY, HAMIRPUR

This work is licensed under the Apache 2.0 License

FINAL�OUTPUT

FINAL CODE:�https://github.com/triipaathii/Rock-Paper-Scissor

This work is licensed under the Apache 2.0 License

Before starting

Equipment needed for each participant

​

​

• Computer
• Internet connection
• Android Studio Installed
• (Optional) Android device & USB cable

Note: The Android device should be running Android platform release Lollipop (API level 21) or later, in order for a Compose app to run on the device.

This work is licensed under the Apache 2.0 License

What is Compose Camp?

Community-organized events focused around how to build Android apps using Jetpack Compose, where attendees get hands-on coding experience with Compose.

This work is licensed under the Apache 2.0 License

Android Studio is the official Integrated Development Environment (IDE) for Android app development, based on IntelliJ IDEA.

ANDROID STUDIO

Learners will use Android Studio to build their Android apps using Compose.

This work is licensed under the Apache 2.0 License

Jetpack Compose is the modern toolkit for building native user interfaces for Android apps.

​

Compose makes it easier and faster to build UIs on Android.

JETPACK COMPOSE

This work is licensed under the Apache 2.0 License

Compose apps are written in the Kotlin programming language.

​

Kotlin is the language that the majority of professional Android developers use to build apps.

JETPACK COMPOSE

This work is licensed under the Apache 2.0 License

Benefits of using Jetpack Compose

Less code

​

Do more with less code and avoid entire classes of bugs. Code is simpler and easier to maintain.

​

​

Intuitive

​

Just describe your UI, and Compose takes care of the rest. As app state changes, your UI automatically updates.

Accelerates Development

​

Compatible with all your existing code so you can adopt when and where you want. Iterate fast with live previews and full Android Studio support.

​

​

​

​

Powerful

​

Create beautiful apps with direct access to the Android platform APIs and built-in support for Material Design, Dark theme, animations, and more.

​

​

​

​

​

This work is licensed under the Apache 2.0 License

Let’s EXPLORE !!

This work is licensed under the Apache 2.0 License

Create new project

This work is licensed under the Apache 2.0 License

Files Directories

This work is licensed under the Apache 2.0 License

Compose functions

Annotations

Composable functions are the basic building block of a UI in Compose. A composable function:

• Describes some part of your UI.
• Doesn't return anything.
• Takes some input and generates what's shown on the screen.
• Might emit several UI elements.

​

Annotations are means of attaching extra information to code. This information helps tools like the Jetpack Compose compiler, and other developers understand the app's code.

This work is licensed under the Apache 2.0 License

Updated Preview

Update the text

This work is licensed under the Apache 2.0 License

App UI Structure

This work is licensed under the Apache 2.0 License

Basic Layouts

This work is licensed under the Apache 2.0 License

Arrangement in Row

This work is licensed under the Apache 2.0 License

Arrangement in

Column

This work is licensed under the Apache 2.0 License

Modifiers

Modifiers allow you to decorate or augment a composable. Modifiers let you do these sorts of things:

• Change the composable's size, layout, behavior, and appearance
• Add information, like accessibility labels
• Process user input
• Add high-level interactions, like making an element clickable, scrollable, draggable, or zoomable

Modifiers are standard Kotlin objects.

​

This work is licensed under the Apache 2.0 License

Accessing Resources

• Jetpack Compose can access the resources defined in your Android project. Resources can be accessed with resource IDs that are generated in your project's R class.
• An R class is an automatically generated class by Android that contains the IDs of all resources in the project. In most cases, the resource ID is the same as the filename. For example, the image in the previous file hierarchy can be accessed with this code:

This work is licensed under the Apache 2.0 License

Scalable pixels (sp)

Device-independent pixels (dp)

Flexible units that scale to have uniform dimensions on any screen. They provide a flexible way to accommodate a design across platforms.

​

Scalable pixels (sp) serve the same function as density-independent pixels (dp), but for fonts. The default value of an sp is the same as the default value for a dp.

The primary difference between an sp and a dp is that sp's preserve a user's font settings. Users who have larger text settings for accessibility will see font sizes match their text size preferences.

This work is licensed under the Apache 2.0 License

Why should you use string resources instead of hard coded strings in your apps?

It allows you to easily locate text in your app and later have it translated. Strings can be internationalized easily, allowing your application to support multiple languages with a single application package file (APK).

​

Benefits:

• Easy to reuse
• Easy to localize
• Easy to change

This work is licensed under the Apache 2.0 License

Compose follows Declarative UI

• You completely describe your UI for a given state

​

• The framework updates your UI when the state changes

This work is licensed under the Apache 2.0 License

State

State in an app is any value that can change over time. All Android apps display state to the user. A few examples of state in Android apps:

• A Snackbar that shows when a network connection can't be established.
• A blog post and associated comments.
• Ripple animations on buttons that play when a user clicks them.
• Stickers that a user can draw on top of an image.

​

Compose is declarative and as such the only way to update it is by calling the same composable with new arguments. These arguments are representations of the UI state. Any time a state is updated a recomposition takes place.

This work is licensed under the Apache 2.0 License

State in composables

Composable functions can use the remember API to store an object in memory. A value computed by remember is stored in the Composition during initial composition, and the stored value is returned during recomposition. remember can be used to store both mutable and immutable objects.

​

Note: remember stores objects in the Composition, and forgets the object when the composable that called remember is removed from the Composition.

​

mutableStateOf creates an observable MutableState<T>, which is an observable type integrated with the compose runtime.

This work is licensed under the Apache 2.0 License

High-order Functions

Lambda Expressions

A higher-order function is a function that takes functions as parameters, or returns a function.

Kotlin functions are first-class, which means they can be stored in variables and data structures, and can be passed as arguments to and returned from other higher-order functions.

Lambda expressions and anonymous functions are function literals. Function literals are functions that are not declared but are passed immediately as an expression.

This work is licensed under the Apache 2.0 License

THANK YOU !!

This work is licensed under the Apache 2.0 License