0%
Loading ...

Jetpack Compose

This series contains tutorials about jetpack compose

Text in Jetpack Compose

Text in Jetpack Compose is similar to TextView. The Text composable is used to show labels and paragraphs inside Android apps. This tutorial will show how to implement Text in the app and the available attributes of Text composable. Please check the following example program. The example program shows the implementation of the Text composable to display Hello World on the screen. It’s time to check out the attributes of Text Composable. Text Size: – The fontSize attribute is used to set the size of the text. Please note the fontSize attribute accepts size in TextUnit. So to recast a number into TextUnit use the .sp extension. Text Color: – The colour of the text can be specified using the colour attribute. This attribute accepts the object of the Color(androidx.compose.ui.graphics.Color) class. We can pass static variables of the Color class like Color.Black. Furthermore, we can also create the object of this class by passing the colour code in the constructor Color(0xFF000000). Font Weight: –  The font weight of the Text Composable can be mentioned using the fontWeight attribute. This attribute accepts the object of the FontWeight class. The FontWeight class has plenty of predefined font weights in the form of static variables.  Static Variable Thickness FontWight.Thin (FontWight.W100) Thin FontWight.ExtraLight (FontWight.W200)  ExtraLight FontWight.Light (FontWight.W300)  Light FontWight.Normal (FontWight.W400)  Normal FontWight.Medium (FontWight.W500)  Medium FontWight.SemiBold (FontWight.W600)  SemiBold FontWight.Bold (FontWight.W700) Bold FontWight.ExtraBold (FontWight.W800)  ExtraBold FontWight.Black (FontWight.W900)  Black Italic Text: – The fontStyle attribute makes text italic Text composable. Letter Spacing: – The space between letters can be updated using the letterSpacing attribute. This attribute accepts TextUnit. Woo hoo, we have done with some common characteristics of Text composable. There are numerous other attributes available. We recommend you play with Text Composable and observe what changes all other properties make. Parvesh SandilaParvesh Sandila is a passionate web and Mobile app developer from Jalandhar, Punjab, who has over six years of experience. Holding a Master’s degree in Computer Applications (2017), he has also mentored over 100 students in coding. In 2019, Parvesh founded Owlbuddy.com, a platform that provides free, high-quality programming tutorials in languages like Java, Python, Kotlin, PHP, and Android. His mission is to make tech education accessible to all aspiring developers.​ new.owlbuddy.com

Text in Jetpack Compose Read More »

How to create a new Jetpack Compose

This tutorial will show how to create a new Jetpack compose project in Android Studio. Here Android Studio Dolphin | 2021.3.1 is being used for this tutorial. Please follow below mentioned steps to start with the first Jetpack Compose project. Open Android Studio. Click on File -> New -> New Project, But if you are opening Android Studio for the first time the Welcome to Android Studio screen will appear, There you can click on the New Project option. After clicking on New Project the following popup will appear. Click on the Empty Compose Activity option. A new popup will appear where you have to add the Name of the Project, the Package Name and location where you want to save the project, and the minimum android version. After this click on the finish button, This was the last step, let android studio do its Job and load all the required libraries and tools. When Android studio finishes loading, you can click the Run button to start the app in an emulator or on an actual device.  Parvesh SandilaParvesh Sandila is a passionate web and Mobile app developer from Jalandhar, Punjab, who has over six years of experience. Holding a Master’s degree in Computer Applications (2017), he has also mentored over 100 students in coding. In 2019, Parvesh founded Owlbuddy.com, a platform that provides free, high-quality programming tutorials in languages like Java, Python, Kotlin, PHP, and Android. His mission is to make tech education accessible to all aspiring developers.​ new.owlbuddy.com

How to create a new Jetpack Compose Read More »

What is Jetpack Compose

