
<p class="has-text-align-left">This tutorial is about Android Jetpack compose and how to use it in an android application with the help of simple Book application.</p> 
 
 
 
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-block-buttons-is-layout-flex"> 
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background" style="background-color: #030d74;" href="https://github.com/arunk7839/AndroidJetpackComposeExp" target="_blank" rel="noreferrer noopener"><strong>DOWNLOAD CODE</strong></a></div> 
</div> 
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="rXQIC7BPDQU" title="Android Jetpack Compose Example"><a placeholder href="https://youtu.be/rXQIC7BPDQU"><img src="https://i.ytimg.com/vi/rXQIC7BPDQU/hqdefault.jpg" layout="fill" object-fit="cover" alt="Android Jetpack Compose Example"></a></amp-youtube></p> 
<h4 id="what-is-jetpack-compose"><strong><span style="color: #000080;">Jetpack Compose?</span></strong></h4> 
 
 
 
<p>Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs. </p> 
 
 
 
<p>To use Jetpack Compose you need to use at least a version >;= Android Studio Arctic Fox.</p> 
 
 
 
<h4 class="wp-block-heading"><span style="color: #000080;"><strong>Composable Function</strong></span></h4> 
 
 
 
<p>In Jetpack Compose, Composable functions are used to define all the UI of your app programmatically. So, you need not use any XML files for the layout of the app. All you need to make a composable function is just by using the <strong><span style="color: #0000ff;">@Composable</span></strong> annotation to the function name.</p> 
 
 
 
<p>The basic syntax of a Composable function is:</p> 
 
 
 
<pre class="wp-block-preformatted"><strong><span style="color: #008000;">@Composable</span></strong><br />fun HelloWorld() {<br /> Text("Hello, World!", style = TextStyle(color = Color.Red))<br />}</pre> 
 
 
 
<p>To use <strong><span style="color: #008000;">HelloWorld()</span></strong> composable function, call it inside <span style="color: #008000;"><strong>setContent()</strong></span> like this:</p> 
 
 
 
<pre class="wp-block-preformatted">setContent {<br /> HelloWorld()<br />}</pre> 
 
 
 
<h4 class="wp-block-heading" id="toc-anchor-009"><span style="color: #000080;"><strong>Previewing a Composable</strong></span></h4> 
 
 
 
<p>Android Studio provides an awesome feature of previewing your UI components in the studio itself and that too dynamically. So, whenever you want to test some UI components, then you can simply preview it in the Android Studio by making a Composable function and by using the <span style="color: #008000;"><strong>@Preview</strong></span> annotation.</p> 
 
 
 
<p><strong><span style="color: #0000ff;">Example:</span></strong></p> 
 
 
 
<pre class="wp-block-preformatted"><span style="color: #008000;"><strong>@Composable</strong></span><br /><span style="color: #008000;"><strong>@Preview</strong></span><br />fun HelloWorld() {<br /> Text("Hello, World!", style = TextStyle(color = Color.Red))<br />}</pre> 
 
 
 
<p>After you import the annotation, you’ll see the preview of the composable show up in the preview on the right-hand side of the screen.</p> 
 
 
 
<div class="wp-block-image"> 
<figure class="aligncenter"><img class="wp-image-2820" src="https://c1ctech.com/wp-content/uploads/2021/10/output.png" alt="" /></figure> 
</div> 
 
 
 
<p><span style="color: #0000ff;"><b class="graf--bold">NOTE: You can&#8217;t pass any parameter to a Preview Composable function.</b></span></p> 
 
 
 
<h4 class="wp-block-heading"><span style="color: #000080;"><strong>Creating BookApp</strong></span></h4> 
 
 
 
<p>Let&#8217;s create a project which will contain two screens, first screen will display list of items (each item will contain information about a book) and on click of each item will open a second screen which will display the information of the clicked item.</p> 
 
 
 
<h5 class="wp-block-heading"><strong><span style="color: #000080;">Gradle Dependencies</span></strong></h5> 
 
 
 
<p>Add this inside in the <span style="color: #008000;"><strong>android{}</strong></span> block of your <strong><span style="color: #0000ff;">build.gradle</span></strong></p> 
 
 
 
<pre class="wp-block-preformatted">android{<br /> kotlinOptions {<br /> jvmTarget = '1.8'<br /> }<br /> buildFeatures {<br /> compose true<br /> }<br /> composeOptions {<br /> kotlinCompilerExtensionVersion "1.0.3"<br /> kotlinCompilerVersion '1.5.30'<br /> }<br />}</pre> 
 
 
 
<p>Add the below Compose dependencies mainly used while working with jetpack compose.</p> 
 
 
 
<pre class="wp-block-preformatted">dependencies{<br /><br /><span class="hljs-keyword">def</span> composeVersion = <span class="hljs-string">"1.0.1"<br /><br /></span>implementation "androidx.compose.ui:ui-tooling:$compose_version"<br />implementation "androidx.compose.foundation:foundation:$compose_version"<br />implementation "androidx.compose.ui:ui:$compose_version"<br />implementation "androidx.compose.material:material:$compose_version"<br />implementation 'androidx.activity:activity-compose:1.3.0-alpha06'<br />}</pre> 
 
 
 
