DEV Community: Manoj Bhadane

Bottom Tabs with Android Jetpack Compose

Manoj Bhadane — Thu, 04 Jan 2024 15:22:25 +0000

Jetpack Compose is a modern UI toolkit for building native Android apps using a declarative approach. One of the common UI patterns in mobile app development is the bottom tab navigation, which allows users to switch between different sections or features of an application with a single tap.

Accelerate your app development with our cutting-edge Jetpack Compose Bottom Tabs source code! Unleash the power of modern UI design and navigation by integrating our meticulously crafted template into your project.

🚀 Streamline your development process with ease: Our source code provides a seamless integration of Jetpack Compose Bottom Tabs, eliminating the need for extensive coding. Save valuable time and resources as you effortlessly implement a dynamic and visually appealing navigation system.

⏰ Rapidly expedite your startup journey: Transform months of development into mere days with our pre-built solution. We've invested the hard work, so you don't have to. Experience the freedom to focus on refining your app's core features and functionalities while effortlessly incorporating our Jetpack Compose Bottom Tabs.

🤝 Benefit from our expertise and make the most of our Jetpack Compose Bottom Tabs source code to create an outstanding app that stands out in the market.

Get ready to elevate your app development experience. Purchase our Jetpack Compose Bottom Tabs source code now and witness the transformation of your ideas into a fully functional and aesthetically pleasing app! 🌟

Find complete code at below location, Don’t forget to follow

Download Source Code

Kotlin Sealed Classes and Enum Classes

Manoj Bhadane — Mon, 16 Oct 2023 10:53:30 +0000

Introduction

Kotlin, a versatile and modern programming language, offers several powerful features that make it a favorite among developers. Two such features are sealed classes and enum classes, which provide elegant and efficient solutions to common programming problems. In this comprehensive guide, we’ll delve into these features, exploring their purpose, syntax, use cases, and best practices.

1. What are Kotlin Sealed Classes?

Definition and Purpose

Sealed classes in Kotlin are a unique and powerful tool for modeling restricted class hierarchies. They allow you to define a fixed set of subclasses that can inherit from a sealed class, ensuring that no new subclasses can be created. This concept is particularly useful when you want to handle a limited number of variations, such as in parsing, state management, or expression evaluation.

Syntax and Declaration
To declare a sealed class, use the sealed keyword before the class keyword:
sealed class Result class Success(val data: String) : Result() class Error(val message: String) : Result()

In this example, the Result class is sealed, and it has two subclasses: Success and Error.

Use Cases and Examples

Sealed classes are commonly used in scenarios like:

Handling different states in an Android application.
Implementing a Result type for error handling.
Building expression trees in compilers or interpreters.

2. What are Kotlin Enum Classes?

Definition and Purpose

Enum classes in Kotlin provide a way to define a fixed set of values (enumerations). They’re ideal for representing constants, discrete values, or options where you know all possible values at compile-time. Enum classes ensure type safety and make your code more readable and maintainable.

Syntax and Declaration

To declare an enum class, use the enum class keywords:

enum class Color { RED, GREEN, BLUE }

Here, Color is an enum class with three possible values: RED, GREEN, and BLUE.

Use Cases and Examples
Enum classes are frequently used for:

Defining options or choices in a clean and self-explanatory way.
Representing days of the week, months, or other finite sets.
Creating constants for configuration settings.

3. Comparison and Contrast

When to Use Sealed Classes
Use sealed classes when:

You need to represent a restricted hierarchy of types.
You want to ensure exhaustiveness when handling different cases.
The number of subclasses is relatively small and fixed.

When to Use Enum Classes
Use enum classes when:

You have a fixed set of constant values or options.
The values are known at compile-time and limited in number.
You want to ensure type safety and readability.

4. Best Practices and Tips

Maintaining Code Readability

