DEV Community: vaclavhodek

Automated Localization: Localazy ❤Bitrise.io

vaclavhodek — Sat, 13 Mar 2021 20:35:16 +0000

Automated Localization

You have probably already heard of continuous localization. It's important as software development is a never-ending process, and with new features, you usually need to add new strings.

Fully automated localization is a level above it. As a developer, you only set up it once, and then, you can forget about it completely.

What is Bitrise?

If you haven't heard about Bitrise.io yet, it's CD/CI made for mobile apps developers. It has an awesome UI with a visual workflow editor. You just build the automation out of boxes (called steps) and there are many of them made for us, mobile app developers.

Of course, if you prefer code, you can build your workflow in YAML in a similar way you would do with Github Actions, and there is also a powerful CLI tool available!

You can start in minutes with Bitrise and save hours with automated build and deployment.

Localazy Gradle plugin

It's simple to run Gradle build tasks on Bitrise, and so if you use our Localazy Gradle plugin for Android, it's supported out of the box. No action is needed.

Let's try it out!

Let's suppose that your mobile app is ready for localization, and strings in the source language are stored in Android XML, iOS' strings, Flutter's ARB, JSON, or some other common format.

You can configure Bitrise manually for anything you want - it may not even be a mobile app - and there are predefined configurations for iOS, Android, Xamarin, macOS, Cordova, ionic, React Native and Flutter. Localazy supports usual localizable files for all of these platforms. A perfect match!

Configure Localazy

Sign up with Localazy, create a new project, install the CLI tool, and then create and test your localazy.json configuration. You should be able to upload the source language files and download localized ones.

My configuration is as simple as:

{
  "readKey": "read-key",
  "writeKey": "write-key",

  "upload": {  
    "type": "json",
    "files": "locales/en.json"         
  },

  "download": {
    "files": "locales/${lang}.json"
  }
}

From this moment on, Localazy is the place to manage your translations, translators and contributors. And as a bonus, it translates your app to up to 80 languages for free by sharing translations with another app.

Creating and testing localazy.json is essential as it's used by the Bitrise step described below.

We are going to automate downloading translations from Localazy when the app is built on Bitrise. It's also possible to automatically upload strings to Localazy, e.g., when you push your app to Github or with Gitlab CI/CD.

To use Bitrise, push your app to Github, Gitlab or Bitbucket.

Ignore Localized Files

The source language file, in my case en.json, is the source of truth and for localized files, it's the latest version on Localazy. I don't need those files to be committed to my repository.

With a simple .gitignore file placed in locales folder, I can filter out all localized files except for the source language one:

*.json
!en.json

Configure Your App on Bitrise

Head to bitrise.io and set up a new account if you haven't one yet. Once you are done, Add New App and choose to Add New App on web UI.

Follow the visual guide to get everything configured for your app. It's straight forward. You add a repository and select branch, and Bitrise autodetects your app and preconfigures it. Neat!

Once configured, Bitrise automatically starts the first build and you should see something like:

Congratulations! Your app is just being built with Bitrise!

Add Localazy step

Wait for the build to finish and then Open Workflow Editor (the button is just above the console output):

I've created a manual project to focus on continuous localization, so my workflow is simple and looks like:

Click on the plus button where it makes sense to download updated translations and search for Localazy CLI in the list of available steps. You may need to switch to show ALL of them.

And my new workflow with the Localazy step is:

Configure Access Keys

I've decided not to commit my read and write keys for Localazy to the public repository (probably a good idea) and so I need to configure them on Bitrise.

Click the Localazy CLI step to see available configuration options. There is a lot of them, so you can configure Localazy for your need.

But now, we only need to setup Read Key and Write Key.

They are both secret variables, so don't worry about them being exposed even if you have your app public on Bitrise.

Automated Localization... Done.

Leave the Workflow Editor and re-run the build. As you can see in the screenshot below, Localazy CLI is invoked and updated translations are downloaded.

Closing Words

It's simple enough to completely remove the localization burden from your shoulders with Localazy and Bitrise. No more file handling. All the translations and build steps of your lovely app can be managed in a single place with a beautiful UI designed for developers.

Localazy is on ProductHunt. Can you help?

vaclavhodek — Thu, 03 Dec 2020 15:44:46 +0000

Hello, everybody,

we've just launched Localazy on Product Hunt. Would be so kind and upvote it?

There's 75% discount for all hunters! ❤️

The link: https://www.producthunt.com/posts/localazy

Thanks in advance and thanks for this amazing community!

How to localise NodeJS with Polyglot.js and Localazy

vaclavhodek — Wed, 25 Nov 2020 13:53:36 +0000

Do you use Polyglot.js to localize your NodeJS app? Or maybe you're looking for a tool to use? That's great, but tell me, how easily can you manage the translation files? Not really, huh? In this article, I'll give you a short introduction to translation management with Polyglot.js and Localazy.

What is Localazy?

Localazy is a translation management platform and it's a great option for developers because of several key features. My favorite ones are:

It comes with ShareTM allowing you to automatically translate your app into 80+ languages for free by sharing translations with other developers.
With its CLI, it can be easily integrated into any workflow. And we are going to use the CLI today.

Getting started with Localazy

Create a Localazy account and create a new app. I will use English as the source language, but you can choose any other. Then on the integration screen, select JSON. We will upload the source strings in a bit.

Afterward, you can install Localazy's CLI for Linux, macOS, or Windows.

Come back to your project. In the root folder, create a file called localazy.json and paste the following. Make sure to fill in your writeKey and readKey which you can retrieve from your app either under the settings tab or in the first step of the JSON CLI guide on the select integration screen.

{

  "writeKey": "your-apps-write-key", 
  "readKey": "your-apps-read-key",

  "upload": {
    "type": "json",
    "files": "locales/en.json"
  },

  "download": {
    "files": "locales/${lang}.json"
  }
}

Now, we can upload the source strings. Create en.json in locales folder and edit as needed. If you are using another language as your source, replace en with the correct locale.

{
  "appName": "Your Cool App",
  "error": "An error has occurred.",
  "hello": "Hello %{name}"
}

Now run localazy upload and you should see your source strings in your app in Localazy. At this point, you may add new languages, for which you can use automatic or manual translations. Automatic translations use highly accurate community translations, so they are generally very precise. However, they support translations only from English at the moment, so you need to have the English language added. It does not have to be your source language though.

Before downloading, you need to review automatically translated strings. Otherwise, they have only a candidate status and won't be published. In case you, as an owner, translate anything, the strings are automatically accepted without the review process. Try to add German language and review the suggested phrases or translate them manually (it does not need to be proper German ツ).

Once you have approved the translations, you can run localazy download to gather edited files.

Development

Install node-polyglot and fs via npm.

npm install node-polyglot

