Today we are going to talk about themes and composition, as usual, design teams always have different themes and custom attributes than MaterialDesign theme so we can always use the material design as the default theme for the app, off course Android has created a custom solution for this problem so you do not have to depend on MaterialTheme,

Custom Themes Methods

The simplest approach is to add extension properties.

An example of this is to add an extension property to the Material Theme,

I do recommend this way if you do not have a lot of custom properties

private object CustomDesignSystemExtend {
    // [START android_compose_designsystems_custom_extend]
    // Use with MaterialTheme.colors.snackbarAction
    val Colors.snackbarAction: Color
        get() = if (isLight) Red300 else Red700

    // Use with MaterialTheme.typography.textFieldInput
    val Typography.textFieldInput: TextStyle
        get() = TextStyle(/* ... */)

    // Use with MaterialTheme.shapes.card
    val Shapes.card: Shape
        get() = RoundedCornerShape(size = 20.dp)
    // [END android_compose_designsystems_custom_extend]

    val Red300 = Color(0xFFE57373)
    val Red700 = Color(0xFFD32F2F)
}

this is an example of adding a custom extension property to MaterialTheme.

The best way to do it is to create your custom color, typo, shapes, dimensions, etc.. data immutable class, so even if you have multiple themes in the app you use the same object to fill the data with new values and use this theme in your app directly,

Start by creating your immutable data class that defines your app theme.

   @Immutable
    data class AmazingSpiderColors(
        val tertiary: Color,
        val onTertiary: Color,
        val secondary:Color,
        val onSecondary:Color,
        val primary:Color,
        val onPrimary:Color,
        val bottomActionBar:Color,
        val bottomActionBarText:Color
    )

