Forem: Maaruf Dauda

Changing the color scheme at run-time for an Android app (Theme hack?).

Maaruf Dauda — Thu, 27 Feb 2020 10:17:05 +0000

Righto. Have you ever tried to change the defined theme for your android app at run-time? Perhaps, in response to user input or some user setting you've described in your app?

If you have, then I feel a wee bit bad for you, because like me, you probably found out real quick that, android themes? Those little buggers are immutable.

If you haven't attempted to do that before and this post here is your first foray into changing android themes, then, welcome, you've come to the right place.

But, if themes are immutable and cannot be changed at run-time, then what are we doing here?

Well, we are here, because of ThemeOverlays. ThemeOverlays are basically themes that change specific attributes in already defined parent themes, i.e. they change only the items you determine.

Theme overlays, just like normal themes are immutable and cannot be changed at run-time, but since they only change specific attributes (like colorPrimary) and leave all others as they were, we can define multiple overlays and then apply them (like patches) to different activities depending on user input or setting.

To get started, we'll need a default android theme. The default one created for any new project is fine. It can be found in the styles.xml file and usually looks like this:



    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

In this tutorial, we'll be editing the colorPrimary, colorPrimaryDark and colorAccent attributes (in effect, the title and status bars and things like FABs).

Now, to begin changing themes, we need a couple of colors, we can very well write the color codes in our styles.xml file but I prefer a cleaner approach, so let's define the colors we want to use in colors.xml. I have chosen these:



    <color name="md_red_500">#970606</color>
    <color name="md_red_700">#770404</color>
    <color name="md_yellow_A400">#FBC02D</color>

    <color name="md_lime_500">#6D9904</color>
    <color name="md_lime_700">#587C02</color>
    <color name="md_amber_A400">#F55E0C</color>

    <color name="md_green_500">#047204</color>
    <color name="md_green_700">#035203</color>
    <color name="md_pink_A400">#D32F2F</color>

    <color name="md_blue_500">#070786</color>
    <color name="md_blue_700">#04045E</color>
    <color name="md_turquoise_A400">#00796B</color>

Twelve colors. Four sets. In each set, one color for colorPrimary, another for colorPrimaryDark and the last for accentColor. Perfect for four different themeOverlays.

Next, we'll create our actual overlays and use these colors in them.

If you're following along, jump over to styles.xml and create the themeOverlays you need. I have created mine in this fashion:



    <style name="OverlayThemeLime" parent="AppTheme">
        <item name="colorPrimary">@color/md_lime_500</item>
        <item name="colorPrimaryDark">@color/md_lime_700</item>
        <item name="colorAccent">@color/md_amber_A400</item>
    </style>

    <style name="OverlayThemeRed" parent="AppTheme">
        <item name="colorPrimary">@color/md_red_500</item>
        <item name="colorPrimaryDark">@color/md_red_700</item>
        <item name="colorAccent">@color/md_yellow_A400</item>
    </style>

    <style name="OverlayThemeGreen" parent="AppTheme">
        <item name="colorPrimary">@color/md_green_500</item>
        <item name="colorPrimaryDark">@color/md_green_700</item>
        <item name="colorAccent">@color/md_pink_A400</item>
    </style>

    <style name="OverlayThemeBlue" parent="AppTheme">
        <item name="colorPrimary">@color/md_blue_500</item>
        <item name="colorPrimaryDark">@color/md_blue_700</item>
        <item name="colorAccent">@color/md_turquoise_A400</item>
    </style>

Notice how I've made them all inherit the default AppTheme? This is incredibly useful if you have other attributes set in the AppTheme style that you want all your overlays to inherit.

Now, we have all our colors and styles set up. How do we use them in activities and such?

Simple! We do that with Theme.applyStyle.

There's a caveat, however. We can only do applyTheme before we set the content view (i.e. before the layout is inflated).

So, for now, just add the line for applying a theme before setContentView in your activity. The onCreate method should then look like so:



override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

//      getTheme()applyStyle(R.style.OverlayThemeLime, true) in Java 
        theme.applyStyle(R.style.OverlayThemeLime, true)
        setContentView(R.layout.activity_main)
    }

The second boolean parameter means to force apply the style.

If you run the app now, you should see a beautiful lime color (or whatever scheme you chose) as the app's theme.

But...how do we change that if we have to set the theme before setting content view?!??!

To do that, we can simply...restart the activity. Yeah, sorry if that's not very elegant but I promise it works.