In your code add the following to your index.js.

const Polyglot = require('node-polyglot')
const fs = require('fs')
const polyglots = new Map() // here we will store all our different locales

const translationFiles = fs.readdirSync('./locales').filter(file => file.endsWith('.json')) // gather our locales

for (const file of translationFiles) {
  const t = require('./locales/' + file)
  const p = new Polyglot()
  p.extend(t) // load all translations into it
  const localeName = file.slice(0, -5);
  polyglots.set(localeName, p) // sets the locale name and the Polyglot instance
}

function translate (key, locale, options = {}) {
    return polyglots.get(locale).t(key, options);
}

If you'd like, you can name the file something like translate.js to turn it into a module. You'd also add module.exports = translate to the end of the file. Then you can const translate = require('./translate.js') to get the function.

Now, to translate anything, use the translate() function, like so:

console.log(translate('hello', 'de', { name: 'Daniel' }))

When you run node index.js, you should see a console log of the phrase hello translated into German.

Implement this to fit your code, and you are all set! You may check out the final repo here.

If you run into issues, please leave a message and I will fix it as soon as possible.

This article was originally written by Daniel Newell and reposted with permission.

How to: Localise your React App with LinguiJS and Localazy

vaclavhodek — Fri, 20 Nov 2020 11:25:51 +0000

Do you have an app that you use and you want to localise it? Localising is very important to ensure that all people can use your app with ease. With Localazy and LinguiJS you can achieve it easily (and for free)!

Localazy is a free translation management system to help developers and translators focus on their jobs and make the translation process seamless. It provides a pro-active translation memory called ShareTM which provides highly accurate automatic translations for even easier localization.

App setup

Let's start with the React app. Create a new project with the following command:

npx create-react-app localazy-react-example
cd localazy-react-example

Open the newly created project and install LinguiJS for in-app translation management.

npm install --save-dev @lingui/cli @babel/core babel-core@bridge
npm install --save-dev @lingui/macro babel-plugin-macros  # required for macros
npm install --save @lingui/react

Localazy setup and integration

Sign up on Localazy and create a new app. I will use English as a source language, but you can choose any other. Then on the integration screen, select JSON. We will upload the source strings in a bit.

Afterwards, you can install Localazy's CLI for Linux, MacOS or Windows.

{
  "writeKey": "your-write-key", 
  "readKey": "your-read-key",

  "upload": {
    "type": "json",
    "files": "src/locales/en.json"
  },

  "download": {
    "files": "src/locales/${lang}.json"
  }
}

Then, we need to create a file called .linguirc in our root directory. Fill it in as so, make sure to include whatever locales you use. In this article we'll use en and es.

{
   "catalogs": [{
       "path": "src/locales/{locale}",
       "include": "src"
   }],
   "sourceLocale": "en",
   "locales": ["en", "es"],
   "format": "minimal"
}

Afterwards, we need to do a little modification to your package.json file. Add the following command:

{
   "scripts": {
      ...

      "localise": "localazy download && lingui extract && lingui compile"
   }
}

Now, we can create a ./src/locales folder. This is the folder in which we will store all of our locale files. Create a file called en.json in the ./src/locales folder and paste the following:

{
  "welcome": "Welcome, {name}",
  "today": "Today is {date}.",
  "thatsAll": "That's all for today!"
}

You can change these as you please. That's just an example of the kinds of things you can do. We are almost ready. Let's upload the source English phrases to Localazy. Run localazy upload and you should see your strings on the project screen (you need to refresh the page). ✨ Magical! ✨

Go to Settings and scroll down. You should see three options. Make sure Use community translations (ShareTM) is switched on.

Learn more about how ShareTM works.

At this point, you may add new languages, for which you can use automatic or manual translations. Automatic translations use highly accurate community translations, so they are generally very precise. However, they support translations only from English at the moment, so you need to have the English language added. It does not have to be your source language though.

Before downloading, you need to review automatically translated strings. Otherwise, they have only a candidate status and won't be published. In case you, as an owner, translate anything, the strings are automatically accepted without the review process. Try to add Spanish language and review the suggested phrases or translate them manually (it does not need to be proper Spanish).

Now, run npm run localise to download these new files and set them up with LinguiJS. And just like that, your app is almost done! It's time to get into the nitty-gritty.

Using Localazy translations with LinguiJS

Here, we are going to give a brief example. LinguiJS already has an amazing guide here

In your index.js file, add these lines:

Change these imports to match your project. We are just creating a basic welcome page.

import React from 'react'
import { render } from 'react-dom'
import Welcome from './welcome.js'
import { i18n } from '@lingui/core'
import { I18nProvider } from '@lingui/react'


const locale = "es" // or whatever you need it to be
const catalog = require(`./locales/${locale}.js`)
i18n.load(locale, catalog.messages)
i18n.activate(locale)

const App = () => (
  <I18nProvider i18n={i18n}>
    <Welcome  name="Joe" />
  </I18nProvider>
)

render(<App />, document.getElementById('root'))

And in your welcome.js file, paste this:

import React from 'react'
import { Trans } from '@lingui/macro';

const Welcome = ({name}) => {
  const date = new Date().toString() // Date will not be translated, you can use more advanced techniques to do so
   return (
     <div>
       <h1><Trans>welcome</Trans> {name}</h1>
       <p><Trans>today</Trans> {date}</p>
       <footer><Trans>thatsAll</Trans></footer>
      </div>
   )
}

export default Welcome;

As you can see, to translate with Lingui, we have surrounded the keys with the <Trans></Trans> tags.

You may check out the final repo here. Remember, this is just a sample, you will have to tweak this to fit into your application, however, this is a great first step to ensure that your project is ready to be localized and allow everyone to use your app, regardless of what languages they speak.

As always, please post your questions, comments, and concerns below.

This article was originally written by Daniel Newell and reposted with permission.

How I localized my media player app into 50 languages for free

vaclavhodek — Thu, 19 Nov 2020 10:28:38 +0000

Recently, I worked on a small media player app for Android to play a list of tracks in a given folder on the SD card. One of the requirements was to get the app translated to more languages.

There were only a few strings at the time, but the app was just a proof of concept, and it was supposed to be improved in the future.

<resources>
    <string name="button_play">Play</string>
    <string name="button_pause">Pause</string>
    <string name="button_stop">Stop</string>
    <string name="button_next">Next</string>
    <string name="button_previous">Previous</string>
    <string name="menu_tracks">Tracks</string>
    <string name="info_playing">Now playing: %1$s</string>
</resources>

I was looking for a simple solution to manage translations and found Localazy. It's free, and it promised to translate my app into 80 languages for free by sharing translations with other apps, so I decided to give it a try.

I signed up, followed the instructions, and integrated Localazy with my Gradle script. It was simple, and I didn't need to touch the source code or handle XML files. Neat!