Now create these colors by creating new objects, you can create multi-object for each theme

 val amazingSpiderColors = AmazingSpiderColors(
            tertiary = Color(0xFFA8EFF0),
            onTertiary = Color(0xFF002021,
            ...)

in this example we only create one color object for one theme you create one for Dark one for Light one for Men Dark, and also one for Women as an example,

to access these colors through its compose theme you need to create its staticCompositionLocalOf,

 val LocalAmazingSpiderColors = staticCompositionLocalOf {
        AmazingSpiderColors(
            tertiary = Color.Unspecified,
            onTertiary = Color.Unspecified
        )
    }

What is staticCompositionLocalOf?

staticCompositionLocalOf provides static, implicitly passed data in Jetpack Compose. Value changes recompose the entire area where it's used, ideal for infrequent changes and performance optimization. (vs. compositionLocalOf for tracked reads and fine-grained updates.)

now you can define your theme and provide these colors to it

@Composable
    fun AmazingSpiderTheme(
        content: @Composable () -> Unit
    ) {
        val amazingSpiderColors = AmazingSpiderColors(
            tertiary = Color(0xFFA8EFF0),
            onTertiary = Color(0xFF002021)
        )
        CompositionLocalProvider(LocalAmazingSpiderColors provides amazingSpiderColors) {
            MaterialTheme(
                /* colors = ..., typography = ..., shapes = ... */
                content = content
            )
        }
    }

Let's have a full example of this customization with buttons typos and shapes

object FullyCustomDesignSystem {
    // [START android_compose_designsystems_fully_custom]
    @Immutable
    data class CustomColors(
        val content: Color,
        val component: Color,
        val background: List<Color>
    )

    @Immutable
    data class CustomTypography(
        val body: TextStyle,
        val title: TextStyle
    )

    @Immutable
    data class CustomElevation(
        val default: Dp,
        val pressed: Dp
    )

    val LocalCustomColors = staticCompositionLocalOf {
        CustomColors(
            content = Color.Unspecified,
            component = Color.Unspecified,
            background = emptyList()
        )
    }
    val LocalCustomTypography = staticCompositionLocalOf {
        CustomTypography(
            body = TextStyle.Default,
            title = TextStyle.Default
        )
    }
    val LocalCustomElevation = staticCompositionLocalOf {
        CustomElevation(
            default = Dp.Unspecified,
            pressed = Dp.Unspecified
        )
    }

    @Composable
    fun CustomTheme(
        /* ... */
        content: @Composable () -> Unit
    ) {
        val customColors = CustomColors(
            content = Color(0xFFDD0D3C),
            component = Color(0xFFC20029),
            background = listOf(Color.White, Color(0xFFF8BBD0))
        )
        val customTypography = CustomTypography(
            body = TextStyle(fontSize = 16.sp),
            title = TextStyle(fontSize = 32.sp)
        )
        val customElevation = CustomElevation(
            default = 4.dp,
            pressed = 8.dp
        )
        CompositionLocalProvider(
            LocalCustomColors provides customColors,
            LocalCustomTypography provides customTypography,
            LocalCustomElevation provides customElevation,
            content = content
        )
    }

    // Use with eg. CustomTheme.elevation.small
    object CustomTheme {
        val colors: CustomColors
            @Composable
            get() = LocalCustomColors.current
        val typography: CustomTypography
            @Composable
            get() = LocalCustomTypography.current
        val elevation: CustomElevation
            @Composable
            get() = LocalCustomElevation.current
    }
    // [END android_compose_designsystems_fully_custom]

    // [START android_compose_designsystems_fully_custom_usage]
    @Composable
    fun CustomButton(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        content: @Composable RowScope.() -> Unit
    ) {
        Button(
            colors = ButtonDefaults.buttonColors(
                containerColor = CustomTheme.colors.component,
                contentColor = CustomTheme.colors.content,
                disabledContainerColor = CustomTheme.colors.content
                    .copy(alpha = 0.12f)
                    .compositeOver(CustomTheme.colors.component),
                disabledContentColor = CustomTheme.colors.content
                    .copy(alpha = ContentAlpha.disabled)
            ),
            shape = ButtonShape,
            elevation = ButtonDefaults.elevatedButtonElevation(
                defaultElevation = CustomTheme.elevation.default,
                pressedElevation = CustomTheme.elevation.pressed
                /* disabledElevation = 0.dp */
            ),
            onClick = onClick,
            modifier = modifier,
            content = {
                ProvideTextStyle(
                    value = CustomTheme.typography.body
                ) {
                    content()
                }
            }
        )
    }

    val ButtonShape = RoundedCornerShape(percent = 50)
    // [END android_compose_designsystems_fully_custom_usage]
}

Please Look at this Article by android

Custom design systems in Compose | Jetpack Compose | Android Developers

Android Developers

And Github

snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/CustomDesignSystem.kt at b48562b6cb6dc5e07f80559474a4a414d65a5583 · android/snippets

Main repository for snippets surfaced on developer.android.com. - android/snippets

GitHubandroid

Introduction:

In the ever-evolving world of mobile app development, choosing the right database for storing and retrieving data is crucial. SQLite has emerged as a popular choice for Android developers due to its lightweight nature and seamless integration capabilities. One powerful library that leverages SQLite in Android is Room. In this article, we'll delve into the fundamentals of SQLite, explore its usage in Android, and take a closer look at how Room is built and structured.

SQLite in Android:

SQLite is a C library that provides a lightweight, disk-based database. Its self-contained and serverless architecture makes it particularly appealing for mobile applications, especially on Android. Android applications can seamlessly integrate SQLite databases to store and manage structured data.

Android's SQLite API provides a set of classes and methods for database operations. Using these APIs, developers can create, update, delete, and query records in the SQLite database. While using the raw SQLite APIs is a valid approach, it can be complex and error-prone. This is where Room, a powerful and robust database library, comes into play.

Room in Android:

Room is an abstraction layer over SQLite that makes database interactions in Android applications more convenient and efficient. It provides compile-time checks, improved syntax, and a set of high-level APIs, making database operations easier to manage.

Key Components of Room:

Entity:
Room defines the database schema using annotated Java or Kotlin data classes as entities. Each entity represents a table in the SQLite database and the fields of the class map to the columns in the table.

@Entity
data class User(
    @PrimaryKey val userId: Int,
    val username: String,
    val email: String
)

DAO (Data Access Object):
The DAO is responsible for defining the methods that access the database. These methods are annotated with SQL queries and can perform various operations such as insertion, deletion, and querying.

@Dao
interface UserDao {
    @Insert
    suspend fun insert(user: User)

    @Query("SELECT * FROM User WHERE userId = :id")
    suspend fun getUserById(id: Int): User?

    // Additional queries and operations
}

Database:
The Database is the core component of Room. It is an abstract class that extends RoomDatabase and includes the entities and their corresponding DAOs.

@Database(entities = [User::class], version = 1)
abstract class AppDatabase : RoomDatabase() {
    abstract fun userDao(): UserDao
}

Using Room in Android:

Setup:
To use Room in an Android project, add the necessary dependencies to the app's build.gradle file.

implementation "androidx.room:room-runtime:x.x.x"
kapt "androidx.room:room-compiler:x.x.x"

Initialization:
Create an instance of the database using the Room.databaseBuilder method.

val db = Room.databaseBuilder(
    applicationContext,
    AppDatabase::class.java, "app-database"
).build()

Executing Database Operations:
Use the DAO methods to perform database operations.

val userDao = db.userDao()
val user = User(1, "JohnDoe", "john.doe@email.com")
userDao.insert(user)

Conclusion:

SQLite, coupled with the power and simplicity of Room, offers Android developers a robust solution for database management in their applications. Understanding the architecture and components of Room empowers developers to create efficient and scalable apps while benefiting from the performance advantages of SQLite. As you embark on your Android development journey, consider Room as your go-to database solution for seamless and reliable data storage.

What do you need to start developing Android mobile applications

1. Kotlin/Java.
2. Object-oriented programming paradigm.
3. Functional programming paradigm.
4. Software Design Patterns.
5. Clean Code and Clean Architecture
6. Android Operating Systems
7. Android Platform Architecture
8. MAD Skills

Let's start with basic knowledge and resources about Kotlin and Java.

Java is one of the popular programming languages its open source and it was widely used until Oracle Buy the company and made it open for specific versions until then java became a bit difficult to use in enterprise and also the support and development of the language itself become a bit behind, why do we need to talk about Java or learn Java, One of the things you need to know is that Java is still used in many projects and some companies they still have an old legacy code using Java so its good to have a Knowledge of it.

Here is one of the best Crash courses to learn about Java.

Now Let's move to Kotlin after you learn a bit about Java how it works and how to write code with it you need to learn Kotlin to write your first mobile application in Android and also moving forward we can learn to write code in Multiplatform like Web, Desktop, IOS.

Here is one of the best Crash courses to learn about Kotlin.

After Learning Kotlin I believe you can now write code in Koltin and you have the starter knowledge to start in mobile application Journey.

Let's now jump into some of the concepts that make you one of the brilliant developers and help to know and define problems in your application and solve them cleanly and neatly.

Let's Learn more about the Object-oriented programming paradigm

Here is a great course to learn about this paradigm and enhance more in your Knowledge.

Now the next topic you need to be strong about and will make's defiant from other developers is Functional Programming.

Kotlin has shared also a very great tutorial watch it to learn more about this paradigm.

Let's Jump now into Software Design Patterns.

Here is a very good video about design patterns.

Also to learn more about it you can read from one of the best websites.

Design Patterns

Design Patterns are typical solutions to commonly occurring problems in software design. They are blueprints that you can customize to solve a particular design problem in your code.

Now you need to learn about writing Clean Code and Clean Arcticiture

this topic is a bit advanced you can learn it while you are on the journey

In this topic, you always need to learn from the best Uncle Bob

Here is a very good playlist for Uncle Bob explaining clean code and clean architecture

Now after you learn about software engineering and you become a solid software engineer let's start with Android Mobile Development.

Let's begin with Android Operating Systems

Keep this Digram in your mind this explains how the operating system works and how it's structured.

Let's also start with the Android Components.

1. Core Components:

• Activities: Represent the UI and handle user interactions within an app.
• Content Providers: Manage and share application data with other apps.
• Intents: Enable communication between different components of an Android app or between different apps.
• Services: Run in the background to perform long-running operations or handle tasks without a user interface.

2. AndroidManifest:

• AndroidManifest.xml: A crucial configuration file that provides essential information about an Android app, such as its components, permissions, and hardware requirements.

3. App Structure:

• Broadcast Receivers: Respond to system-wide broadcast announcements or communicate between apps.
• Fragments: Modular UI components that represent portions of an activity.
• Views: UI elements like buttons, text fields, and images.
• XML File: Used for layout and resource definitions in Android applications.
• Compose: Jetpack Compose is a modern Android UI toolkit that simplifies and accelerates UI development on Android. It allows developers to build UIs using a declarative syntax in Kotlin, making UI development more concise and less error-prone compared to the traditional XML-based approach.

4. Development Concepts:

• About Android: General information about the Android operating system and its development environment.
• Libraries: External code packages that provide pre-built functionality for developers to use.
• Linux Kernel: The underlying operating system kernel upon which Android is based.
• Resources: External assets such as images, strings, and layouts used in an Android app.
• Widgets: UI components like buttons, sliders, etc., that users can interact with.

5. Build and Distribution:

• APK Build: The process of compiling and packaging an Android application into an APK (Android Package) file.
• Application Framework: A set of APIs and tools provided by the Android system to help developers build apps more efficiently.

6. Application Components:

• Applications: The end-user software that runs on Android devices.

These components and concepts collectively form the foundation for developing Android applications. Understanding how they interact and utilizing them effectively is crucial for building robust and efficient Android apps.

Let's Learn more also about MAD Skills.

Modern Android Development Skills | Modern Android development | Android Developers

Android Developers

Here are also some Books you need to keep in your Library

1. Clean Code: A Handbook of Agile Software Craftsmanship
2. Clean Architecture: A Craftsman's Guide to Software Structure and Design (Robert C. Martin Series)
3. Head First Design Patterns: Building Extensible and Maintainable Object-Oriented Software 2nd Edition.
4. Refactoring: Improving the Design of Existing Code (2nd Edition) (Addison-Wesley Signature Series (Fowler))
5. Grokking Algorithms: An Illustrated Guide for Programmers and Other Curious People.

Best book to read for refactoring is
1. Refactoring by (martin fowler)

2.Working effectively with legacy code by (Michael C. Feathers)

Always keep this three questions in your mind when you refactor your code.

• Why do we need a refactor?
• When do we need to refactor?
• And how to refactor?

The first question answer is

1. Technology limitations and support.
2. Cost of the existing code maintenance.
3. Spaghetti code not will written and not easy to test will lead to time and money.
4. Some times technology is like fashion and you should be fashionable but not the most correct reason.

The second question answer is

First you need your approach is it a strategic decision or is it an enterprise culture. Still you need to think about refactor small parts while you are working

The third question answer is

Before we start we want to have a small intro about the presentation architecture we are using these days to handle and work with our fragments and activities in the past 3 years we start working with the popular MVP and it was very useful to work with android and separating the logic from the UI the thing is it’s not reactive and we want to have something more reactive to work with plus in android, we really have a massive issue when we rotate our phones by losing the current screen state so thankfully Google decided to have a very useful pattern called MVVM where we have a view model and the view model will have an observer and we listen to the changes happening on this observer the thing is I see in many projects that we have a single view model with more than 5 to 6 observers in it why is that because it’s easy to create observers and post data to them and change the UI with it but when it comes to testing the UI some times things happened form any of the observers we are observing and we can’t trace where thes changes comes from so we have to trace our observers one by one and see the code implemented and check where exactly the issue is and what exactly happend in every observer we have that’s alot and when we are going to write testing for our porject we find it hard to test also for me at least 😔 becuse i need to opserver on the error or the loading or the result this a big thing to do now when I start looking around I find a very handy pattern called MVI so what is MVI its Model-View-Intent so the model is our bussiness logic and the view as we know the ui part and the intent where the user send as interaction with the application if you think about it you will se it easy to understand the user pass an intent -> then the intent will me manged by the model and pssing a view state to the view to set the view state and so on the cycle will keep repate unitl the user finish and soo on I don’t want to talk alot about the architectures patterns and more writnig let’s jumo into the code

I saw an example about implementing MVI with android and I find very handy examples to implement it one of the easy and nice examples is

orbit-mvi/orbit-mvi

Join us at the Kotlinlang slack! If you do not yet have an account with the Kotlinlang slack workspace, sign up here…

https://github.com/ww-tech/roxie

and also others on GitHub thanks god we have very good developers to write code who also like to share their knowledge with us.

so if you look into the Roxie you will find that they change the naming to make it more understandable and easy to deal with rather than intent they call it Action and the process they call it to change so you will have action and change then the change will be reduced to ViewState you can have a look to the GitHub of the library it’s very nice to work with but it’s in RxJava that's a very good library but it’s really hard to learn so we decide to move with Flow it’s simple and easy to learn and we can write code with the same high quality we have in RxJave and without having any issues handling the concurrency or learning all the operators in the RxJava.

Let’s begin

1. First to we need to have an example here the example is we need to login or register the user to the system so what we need is that we have a repository that will take care of that so ether will pass success or throw an exception.

• Our Repository will look like thisinterface AuthRepository {
  @Throws(IllegalArgumentException::class)
  suspend fun login(email: String, password: String): Flow<Boolean>
  
  @Throws(IllegalArgumentException::class)
  suspend fun register(email: String, password: String, displayName: String): Flow<Boolean>
  }

2. then we need a ViewModel to deal with the actions and access the repo or the use case then return the ViewState before that let's have a look at what actions we need here.sealed class Actions {
data class LoginRequest(val email: String, val password: String) : Actions()
data class RegisterRequest(val email: String, val password: String, val displayName: String) : Actions()
object Init : Actions()
}