Before we go about that though, we'll set up a way to keep track of state so that when the activity restarts, the state is preserved and used to set the last selected theme. For simplicity, let's use SharedPreferences.

Create a SharedPreferences object and a key for the value we're storing just above the onCreate method like so:



    lateinit var sharedPreferences: SharedPreferences
    val themeKey = "currentTheme"

Next, we'll initialize the sharedPreferences object so our onCreate method looks like this:



 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        //New
        sharedPreferences = getSharedPreferences(
            "ThemePref",
            Context.MODE_PRIVATE
        )

//        getTheme()applyStyle(R.style.OverlayThemeLime, true) in Java
        theme.applyStyle(R.style.OverlayThemeLime, true)
        setContentView(R.layout.activity_main)

    }

Now, we'll need four buttons to trigger each of the style changes. Nothing fancy, just normal buttons with a click handler. I've created mine in the activity xml file:



<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <Button
            android:text="Blue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/blue" app:layout_constraintStart_toStartOf="parent"
            android:textAllCaps="false"
            app:layout_constraintBottom_toBottomOf="parent" android:layout_marginBottom="24dp"
            app:layout_constraintEnd_toEndOf="parent" android:onClick="onClick"/>
    <Button
            android:text="Green"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/green"
            android:textAllCaps="false"
            app:layout_constraintStart_toStartOf="@+id/blue" android:layout_marginBottom="16dp"
            app:layout_constraintBottom_toTopOf="@+id/blue" android:onClick="onClick"/>
    <Button
            android:text="Red"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/red"
            android:textAllCaps="false"
            app:layout_constraintStart_toStartOf="@+id/green" android:layout_marginBottom="16dp"
            app:layout_constraintBottom_toTopOf="@+id/green" android:onClick="onClick"/>
    <Button
            android:text="Lime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/lime"
            android:textAllCaps="false"
            app:layout_constraintStart_toStartOf="@+id/red" android:layout_marginBottom="16dp"
            app:layout_constraintBottom_toTopOf="@+id/red" android:onClick="onClick"/>
</androidx.constraintlayout.widget.ConstraintLayout>

If you copy-pasted that, you'll probably have a tiny little error. That's because we haven't created our click handler in the activity yet. So, let's do that next.

We'll create an onClick handler for all our buttons. This handler will take care of setting the sharedPreferences value restarting our activity. For now, all it does is set our value and it should look something like this:



fun onClick(view: View) {
        when(view.id) {
            R.id.lime -> {
                sharedPreferences.edit().putString(themeKey, "lime").apply()
            }

            R.id.red -> {
                sharedPreferences.edit().putString(themeKey, "red").apply()
            }

            R.id.green-> {
                sharedPreferences.edit().putString(themeKey, "green").apply()
            }

            R.id.blue -> {
                sharedPreferences.edit().putString(themeKey, "blue").apply()
            }

        }

    }

All we've done here, is use a when statement (switch in Java) to cater for each button's click event using their id. And in the event that a button is clicked, we set the shared preferences value to reflect that.

Next, we restart the activity.

To do this, we simply add a few more lines at the bottom of our onClick function. Like so:

Our onClick function should now look like so:



fun onClick(view: View) {
        when(view.id) {
            R.id.lime -> {
                sharedPreferences.edit().putString(themeKey, "lime").apply()
            }

            R.id.red -> {
                sharedPreferences.edit().putString(themeKey, "red").apply()
            }

            R.id.green-> {
                sharedPreferences.edit().putString(themeKey, "green").apply()
            }

            R.id.blue -> {
                sharedPreferences.edit().putString(themeKey, "blue").apply()
            }

        }

        val intent = intent // from getIntent()
        intent.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION)
        finish()
        startActivity(intent)
    }

What we've done is simply getting the current intent and restarting it. I've added a no-animation flag so the change is instant and this would hide all animations if we had other activities in our backstack (does not exactly work here because we have just one activity so the entire app is, in effect, getting restarted)

Disclaimer: Rather than going this route, we could use Activity.recreate(), but I don't particularly like the flicker effect I get with that. (Again, things might be different with a backstack, but feel free to experiment and see which works best for you.)

At this point, we're 90% done.

The only thing left is to set the theme when our activity restarts based on the current sharedPreferences value. So, we go back to our onCreate method and replace the explicit line to set theme with a conditional. Doing this correctly, our onCreate method looks somewhat like this:



     override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        sharedPreferences = getSharedPreferences(
            "ThemePref",
            Context.MODE_PRIVATE
        )