Jetpack Compose is a toolkit launched by Google to build native UI in Android. The main motive for launching this is to provide a productive and simple approach to creating UI in Android. Building UI using Compose is opposite to the traditional approach (building UI using XML). As we know, XML was an imperative UI design approach, but Jetpack compose is a declarative UI design approach. and it allows developers to design the UI based on what data they receive. There are several declarative UI frameworks like Flutter, React Native, SwiftUI and Jetpack Compose. In Jetpack Compose we describe UI by calling a series of functions and these functions convert data into UI hierarchy after setting up everything if data changes the framework automatically recalls the required function to update UI (This UI update process is known as recomposition). The amazing thing is that it allows developers to write logic and UI using a single language Kotlin.  Difference between Imperative and Declarative approaches: – Imperative: – In imperative, we create a separate prototype/model of the application’s UI. As you know in XML we create widgets and components rendered for users to see and interact with. This way of writing is more focused on the how rather than the what. Example Program: – Declarative: – This paradigm is more focused on what rather than how. It allows the user to create an entire application using a single programming language. Example Program: – In the above example programs you can see the difference between both approaches. In the Imperative approach we have created two different files to show “Hello World” on the screen, on the other hand in the Declarative approach we can achieve the same output by calling a single composable function Text(text = “Hello World”).  Benefits of using Jetpack compose: – Parvesh SandilaParvesh Sandila is a passionate web and Mobile app developer from Jalandhar, Punjab, who has over six years of experience. Holding a Master’s degree in Computer Applications (2017), he has also mentored over 100 students in coding. In 2019, Parvesh founded Owlbuddy.com, a platform that provides free, high-quality programming tutorials in languages like Java, Python, Kotlin, PHP, and Android. His mission is to make tech education accessible to all aspiring developers.​ new.owlbuddy.com

What is Jetpack Compose Read More »

About Jetpack Compose series

These days a new technology called Jetpack Compose is becoming popular among Android developers. Every Android developer talking about this and some of you might have already heard somewhere about Jetpack Compose. Now the question arises, what is this and how can it be helpful to us as Android developers? Jetpack Compose is a native UI toolkit launched by Google. The main motive to launch this is to provide a productive and simple approach to creating UI in Android. As you know, the best way to write UI in Android is by using XML. But how would you react if I mention that soon you are going to miss this old-school way of writing UI? Believe me, this is going to amaze you Jetpack Compose allows us to create UI by just using Kotlin, and this is going to be a game changer for us android developers In coming years there is a high chance that this new way of creating UI will replace traditional technologies. Because of this reason, it becomes very important to keep yourself up to date with industry standards. For your help, we are going to create a detailed series about Jetpack Compose. Which will help you to understand every single topic about Compose. After finishing this series, you will be able to start a Jetpack Compose project from scratch and finish it like a pro. What is the agenda of the series: – The main agenda of this series is to provide knowledge to its readers about the following Pre-define composable (Buttons, Text, Radio, Checkbox, etc) Use of state  How to create custom composable  Animate composable  Creating custom UI using Canvas (Pie chart, Gauge, etc) Prerequisites to start this series: – This series is all about Jetpack Compose. So we will not cover any basic Android app development topic. So please make sure before starting that you have done with the following Prerequisite.  Knowledge of Android app development. Knowledge of Kotlin syntax and features (lambda, annotations, list functions, etc). Knowledge about reactive programming (LiveData, Flow, etc). Knowledge of some design patterns such as MVC, MVP, and MVVM. Parvesh SandilaParvesh Sandila is a passionate web and Mobile app developer from Jalandhar, Punjab, who has over six years of experience. Holding a Master’s degree in Computer Applications (2017), he has also mentored over 100 students in coding. In 2019, Parvesh founded Owlbuddy.com, a platform that provides free, high-quality programming tutorials in languages like Java, Python, Kotlin, PHP, and Android. His mission is to make tech education accessible to all aspiring developers.​ new.owlbuddy.com

About Jetpack Compose series Read More »

Scroll to Top
×