With the uploadStrings Gradle command added by Localazy, I uploaded strings. In a few seconds, new languages are available for my app:

I added about 50 of then to my app:

And then reviewed them:

The review is awesome as it allowed me to check that placeholders are correct, etc.

Honestly, the offered translations are extremely accurate. I tried on another of my apps too, and it's way better than Google Translate. If the string is not available through the shared translations, there are machine translations from Amazon and Google.

Adding a new language to my app took me just a few minutes. And what I totally love about Localazy is that I only cleaned my project and rebuilt it to have all the languages included in the app! Nothing else needed.

It's not that shocking that my simple app was 100% translated easily, as my strings are common. However, the whole process is enjoyable and seamless!

This post is translated and republished with the consent of the original author.

Automated Localization: Github Actions ❤ Localazy

vaclavhodek — Fri, 13 Nov 2020 10:54:13 +0000

Automated Localization

You have probably already heard of continuous localization. It's important as software development is a never-ending process, and with new features, you usually need to add new strings.

Fully automated localization is a level above it. As a developer, you only set up it once, and then, you can forget about it completely.

And as we are going to use Github Actions, it's gonna be fun!

Configure Localization Platform

Let's suppose that your mobile, desktop or web app is ready for localization, and strings in the source language are stored in JSON, YAML, iOS' strings, Flutter's ARB, or some other common format.

My configuration is as simple as:

{
  "readKey": "read-key",
  "writeKey": "write-key",

  "upload": {  
    "type": "json",
    "files": "locales/en.json"         
  },

  "download": {
    "files": "locales/${lang}.json"
  }
}

From this moment on, Localazy is the place to manage your translations, translators, and contributors. And as a bonus, it translates your app to up to 80 languages for free by sharing translations with other apps.

Creating and testing localazy.json is essential as it's used by the Github actions described below.

Setup Secrets

Private data should not be committed, and so, before the commit, let's remove the read and write keys from the configuration file above and instead place them to Github Secrets.

Create a repository on Github if you haven't yet, go to Settings > Secrets, and add keys here. My configuration looks like:

Ignore Localized Files

The source language file - in my case en.json - is the source of truth, and for localized files, it's the latest version on Localazy. I don't need those files to be committed to my repository.

With a simple .gitignore file placed in the locales folder, I can filter out all localized files except for the source language one:

!en.json
*.json

Automate Uploading

If you are not familiar with Github Actions, I recommend reading more about it. It may take some time to get used to it, but it saves you a lot of time. We use it extensively for building releases of our Localazy CLI.

The configuration below is all I need for uploading the source language file en.json to Localazy with each commit that changes it. I add a new feature, add new strings to en.json, commit it, and push it. Done.

And all you need to do now is to create .github/workflows/upload.yml file with this content:

name: Upload to Localazy
on: 
  push:
    paths: 
      - 'locales/en.json'

jobs:
  localazy-upload:
    name: Upload strings to Localazy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: localazy/upload@v1
        with:
          read_key: ${{ secrets.LOCALAZY_READ_KEY }}
          write_key: ${{ secrets.LOCALAZY_WRITE_KEY }}

If you need to fine-tune it, there is the documentation for the upload action on Github Marketplace.

It's also simple to configure the on clause to upload strings to Localazy only for releases, certain tags or branches. See its configuration on Github docs.

On each push touching en.json, I get this beauty:

Automate Downloading

Normally, you would integrate downloading localizable files from Localazy into your build chain, so they are added before building the release.

For clarity, let's test just the downloading and omit other steps.

Create file .github/workflows/download.yml for downloading the latest version of localizable files whenever the tag v* is pushed.

name: Download from Localazy
on: 
  push:
    tags:
    - 'v*'

