Forem: Vladislav Kochetov

Vertical text in Jetpack Compose (without rotation width problems)

Vladislav Kochetov — Tue, 27 Jan 2026 09:41:03 +0000

Sometimes you need vertical text in Jetpack Compose — for side labels, indicators, or compact UI elements. A naive approach is rotating a Text, but rotation preserves the original layout bounds, which often leads to incorrect width and spacing.

If we simply rotate a Text, the layout still uses the horizontal width, causing the text to be visually clipped when rendered vertically:

Text(
    text = "Vertical Text!",
    modifier = Modifier.rotate(270f)
)

Which results in the following layout:

To fix this issue, the following composable renders text vertically by rotating and laying out each character individually, adjusting layout bounds so the width behaves as expected:

Implementation

In this case, each character is rendered as a separate Text and rotated individually. By applying the rotation per character, we avoid treating the entire string as a single horizontal block, which allows the layout to size and position each char correctly in a vertical flow.

val reversedText = remember(text) { text.reversed() }
Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    reversedText.forEach { char ->
        Text(
            text = char.toString(),
            modifier = Modifier.rotateVertically(),
        )
    }
}

And rotateVertically makes the rotation layout-aware. Modifier.rotate(270f) only affects drawing, so without additional work the layout would still use the original horizontal bounds. This extension fixes that by explicitly re-measuring and re-placing the rotated content.

private fun Modifier.rotateVertically(): Modifier {
    // Rotate the content
    // The rotate modifier applies a 270° rotation, affecting only how the text is drawn.
    val rotate = Modifier.rotate(270f)
    val adjustBounds = layout { measurable, constraints ->
        val placeable = measurable.measure(
            // Re-measure with relaxed constraints
            // The custom layout block measures the child with unbounded width and height. 
            // This prevents clipping and lets the text report its natural size after rotation.
            constraints.copy(
                minWidth = 0,
                minHeight = 0,
                maxWidth = Constraints.Infinity,
                maxHeight = Constraints.Infinity
            )
        )
        // Swap width and height to match the rotated orientation and the child is re-centered.
        layout(placeable.height, placeable.width) {
            // Re-center the rotated content so it stays aligned within the new bounds.
            placeable.place(
                x = -(placeable.width / 2 - placeable.height / 2),
                y = -(placeable.height / 2 - placeable.width / 2)
            )
        }
    }
    return this
        .then(rotate)
        .then(adjustBounds)
}

In short, this modifier combines a visual rotation with a custom layout pass, ensuring that the measured size reflects the rotated content rather than the original horizontal text.

You can find the full code here.
If this saved you some time, consider starring the gist 🙏

Write Once, Run Everywhere: Building with Kotlin and Compose Multiplatform

Vladislav Kochetov — Fri, 28 Jul 2023 06:44:09 +0000

Welcome to the world of Kotlin multiplatform app development! In this article, we'll explore a simple example of an app built entirely with Kotlin. We'll leverage the power of Kotlin multiplatform, Compose multiplatform, Kotlin Coroutines, Kotlin Serialization, and Ktor to create an app that runs smoothly on both Android and iOS platforms.

The focus here is on creating a multiplatform app that uses shared network logic and user interface only just on Kotlin.

We require macOS, Android Studio, Kotlin Multiplatform Mobile plugin, Xcode, and a dash of enthusiasm!

Disclaimer: I aim to focus solely on essential aspects. For the complete code, please refer to the following GitHub repository: https://github.com/vladleesi/factastic

So, let's get started!

To begin, let's create a multiplatform project in Android Studio by selecting "New Project" and then choosing the "Kotlin Multiplatform App" template.

After creating the multiplatform project in Android Studio, the next step is to add all the necessary dependencies and plugins.

// gradle.properties
org.jetbrains.compose.experimental.uikit.enabled=true
kotlin.native.cacheKind=none

// build.gradle.kts (app)
plugins {
    kotlin("multiplatform").apply(false)
    id("com.android.application").apply(false)
    id("com.android.library").apply(false)
    id("org.jetbrains.compose").apply(false)
    kotlin("plugin.serialization").apply(false)
}


// settings.gradle.kts
plugins {
    val kotlinVersion =extra["kotlin.version"] as String
    val gradleVersion =extra["gradle.version"] as String
    val composeVersion =extra["compose.version"] as String

    kotlin("jvm").version(kotlinVersion)
    kotlin("multiplatform").version(kotlinVersion)
    kotlin("plugin.serialization").version(kotlinVersion)
    kotlin("android").version(kotlinVersion)

    id("com.android.application").version(gradleVersion)
    id("com.android.library").version(gradleVersion)
    id("org.jetbrains.compose").version(composeVersion)
}