Choose meaningful names for sealed class hierarchies and enum values.
Document the purpose of sealed classes and enum values in your code.
Handling Unintended Scenarios
When using sealed classes, consider adding a default or “else” branch to handle unexpected cases.
In enum classes, avoid using values for unintended purposes; stick to their intended semantics.
Enum Class Best Practices
Avoid using ordinal() or values() methods unless it’s absolutely necessary, as they can lead to maintenance issues.
Consider using properties or methods on enum values to encapsulate behavior specific to each value.

Wrapping up
Kotlin’s sealed classes and enum classes are valuable tools that enhance code organization and maintainability. Sealed classes provide a means to represent restricted hierarchies, while enum classes simplify the management of constant values. By understanding their syntax, use cases, and best practices, you can write clean, readable, and maintainable code that performs well in search engine results. So, the next time you encounter situations where sealed classes and enum classes make sense, don’t hesitate to use them to your advantage.

Explore a treasure trove of similar and informative blog posts waiting for you at https://proprogramer.com. Delve into a world of knowledge and inspiration!

Master Your Finances with Top Expense Manager Apps!

Manoj Bhadane — Sat, 05 Aug 2023 17:43:40 +0000

Introduction:

Managing personal finances is a critical aspect of our daily lives. With numerous expenses and income sources, staying on top of our financial game can be challenging. Thankfully, there are powerful expense manager apps available that can simplify this process and help us regain control over our money. In this blog post, we'll explore five top-notch expense manager apps that can turn you into a financial guru.

1. Expense Manager Pro:

Expense Manager Pro, developed by Bishinews, is an ad-free gem that offers a comprehensive solution for tracking expenses, organizing bills, and managing budgets. Its seamless integration with Dropbox and Google Drive allows users to backup and sync data securely across multiple devices. The app comes with useful tools like a currency converter and calculators, and its high level of customization makes it a perfect fit for users around the globe. Expense Manager Pro doesn't require internet access or registration, ensuring maximum privacy for users.

Link: Expense Manager Pro on Google Play

2. Expenso - Money Manager

Expenso - Money Manager is a user-friendly budget manager and spending tracker app that lets you easily track expenses and incomes by category. It offers CSV report generation, monthly and yearly summaries, and budget customization. The app supports multiple currencies, provides reminders to add expenses, and allows users to choose between dark and light themes. With a strong focus on privacy, Expenso keeps financial data on the user's device and offers a detailed analysis of transactions and category breakdowns. It provides an intuitive interface, making it easy to navigate and manage expenditures, reports, and budgets effectively.

Link: Expenso - Money Manager on Google Play

3. Monefy Pro:

Monefy Pro is a budget manager and finance tracker app that allows users to easily add and track daily expenses with an intuitive interface. It offers budget planning and syncs data between multiple devices using Google Drive or Dropbox. The app supports multiple currencies, recurring payments, passcode protection, and provides helpful widgets and a built-in calculator for efficient financial management.

Link: Monefy Pro on Google Play

4. Money Manager (Remove Ads)

Money Manager (Remove Ads) is an optimized personal asset management app that applies double-entry bookkeeping for efficient money tracking. It features budget management with graphs, card/debit card management, passcode protection, and instant statistics to visualize expenses and changes. The app also offers a transfer, direct debit, and recurrence function, as well as a convenient bookmarking feature for frequently used expenses. Users can back up data in Excel format and utilize Google Drive for secure data storage.

Link: Money Manager (Remove Ads) on Google Play

5. Elephant Money Manager

Elephant Money Manager is an optimized expense tracker app for personal asset management. It allows users to record daily expenses and incomes, provides instant and powerful statistics with pie charts, and supports exporting reports in CSV format. The app offers various record types, asset management, backup and restore features, and the option to choose between dark and light themes with custom theme colors.

Link: Elephant Money Manager on Google Play

Conclusion:

In the fast-paced world we live in, having the right tools to manage personal finances is crucial. With these top-notch expense manager apps, you can track your expenses, manage budgets, and gain valuable insights into your financial habits. From ad-free experiences to customizable themes and secure data storage, these apps offer a wide range of features to suit your unique needs. Download one today and take control of your finances like a pro!

Android Custom Dialog using jetpack compose