jobs:
  localazy-download-test:
    name: Download strings from Localazy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: localazy/download@v1
        with:
          read_key: ${{ secrets.LOCALAZY_READ_KEY }}
          write_key: ${{ secrets.LOCALAZY_WRITE_KEY }}

      - run: |
          # Test that localized files were downloaded by listing 
          # the content of locales folder.
          ls locales/*.json

Of course, this example effectively does nothing as files are only downloaded to the action, and if we don't use them to produce the release build, they are lost once the action is finished and cleared.

The documentation for the localazy/download action is available on Github Marketplace.

Pushing v2 tag to my test repository (notice that there is cs.json file):

Source Code

The source code of a demonstrational project for this post is available on Github. Do not forget to explore the content of the .github/workflows folder!

Closing Words

As you can see, it's simple enough to completely remove the localization burden from your shoulders with Localazy. No more file handling. All the translations of your lovely app can be managed in a single place with beautiful UI designed for developers and those that want them to bring their apps into the multilingual realm.

From Android's floating windows to Floating Apps: final tech pieces

vaclavhodek — Thu, 12 Nov 2020 12:43:21 +0000

Have you ever wondered how to make those floating windows used by Facebook Heads and other apps? Have you ever wanted to use the same technology in your app? It’s easy, and I will guide you through the whole process.

I'm the author of Floating Apps; the first app of its kind on Google Play and the most popular one with over 8 million downloads. After 6 years of the development of the app, I know a bit about it. It’s sometimes tricky, and I spent months reading documentation and Android source code and experimenting. I received feedback from tens of thousands of users and see various issues on different phones with different Android versions.

Here's what I learned along the way.

Before reading this article, it's recommended to go through Floating Windows on Android 9: Shortcomings.

In this article, I show you some tips & tricks I used in Floating Apps.

Minimize

In Floating Apps, it's possible to minimize windows. How do I achieve this effect?

Well, I move the window outside of the visible area of the screen. This is the safest thing you can do. Changing the window’s size, removing the view from WindowManager, or any other similar action could break your app. For example, components rendering content directly to the video memory such as SurfaceView, VideoView, etc. don’t like it.

When the window is moved outside of the screen area, I inject a new view - the bubble. It’s all done together with smooth animations, so it actually looks like the window is minimized to the bubble. But it's all just a smart effect.

Maximize

In Floating Apps, there is heavy math behind the window's size as there are different modes (with the title bar, without it, with minimal bar, etc.), half-screen size, etc.

But maximizing the window is not the case :-). You can use MATCH_PARENT for LayoutParams, and it automatically sets the maximal available size. Simple.

params.gravity = Gravity.TOP or Gravity.LEFT  
params.width = ViewGroup.LayoutParams.MATCH_PARENT  
params.height = ViewGroup.LayoutParams.MATCH_PARENT  
params.x = 0  
params.y = 0

Don't forget to remember the original position and size, and disable moving the maximized window.

Also, be sure that your layout is flexible enough to work correctly with the maximized window as well as with smaller ones.

Resizing Windows

This one is tricky. In Floating Apps, some windows can be resized, and such windows have a small handle in the right bottom corner.

Resizing the window is very similar to moving it, and you can use the same DraggableTouchListener as we introduced in the Moving Window article. Just change x and y for width and height.

I experimented with changing the window size directly, but for windows with a complex layout, it's slow.

So my final version is: When the resize handle is touched, a new semi-transparent floating view is injected above the original window with the same size and position and it's resized instead of it. When resizing is finished, the new size is applied to the original window.

Transparency

WindowManager.LayoutParams comes with alpha, so this one is as simple as:

// Make the window transparent with 50% opacity.
params.alpha = 0.5f

Don't allow the user to make the window completely invisible as it could have undesired effects. I bet you can imagine it.

FUN TIP: Completely invisible floating window is a nice prank! ;-).

Screen Rotation

In the foreground service, register the broadcast receiver to listen to Intent.ACTION_CONFIGURATION_CHANGED, and you get notified when the screen is rotated.

In Floating Apps, when the screen orientation is changed, I keep the same size of the window and recalculate its position using the percentual calculation:

newX = oldX / oldScreenWidth * newScreenWidth

The window seems to be still in the same position relatively.

Bubble Physics

In Floating Apps, the bubbles for minimized windows are just specifically layouted views and nothing more. There is almost no difference from floating windows, as we discussed them in this series.

However, the bubbles have nice psychics when they're moved around the screen. All the magic is created with the Facebook Rebound library - a java library that models spring dynamics.

Ooh, I just noticed that the library is archived. Pity. It's very nice.

And We Are Done!

This is the last article in the series about the floating technology. I taught you almost everything I learned during the last few years.

Enjoy it and feel free to share your apps with me.

Also, I will be glad if you decide to localize your apps with Localazy. I put the very same love into it as I did with Floating Apps.

Thanks for reading! Follow me (@vaclavhodek) and Localazy (@localazy) on Twitter, or like Localazy on Facebook for more interesting information about Android development.

The Series

This article is part of the Floating Windows on Android series.

Switching locales with Jetpack Compose

vaclavhodek — Thu, 12 Nov 2020 12:15:34 +0000

I've already published an article on how it's important to allow users to switch languages. There's plenty of reasons to do so.

Now, let's see how simple it can be with Jetpack Compose to implement custom language switching.

Prepare your app

Be sure that you have all strings in res/values/strings.xml and whenever you need them, get them using Android's standard mechanism getString().

It's best to use English as the base language as it works best with translation tools, and it's usually easier to find collaborators and volunteers.

And that's all. You don't need to care about XML files in other languages. We use a localization platform for that.

Manage translations

Once you have your strings.xml file ready, sign up for Localazy and follow Android integration instruction. It's simple as it only means a few lines to be added to your root's and app'sbuild.gradle — no need to change source code or resources.

All changes you will need to do will be as simple as:

add Localazy to the root's build.gradle file:

buildscript {

    repositories {
        // ...
        maven { url "https://maven.localazy.com/repository/release/" }
    }

    dependencies {
        // ...
        classpath "com.localazy:gradle:1.5.2"
    }

}

Add Localazy to the app's build.gradle file:

apply plugin: 'com.localazy.gradle'

localazy {
    readKey "your-read-key"
    writeKey "your-write-key"
}

And that's it! Now, you can upload strings using the uploadStrings task using Gradle. It's available on the command line:

./gradlew uploadStrings

And also in the Gradle view in Android Studio.

From that moment on, you can manage translations easily using Localazy, and there are also shared translations to translate a huge portion of your app to up to 80 languages for free.

Jetpack: Hello World

To test how our locale switching works, let's create a simple Hello World app.

Here goes a code for a composable, a text, rendered in the center of the screen:

@Composable
fun WelcomeText(text: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = text,
            modifier = Modifier
                .gravity(Alignment.CenterHorizontally)
        )
    }
}

To allow users to switch their language, we can use the floating action button. We can add it to our activity and give it an action - to open SwitchActivity that we will discuss later.

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Scaffold(
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = {
                            startActivity(
                                Intent(this@MainActivity, SwitchActivity::class.java)
                            )
                        },
                        elevation = 10.dp
                    ) {
                        Icon(Icons.Default.Translate)
                    }
                },
                bodyContent = {
                    WelcomeText(text = getString(R.string.welcome_message))
                }
            )
        }
    }

}

The resulting screen is expected:

Now, let's implement SwitchActivity.

SwitchActivity

Localazy Android library has been automatically integrated with our app by the few lines in the build script mentioned above, so it's available. The whole documentation for the Localazy Android library is available on the website.

First, we wrap a simple ViewModel around it to make their data easily accessible to our newly created activity.

class LocaleViewModel : ViewModel() {

    private val localazyListener = LocalazyWrappedListener {
        viewModelScope.launch {
            update()
        }
    }

    var locales by mutableStateOf(listOf<LocalazyLocale>())
        private set

    init {
        Localazy.setListener(localazyListener)
        update()
    }

    private fun update() {
        locales = Localazy.getLocales() ?: emptyList()
    }

}

We wrapped LocalazyListener, so we don't need to implement all the overrides to listen for a single event. Here goes the implementation:

/**
 * A simple class to wrap LocalazyListener, so we don't need to implement
 * all functions, and can use a lambda to monitor changes.
 */
class LocalazyWrappedListener(val body: () -> Unit) : LocalazyListener {

    override fun missingTextFound(p0: LocalazyId?, p1: Locale?, p2: String?) {}

    override fun missingKeyFound(p0: Locale?, p1: String?) {}

    override fun stringsUpdateStarted() {}

    /**
     * This function is called when updated data is downloaded.
     */
    override fun stringsUpdateFinished() {
        body()
    }

    override fun stringsUpdateFailed(p0: Int) {}

    override fun stringsUpdateNotNecessary() {}

    /**
     * This function is called when the strings are loaded.
     */
    override fun stringsLoaded(fromUpdate: Boolean, success: Boolean) {
        if (success) {
            body()
        }
    }

}

Great! That was pretty simple. Now, let's render the language selector using Jetpack's composables. Not only that we show the available languages, but we can also indicate that the given language is not yet fully translated (which is extremely handy as it can attract more contributors and volunteers to help with translating) and, of course, we also need to point users to our project on Localazy, so they can actually help us.

@Composable
fun LocaleSwitcher(
    items: List<LocalazyLocale>,
    onChange: (LocalazyLocale) -> Unit,
    onHelp: () -> Unit
) {
    Column {
        LazyColumnFor(items = items, modifier = Modifier.padding(0.dp, 8.dp)) {
            TextButton(
                onClick = {
                    onChange(it)
                },
                modifier = Modifier.padding(16.dp, 4.dp, 4.dp, 4.dp).fillMaxWidth()
            ) {
                val name =
                    "${it.localizedName}${if (!it.isFullyTranslated) " (incomplete)" else ""}"
                Text(name)
            }
        }
        TextButton(
            onClick = {
                onHelp()
            },
            modifier = Modifier.padding(16.dp, 12.dp, 4.dp, 4.dp).fillMaxWidth()
        ) {
            Text("Help us translate the app!")
        }
    }
}