//        getTheme()applyStyle(R.style.OverlayThemeLime, true) in Java
//        theme.applyStyle(R.style.OverlayThemeBlue, true) // -> Replaced
        when (sharedPreferences.getString(themeKey, "red")) {
            "lime" ->  theme.applyStyle(R.style.OverlayThemeLime, true)
            "red" ->  theme.applyStyle(R.style.OverlayThemeRed, true)
            "green" ->  theme.applyStyle(R.style.OverlayThemeGreen, true)
            "blue" ->  theme.applyStyle(R.style.OverlayThemeBlue, true)
        }

        setContentView(R.layout.activity_main)

    }

Bonus: We can take advantage of the colorAccent attribute of our overlays in any xml files. To demonstrate this, we'll set the background color of our layout to the colorAccent attribute of the currently applied theme by simply adding this line to layout code:



            android:background="?colorAccent"

The results of all our trouble so far looks like this:

That's it, I hope this was helpful. I've created an android project with all of the code on GitHub here.

Sources include this StackOverflow answer and the Android Developer docs.

Uploading images to Cloudinary with a React app.

Maaruf Dauda — Fri, 31 Jan 2020 04:29:44 +0000

Hi there. This year, I decided to write at least four technical articles a month. That's at least one per week.

If I stick with this all through the year, we'll be looking at almost 60 (if not more once 2020 is done). Can't wait to see what the year brings.
Without any further ado, let's get straight to business.

First, you'll need a React app. Create one now using the create-react-app CLI. If you have a react app already, then feel free to skip this step. I've named mine cloudinary-upload, but feel free to be a little more creative with yours.

Next, we'll need a couple of elements. A button to trigger the upload process, a div element to render the selected image(s) on screen. And some states.

For simplicity, I'll be sticking to internal state, hence useState in this article but it should be easy to plug into other state management patterns as well (like Redux -_-).

Now, we'll create our parent component. I'll use App.js. Clear out all of the generated code and leave a nice and empty react component of this shape:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}
export default App;

Next, we'll import useState from the react package and get our internal state ready. Add this next line into App component, just before the return keyword:

const [images, setImages] = useState([]);

Because I want to render more than one image, I have chosen to make my default state an array. All images we upload will be stored in this array.

Next we'll create a react element that loops over our array of images and maps them to an actual element.

<section>
{images.map(i => <img src={i} alt="" />)}
</section>

I have chosen to use a section tag as my containing element. Feel free again, to use what suits yours best.

Up next, we'll create an account on Cloudinary taking some important things into consideration.

Upon registration, cloudinary will ask to assign you a generic 'cloud name'. Please change this to something you can remember or at least take note of it or write it down somewhere. For my account, I have chosen the cloud name: emkaydee.

The primary interest you choose does not have an effect on our purposes so choose whatever feels the most natural.

Go over the onboarding process with Cloudinary or skip it, either way you get to your dashboard at the end. Where you will find the cloud name you have chosen and a very very helpful API key.

Now, before anything else, locate the settings page by tapping on your profile icon towards the top right of your dashboard. Click on the gear icon and you'll be redirected to the settings page.

Move to the uploads tab.

Scroll down here and 'Enable unsigned uploading'. Doing this generates an upload preset for you. An unsigned upload preset. This means you will not have to generate a signature every time you wish to upload an image.

Change the name of this preset to something that feels a bit more natural. I'll name mine 'upload' because why not?

Now, scroll to the bottom to save your changes.

Next, we'll pop over to the Security tab real quick and where it says 'Restricted media types', we choose to not restrict any media.

Having done that, scroll to the bottom again to save your changes and find your way back to the dashboard.

Now, there are two Cloudinary parameters we would be making use of in the next section:

Your cloud name. Mine is 'emkaydee'
Your upload preset name. I've called mine 'upload'

It is finally time to get back to coding. We will be needing two npm packages: cloudinary-react and cloudinary-core.

Run this command in your terminal to get them both:

npm i cloudinary-react cloudinary-core

Now, import CloudinaryContext from cloudinary-react and wrap the App component with it, passing in your cloud name as a prop. With this done correctly, your App.js file should be looking like this:

import React, {useState} from 'react';
import { CloudinaryContext } from "cloudinary-react";
import './App.css';

function App() {
  const [images, setImages] = useState([])

  return (
    <CloudinaryContext cloudName="emkaydee">
      <div className="App">
        <section>
          {images.map(i => <img src={i} alt="" />)}
        </section>
      </div>
    </CloudinaryContext>
  );
}

export default App;