Manoj Bhadane — Thu, 21 Apr 2022 08:24:58 +0000

Hello everyone! 👋 In this post I will explain how to create custom dialogs in android using jetpack compose.

Configuration used while creating this dialog — ,
Compose version : 1.1.0-alpha06
Kotlin version: 1.5.31
Android studio : Android Studio Bumblebee | 2021.1.1 Patch 3 _

The final output screenshots of this tutorial will be like below image

While building this custom dialog, we are going to use some materials Icons so for that purpose we need below dependency to be placed in our app level build.gradle file.



implementation "androidx.compose.material:material-icons-extended:$compose_version"

Step 1: First we will create separate file for custom dialog named as CustomDialog.kt In that file we will placed below code



@Composable
fun CustomDialog(value: String, setShowDialog: (Boolean) -> Unit, setValue: (String) -> Unit) {

    val txtFieldError = remember { mutableStateOf("") }
    val txtField = remember { mutableStateOf(value) }

    Dialog(onDismissRequest = { setShowDialog(false) }) {
        Surface(
            shape = RoundedCornerShape(16.dp),
            color = Color.White
        ) {
            Box(
                contentAlignment = Alignment.Center
            ) {
                Column(modifier = Modifier.padding(20.dp)) {

                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween,
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Text(
                            text = "Set value",
                            style = TextStyle(
                                fontSize = 24.sp,
                                fontFamily = FontFamily.Default,
                                fontWeight = FontWeight.Bold
                            )
                        )
                        Icon(
                            imageVector = Icons.Filled.Cancel,
                            contentDescription = "",
                            tint = colorResource(android.R.color.darker_gray),
                            modifier = Modifier
                                .width(30.dp)
                                .height(30.dp)
                                .clickable { setShowDialog(false) }
                        )
                    }

                    Spacer(modifier = Modifier.height(20.dp))

                    TextField(
                        modifier = Modifier
                            .fillMaxWidth()
                            .border(
                                BorderStroke(
                                    width = 2.dp,
                                    color = colorResource(id = if (txtFieldError.value.isEmpty()) android.R.color.holo_green_light else android.R.color.holo_red_dark)
                                ),
                                shape = RoundedCornerShape(50)
                            ),
                        colors = TextFieldDefaults.textFieldColors(
                            backgroundColor = Color.Transparent,
                            focusedIndicatorColor = Color.Transparent,
                            unfocusedIndicatorColor = Color.Transparent
                        ),
                        leadingIcon = {
                            Icon(
                                imageVector = Icons.Filled.Money,
                                contentDescription = "",
                                tint = colorResource(android.R.color.holo_green_light),
                                modifier = Modifier
                                    .width(20.dp)
                                    .height(20.dp)
                            )
                        },
                        placeholder = { Text(text = "Enter value") },
                        value = txtField.value,
                        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                        onValueChange = {
                            txtField.value = it.take(10)
                        })

                    Spacer(modifier = Modifier.height(20.dp))

                    Box(modifier = Modifier.padding(40.dp, 0.dp, 40.dp, 0.dp)) {
                        Button(
                            onClick = {
                                if (txtField.value.isEmpty()) {
                                    txtFieldError.value = "Field can not be empty"
                                    return@Button
                                }
                                setValue(txtField.value)
                                setShowDialog(false)
                            },
                            shape = RoundedCornerShape(50.dp),
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(50.dp)
                        ) {
                            Text(text = "Done")
                        }
                    }
                }
            }
        }
    }
}

Step 2: In this step we will create one button in launch dialog and print whatever user is going to add in that dialog. Paste below code in our MainActivity.kt



class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeDemoTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    HomePage()
                }
            }
        }
    }
}

@Composable
fun HomePage(){

    val showDialog =  remember { mutableStateOf(false) }

    if(showDialog.value)
        CustomDialog(value = "", setShowDialog = {
            showDialog.value = it
        }) {
            Log.i("HomePage","HomePage : $it")
        }

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Home")
                }
            )
        }) {
        Box(modifier = Modifier.background(Color.White)) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.White),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Button(onClick = {
                    showDialog.value = true
                }) {
                    Text(text = "Open Dialog")
                }
            }
        }
    }
}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetpackComposeDemoTheme {
        HomePage()
    }
}

