Getting started with Jetpack Compose

Transcript

1. JETPACK COMPOSE - By Aayushma Agrawal, Android Developer
2. Hi JETPACK Compose Bye Bye XML!!!!
3. 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.
4. WHAT WILL WE BUILDING TODAY? >>>>>>>
5. RECYCLERVIEW USING JC
6. ACTION ITEM? OPEN ANDROID STUDIO NOW AND FILE >> NEW PROJECT >> EMPTY COMPOSE ACTIVITY
7. YES THIS!!!!!!!!!! Done? Click on Next>>>>>
8. YES THIS!!!!!!!!!! Any fancy name of your choice!! And FINISH!!
9. 3 Android Studio Building…
10. 2 Still Building…
11. 1 Meanwhile it is building…let’s talk!
12. Main activity
13. Major differences 1. Activity extending Component Activity 2. Previous:- setContentView(R.layout.xml_file_name) TO setContent { // some alien stuffs }
14. Let’s talk textview FIRST
15. Rendering TEXT IN TEXTVIEW (called TEXT in jc) Using XML:- <TextView android:layout_width=“” ……… android:text = “Hello” Now Text(text ="Hello ")
16. TEXT SIZE, MAXLINES, COLOR Using XML:- <TextView android:layout_width=“” ……… android:text = “Hello” android:textColor = “” android:maxLines =“2” Now Text(text = "Hello $name!", fontSize = 18.sp, color = Color.Magenta, maxLines = 1)
17. 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
18. 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?
19. Of course It’s Kotlin file, 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
20. 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.
21. IMAGEVIEW Time to move to our next old fav. view!
22. 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)
23. 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
24. 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 <uses-permission android:name="android.permission.INTERNET"/> • Load Image from URL
25. 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.
26. button Upcoming Button in JC >>>>>>>
27. Button in jc Loaded using class Button
28. 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.
29. WHAT ARE VIEWS WITHOUT VIEWGROUPS?
30. VIEWGROUPS IN JC UPCOMING >>>
31. VIEWGROUPS IN JC • ROW • COLUMN • BOX (Out of Scope in current slide)
32. ROW ROW = Linear Layout with Horizontal Direction Supports gravity, weight etc.
33. COLUMNS COLUMN = Linear Layout with Vertical Direction Supports gravity, weight etc.
34. 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
35. 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
36. CODE SNIPPETS
37. 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.
38. 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.
39. RECYCLERVIEW The most easy, useful and interesting part is >>>
40. LAZYCOLUMN LazyColumn in JC = Recyclerview with vertical Scroll direction
41. CODE SNIPPET
42. 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)
43. 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
44. 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!
45. Further scope 1. Understanding Recomposition 2. Exploring all View components like EditText, Button, Spinner, Recyclerview etc. 3. Exploring Box, ConstraintLayout in JC
46. THANK YOU Feel Free to Reach out for your Ques. @ Twitter/LinkedIn