0%
Loading ...

Parvesh Sandila

Parvesh 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.​

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 »

Toast in Android using Kotlin

Toast is used to show small text messages on the screen for short time. The toast message stays for about 2, 3, or 5 seconds on screen after that it disappears automatically. The main motive of the toast message is to inform the user such as to warn a user who is trying to enter the number in the name field of the form. There is a dedicated Toast class available in Android SDK to make and show toast messages. The Toast class contains a static method called makeText() that is used to make a toast message. Check out the syntax to create and show a toast message. Toast.makeText(Context, String message, Toast duration).show(); As in the above syntax, you can clearly see we have used another method called show() to show a toast message on the screen. To mention toast duration static variables LENGTH_SHORT or LENGTH_LONG are available in the Toast class.  Example program to show simple toast message:  Toast.makeText(this, “Hello! This is a Toast message.”, Toast.LENGTH_LONG).show()   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

Toast in Android using Kotlin Read More »

EditText in Android using Kotlin

EditText is one of the most commonly used widgets in Android applications. EditText widget is used to get input from the user, for example, you have a login form in your application and you want to ask for an email and password from the user, for this purpose you can use EditText to get data. Android provides us wide range of properties to customize the EditText widget. Follow these steps to add an EditText widget in Android. Add an EditText widget in the XML layout file. Add required attributes such as hint, textColor, textSize, inputType, background to the EditText widget. Open Kotlin file to modify attributes and to set Listeners for the EditText. Adding EditText in the layout file: <?xml version=”1.0″ encoding=”utf-8″?> <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” xmlns:app=”http://schemas.android.com/apk/res-auto” xmlns:tools=”http://schemas.android.com/tools” android:layout_width=”match_parent” android:layout_height=”match_parent” android:orientation=”vertical” android:padding=”16dp” tools:context=”.MainActivity”> <TextView android:layout_height=”wrap_content” android:layout_width=”wrap_content” android:text=”Login” android:textSize=”20sp” android:textStyle=”bold” android:layout_marginBottom=”15dp” /> <EditText android:layout_width=”match_parent” android:layout_height=”wrap_content” android:hint=”Enter email” android:id=”@+id/emailET” android:inputType=”textEmailAddress” android:layout_marginBottom=”15dp” /> <EditText android:layout_width=”match_parent” android:layout_height=”wrap_content” android:hint=”Enter password” android:id=”@+id/passwordET” android:inputType=”textPassword” android:layout_marginBottom=”15dp” /> <Button android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:paddingHorizontal=”15dp” android:paddingVertical=”10dp” android:text=”Click Me” android:textSize=”18sp” android:textColor=”@color/white” android:id=”@+id/loginB” android:background=”@color/blue” /> </LinearLayout> In the above example, you can see we have created a login form and in this form, we used two EditText widgets to ask for email and password from the user. We have used white for the text color and blue for the background in the button widget. You can add these two colors to your colors.xml file.  <color name=”white”>#FFFFFFFF</color> <color name=”blue”>#304FFE</color> List of available attributes for EditText widget: Attributes Description android:id This attribute is used to uniquely identify the control android:gravity This attribute is used to specify how to align the text like left, right, center, top, etc. android:hint This attribute is used to display the hint text when text is empty android:text This attribute is used to set the text of the EditText android:textSize This attribute is used to set the size of the text. android:textColor This attribute is used to set the color of the text. android:textStyle This attribute is used to set the style of the text. For example, bold, italic, bolditalic, etc. android:textAllCaps This attribute is used this attribute to show the text in capital letters. android:width This attribute makes the TextView be exactly this many pixels wide. android:height This attribute makes the TextView be exactly this many pixels tall. android:maxWidth This attribute is used to make the TextView be at most this many pixels wide. android:minWidth This attribute is used to make the TextView be at least this many pixels wide. android:background This attribute is used to set the background to this View. android:backgroundTint This attribute is used to set tint to the background of this view. android:clickable This attribute is used to set true when you want to make this View clickable. Otherwise, set false. android:drawableBottom This attribute is used to set drawable to the bottom of the text in this view. android:drawableEnd This attribute is used to set drawable to the end of the text in this view. android:drawableLeft This attribute is used to set drawable to the left of the text in this view. android:drawablePadding This attribute is used to set padding to be drawable of the view. android:drawableRight This attribute is used to set drawable to the right of the text in this view. android:drawableStart This attribute is used to set drawable to the start of the text in this view. android:drawableTop This attribute is used to set drawable to the top of the text in this view. android:elevation This attribute is used to set the elevation to this view. Set click listener to EditText using Kotlin: class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val button = findViewById<Button>(R.id.loginB) as Button val emailET = findViewById<EditText>(R.id.emailET) as EditText val passwordET = findViewById<EditText>(R.id.passwordET) as EditText button.setOnClickListener(View.OnClickListener { val email=emailET.text.toString() val password=passwordET.text.toString() if(email.equals(“abc@abc.com”) && password.equals(“12345”)) { Toast.makeText(this@MainActivity, “Login done”, Toast.LENGTH_SHORT) .show() }else{ Toast.makeText(this@MainActivity, “Wrong email or password”, Toast.LENGTH_SHORT) .show() } }) } } In the above example program, If a user will enter email= abc@abc.com and password= 12345. Then on button click, a toast message Login done will appear on the screen otherwise Wrong email or password message will appear.  Final Output: 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