we will have an action for login and action for signup and if we need to have to init action for the first init state when we load the screen for the first time like load some data or do something before user start.

after that, we need to have a look for the next class where the action will be mapped to Change let’s have a look at the changes we have in the project.sealed class Change {
object LoadingChange : Change()
data class LoggedChange(val isLogged: Boolean) : Change()
data class RegisteredChange(val isRegistered: Boolean) : Change()
data class ErrorChange(val throwable: Throwable?) : Change()
}

thous are the most changes we will need to handle our actions and map our view state.

Now the ViewState we listen for the changes of this view state by rendering it in the UI, let’s have a look at our view statedata class State(
val isIdle: Boolean = true,
val isLoading: Boolean = false,
val isLogged: Boolean = false,
val isRegistered: Boolean = false,
val throwable: Throwable? = null
)

after we build our classes lets have a look how the actions will be handled and converted to view state

a user dispatched and action to our view model by this functionfun dispatch(action: Actions) {
viewModelScope.launch { actions.emit(action) }
}

by calling from the UI with this flow alsoeditEmail.textChanges()
.combine(editPassword.textChanges(), ::LoginRequest)
.flatMapConcat { pair -> buttonLogin.clicks().map { pair } }
.onEach { viewModel.dispatch(it) }
.collect { }