We have everything ready for SwitchActivity. Let's make the drum rolls.

class SwitchActivity : AppCompatActivity() {

    private val localeViewModel by viewModels<LocaleViewModel>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LocaleSwitcher(
                items = localeViewModel.locales,
                onChange = {

                    // Change the locale and persist the new choice.
                    Localazy.forceLocale(it.locale, true)

                    // Reopen MainActivity with clearing top.
                    startActivity(
                        Intent(
                            this@SwitchActivity,
                            MainActivity::class.java
                        ).apply {
                            flags = Intent.FLAG_ACTIVITY_CLEAR_TOP
                        }
                    )

                },
                onHelp = {
                    // Open the project on Localazy to allow contributors to help us with translating.
                    startActivity(
                        Intent(Intent.ACTION_VIEW, Localazy.getProjectUri()).apply {
                            flags = Intent.FLAG_ACTIVITY_NEW_TASK
                        }
                    )
                }
            )
        }
    }

}

And the result:

Which exactly matches my app on Localazy at the given time:

To translate my app to more languages, I don't need to touch XML files or source code. Everything can be managed through Localazy.

Updated translations and new languages are delivered online to existing users without the need to re-submit the app to Play Store ;-). Awesome, well?

Source Code

You can find the whole source code on Github.

This post was originally published on Localazy.

Android's strings.xml: Deprecated!

vaclavhodek — Sun, 08 Nov 2020 12:04:14 +0000

Have you decided to make your Android app multilingual? I guess that even if you haven't yet, you know about strings.xml and values-XX folders. Localizing your app should be easier than handling XML files. And it can be!

Here goes a simple guide on avoiding handling translated XML files at all in a few simple steps. And as a bonus, you get your app translated to up to 80 languages for free by sharing translations with other apps.

Not thinking about localization yet?

You should keep localization in mind early. It's better to have your app prepared for it from the beginning. Believe me. Several times, I was depressed from searching for all the hardcoded strings having a hard time refactoring my code to be prepared for proper localization.

A few minutes you spend with this article will save you hours or maybe days in the future.

The source language

Okay, there's already a localization solution baked into Android, so there's no reason to go against it. Use strings.xml in the values folder for the source language. Btw, I strongly recommend using English.

Just keep doing what's standard and what's recommended by Android Studio, and for what Android Studio can give us insights and useful warnings.

However, completely forget about those values-de-rDE or values-b+zh+Hans+TW folders. You don't need them at all!

1. Sign up for Localazy - It's free

Navigate to Localazy, sign up, and create a new app after the registration.

Select the Android integration:

2. Follow the integration guide

It's as simple as adding a few lines to your root's build.gradle (adding a repository and a build plugin):

buildscript {
    repositories {
        maven { url "https://maven.localazy.com/repository/release/" }
    }
    dependencies {
        // ...
        classpath "com.localazy:gradle:1.5.2"
    }
}

And a few lines at the end of your app's build.gradle (configuring and applying a build plugin):

apply plugin: 'com.localazy.gradle'

localazy {
    readKey "secret-read-key"
    writeKey "secret-write-key"
}

It's a matter of about 30 seconds if you know what you do :-). And btw, the Localazy Gradle plugin is highly configurable ;-).

3. Upload strings

Once Localazy is integrated with your app, all you need to do is to upload strings. You can do so from the command-line:

./gradlew uploadStrings

Or from Android Studio using the Gradle view:

Upload your strings whenever you add new ones so that translators can get their hands on them early.

4. Get your app translate

Shortly after you upload your strings, you are offered about 80 languages into which Localazy can automatically translate your app. All you need to do is just to review them so that they can go live.

You can go as far as translating languages you don't know using machine translations. They are completely free with Localazy.

However, I strongly recommend doing so, you can invite your loyal users to Localazy to help you with translating your app to their native languages. With Localazy, you can manage them easily, and the review is here to ensure high-quality translation.

And that's it!

Really! Do you expect another step? Downloading translated files and placing them in the correct values folder? Nothing like this is necessary.

The Localazy Gradle plugin you integrated in the step 2. is taking care of everything for you. When your app is built, it downloads and places translated files into it. Everything is processed during the build, so your source code and resources are left untouched.

Did I promise that you can forget about manual XML files handling? Here it is!

OTA/online updates

And there's more you are about to get. The Localazy Gradle plugin automatically integrates the Localazy Android library with your app. And this small library keeps translations in your app up-to-date, and it can even download new languages. You no longer need to re-submit your app to Play Store just because you need to fix translations or add new languages.

And all of this with no single change to the source code of your app! Everything is done automatically during the build process.

You can disable this feature if you want so, but I recommend using it as it also optimizes the translation and review process, so you spend your time with the most important translations first.

Btw, the Localazy Android library comes with a bunch of nice features, so you can, for example, create a language selector that is always up to date.

And what about you?

Of course, the final choice is yours, but as Localazy is free for usual apps, I'm no longer going to have headaches from all those XML files and values folders. Having like 6 folders for different densities and another set of them for mipmap images is enough for
me :-).

Shortcomings of floating windows on Android

vaclavhodek — Sun, 08 Nov 2020 10:37:23 +0000

Here's what I learned along the way.

Before reading this article, it's recommended to go through Floating Windows on Android 8: The Final App.

In this article, I teach you how to overcome some key shortcomings of floating technology.

Mixed Support

Below, I write about the most significant shortcomings of floating technology. On some devices, some of the described problems may not appear at all. On other devices, some issues exist, some not.

However, if you want your app to be available to all users, you can't rely on mixed support. Your app would crash frequently, or it wouldn't be usable for a large group of users.

Believe me, I had the privilege to see my app running on thousands of different devices, and I came across weird and illogical bugs and non-standard behavior.

Dialogs

Problem:

The standard Android's AlertDialog needs an underlying activity, and so it's not possible to use it in floating windows - it would cause the app to crash.

Solution:

The best solution is to implement custom dialogs based on floating technology.

In Floating Apps, I implemented many different dialog types:

yes/no
ok/cancel
ok only
select file
show list
list of checkboxes
rich-text
custom view
etc.

I also implemented modality. When the dialog is shown, the related window is blocked, and the dialog is brought to the front instead of the window.

Example:

A simple confirmation dialog.

Popup Menus

Problem:

With popup menus, there is a similar problem as for AlertDialog. It's not supported in floating windows.