That's it, you are done with Custom dialog using jetpack compose.

Please follow to get updated posts and hit like to motivate me
Thanks 😊🙏

If this post was helpful, please click like button below a few times to show your support!

Android login screen using jetpack compose [Part-2]

Manoj Bhadane — Tue, 12 Apr 2022 11:58:36 +0000

In this part we will add some more screens and will create some common components as well to reuse them across the app.

Configuration used while creating this spinner — ,

Compose version : 1.1.0-alpha06
Kotlin version: 1.5.31
Android studio : Android Studio Bumblebee | 2021.1.1 Patch 3

Step 1 : Let’s create common TopAppBar component first. create new package named component\ inside this package create new file and named it as component\CustomTopAppBar.kt Paste below code snippet in this file

@Composable
fun CustomTopAppBar(navController: NavHostController, title: String, showBackIcon : Boolean) {
    TopAppBar(
        title = {
            Text(text = title)
        },
        navigationIcon = if (showBackIcon && navController.previousBackStackEntry != null) {
            {
                IconButton(onClick = { navController.navigateUp() }) {
                    Icon(
                        imageVector = Icons.Filled.ArrowBack,
                        contentDescription = "Back"
                    )
                }
            }
        } else {
            null
        }
    )
}

Step 2: Create new file screen\SignUp.kt and add below code in it

@Composable
fun SignUp(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize()) {
        ScaffoldWithTopBar(navController)
    }
}

@Composable
fun ScaffoldWithTopBar(navController: NavHostController) {
    Scaffold(
        topBar = {
            CustomTopAppBar(navController, "Signup", true)
        }, content = {
            Column(
                modifier = Modifier
                    .fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Sign up",
                    fontSize = 30.sp,
                    color = Color.Black
                )
            }

        })
}

Step 3: Create new file screen\ForgotPassword.kt and add below code in it

@Composable
fun ForgotPassword(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize()) {
        ScaffoldWithTopBarForgotPass(navController)
    }
}

@Composable
fun ScaffoldWithTopBarForgotPass(navController: NavHostController) {
    Scaffold(
        topBar = {
            CustomTopAppBar(navController, "Forgot Password", true)
        }, content = {
            Column(
                modifier = Modifier
                    .fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Forgot Password",
                    fontSize = 30.sp,
                    color = Color.Black
                )
            }
        })
}

Step 4: Now we will add navigation for above screens we just created. In order to do that update ScreenMain.kt with below code

@Composable
fun ScreenMain(){
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = Routes.Login.route) {

        composable(Routes.Login.route) {
            LoginPage(navController = navController)
        }

        composable(Routes.SignUp.route) {
            SignUp(navController = navController)
        }

        composable(Routes.ForgotPassword.route) { navBackStack ->
            ForgotPassword(navController = navController)
        }
    }
}

Step 5: To navigate to signup screen from Login screen add below code to onClick of sign up text in Login.kt.

ClickableText(
    text = AnnotatedString("Sign up here"),
    modifier = Modifier
        .align(Alignment.BottomCenter)
        .padding(20.dp),
    onClick = { navController.navigate(Routes.SignUp.route) },
    style = TextStyle(
        fontSize = 14.sp,
        fontFamily = FontFamily.Default,
        textDecoration = TextDecoration.Underline,
        color = Purple700
    )
)

Step 6: To navigate to ForgotPassword screen from Login screen add below code to onClick of forgot password text in Login.kt.

ClickableText(
    text = AnnotatedString("Forgot password?"),
    onClick = { navController.navigate(Routes.ForgotPassword.route) },
    style = TextStyle(
        fontSize = 14.sp,
        fontFamily = FontFamily.Default
    )
)

That's it, you are done with Login UI using jetpack compose.

Find complete code on GitHub, Don’t forget to follow 😊