repositories{
    google()
    mavenCentral()
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}

After setting up versions, we proceed to work on the platform-specific 'shared' module.

// build.gradle.kts
plugins {
    kotlin("multiplatform")
    id("com.android.library")
    id("org.jetbrains.compose")
    kotlin("plugin.serialization")
}

listOf(
    iosX64(),
    iosArm64(),
    iosSimulatorArm64()
).forEach {
    it.binaries.framework {
         baseName = "shared"
         // IMPORTANTE: Include a static library instead of a dynamic one into the framework.
         isStatic = true
    }
}

val commonMain by getting {
     dependencies {
         // Compose Multiplatform
         implementation(compose.runtime)
         implementation(compose.foundation)
         implementation(compose.material)
         @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
         implementation(compose.components.resources)

         /.../
     }
}

And add dependencies for Android & iOS http client specifics.

val androidMain by getting {
     dependencies {
         val ktorVersion = extra["ktor.version"] as String
         implementation("io.ktor:ktor-client-okhttp:$ktorVersion")
      }
}
val iosMain by getting {
      dependencies {
         val ktorVersion = extra["ktor.version"] as String
         implementation("io.ktor:ktor-client-darwin:$ktorVersion")
      }
}

Now, it's time to dive into the UI development. We'll focus on creating a simple UI featuring a button to generate random useless facts from a server.

// shared/../FactasticApp.kt
@Composable
fun FactasticApp(viewModel: AppViewModel, modifier: Modifier = Modifier) {
    FactasticTheme {
        Surface(
            modifier = modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            val state = viewModel.stateFlow.collectAsState()
            LaunchedEffect(Unit) {
                viewModel.loadUselessFact()
            }
            MainScreen(state.value, viewModel::onClick)
        }
    }
}

Business logic inside AppViewModel is here.
Configuration of Ktor client is here.

Behold, the moment for the grand trick has arrived.

Android

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val viewModel = AppViewModel()
        setContent {
            FactasticApp(viewModel)
        }
    }
}

iOS

Let's adapt our Compose code for iOS.

// shared/iosMain/../FactasticApp.kt

fun MainViewController(): UIViewController {
    val viewModel = AppViewModel()
    return ComposeUIViewController {
        FactasticApp(viewModel)
    }
}

Next, we should open Xcode to work on the iOS part, as we need to perform some Swift-related tasks. Locate iosApp/iosApp.xcodeproj, right-click on it, and then choose "Open in" -> "Xcode."

In Xcode, create a new Swift file named "ComposeView.swift" by clicking on "File" -> "New" -> "File..." -> "Swift File" -> "Next" -> "ComposeView.swift" -> "Create."

Oh my God, what is this? Is it Swift?

// ComposeView.swift

import Foundation
import SwiftUI
import shared

struct ComposeView: UIViewControllerRepresentable {
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
        // ignore
    }

    func makeUIViewController(context: Context) -> some UIViewController {
        FactasticAppKt.MainViewController()
    }
}

Make a minor update to the existing ContentView.swift file in Xcode.

import SwiftUI
import shared