EditText in Android using Kotlin Read More »

Button in Android using Kotlin

The button widget in Android can be used for various purposes. It totally depends on the requirements of your project. We often see buttons in the login and signup form. Android provides us wide range of properties to customize the button widget. Follow these steps to add a Button widget in Android activity.  Add a Button in the XML layout file of yours activity. Add required attributes such as text, textColor, textSize, background to the Button widget. Open Kotlin file to modify attributes of textView and to set Listeners for the textView. Adding Button in the layout file: <?xml version=”1.0″ encoding=”utf-8″?> <RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android” xmlns:app=”http://schemas.android.com/apk/res-auto” xmlns:tools=”http://schemas.android.com/tools” android:layout_width=”match_parent” android:layout_height=”match_parent” tools:context=”.MainActivity”> <Button android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:paddingHorizontal=”15dp” android:paddingVertical=”10dp” android:text=”Click Me” android:textSize=”18sp” android:textColor=”@color/white” android:id=”@+id/button” android:background=”@color/blue” android:layout_centerInParent=”true” /> </RelativeLayout> In the above example, you can see we have added a Button widget in our XML file. Furthermore, we have also added some properties such as padding, textSize, textColor, and background to our Button widget. We have used white for the text color and blue for the background. you can add these two colors to your colors.xml file.  <color name=”white”>#FFFFFFFF</color> <color name=”blue”>#304FFE</color> List of available attributes for Button widget: Attributes Description android:id This attribute is used to set the id of the view. android:text This attribute is used to the display text of the button. android:textColor This attribute is used to the set color of the text. android:textSize This attribute is used to the set size of the text. android:textStyle This attribute is used to set the style of the text such as Bold, Italic, etc. android:textAllCaps This attribute is used to set text in Capital letters such as true, false android:background This attribute is used to set the background of the Button. android:padding This attribute is used to set the padding of the Button. android:visibility This attribute is used to set the visibility of the view such as visible, gone. android:gravity This attribute is used to specify the gravity of the view such as center, top, bottom, etc After adding this widget into the XML file our next step is to set a listener to our button. so to do this we have to move to our Kotlin file and there we will set an onClickListerner for our button widget.  Set click listener to Button using Kotlin: class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val button = findViewById<Button>(R.id.button) as Button button.setOnClickListener(View.OnClickListener { Toast.makeText(this@MainActivity, “You have Clicked on Button”, Toast.LENGTH_SHORT).show() }) } } As you can see in the above example program we have created a variable called the button and we assigned our XML widget to this variable with the help of findViewById method. After that, we have set a click listener to our button to show a toast message.  Output: Here is the final output. when we click on the Button widget. 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

Button in Android using Kotlin Read More »

TextView in Android using Kotlin