Now if you have a look you will see that the code still looks clean and functional and looks exactly as you are writing RxJava code but with ease of Flow.

Now the ViewModel after receiving the action will listen to the actions state flowprivate val actions = MutableStateFlow<Actions>(Actions.Init)

Then we will be merging our all actions together and wait until we emit an action here you will see that actions are filtered by instance and if it matches it will transform to another flow then it will map it to LoggedChange with the resultprivate val loginChanges = actions
.filterIsInstance<LoginRequest>()
.transform {
emit(Change.LoadingChange)
emitAll(authRepository.login(it.email, it.password)
.map { result -> Change.LoggedChange(result) })
}
.catch { emit(Change.ErrorChange(it)) }
.flowOn(io)

same for the signup but with a different change

then after we are having the actions build and connected to the repository we can now merge our actions and reduce them to ViewState

you will have a scan operator that will take initiate state and will have a reducer function holding the current change and old view-state, then we will copy the view state and change it to the new view-state

• State examplefun state(): LiveData<State> = merge(loginChanges, registerChanges)
  .scan(initState, reducer)
  .asLiveData(main)
• Reducer exampleprivate val reducer: suspend (State, Change) -> State = { state, change ->
  when (change) {
  is Change.LoadingChange -> state.copy(isIdle = false, isLoading = true)
  is Change.ErrorChange -> state.copy(
  throwable = change.throwable,
  isLoading = false
  )
  is Change.LoggedChange -> state.copy(
  isLoading = false,
  isLogged = change.isLogged
  )
  
  is Change.RegisteredChange -> state.copy(
  isLoading = false,
  isRegistered = change.isRegistered
  )
  }
  }