Solution:

As for AlertDialog, I would recommend implementing custom popup menus based on floating technology.

I did for Floating Apps. It relies on popups heavily.

Example:

A simple popup menu shown over its parent window.

Copy & Paste

Problem:

The copy/paste feature is a real problem. It works well only on a few phones. As a rule of thumb, it's better to consider it unsupported.

Usually, it's possible to highlight/select text. To be more precise, it's possible to select words with a long tap. However, handles used for working with the selection are missing, and therefore, there is no way to select anything else than single words.

And there's another issue. The standard popup with actions (copy, paste, select all, translate, etc.) is somehow connected to the underlying activity on most devices and won’t appear at all.

Solution:

For short texts, it's acceptable to implement OnLongClickListener and use custom popup. However, as it's not possible to select the text this way, it's necessary to introduce Copy all/Cut all functionality. The Facebook Heads uses this solution everywhere. In Floating Apps, I use it too for edit fields.

In Floating Apps, there are mini-apps for notes taking and text editing, and being able to use Copy all only, it wouldn't be a suitable solution. For this reason, these apps use WebView in which a full-size contenteditable div is shown with custom logic for text selection, copying and pasting. It's not perfect, but better than nothing :-).

Example:

A custom copy/paste popup menu.

Permissions

Problem:

Obtaining permissions from Android M and above requires a dialog to be shown and the method for issuing the request is available in Activity as well as the mechanism for catching the result.

Solution:

In fact, there are two possible solutions to this problem.

You can ask the user to grant all the necessary permissions in the main app before you allow her to access floating windows. Honestly, this solution may scare your users, and as Floating Apps has around 8 required permissions, I believe that almost nobody would grant them all before any real experience with the app.
Ask the user for the required permission when you need it. This is the correct way how to do it. In this case, the best you can do is to show an invisible activity and raise the permission request dialog from it. It may interrupt the current task, but as this is an only one-time action, it's not a big deal, and there is no better way to do.

In Floating Apps, every single mini-app defines a set of required permissions, and before the app is launched, the service checks whether all permissions are granted. If not, an invisible activity is shown and ask the user to grant missing ones.

System Interactions

Problem:

Some things, such as social logins, requesting SD card access, opening with, sharing, etc., can only be invoked from running activity.

Solution:

I tend to move "configuration" level things to the main app, which is a normal Android app, and once configured, it's usually possible to use them from inside the service.

For Open With / Share With functionality, a hidden activity is a solution both for showing the dialog to open/share with and for receiving data from other apps.

However, you may need to sacrifice functionality that is not supported in the service. For example, I once wanted to implement floating navigation with MapBox, but their SDK expects an instance of Activity to be available. No luck.

Z-Order

Problem:

The most recently added View is rendered on top of all others. There is no mechanism for switching the z-order of Views in WindowManager.

Solution:

In Floating Apps, the switching of floating windows is a complex process.

The whole window is rendered to an image, and a new ImageView is injected to WindowManager with the image of the original window on exactly the same position. In fact, it looks exactly the same as the original window.
The original window is removed from the WindowManager but kept alive.
The original window is added back to the WindowManager, which means that it's effectively brought to the top.
The ImageView with the rendered image of the window is removed from the WindowManager.

Using the approach above, switching windows seems like a seamless process without blinking and other undesired effects.

Of course, in Floating Apps, this is automated, and there is a complex logic around this that also controls the current z-order of all windows and intelligently decides when the switching is necessary and when not.

However, removing and re-adding the window may cause a problem with components rendering content directly to the video memory such as SurfaceView, VideoView, etc. For this reason, Floating Apps automatically disable this process for windows of a certain type.

Browser Limitations

WebView works well in floating windows, and it's mostly possible to reimplement its interactions such as uploading and downloading files, invalid certificate notifications, requests for location permission, etc. to use floating windows/dialogs described above.

However, there are a few actions that may lead to crashes or are unsupported. I hope I listed all the key issues.

Open With

Android tries to offer available apps, aka Open With feature, when opening links with an unknown protocol. As there is no activity, it may cause crashes. However, this behavior can be easily overridden.

Copy/Paste

The problem with copy/paste described above also exists for WebView, and it's even worse.

It's possible to use WebView to implement a workaround for unsupported text selection because we have full control over the code. However, for other websites, the situation is much complicated.

However, it's possible to get the selected text in the WebView using something like:

webView.loadUrl("javascript:process(window.getSelection().toString());")

And paste the text to WebView using simulating key strokes with dispatchKeyEvent.

Long-Click On Links & Images

Long-clicks may lead to crashes depending on the implementation, and certainly, it's not possible to invoke standard actions like Open In New Window, Download Image, etc.

The solution is to set custom OnLongClickListener for the WebView and get use webView.getHitTestResult() to get information about the clicked element.

Don't forget to return false when webView.getHitTestResult() returns null to let the WebView process the long click correctly, e.g. for selecting texts.

HTML <select>

HTML element <select> shows a dialog with available options and cause your app to crash. It's a big deal, and the only solution is to hook the element, override its action, and show custom UI based on floating technology.

It's not a simple task and needs a lot of testing. Don't forget that options in <select> may be nested and disabled.

The Final Note

You learned how to implement floating windows for your app. It's a powerful technology, but it comes with its price.

Use it wisely where it makes sense and try to avoid situations in which you get to shortcomings mentioned in this article and some others I forgot. It's not a simple task to correctly implement all the workarounds to be reliable across different phones and Android versions.

Enjoy it and feel free to share your apps with me.

Also, I will be glad if you decide to localize your apps with Localazy. I put the very same love into it as I did with Floating Apps.

Continue to the last article with tips & tricks I learned the hard way.

Stay Tuned

Eager to learn more about Android development? Follow me (@vaclavhodek) and Localazy (@localazy) on Twitter, or like Localazy on Facebook.

The Series

This article is part of the Floating Windows on Android series.

Kotlin & Gmail API - listing emails

vaclavhodek — Fri, 06 Nov 2020 09:36:19 +0000

The idea

Let's demonstrate the basic functionality on a useful idea. I have a folder/label in Gmail with a lot of emails. I want to list all email addresses - all senders.

Everything I need to do is a small console app to go through all emails with the given label and extracting the From header. If it contains the email address in format Name <email@address.com>, extract only the email address.

Let's dive into it!

Get credentials

Before we start, you need to create a new project in Google Cloud Console.

Under the new project, navigate to API & Services and enable Gmail API in Library.

In Credentials, click the + CREATE CREDENTIALS, select OAuth client ID and setup it like this:

Click Save and download the credentials for your newly created ID:

Save the downloaded file as credentials.json.

Kotlin project