<h5 class="wp-block-heading"><strong><span style="color: #000080;">Code Implementation</span></strong></h5> 
 
 
 
<p>1. The <strong><span style="color: #008000;">MainActivity.kt</span></strong> file represents the first screen which consist of a list.</p> 
 
 
 
<p><strong><span style="color: #0000ff;">MainActivity.kt</span></strong></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>
 
 
 
 
<pre class="wp-block-preformatted">package com.c1ctech.jetpackcomposeexp<br /><br />import android.content.Context<br />import android.content.Intent<br />import android.os.Bundle<br />import android.os.Parcelable<br />import androidx.activity.ComponentActivity<br />import androidx.activity.compose.setContent<br />import androidx.annotation.DrawableRes<br />import androidx.compose.foundation.clickable<br />import androidx.compose.foundation.lazy.items<br />import androidx.compose.foundation.layout.*<br />import androidx.compose.foundation.lazy.LazyColumn<br />import androidx.compose.foundation.shape.CornerSize<br />import androidx.compose.foundation.shape.RoundedCornerShape<br />import androidx.compose.material.*<br />import androidx.compose.runtime.Composable<br />import androidx.compose.ui.Modifier<br />import androidx.compose.ui.draw.clip<br />import androidx.compose.ui.graphics.Color<br />import androidx.compose.ui.layout.ContentScale<br />import androidx.compose.ui.platform.LocalContext<br />import androidx.compose.ui.res.painterResource<br />import androidx.compose.ui.text.font.FontStyle<br />import androidx.compose.ui.text.font.FontWeight<br />import androidx.compose.ui.tooling.preview.Preview<br />import androidx.compose.ui.unit.dp<br />import androidx.core.content.ContextCompat.startActivity<br />import com.c1ctech.jetpackcomposeexp.ui.theme.JetpackComposeExpTheme<br />import kotlinx.android.parcel.Parcelize<br />import androidx.compose.foundation.Image as Image<br /><br /><br />val bookList: List<;Book>; = listOf(<br /> Book(R.drawable.anny_frank, "The Diary of A Young Girl", "Anne Frank"),<br /> Book(R.drawable.alexander_the_great, "Alexander the Great", "Jacob Abbott"),<br /> Book(R.drawable.autobiography_of_a_yogi, "Autobiography of a Yogi", "Paramahansa Yogananda"),<br /> Book(R.drawable.fluffy_and_me, "Fluffy and Me", "Anita Krishan"),<br /> Book(R.drawable.my_inventions, "My Inventions", "Nikola Tesla"),<br /> Book(R.drawable.the_enchanted_castle, "The Enchanted Castle", "E. Nesbit"),<br /> Book(R.drawable.the_secret_garden, "The Secret Garden", " Frances Hodgson Burnett")<br />)<br /><br /><br />class MainActivity : ComponentActivity() {<br /><br /> override fun onCreate(savedInstanceState: Bundle?) {<br /> super.onCreate(savedInstanceState)<br /> setContent {<br /> JetpackComposeExpTheme {<br /> Column(modifier = Modifier.fillMaxSize()) {<br /> <strong><span style="color: #008000;"> //Material Design top app bar displays information</span></strong><br /><strong><span style="color: #008000;"> // and actions relating to the current screen.</span></strong><br /> TopAppBar(title = {<br /> Text("BookApp")<br /> })<br /> BookList(bookList, this@MainActivity)<br /> }<br /> }<br /> }<br /> }<br />}<br /><br /><strong><span style="color: #008000;">//creating data class Book, which implements Parcelable</span></strong><br />@Parcelize<br />data class Book(<br /> @DrawableRes val imageResource: Int,<br /> val bookTitle: String,<br /> val bookAuthor: String<br />) : Parcelable<br /><br />@Composable<br />fun BookList(books: List<;Book>;, context: Context) {<br /> <span style="color: #008000;"><strong> //The vertically scrolling list that only composes</strong></span><br /><span style="color: #008000;"><strong> // and lays out the currently visible items.</strong></span><br /> LazyColumn() {<br /> items(books) { book ->;<br /> BookListItem(book, context)<br /> }<br /> }<br />}<br /><br />@Composable<br />fun BookListItem(book: Book, context: Context) {<br /><strong><span style="color: #008000;"> //used to make a CardView.</span></strong><br /> Card(<br /> shape = RoundedCornerShape(8.dp),<br /> elevation = 8.dp,<br /> modifier = Modifier<br /> .padding(16.dp)<br /> .clickable {<br /> <span style="color: #008000;"><strong>//passing book instance to DetailActivity</strong></span><br /><span style="color: #008000;"><strong> //open DetailActivity on item click</strong></span><br /> val intent = Intent(context, DetailActivity::class.java)<br /> intent.putExtra("bookData", book)<br /> startActivity(context, intent, null)<br /><br /> }<br /> ) {<br /><strong><span style="color: #008000;"> //places its children in a horizontal sequence.</span></strong><br /> Row(<br /> modifier = Modifier<br /> .padding(8.dp)<br /> ) {<br /> BookImage(book)<br /><strong><span style="color: #008000;"> //places its children in a vertical sequence.</span></strong><br /> Column(<br /> modifier = Modifier<br /> .weight(6f, true)<br /> .padding(20.dp, 0.dp, 0.dp, 0.dp),<br /> ) {<br /><span style="color: #008000;"><strong> //used to display text</strong></span><br /> Text(<br /> text = book.bookTitle,<br /> style = MaterialTheme.typography.subtitle1,<br /> color = Color.Red<br /> )<br /> Text(<br /> text = "by ${book.bookAuthor}",<br /> style = MaterialTheme.typography.subtitle2,<br /> fontStyle = FontStyle.Italic,<br /> fontWeight = FontWeight.Bold,<br /> color = Color.Blue,<br /> )<br /><br /> }<br /> }<br /> }<br />}<br /><br />@Composable<br />fun BookImage(book: Book?) {<br /><strong><span style="color: #008000;"> //used to display an image.</span></strong><br /> Image(<br /> painter = painterResource(book!!.imageResource),<br /> contentDescription = null,<br /> contentScale = ContentScale.FillBounds,<br /> modifier = Modifier<br /> .size(84.dp)<br /> .clip(RoundedCornerShape(corner = CornerSize(8.dp)))<br /> )<br />}<br /><br /><span style="color: #008000;"><strong>//Preview can be applied to @Composable methods with no parameters</strong></span><br /><span style="color: #008000;"><strong>//to show them in the Android Studio preview.</strong></span><br />@Preview<br />@Composable<br />fun bookListPreview() {<br /> JetpackComposeExpTheme {<br /> Column(modifier = Modifier.fillMaxSize()) {<br /> TopAppBar(title = {<br /> Text("BookApp")<br /> })<br /> BookList(<br /> bookList,<br /> LocalContext.current<br /> )<br /> }<br /> }<br />}</pre> 
 
 
 
<ul class="wp-block-list"> 
<li><span style="color: #000080;"><strong>Column: </strong></span>A Column is a layout composable which simply lays out all its child composables in a vertical column. It is similar to LinearLayout with vertical orientation. </li> 
<li class="graf--h2"><span style="color: #000080;"><strong>Lazy Column: </strong></span>The vertically scrolling list that only composes and lays out the currently visible items.</li> 
<li class="graf--h2"><span style="color: #000080;"><b class="graf--bold">Card: </b></span>A Card is a layout composable that is used to make a CardView.</li> 
<li><span style="color: #000080;"><strong>Clickable: </strong></span>makes a composable react with the user by using Clickable. Clickable supports a one-time click, double click, and long press.</li> 
<li><span style="color: #000080;"><strong>Image: </strong></span>To display an image, we can use Image composable.</li> 
</ul> 
 
 
 
<p>2. The <strong><span style="color: #008000;">DetailActivity.kt</span></strong> file represents the second screen, which will open on click of each item.</p> 
 
 
 
<p><strong><span style="color: #0000ff;">DetailActivity.kt</span></strong></p> 
 
 
 
<pre class="wp-block-preformatted">package com.c1ctech.jetpackcomposeexp<br /><br />import androidx.appcompat.app.AppCompatActivity<br />import android.os.Bundle<br />import androidx.activity.compose.setContent<br />import androidx.compose.foundation.Image<br />import androidx.compose.foundation.layout.*<br />import androidx.compose.runtime.Composable<br />import androidx.compose.ui.Modifier<br />import androidx.compose.ui.layout.ContentScale<br />import androidx.compose.ui.res.painterResource<br />import androidx.compose.ui.unit.dp<br /><br />class DetailActivity : AppCompatActivity() {<br /><br /> override fun onCreate(savedInstanceState: Bundle?) {<br /> super.onCreate(savedInstanceState)<br /> setContent {<br /><strong><span style="color: #008000;"> //passing book instance from composable function</span></strong><br /> BookImageFullScreen(intent.getParcelableExtra("bookData"))<br /> }<br /> }<br />}<br /><br />@Composable<br />fun BookImageFullScreen(book: Book?) {<br /> Image(<br /> painter = painterResource(book!!.imageResource),<br /> contentDescription = null,<br /> contentScale = ContentScale.Crop,<br /> modifier = Modifier<br /> .fillMaxWidth()<br /> .fillMaxHeight()<br /> .padding(16.dp)<br /> )<br />}</pre> 
 
 
 
<p>When you run the app it will look like this:</p> 
 
 
 
<figure class="wp-block-image"><img class="wp-image-2826" src="https://c1ctech.com/wp-content/uploads/2021/10/Screenshot_20211011-194150_JetpackComposeExp-498x1024.jpg" alt="" width="315" height="648" /> <img class="alignnone wp-image-2827" src="https://c1ctech.com/wp-content/uploads/2021/10/Screenshot_20211011-194205_JetpackComposeExp-498x1024.jpg" alt="" width="314" height="646" /></figure>