Learn how to build Recyclerview using Jetpack Compose and using various view components like TextView, EditText, Button, Imageview etc. #android

1. JETPACK COMPOSE
- By Aayushma Agrawal, Android Developer
Github code: here

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
Github project link here