KEMBAR78
Jetpack Compose beginner.pdf
JETPACK COMPOSE
- By Aayushma Agrawal, Android Developer
Github code: here
Hi JETPACK Compose
Bye Bye XML!!!!
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.
WHAT WILL WE BUILDING
TODAY? >>>>>>>
RECYCLERVIEW USING JC
ACTION ITEM?
OPEN ANDROID STUDIO NOW
AND FILE >> NEW PROJECT >>
EMPTY COMPOSE ACTIVITY
YES THIS!!!!!!!!!!
Done? Click on Next>>>>>
YES THIS!!!!!!!!!!
Any fancy name of your
choice!! And FINISH!!
3
Android Studio Building…
2
Still Building…
1
Meanwhile it is building…let’s talk!
Main activity
Major differences
1. Activity extending Component
Activity
2. Previous:-
setContentView(R.layout.xml_file_name)
TO
setContent {
// some alien stuffs
}
Let’s talk textview FIRST
Rendering TEXT IN TEXTVIEW (called TEXT in jc)
Using XML:-
<TextView android:layout_width=“”
………
android:text = “Hello”
Now
Text(text ="Hello ")
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)
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
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?
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
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.
IMAGEVIEW
Time to move to our next old fav. view!
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)
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
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
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.
button
Upcoming Button in JC >>>>>>>
Button in jc
Loaded using class Button
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.
WHAT ARE VIEWS WITHOUT
VIEWGROUPS?
VIEWGROUPS IN JC
UPCOMING >>>
VIEWGROUPS IN JC
● ROW
● COLUMN
● BOX (Out of Scope in current slide)
ROW
ROW = Linear Layout with Horizontal Direction
Supports gravity, weight etc.
COLUMNS
COLUMN = Linear Layout with Vertical Direction
Supports gravity, weight etc.
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
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
CODE SNIPPETS
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.
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.
RECYCLERVIEW
The most easy, useful and interesting part is >>>
LAZYCOLUMN
LazyColumn in JC = Recyclerview with vertical Scroll
direction
CODE SNIPPET
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)
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
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!
Further scope
1. Understanding Recomposition
2. Exploring all View components like EditText, Button,
Spinner, Recyclerview etc.
3. Exploring Box, ConstraintLayout in JC
THANK YOU
Feel Free to Reach out for your Ques. @ Twitter/LinkedIn
Github project link here

Jetpack Compose beginner.pdf

  • 1.
    JETPACK COMPOSE - ByAayushma Agrawal, Android Developer Github code: here
  • 2.
  • 3.
    Contents Building a practicalapp using JC And learning how to render our fav. Views(Textview, Edittext, Imageview, Button) and View Groups(Linear Layout) using JC.
  • 4.
    WHAT WILL WEBUILDING TODAY? >>>>>>>
  • 5.
  • 6.
    ACTION ITEM? OPEN ANDROIDSTUDIO NOW AND FILE >> NEW PROJECT >> EMPTY COMPOSE ACTIVITY
  • 7.
  • 8.
    YES THIS!!!!!!!!!! Any fancyname of your choice!! And FINISH!!
  • 9.
  • 10.
  • 11.
    1 Meanwhile it isbuilding…let’s talk!
  • 12.
  • 13.
    Major differences 1. Activityextending Component Activity 2. Previous:- setContentView(R.layout.xml_file_name) TO setContent { // some alien stuffs }
  • 14.
  • 15.
    Rendering TEXT INTEXTVIEW (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 ANDEXPLORE 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 youthink? 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’sKotlin 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 moveto our next old fav. view!
  • 22.
    THINKING OF IMAGEVIEW... Generaloperations 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.
  • 27.
    Button in jc Loadedusing class Button
  • 28.
    Rendering Button withtext 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 VIEWSWITHOUT VIEWGROUPS?
  • 30.
  • 31.
    VIEWGROUPS IN JC ●ROW ● COLUMN ● BOX (Out of Scope in current slide)
  • 32.
    ROW ROW = LinearLayout with Horizontal Direction Supports gravity, weight etc.
  • 33.
    COLUMNS COLUMN = LinearLayout with Vertical Direction Supports gravity, weight etc.
  • 34.
    Imgsource: from https://www.codemag.com/Article/2105061/A-Practical-Introduction-to-Jetpack-Compose-Android-Apps Todesign 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.
  • 37.
    EXPLANATION OF CODESNIPPET 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 Codesnippet 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.
  • 42.
    EXPLANATION OF CODESNIPPET 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 composebook 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 experiencewith 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. UnderstandingRecomposition 2. Exploring all View components like EditText, Button, Spinner, Recyclerview etc. 3. Exploring Box, ConstraintLayout in JC
  • 46.
    THANK YOU Feel Freeto Reach out for your Ques. @ Twitter/LinkedIn Github project link here