struct ContentView: View {
   var body: some View {
      // This one
      ComposeView()
   }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

That's all the Xcode part, you may forget about it (if you can) and return to Android Studio.

Before running the app, we must build the iOS module using the following command: ./gradlew :shared:compileKotlinIosArm64.

In Android Studio, select the target platform, and then click on the "Run" button to launch the application on the chosen platform.

Well done!

Android (Dark theme)	iOS (Light theme)

Resources:

Update as of 08/02/2023:
Additionally, I have incorporated the desktop module into the project.

P.S.
I'd greatly appreciate receiving feedback. If my examples happen to be useful to you, please, consider giving a star to the GitHub repository. Thank you!

Accessibility Guidelines for Android Apps

Vladislav Kochetov — Thu, 06 Jul 2023 15:02:00 +0000

This article provides comprehensive guidelines and best practices for making your Android app more accessible to users with disabilities. By following these recommendations, you can ensure that your app is usable and inclusive for a wider range of users.

Introduction

Accessibility is crucial in Android app development to ensure that all users, including those with disabilities, can fully access and interact with your app. This article will help you understand the key principles and techniques for creating accessible Android apps.

Designing Accessible UI

When designing your app's user interface, keep these accessibility considerations in mind:

Color Contrast: Use appropriate color contrast to ensure readability for users with visual impairments. Consider using tools like the Web Content Accessibility Guidelines (WCAG) color contrast checker to validate your color choices.
Text Size and Resizability: Provide resizable text options to accommodate users with different visual needs. Consider implementing features such as adjustable font size within your app.
Interactive Elements: Ensure interactive elements, such as buttons and checkboxes, are large enough for easy touch interaction. Provide sufficient spacing between elements to prevent accidental taps.
Responsive Layout: Make sure your layout is responsive and works well across different screen sizes and orientations. Test your app on various devices to ensure proper usability.

Handling Accessibility Focus and Navigation

To support users who rely on accessibility features, consider the following:

Focus Order: Set the proper focus order for interactive elements to ensure a logical flow. Users who navigate using keyboard or assistive technologies should be able to navigate through your app in a consistent and intuitive manner.
Feedback and Visual Cues: Provide appropriate feedback and visual cues when elements receive focus. For example, you can highlight the focused element or provide audio feedback.

Providing Alternative Text

Adding alternative text to images is crucial for users with visual impairments. Follow these guidelines:

Use the android:contentDescription attribute to provide descriptive alternative text for images.
Consider the context in which the image is used to provide accurate and meaningful descriptions.

Supporting Screen Readers and Assistive Technologies

Ensure your app is compatible with screen readers and other assistive technologies:

Markup and Semantic Elements: Use proper markup and semantic elements to provide meaningful information to screen readers. For example, use the appropriate accessibility roles and states for interactive elements.
Announcements: Make sure interactive elements, such as buttons and checkboxes, are announced correctly by screen readers. Test your app with popular screen readers like TalkBack to ensure compatibility.

Color Contrast and Readability

Choose colors carefully to maintain sufficient contrast for users with visual impairments:

Ensure that text is easily readable by choosing appropriate color combinations. Consider the contrast ratio between the foreground text color and the background color.

Testing and Validation

Thoroughly test and validate your app's accessibility features:

Manual Testing: Conduct manual testing by using your app with accessibility features enabled. Try navigating through the app using a keyboard and assistive technologies.
Automated Testing: Utilize automated testing tools, such as Accessibility Scanner or TalkBack testing, to identify potential issues. These tools can help you detect accessibility violations and provide suggestions for improvement.
User Feedback: Get feedback from users with disabilities or involve accessibility experts to provide insights and suggestions. User feedback can help you identify real-world usage scenarios and areas for improvement.

Resources and References

For further learning and detailed documentation on Android app accessibility, refer to the following resources:

Conclusion

By following these accessibility guidelines, you can make your Android app more inclusive and provide an excellent user experience for users with disabilities. Let's work together to create apps that everyone can enjoy!

If you have any questions or need further assistance, please reach out to the project contributors or leave a comment below.

This article was written to provide comprehensive accessibility guidance for Android app developers. Feel free to share this article with fellow developers and contribute to the conversation on creating accessible apps.

If you have any suggestions or feedback, please feel free to leave a comment.

How to set up publication signature with the Gradle plugin

Vladislav Kochetov — Sun, 11 Jun 2023 21:09:40 +0000

Introduction:

In the realm of software development, ensuring the security and integrity of your artifacts is of paramount importance. One effective approach is to sign your artifacts using GPG (GNU Privacy Guard) keys. This article will guide you through the process of setting up GPG, generating keys, and utilizing The Signing Plugin to sign artifacts before publishing them to Nexus.

1. Installing GPG:

To begin, let's install GPG on our system. Follow the instructions below:

Linux:
- Open a terminal window.
- Execute the command: sudo apt-get install gnupg

macOS:
- Open a terminal window.
- Run the command: brew install gnupg

Windows:
- Download the Gpg4win installer from the Gpg4win website.
- Run the installer and follow the on-screen instructions.

2. Generating GPG Keys:

Once GPG is installed, let's generate GPG keys. These keys will be used to sign your artifacts. Follow these steps:

Open a terminal or command prompt.
Execute the command: gpg --full-generate-key
Follow the interactive prompts to configure your key, such as selecting the key type and size.
Set a strong passphrase for your key. Remember this passphrase as you will need it later.
Once the key generation is complete, your GPG key pair will be stored in the GPG keyring.

3. Configuring The Signing Plugin:

Open the build.gradle file of your project.
Add the following lines to the top of the file:

   plugins {
       id 'signing'
   }

Configure the signing plugin for root project:

