Web Analytics
  • Culture
      Back
      Agile Mindset

      Agile is not a principal or a method, but it’s an integral part of being Agile that is guided by principles, defined by values and manifested through various practices.

      Bacancy Values

      You add value to your customer when you deliver a product or service that has been designed specifically to solve their problem.

      Bacancy Culture

      Core Team will work as Scrum Team where Team will have quarterly goal to make sure that we run financial, administrative and project management prospective.

  • What we do
      Back
      Product Engineering

      Seize the opportunity to make your product stand out. We enable our clients

      AI & ML

      We automate businesses and optimize processes by deploying smart AI and...

      Blockchain

      Get a full spectrum of blockchain development services from us to bring scalability...

      IOT

      Improve Business Productivity and Efficiency using our high-end IOT professional services...

      Digital Transformation

      We truly become a part of your business by helping you think through the...

  • Who we work with
      Back
      Real Estate

      We can help you uncover the hidden revenue opportunities to showcase your...

      Finance & Insurance

      In the emerging technological environment, we are offering reliable banking and financial...

      Oil & Gas

      Reshape your energy landscape and gain better control by harnessing the best...

      Healthcare

      Utilizing advanced technologies to provide best software, web & mobile development services...

      Travel & Transport

      Manage your logistics and transportation business at the ease of your fingertips...

      Startups

      We can help you to build your MVP with advanced technologies....

  • About Us
      Back
      About

      Agile, A Process Delivering Values & Successful Products

      Blog

      Abstract Technology News Driven by Sources

      Career

      If you are passionate about your career, have creative flair and good craft skills, we want you!

  • Technology
      Back

      Front-End

      AngularJS ReactJS Vue.JS JavaScript Backbone.JS Ember.JS MEAN MERN

      Back-End

      Ruby on Rails Node.JS Golang Laravel PHP Python .NET Yii

      Mobile

      Android iOS React Native Flutter Ionic Kotlin

      CMS & CRM

      Spree Magento Wordpress Drupal Umbraco Woocommerce Salesforce Microsoft Dynamics 365<
      Explore All
  • Talk to Us
Talk to Us
Close
    MENU
  • Culture
    • Agile Mindset
    • Bacancy Values
    • Bacancy Culture
  • What we do
    • Product Engineering
    • AI & ML
    • Blockchain
    • IOT
    • Digital Transformation
  • Who we work with
    • Real Estate
    • Finance & Insurance
    • Oil & Gas
    • Healthcare
    • Travel & Transport
    • Startups
  • About Us
    • About
    • Blog
    • Career
  • Technology
      Front-End
    • AngularJS
    • ReactJS
    • Vue.JS
    • JavaScript
    • Backbone.JS
    • Ember.JS
    • MEAN
    • MERN
    • Back-End
    • Ruby on Rails
    • Node.JS
    • Golang
    • Laravel
    • PHP
    • Python
    • .NET
    • Yii
    • Mobile
    • Android
    • iOS
    • React Native
    • Flutter
    • Ionic
    • Kotlin
    • CMS & CRM
    • Spree
    • Magento
    • Wordpress
    • Drupal
    • Umbraco
    • Woocommerce
    • Salesforce
    • Microsoft Dynamics 365
    • Explore All
  • Contact Us
  • CLOSE
Jetpack banner

Jetpack Compose: Android’s Modern Toolkit for Building Native UI

Mansi Kothari
Mansi Kothari
February 11, 2020 5 min read

Last Updated on March 13, 2020Jetpack

JetPack Compose: An Introduction

Recently, I have tried my hands on the latest UI toolkit named Compose. I am in love with this toolkit because making use of this toolkit all we are required to do is describe the behavior of the UI instead of writing a large XML file. As a developer, it is so convenient for me to check the preview of UI in Kotlin file. It is very much helpful in reducing the application’s code and accelerate performance!

When Google introduces Jetpack Compose at I/O 2019, all the tech experts out there were sure that it would surely improve the way Android developers creating typical UI currently. Jetpack Compose is an acknowledgment of the modular UI trend. The new UI toolkit is simplifying UI development by combining it with Kotlin.

Benefits with Quick Example

Take hiding an ImageView as an example. With the existing UI toolkit, you might be using findViewById() method to discover a reference to the ImageView you may want to hide, then call set visibility() on it.

In the Jetpack Compose UI toolkit, instead of writing UI programmatically in. kt file, you can change the visibility and re-run the code describing that logic. So, once you have created any View, you are not required to get a reference to it. Instead, you just have to rerun the code with different settings.

@Composable

As we discussed earlier, composable functions are used to declare how our UI will behave, what it will do on screen. It is marked with the @Composable annotation. The significant advantage of this UI toolkit is that it isn’t coupled with Android OS, it is totally independent.

You are not required to rebuild the entire compose when you update something; it is smart enough to modify the section that needs to be changed. Remember, composable functions can only be called from another Composable function.

Key Notes

Jetpack Compose works only with,

  • Minimum API level 21 or higher
  • Classes are written in Kotlin
  • Android Studio version 3.5.1 or higher (or least 4.1 Canary builds)
  • It is in Technical Preview; please do not use Compose in production apps.

Let’s now look into core components of Jetpack Compose.

Core components of Jetpack

Two dependencies required to try Jetpack Compose are:

  • androidx.compose:compose-compiler:0.1.0-dev01 (processor for annotations)
  • androidx.compose:compose-runtime:0.1.0-dev01 (contains APIs that used to generate code for Compose UI)