Please follow to get updated posts and hit like to motivate me
Thanks 😊🙏

If this post was helpful, please click like button below a few times to show your support!

Android login screen using jetpack compose [Part-1]

Manoj Bhadane — Mon, 11 Apr 2022 12:09:12 +0000

Almost all android application will have login or registration process in order to authenticate a user. In this article I will be demonstrating how to design android login and registration screen design using jetpack compose. This will be series of several posts where I will try to cover various android components.

Please do share and hit like to this post to encourage me. :)

Configuration used while creating this post — ,
Compose version : 1.1.0-alpha06
Kotlin version: 1.5.31
Android studio : Android Studio Bumblebee | 2021.1.1 Patch 3

The final output screenshots of this tutorial will be like below image

Step 1: Create an Android Studio project by selecting an “Empty compose activity”.

Step 2: Add below dependency in app level gradle file as it is required for navigation



implementation "androidx.navigation:navigation-compose:2.4.0-alpha04"

Step 3: Create new file Routes.kt to store routes information



sealed class Routes(val route: String) {
    object Login : Routes("Login")
}

Step 4: Create new package screen

Step 5: Create new File inside screen package screen/ScreenMain.kt and paste below code in it.



@Composable
fun ScreenMain(){
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = Routes.Login.route) {

        composable(Routes.Login.route) {
            LoginPage(navController = navController)
        }
    }
}

Step 6: Create new file screen/Login.kt and paste below code in it



@Composable
fun LoginPage(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize()) {
        ClickableText(
            text = AnnotatedString("Sign up here"),
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(20.dp),
            onClick = { },
            style = TextStyle(
                fontSize = 14.sp,
                fontFamily = FontFamily.Default,
                textDecoration = TextDecoration.Underline,
                color = Purple700
            )
        )
    }
    Column(
        modifier = Modifier.padding(20.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        val username = remember { mutableStateOf(TextFieldValue()) }
        val password = remember { mutableStateOf(TextFieldValue()) }

        Text(text = "Login", style = TextStyle(fontSize = 40.sp, fontFamily = FontFamily.Cursive))

        Spacer(modifier = Modifier.height(20.dp))
        TextField(
            label = { Text(text = "Username") },
            value = username.value,
            onValueChange = { username.value = it })

        Spacer(modifier = Modifier.height(20.dp))
        TextField(
            label = { Text(text = "Password") },
            value = password.value,
            visualTransformation = PasswordVisualTransformation(),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
            onValueChange = { password.value = it })

        Spacer(modifier = Modifier.height(20.dp))
        Box(modifier = Modifier.padding(40.dp, 0.dp, 40.dp, 0.dp)) {
            Button(
                onClick = { },
                shape = RoundedCornerShape(50.dp),
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.dp)
            ) {
                Text(text = "Login")
            }
        }

        Spacer(modifier = Modifier.height(20.dp))
        ClickableText(
            text = AnnotatedString("Forgot password?"),
            onClick = { },
            style = TextStyle(
                fontSize = 14.sp,
                fontFamily = FontFamily.Default
            )
        )
    }
}

Step 7: Inside your MainActivity.kt add below code snippet



class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeDemoTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    ScreenMain()
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetpackComposeDemoTheme {
        ScreenMain()
    }
}

That's it, you are done with Login UI using jetpack compose.

In next part [Part-2] we will add some more screens and navigation to those screen.

Find complete code on GitHub, Don’t forget to follow 😊

Please follow to get updated posts and hit like to motivate me
Thanks 😊🙏

If this post was helpful, please click the clap 👏 button below a few times to show your support!

Deploy ReactJS app on shared hosting like GoDaddy, Hostinger etc.

Manoj Bhadane — Mon, 11 Apr 2022 06:40:00 +0000

Step 1 : Create .htaccess file in public folder and below content in it

Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]

Step 2: Build app using npm or yarn

npm run build or yarn run build

Step 3: Upload content of build/ directory in to public_html/ directory on shared hosting

Done.

Please follow to get updated posts and hit like to motivate me
Thanks 😊🙏