Think of this as allowing us to pop open the cloudinary widget anywhere in our app as long as that component is a child of the App component.

Next, we'll create a util file in our src folder. Name that file CloudinaryService.js. It will contain helper methods to ease our upload and render processes.

Copy the following code into CloudinaryService.js:


import { Cloudinary as CoreCloudinary, Util } from 'cloudinary-core';

export const url = (publicId, options) => {
  const scOptions = Util.withSnakeCaseKeys(options);
  const cl = CoreCloudinary.new();
  return cl.url(publicId, scOptions);
};

export const openUploadWidget = (options, callback) => {
  const scOptions = Util.withSnakeCaseKeys(options);
  window.cloudinary.openUploadWidget(scOptions, callback);
};

export async function  fetchPhotos  (imageTag, setter)  {
  const options = {
  cloudName: 'emkaydee',
  format: 'json',
  type: 'list',
  version: Math.ceil(new Date().getTime() / 1000),
};

const urlPath = url(imageTag.toString(), options);

fetch(urlPath)
.then(res => res.text())
.then(text => (text ? setter(JSON.parse(text).resources.map(image => image.public_id)) : []))
.catch(err => console.log(err));
};

In the fetchPhotos function where I have emkaydee as my cloudName, please be sure to replace it with yours.

Next, we'll import both these helper methods in App.js:

import { fetchPhotos, openUploadWidget } from "./CloudinaryService";

Next we'll add a button to App.js to trigger the upload process along with a new function for our onClick:

const beginUpload = tag => {
  const uploadOptions = {
    cloudName: "emkaydee",
    tags: [tag],
    uploadPreset: "upload"
  };

  openUploadWidget(uploadOptions, (error, photos) => {
    if (!error) {
      console.log(photos);
      if(photos.event === 'success'){
        setImages([...images, photos.info.public_id])
      }
    } else {
      console.log(error);
    }
  })
}

Add this method to the onClick of our newly created button:

<button onClick={() => beginUpload()}>Upload Image</button>

At this point, everything should be ready to go. But if we attempt to run our app, and click on the button, we get an error: window.cloudinary is undefined. This is because we have not actually added a package for the cloudinary widget component itself.

Unfortunately, there isn't an npm package for the widget as of writing this article so we will need to use a workaround.

To do this, we'll add a script tag to the index.html file in the public folder. So, go over there and add this script at the bottom of the 'body' element:

<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript">
</script>

Try popping open our widget now and it should display properly. You might even try uploading an image and it should show up in your media library on Cloudinary.

Our react app however remains empty with no images?

The last part of this tutorial is fetching uploaded images from our Cloudinary account.

Add a simple effect to App.js with our nifty useEffect hook, and in the hook, add: fetchPhotos("image", setImages);

This still does not make our images show up though. Because they are not delivered as source links which we can simple plug into an <img /> element.

Instead, we'll use the Image component from cloudinary-react.

In App.js, change:

<section>
  {images.map(i => <img src={i} alt="" />)}
</section>

to use the Image component we have just imported:

<section>
  {images.map(i => <Image
         key={i}
         publicId={i}
         fetch-format="auto"
         quality="auto"
       />)}
</section>

If we have everything nice and correct, the App.js file should be looking like this:

import React, {useState, useEffect} from 'react';
import { CloudinaryContext, Image } from "cloudinary-react";
import { fetchPhotos, openUploadWidget } from "./CloudinaryService";
import './App.css';

function App() {
  const [images, setImages] = useState([])

  const beginUpload = tag => {
    const uploadOptions = {
      cloudName: "emkaydee",
      tags: [tag, 'anImage'],
      uploadPreset: "upload"
    };
    openUploadWidget(uploadOptions, (error, photos) => {
      if (!error) {
        console.log(photos);
        if(photos.event === 'success'){
          setImages([...images, photos.info.public_id])
        }
      } else {
        console.log(error);
      }
    })
  }

  useEffect( () => {
    fetchPhotos("image", setImages);
  }, [])

  return (
   <CloudinaryContext cloudName="emkaydee">
      <div className="App">
        <button onClick={() => beginUpload("image")}>Upload Image</button>
      <section>
        {images.map(i => <Image
              key={i}
              publicId={i}
              fetch-format="auto"
              quality="auto"
            />)}
      </section>
    </div>
   </CloudinaryContext>
  );
}

export default App;

That's it. That's the entire tutorial. Your app should now be connected to your cloudinary account. If you have any questions, please ask in the comments and react to this story if you found it the least bit helpful.