Getting started with Jetpack Compose

Slide 1

Slide 1 text

JETPACK COMPOSE - By Aayushma Agrawal, Android Developer

Slide 2

Slide 2 text

Hi JETPACK Compose Bye Bye XML!!!!

Slide 3

Slide 3 text

Contents Building a practical app using JC And learning how to render our fav. Views(Textview, Edittext, Imageview, Button) and View Groups(Linear Layout) using JC.

Slide 4

Slide 4 text

WHAT WILL WE BUILDING TODAY? >>>>>>>

Slide 5

Slide 5 text

RECYCLERVIEW USING JC

Slide 6

Slide 6 text

ACTION ITEM? OPEN ANDROID STUDIO NOW AND FILE >> NEW PROJECT >> EMPTY COMPOSE ACTIVITY

Slide 7

Slide 7 text

YES THIS!!!!!!!!!! Done? Click on Next>>>>>

Slide 8

Slide 8 text

YES THIS!!!!!!!!!! Any fancy name of your choice!! And FINISH!!

Slide 9

Slide 9 text

3 Android Studio Building…

Slide 10

Slide 10 text

2 Still Building…

Slide 11

Slide 11 text

1 Meanwhile it is building…let’s talk!

Slide 12

Slide 12 text

Main activity

Slide 13

Slide 13 text