   signing {
       sign publishing.publications
   }

Provide the GPG key details in gradle.properties:

signing.keyId=YOUR_KEY_ID
signing.secretKeyRingFile=~/.gnupg/secring.gpg
signing.password=YOUR_PASSPHRASE

Note:

To get the keyId, you can run the following command gpg --list-keys --keyid-format short and take the 8-digit value
The secring.gpg file has been removed in GPG 2.1. However, GPG still can create such a file: gpg --export-secret-keys -o secring.gpg
To upload your public key to the keyserver, you can use the following command gpg --keyserver hkp://keyserver.ubuntu.com --send-keys YOUR_KEY_ID

4. Publish with signing:

./gradlew publishToMavenLocal
./gradlew publish

Building a Game Tracker Application with Jetpack Compose and RAWG API

Vladislav Kochetov — Sun, 30 Apr 2023 22:42:18 +0000

What I built

Beauty app with RAWG api for tracking games, game activity and communication with the community. This app will use Github Actions for automated testing.

Category Submission:

Phone Friendly: Projects built for Mobile (PWA readiness, iOS/Android)

Guidance: Developers can use Codespaces or Actions to create mobile applications that work on both iOS and Android devices, as well as set up automation workflows and CI/CD pipelines for their PWA ready apps.

App Link

Braindance: Games Tracker

Screenshots

Description

This mobile app helps gamers keep track of their favorite games and access detailed information using the RAWG API. Features include a game library, game details, search, notifications, and social integration. Stay up-to-date on the latest games and join gaming communities with this user-friendly app.

Link to Source Code

braindance-app

Permissive License

The GNU General Public License v3.0

Background (What made you decide to build this particular app? What inspired you?)

Introduction

As a die-hard gaming enthusiast, I have always wanted a better way to keep track of my gaming progress, from the games I've played to the ones I still need to conquer. So, I decided to take matters into my own hands and create an Android application that tracks games and integrates with the RAWG API to provide up-to-date information about the latest and greatest games out there.

Participating in the GitHub Hackathon 2023 is incredibly important to me as an Android developer, as it provides a unique opportunity to showcase my skills, learn from others, and potentially win exciting prizes. Additionally, being a part of a community of developers and collaborating on innovative projects is an experience that I believe will benefit me both personally and professionally.

Why Compose?

As you may already know, Jetpack Compose is a game-changer for Android UI development. With its declarative approach and intuitive API, building beautiful and responsive user interfaces has never been easier.

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

Coming up with an app name

I brainstormed name ideas for my games tracker app and chose "Braindance" because it combined "brain" and "dance," conveying the idea of improving cognitive abilities through gaming. The name was also available and reminded me of the virtual reality concept from Cyberpunk 2077, which I appreciated as a pop culture reference.

Choice of Design Kit

I decided to stick with this color palette and Lato font.

Practice with GitHub Actions

Create a YAML file with the workflow definition in the .github/workflows directory of your repository.
Define the event that triggers the workflow, in our case, a push to the master branch.
Specify the jobs to be performed in the workflow, in our case, building and testing the Kotlin Gradle project.
Use the ad-m/github-push-action Action to push the built artifact to the build branch upon successful build and test.

Using GitHub Actions to automate your workflow can save you time and improve the efficiency of your software development process.

I decided to use a simple script: build, run unit tests and push code to the master branch.

name: Build, Test and Push

on:
  push:
    branches: [ develop ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Setup JDK 11
        uses: actions/setup-java@v1
        with:
          java-version: '11'

      - name: Make gradlew executable
        run: chmod +x ./gradlew

      - name: Build with Gradle
        run: ./gradlew build

      - name: Run unit tests
        run: ./gradlew test

      - name: Run Android tests
        uses: reactivecircus/android-emulator-runner@v2
        with:
          api-level: 29
          arch: x86
          profile: Nexus 6
          script: ./gradlew connectedCheck --stacktrace

      - name: Push to Branch
        if: ${{ success() }}
        uses: ad-m/github-push-action@master
        with:
          branch: master

This workflow triggers when there is a push to the master branch and performs the following steps:

Checks out the code from the repository.
Sets up JDK version 11.
Builds the project with Gradle.
Runs tests with Gradle.
Pushes the built artifact to the build branch if the build and test process is successful.

Definition of bottom bar items

I chose that sections:

Home: The home section is often the default landing page for users when they open an app, and it usually contains the most frequently used features. By including search, feed, and notifications in the home section, the user can quickly access the latest updates, search for specific games, and stay up-to-date with their favorite games.
Collections: The collections section allows users to organize their games based on different criteria, such as games they have played, want to play, have rated or reviewed, or are currently following. By having quick access to these collections, users can easily keep track of their gaming habits and preferences.
Community: The community section is important for users who want to interact with other gamers, share their thoughts and opinions on games, and connect with friends who have similar interests. By including rating and friend features in the community section, users can quickly access these important social features and stay connected with their gaming community.
Profile: The profile section provides users with a summary of their gaming activity, as well as links to other screens and app settings. This allows users to personalize their experience, customize their settings, and access other features that may not be available in the bottom bar.

Additional Resources/Info

Lato font: https://github.com/google/fonts/tree/main/ofl/lato

The article will be updated..