and that's it you have now MVI Pattern with the flow now you just need to observe on the state from the UI the good thing is that you have only one way in one way out actions then state.

Example of the renderviewModel.state().observe(this@MainActivity, ::render)

the render function will have a view stateprivate fun render(state: State) {
progressBar.let {
if (state.isLoading) {
it.show()
} else {
it.hide()
}
}
editEmail.isEnabled = !state.isLoading
editPassword.isEnabled = !state.isLoading


state.isLogged.takeIf { it }?.let {
Toast.makeText(this, "User Is Logged", Toast.LENGTH_SHORT).show()
}
}

and here we are, enjoy working with MVI now the testing part will be also covered in the next article.

GitHub

a-najar/mvi-flow

Contribute to a-najar/mvi-flow development by creating an account on GitHub.

I start working with it because I need to implement it in my code so when I start doing a feature which have many deferent actions in it the screen start becoming bigger,I feel the mvvm start having spaghetti code, I end up having many live data in it, so I have to observer on many of them,

also I don’t want to change my all code base to mvi, so I start searching to see if I can use deferent presentation architecture in the project so

I find out that Yes you can do it and this is a good way to do it .

I’m still using mvvm and I use the presentation architecture depends on the screen and the UseCases in it.

So if the screen need to have to have deferent UseCases I do it with MVI

And the screen which have less use cases like one or two and the cases is easy to be tested and it just need to request and show something small I do it with MVVM.

Now I want to share with you the things I watched and read to learn it.

With MVI all of the use cases are covered and you observe in one place and render your UI from this place and it’s also good to separate the ui from the logic, it’s easy to test, the code is clean and readable and maintainable.

How It work in simple Way

1. Intent is converted to actions
2. Actions is converted to model
3. Model is responsible for data this part is also separated and you can test alone and you can mock
4. The Model is converted to Result
5. The Result is converted to State

If you just want to make it more simple you push and Intent to the model and the model will be responsible to push for you a ViewState thats it this pattern is taken from Web from frameworks Like Redux and Cycle JS

One of the best articles to read

https://www.linkedin.com/pulse/mvi-pattern-android-4-steps-ahmed-adel-ismail/

Also you can start with this talk.

https://www.youtube.com/watch?v=PXBXcHQeDLE&t=1525s

https://github.com/oldergod/android-architecture

In this talk he is using RxJava but also there is some easier and faster implementation.

You can also use A framework Like roxie

https://github.com/ww-tech/roxie

https://proandroiddev.com/unidirectional-data-flow-with-roxie-bec546c18598

#android #MVI #GOOGLE #development #UI #testing