Major differences 1. Activity extending Component Activity 2. Previous:- setContentView(R.layout.xml_file_name) TO setContent { // some alien stuffs }

Slide 14

Slide 14 text

Let’s talk textview FIRST

Slide 15

Slide 15 text

Rendering TEXT IN TEXTVIEW (called TEXT in jc) Using XML:-

Slide 16

Slide 16 text

TEXT SIZE, MAXLINES, COLOR Using XML:-

Slide 17

Slide 17 text

PLAY AROUND AND EXPLORE BY YOURSELF ● How to create style and add it to Text ● How to NOT add hardcoded text and pick from strings.xml? (Hint:- stringResource attribute) ● Applying click on Textview using TextButton

Slide 18

Slide 18 text

But did you think? Where all to write this Text ?? Ofcourse, there are no layout files now, so we have to write in Kotlin file, but how?

Slide 19

Slide 19 text

Of course It’s Kotlin ﬁle, so inside functions! To Observe: Greeting is a function(but starts that with a capital letter, this is naming convention in JC Annotated with @Composable

Slide 20

Slide 20 text

What is @Composable ? Whichever function has @Composable with them, compiler knows, this has to be drawn/rendered on the screen!! Any composable function can be called only from other composable functions. Name of composable function is chosen as ‘Noun’ rather than verb or adjectives.

Slide 21

Slide 21 text

IMAGEVIEW Time to move to our next old fav. view!

Slide 22

Slide 22 text

THINKING OF IMAGEVIEW... General operations with Imageview are:- 1. Loading image from resources 2. Loading image from URL (We will explore using Coil lib. here) 3. Setting aspect ratio of image (playaround and explore this)

Slide 23

Slide 23 text

IMAGEVIEW (IMAGE HERE) CONTINUES… 1. Loading image from resources Use painterResource and pass it the id of drawable you want to load. Imageview is called Image in JC

Slide 24

Slide 24 text

IMAGEVIEW (IMAGE HERE) CONTINUES… 2. Loading image from URL In JC, we have to use third party library such as Coil or Landscapist. Steps: ● Add Coil dependency implementation "io.coil-kt:coil-compose:2.2.2" ● Add Internet permission in Manifest ● Load Image from URL

Slide 25

Slide 25 text

IMAGEVIEW (IMAGE HERE) CONTINUES… ● Load Image from URL AsyncImage(modifier = Modifier.size(width = 50.dp, height = 50.dp), model = “https://i.ibb.co/TPMpD3f/argentina.png”, contentDescription = "Image") The above code shows loading an Image from URL using AsyncImage where width and height of Image is 50dp.

Slide 26

Slide 26 text

button Upcoming Button in JC >>>>>>>

Slide 27

Slide 27 text

Button in jc Loaded using class Button

Slide 28

Slide 28 text

Rendering Button with text and click functionality The below image shows using predefined Button class with text as “Vote” and on click will render a Toast message.

Slide 29

Slide 29 text

WHAT ARE VIEWS WITHOUT VIEWGROUPS?

Slide 30

Slide 30 text

VIEWGROUPS IN JC UPCOMING >>>

Slide 31

Slide 31 text

VIEWGROUPS IN JC ● ROW ● COLUMN ● BOX (Out of Scope in current slide)

Slide 32

Slide 32 text

ROW ROW = Linear Layout with Horizontal Direction Supports gravity, weight etc.

Slide 33

Slide 33 text

COLUMNS COLUMN = Linear Layout with Vertical Direction Supports gravity, weight etc.

Slide 34

Slide 34 text

Imgsource: from https://www.codemag.com/Article/2105061/A-Practical-Introduction-to-Jetpack-Compose-Android-Apps To design above layout in XML using Linear Layout we would have taken one parent Linear Layout with horizontal orientation and inside it would be Imageview and a child LinearLayout with vertical orientation and two Textviews

Slide 35

Slide 35 text

Imgsource: from https://www.codemag.com/Article/2105061/A-Practical-Introduction-to-Jetpack-Compose-Android-Apps Similarly , here we would take 1 ROW having 2 columns. 1st Column with Image of country and 2nd column containing country name and continent

Slide 36

Slide 36 text

CODE SNIPPETS

Slide 37

Slide 37 text

EXPLANATION OF CODE SNIPPET L157 begins with defining a Row, defining observe to define width and height(or other attributes like padding, aligning) of view/viewgroups we use Modifiers We have given the Row’s width as fillMaxWidth which means match_parent and height by default is taken as wrap content And Row has padding of 16dp.

Slide 38

Slide 38 text

Explanation of Code snippet continued.. Line 162 has Imageview like shown in the video to load flag of the FIFA country using URL(which is dynamic) Line 164 shows creating a Column with two textviews(Text components) inside it and each Column has a padding of 16dp and by default width and height as wrap_content.

Slide 39

Slide 39 text

RECYCLERVIEW The most easy, useful and interesting part is >>>

Slide 40

Slide 40 text

LAZYCOLUMN LazyColumn in JC = Recyclerview with vertical Scroll direction

Slide 41

Slide 41 text

CODE SNIPPET

Slide 42

Slide 42 text

EXPLANATION OF CODE SNIPPET L177 defines LazyColumn with width as fillMaxWidth (meaning match_parent) and height as wrap content L181 defines source of data which should be loaded into Recyclerview. L182 defines content of each item within recyclerview which is rendered by user defined method ImageWithTitleSubTitleComponent (Please check Github for full source code)

Slide 43

Slide 43 text

Big Thanks! Jetpack compose book by Alex Styl https://medium.com/mobile-app-development-publication/loading-image-in-android-jetpack-compose-ma de-easy-8cb593b26260 https://www.codemag.com/Article/2105061/A-Practical-Introduction-to-Jetpack-Compose-Android-Apps Picture or Icon Credits to flaticon.com and FreePik

Slide 44

Slide 44 text

My personal experience with Jetpack I would definitely recommend it to try because of its ease to implement things in faster manner eg. Recyclerview, Cardview with stroke/border etc. Mostly about playing around and getting comfortable with Modifiers to see its ease and magic! GOOD LUCK!

Slide 45

Slide 45 text

Further scope 1. Understanding Recomposition 2. Exploring all View components like EditText, Button, Spinner, Recyclerview etc. 3. Exploring Box, ConstraintLayout in JC

Slide 46

Slide 46 text

THANK YOU Feel Free to Reach out for your Ques. @ Twitter/LinkedIn