The Android TextView widget is used to display the text on the screen such as headings or paragraphs. Steps to add TextView in Android activity. Add a TextView in the XML layout file of yours activity. Add required attributes such as text, textColor, textSize, textStyle to textView widget. Open Kotlin file to modify attributes of textView and to set Listeners for the textView. Adding TextView in the layout file: As you can see here we have added a TextView into our layout file. We have also added some attributes to our TextView such as text, textSize, textStyle, etc (You can add attributes to the widget according to requirements of style). <?xml version=”1.0″ encoding=”utf-8″?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android” xmlns:app=”http://schemas.android.com/apk/res-auto” xmlns:tools=”http://schemas.android.com/tools” android:layout_width=”match_parent” android:layout_height=”match_parent” tools:context=”.MainActivity”> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”Hello World!” android:textSize=”25sp” android:textStyle=”bold” app:layout_constraintBottom_toBottomOf=”parent” app:layout_constraintLeft_toLeftOf=”parent” app:layout_constraintRight_toRightOf=”parent” app:layout_constraintTop_toTopOf=”parent” /> </androidx.constraintlayout.widget.ConstraintLayout> List of available attributes for TextView widget. Attributes Description android:text Sets the text of the Textview android:id Gives a unique ID to the Textview android:cursorVisible Use this attribute to make the cursor visible or invisible. The default value is visible. android:drawableBottom Sets images or other graphic assets below of the Textview. android:drawableEnd Sets images or other graphic assets to end of Textview. android:drawableLeft Sets images or other graphic assets to the left of Textview. android:drawablePadding Sets padding to the drawable(images or other graphic assets) in the Textview. android:autoLink This attribute is used to automatically detect URL or emails and show it as clickable links. android:autoText Automatically correct spelling errors in the text of the Textview. android:capitalize It automatically capitalizes whatever the user types in the Textview. android:drawableRight Sets drawable to the right of the text in the Textview. android:drawableStart Sets drawable to start of text in the Textview. android:drawableTop Sets drawable to top of the text in the Textview. android:ellipsize Use this attribute when you want the text to be ellipsize if it is longer than the Textview width. android:ems Sets width of the Textview in ems. android:gravity We can align the text of the Textview vertically or horizontally or both. android:height Use to set the height of the Textview. android:hint Use to show hints when there is no text. android:inputType Use to set input type of the Textview. It can be Number, Password, Phone, etc. android:lines Use to set the height of the Textview by the number of lines. android:maxHeight Sets the maximum height of the Textview. android:minHeight Sets the minimum height of the Textview. android:maxLength Sets maximum character length of the Textview. android:maxLines Sets maximum lines Textview can have. android:minLines Sets minimum lines Textview can have. android:maxWidth Sets maximum width Textview can have. android:minWidth Sets minimum lines Textview can have. android:textAllCaps Show all texts of the Textview in capital letters. android:textColor Sets color of the text. android:textSize Sets the font size of the text. android:textStyle Sets style of the text. For example, bold, italic, bolditalic. android:typeface Sets typeface or font of the text. For example, normal, sans, serif, etc android:width Sets width of the TextView.   Set click listener to TextView using Kotlin: In the following code firstly we linked a variable with our TextView widget with the help of the findViewById method, Then we set up an onClick listener to our TextView widget to show toast in case someone will click on the widget. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val textView = findViewById<TextView>(R.id.textView) as TextView textView.setOnClickListener(View.OnClickListener { Toast.makeText(this@MainActivity, “You have Clicked on TextView”, Toast.LENGTH_SHORT).show() }) } } Here is the final output: 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

TextView in Android using Kotlin Read More »

First project in Android using Kotlin

It is petty easy to start a project in Android. To start an Android project we assumed that you already have Android Studio Installed in your machine, If you haven't then please click here to install Android studio first. After installing the android studio please follow the steps mentioned below. Let's start creating the first project in Android using Kotlin. We hope you already have good knowledge of Kotlin. If you are new to Kotlin then please learn it first click here to start with Kotlin. Follow these steps: 1. Launch Android Studio in your machine then the following popup will appear on the screen. Click on create new project button to start the project. In case there is already a project open in Android Studio then you can click on File>Create New Project.  2. After clicking on create a new project the following popup will appear on the screen which will allow you to choose an activity template for your project you can choose any according to the requirement of your project. To keep it simple we are choosing here Empty Activity. Click next after choosing the activity template. 3. Now this new popup window will appear on the screen which will allow you to choose Application name, package name, save location(where you want to save your project in your machine), minimum SDK version and most important language(Don't forget to choose Kotlin here). After you are done click on the finish button. 4. Congratulations you have successfully created your First project in Android using Kotlin. To run this application on a virtual or physical device click on the play button. 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

First project in Android using Kotlin Read More »

Start with ReactJS

ReactJS is one of the most popular JavaScript front-end libraries. This library is used for creating reusable efficient and flexible UI components. ReactJS is an open-source library and is responsible for the application's view layer (It is used as the V in MVC). ReactJS is developed and maintained by Facebook and they also used it in their products like WhatsApp and Instagram. The main motive of ReactS is to develop a User Interface that improves the speed of the app. React uses the virtual DOM (JavaScript Object) that improves the overall performance of the app. JavaScript virtual DOM is faster than the regular DOM. React Features: JSX:  JSX is JavaScript syntax extension Components: React is components based JavaScript library. Unidirectional data flow and Flux: Flux is a pattern that helps to keep your data unidirectional. License: React is licensed under the Facebook Inc. Documentation is licensed under CC BY 4.0. Prerequisite to start this course: we hope you have good knowledge of JavaScript, HTML5 and CSS. In case you know ECMA Script 2015 syntax that can be helpful.   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

Start with ReactJS Read More »

Scroll to Top
×