Android Jetpack Architecture Components:

Android Jetpack Architecture Components

Let’s me get you through the Basics

First of all, include Jetpack Compose toolkit dependencies in your app’s build. Gradle file.

Make sure you add the build features { compose true } flag in the gradle file.

gradle
def compose

Since Jetpack Compose introduces a programmatic way to create user interfaces, you won’t use setContentView() in your activities or fragments; instead you’ll use setContent() to set up your UI.

appcompatactivity

In the above code, you can see a setContent() function in which we are setting a welcome text in Text() function.

Text() is a function marked with the @Composable. Text() composable is in charge of drawing text on the screen. It is the Compose version of a TextView.

Build and Run your app to see the welcome text on the screen!

mycomposabledemo.

How to Write a Composable Function

Now that you’re familiar with Text(), you can make your first @Composable function.

Here we have introduced a Modifier called Spacing() in our Text() function, which is used to add space around any view. It is similar to margins used in the XML file.

Add the following function in your activity:

Composable

Great, you’ve just created your first custom Composable function!

To use it, replace the existing call to Text() in setContent() with a call to Greeting().

Now build and run the app. You will see the same welcome text with some spacing!

mycomposabledemo1

How to Add Custom Theme

Let’s add some colors to the screen. In the below code chunk, you can see Surface() compose function. You will be able to set background color with this built-in Component.

MaterialTheme() is a built-in theme that offers many colors and text styles.

MaterialTheme() a style of composable functions.

Composable

As MaterialTheme() encloses Greeting() composable function, It will be styled with the properties defined in the theme. We can use MaterialTheme to define the style of the Text as below:

MaterialTheme

Build and run as before.

Demo

Column Composable

The Column is similar to a Linear Layout with a vertical orientation. The column is used to place items in a vertical order. Similarly, you can use Row to arrange views horizontally.

In the below code snippet, I have explained how to set a list of tutors vertically. I have called Text() composable function inside Column() composable function.


class main activity

You will see all tutor’s names organized vertically once you run the app successfully.

MyFinalDemo1

That’s it for learning the basics of Jetpack Compose. This is the most exciting UI toolkit for Android Developers. I hope you find the blog helpful enough and your purpose of landing on this page is served.

Mansi Kothari
Mansi Kothari View all post
A passionate Android developer. Always Keen to learn new mobile app development trends. Mansi Kothari is a self-motivated programmer who is having expertise in building, integrating, testing, and supporting Android apps for mobile and tablet devices on the Android platform. She is a wanderlust soul.

Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !



0 Comments on "Jetpack Compose: Android’s Modern Toolkit for Building Native UI"

Leave a Reply Cancel

Related articles
Real-time Chat Application
Vue.JSApplication DevelopmentGolang
How to Create a Real-time Chat Application using Socket.IO, Golang, and VueJS?
April 13, 2021 by: Archita Nayak
Mobile App Development Frameworks
Mobile App
Top Mobile App Development Frameworks to Consider in 2021
January 13, 2021 by: Archita Nayak
React Native Vs Native Development
React NativeApplication Development
React Native Vs Native Development: What to Choose For Cross-Platform App Development?
October 26, 2020 by: Kiran Bhatt

Top 1% IT Talent

Bacancy Technology is an exclusive hub of top dedicated software developers, UI/UX designers, QA experts, and product managers with an incredibly rare and hidden talents you will ever come across. We let you access the top 1% IT talent from independent software developers to the fully managed teams.

Time Zone Aligned

Timezone is never a constraint when you are working with Bacancy Technology. We follow one very simple principle – our developers and your time zone. Hire dedicated software developers from us and make collaboration in a faraway to work according to your time zone, deadline, and milestone.

Experienced Team

Whether you are looking for skilled developers in emerging technologies or looking for an extended arms to augment your existing team, we can lend a helping hand in both situations. We are a full-stack software development company with 300+ skilled and experienced software developers whom you can hire at your convenience to address the ongoing business challenges

Let us help you build a modern digital business to overcome traditional culture and succeed in the age of digital transformation.

  • USA
  • Canada
  • Australia
  • India
  • UAE
  • Sweden

USA

Bacancy Technology LLC

Florida

4995 NW 72nd Ave, Suite 307 Miami, FL 33166

Phone

+1 347 441 4161

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

Canada

Bacancy Technology Inc

Toronto

71 Dawes Road, Brampton, On L6X 5N9, Toronto

Phone

+1 416 907 6738

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

Australia

Bacancy Technology

South Australia

351A Hampstead Rd, Northfield SA 5085

Phone

(02) 8005 8222

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

India

Bacancy Technology Pvt Ltd

Ahmedabad

1207-1210, Time Square, Thaltej-Shilaj Road, Ahmedabad

Pune

2nd Floor, Marisoft-1, Marigold IT Park, Pune

Phone

079- 40037674

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

UAE

Bacancy Technology

Dubai

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

Phone

+1 347 441 4161

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

Sweden

Bacancy Technology

Hagersten

Junkergatan 4, 126 53 Hagersten

Phone

+1 347 441 4161

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

How Can We Help?

  • Employee
  • Brochure
  • Quality Assurance
  • Resources
  • Privacy Policy
  • Sitemap
  • Solution
  • Contact Us
DMCA.com Protection Status
Request A Free Consultation