Create a new Kotlin project with Gradle and add Google's dependencies:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib"
    implementation 'com.google.api-client:google-api-client:1.23.0'
    implementation 'com.google.oauth-client:google-oauth-client-jetty:1.23.0'
    implementation 'com.google.apis:google-api-services-gmail:v1-rev83-1.23.0'
    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.4.0-M1'
}

Authorization scopes

As we only want to go through labels, messages (we need just headers - metadata), we need a small and safe set of scopes:

private val SCOPES = setOf(
        GmailScopes.GMAIL_LABELS,
        GmailScopes.GMAIL_READONLY,
        GmailScopes.GMAIL_METADATA
)

Beware that if you provide the GmailScopes.GMAIL_METADATA, you are not able to access the whole message. You have to omit it if you want to get the message body.

Authorize with Gmail

Fortunately, Google libraries come with everything we may need including the server for receiving the authorization request. The whole implementation is as simple as:

private fun getCredentials(httpTransport: NetHttpTransport): Credential? {
    val inputStream = File("credentials.json").inputStream()
    val clientSecrets = GoogleClientSecrets.load(JSON_FACTORY, InputStreamReader(inputStream))
    val flow = GoogleAuthorizationCodeFlow.Builder(httpTransport, JSON_FACTORY, clientSecrets, SCOPES)
            .setDataStoreFactory(FileDataStoreFactory(File(TOKENS_DIRECTORY_PATH)))
            .setAccessType("offline")
            .build()
    val receiver = LocalServerReceiver.Builder().setPort(8888).build()
    return AuthorizationCodeInstalledApp(flow, receiver).authorize("user")
}

This code above outputs the request for authorization to the console:

Please open the following address in your browser:
  https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id=...

Click the link, authorize the app, and the authorization token is received and stored in TOKENS_DIRECTORY_PATH. You only need to do this for the first time. Next time, the stored token is used.

Build client & get labels

We can now use the getCredentials() function above to build an authorized client, list all labels, and find the required one identified by labelName.

// Build a new authorized API client service.
val httpTransport = GoogleNetHttpTransport.newTrustedTransport()
val service = Gmail.Builder(httpTransport, JSON_FACTORY, getCredentials(httpTransport))
                .setApplicationName(APPLICATION_NAME)
                .build()

// Find the requested label
val user = "me"
val labelList = service.users().labels().list(user).execute()
val label = labelList.labels
        .find { it.name == labelName } ?: error("Label `$labelName` is unknown.")

List all emails

For listing all email messages, let's use a few of Kotlin's goodies - tailrec extension function with lambda as the last parameter.

We need to invoke the list request repeatedly until the nextPageToken is null, and doing so with tailrec is safer.

For each message, we invoke the process lambda to perform an actual operation.

private tailrec fun Gmail.processMessages(
    user: String,
    label: Label,
    nextPageToken: String? = null,
    process: (Message) -> Unit
) {

    val messages = users().messages().list(user).apply {
        labelIds = listOf(label.id)
        pageToken = nextPageToken
        includeSpamTrash = true
    }.execute()

    messages.messages.forEach { message ->
        process(message)
    }

    if (messages.nextPageToken != null) {
        processMessages(user, label, messages.nextPageToken, process)
    }

}

Process message

The code for listing emails above returns only id and threadId for each of the messages, so we need to fetch message details, extract From header, and eventually process it.

To speed up the process, let's use Kotlin's coroutines to perform the message fetching in parallel. First, introduce a custom dispatcher, so we can limit the number of threads.

private val MAX_FETCH_THREADS = Runtime.getRuntime().availableProcessors()

val executors = Executors.newFixedThreadPool(MAX_FETCH_THREADS)

val dispatcher = object : CoroutineDispatcher() {
    override fun dispatch(context: CoroutineContext, block: Runnable) {
        executors.execute(block)
    }
}

For extracting the email address from the Name <email@address.com> format, the code is simple:

private fun String.parseAddress(): String {
    return if (contains("<")) {
        substringAfter("<").substringBefore(">")
    } else {
        this
    }
}

Now, we can put things together. Of course, you should introduce some logic for catching exceptions, etc.

private fun Gmail.processFroms(
        user: String,
        label: Label,
        process: (String) -> Unit
) {
    runBlocking(dispatcher) {
        processMessages(user, label) { m ->
            launch {
                val message = users().messages().get(user, m.id).apply { format = "METADATA" }.execute()
                message.payload.headers.find { it.name == "From" }?.let { from ->
                    process(from.value.parseAddress())
                }
            }
        }
    }
}

Result

With all the code above, we can unique list of all senders like this:

val senders = mutableSetOf<String>()
service.processFroms(user, label) {
    senders += it
}

senders.forEach(::println)

Source code

The complete source code is available on Github.

Originally published on Localazy - the best developer-friendly solution for localization of web, desktop and mobile apps.

#8 Floating Windows on Android: The Final App

vaclavhodek — Tue, 03 Nov 2020 13:51:23 +0000

Here's what I learned along the way.

Before reading this article, it's recommended to go through Floating Windows on Android 7: Boot Receiver.

In this article, I will teach you how to wrap everything together to get the note-taking app with floating technology.

The Final App

To finalize our app, we need to finish adding notes from the floating window. It's not hard but not simple because the view model we created in the first article is not available in the service.

As a workaround, we encapsulate the whole data management for notes into a class and prepare it to be usable both from the view model and our service.

As you can notice below, the newly created class also comes with support for broadcasting the NOTES_RECEIVER_ACTION event when notes are added or removed. More on the broadcasting event is in the next chapter.

There is also enableMultiInstanceInvalidation() for Room enabled. It solves the problem with the concurrent changes to the same database.

There is the complete source code for our new NotesDb class:

class NotesDb(val context: Context) {  

  val db = Room.databaseBuilder(  
    if (context.applicationContext == null) context else context.applicationContext,  
    AppDatabase::class.java,  
    "db-notes"  
  ).enableMultiInstanceInvalidation().build()  

  fun insert(note: String, sendBroadcast: Boolean = false) {  
    if (note.isEmpty()) return
    val noteObj = Note((System.currentTimeMillis() % Int.MAX_VALUE).toInt(), note)  
    insert(noteObj, sendBroadcast)  
  }  

  fun insert(note: Note, sendBroadcast: Boolean = false) {  
    GlobalScope.launch {  
      db.notes().insert(note)  
      if (sendBroadcast) {  
        update()  
      }  
    }  
  }  

  fun remove(note: Note, sendBroadcast: Boolean = false) {  
    GlobalScope.launch {  
      db.notes().delete(note)  
      if (sendBroadcast) {  
        update()  
      }  
    }  
  }  

  fun list(setter: (List<Note>) -> Unit) {  
    GlobalScope.launch {  
      setter(db.notes().getAll())  
    }  
  }  

  fun update() {  
    context.sendBroadcast(Intent(NOTES_RECEIVER_ACTION))  
  }  

}

We need to update our NotesViewModel (not shown here) to use NotesDb and finish the Window. When the user clicks on the add icon, the note is added, and the text field is cleared. And it's really that simple as adding a few lines:

class Window(context: Context) {  

  private val db = NotesDb(context)

  private fun initWindow() {  

    // Add note and clear the edit field.
    rootView.findViewById<View>(R.id.content_button).setOnClickListener {  
      with(rootView.findViewById<EditText>(R.id.content_text)) {  
        // Don't forget to pass true for sendBroadcast parameter.
        db.insert(text.toString(), true)  
        setText("")  
      }  
    }

     // ... the rest of initWindow() ...     
  }

  // ... unrelated code is omitted for brevity ...   
}

Notify The Main App

Jetpack Compose automatically refreshes notes if we change them in the view model. However, as it's impossible to get the view model in the service, we must invoke the refresh manually.

First, let's introduce a simple broadcast receiver that invokes lambda when the event is received. The event is sent by the NotesDb introduced above.

const val NOTES_RECEIVER_ACTION = "com.localazy.quicknote.actions.UPDATE_NOTES"  

class NotesReceiver(val update: () -> Unit) : BroadcastReceiver() {  

  override fun onReceive(context: Context?, intent: Intent?) {  
    update()  
  }  

}

We can now use the broadcast receiver in the view model - we create a broadcast aware view model.

When the event is received, we simply load notes from the Room database again. It leads to a change in the view model and refreshes the list of notes in our main app. The data-related logic is kept inside the view model and separated from UI, and it should be this way.

class NotesViewModel(application: Application) : AndroidViewModel(application) {

  private val context = application.applicationContext
  private val updateReceiver = NotesReceiver { loadItemsFromDb() }

  init {  
    context.registerReceiver(updateReceiver, IntentFilter(NOTES_RECEIVER_ACTION))  
    loadItemsFromDb()  
  }

  override fun onCleared() {  
    super.onCleared()  
    context.unregisterReceiver(updateReceiver)  
  }

  // ... unrelated code is omitted for brevity ...  

}

At this point, we have finished our note-taking app!

Localization & Volunteers

I skyrocketed Floating Apps by translating it to 30 languages, and one of the things I would like to teach you is how you can do the same.

We now have an excellent note-taking app that brings value to our users. Let's convert some of them to volunteers/contributors that help us to localize the app to more languages.

First, we need to give them the right tool for it, and ask them to help us. So let's create a language selector that is great for normal users as they can switch language, but it can also help us to communicate with our potential contributors. In the first article, we have integrated Localazy and its awesome localization library for Android, which is actually integrated automatically. By default, it resolves the language the same way as Android does. But we can force different locale if we want so.

Let's create a view model for our language selector. As the Localazy library is available, it's quite simple. LocalazyWrapperListener simplifies the standard LocalazyListener, and you can find it on Github.

class LocaleViewModel(application: Application) : AndroidViewModel(application) {  

  private val localazyListener = LocalazyWrapperListener {  
    viewModelScope.launch {  
      update()  
    }  
  }

  var locales by mutableStateOf(listOf<LocalazyLocale>())  
    private set  

  init {  
    Localazy.setListener(localazyListener)  
    update()  
  }  

  private fun update() {  
    locales = Localazy.getLocales() ?: emptyList()  
  }  

}

And a simple @Composable to show a list of available languages with a 'help us translate' message. Notice that the message is kept in English and is not translated. That's for purpose because we want to attract people who are likely to understand English good enough to supply an accurate translation.

@Composable  
fun ShowLocales(  
  items: List<LocalazyLocale>,  
  onChange: (LocalazyLocale) -> Unit,  
  onHelp: () -> Unit  
) {  
  Column {  
    LazyColumnFor(items = items, modifier = Modifier.padding(0.dp, 8.dp)) {  
      TextButton(  
        onClick = { onChange(it) },
        modifier = Modifier.padding(16.dp, 4.dp, 4.dp, 4.dp).fillMaxWidth()  
      ) {  
        val name = "${it.localizedName}${if (!it.isFullyTranslated) " (incomplete)" else ""}"  
        Text(name)  
      }  
    }  
    TextButton(  
      onClick = { onHelp() },
      modifier = Modifier.padding(16.dp, 12.dp, 4.dp, 4.dp).fillMaxWidth()  
    ) {  
      Text("Help us translate the app!")  
    }  
  }
}

And the last thing to do is to wrap everything into LocaleActivity:

class LocaleActivity : AppCompatActivity() {  

  private val localesViewModel by viewModels<LocaleViewModel>()  

  override fun onCreate(savedInstanceState: Bundle?) {  
    super.onCreate(savedInstanceState)  
    setContent {  
      ShowLocales(  
        localesViewModel.locales,  
        onChange = {  

          // Change the locale and persist the new choice.
          Localazy.forceLocale(it.locale, true)  

          // Stop the service and reopen MainActivity with clearing top.  
          // MainActivity restarts the service, so the locale change  
          // is applied across both activity and the service.  
          startFloatingService(INTENT_COMMAND_EXIT)  
          startActivity(Intent(this@LocaleActivity, MainActivity::class.java).apply {  
            flags = Intent.FLAG_ACTIVITY_CLEAR_TOP  
          })

        },  
        onHelp = {  
          // Open the project on Localazy to allow contributors to help us with translating.  
          startActivity(  
            Intent(Intent.ACTION_VIEW, Localazy.getProjectUri()).apply {  
              flags = Intent.FLAG_ACTIVITY_NEW_TASK  
            }  
          )  
        }  
      )  
    }  
  }  

}

We have to add the newly created LocaleActivity to AndroidManifest.xml and also add a way to open it from MainActivity. See Results below for the video of the fully functional app and the full code on Github.

Btw, notice that there is no values-XX folder in the project, just the base language's values folder. All other languages are supplied by Localazy automatically. You don't need to care about it at all ;-).

It's simple, but it works! Just asking my users, I get hundreds of people helping me translate the app, suggest new ideas, and hunt bugs. I owe all my knowledge shared with you in these articles to users who helped me along the way! Thanks!

If you want to read more about this topic, be sure to check how I converted Floating Apps to Localazy.

Results

And here comes our final app! Fully working notes-taking app with floating technology and externally manage languages with seamless locale switching.

We are not yet done! I prepared two more articles to teach you tips, tricks, and shortcomings of floating technology.

Source Code

The whole source code for this article is available on Github.

Stay Tuned

Eager to learn more about Android development? Follow me (@vaclavhodek) and Localazy (@localazy) on Twitter, or like Localazy on Facebook.

The Series

This article is part of the Floating Windows on Android series.