Update ‘Hier of Daar?’ – Using Custom View Group

As described in my last post, I’m working on an Android app that uses open data. For those interested in Android development, I’d like to share how I tackled a layout challenge I had. If fixed it in the latest update of the app ‘Hier of Daar?’  v1.10. Get it at Google Play.

The layout challenge

Screenshot_1479680411

This screen is built out of multiple layers, where the white icons are on top of the blue-purple swirl. In order to place these icons on the correct spot and with the correct size, this was not really do-able with normal layout options in Android.

First solution; For one device only

To save time I side stepped the problem by only making it look ok for the Nexus 7 (2013). This allowed me to create a video of the app showing the jury how the app works. It’s somewhat acceptable, since the app is a proof of concept.

The big disadvantage being that hardly anyone can try out the app and give feedback without being distracted by how ugly it looks on their device..

Second solution: Custom View Groups

A View Group is a way to group different views. In other words; a layout. For instance, you can make use of LinearLayout or RelativeLayout. A custom View Group does the same thing; it tells the layout where to place the views and how to deal with resizing, etc.

While the custom view groups ( and compound views) still have many secrets for me, it was clear that I could create one that would solve my problem. So after reading some documentation and watching some videos I gave it a go.

Now I have one Swirl class that extends the ViewGroup and only has real code in the onLayout method. Here I place all the views and tell them what their position and size should be by providing a coordinate for their left, top, right, bottom. All values are relative to the size of the total view group.  What’s neat is that once you have the custom view group it will show in Android Studio as it would in the app.

AndroidStudio

The screenshot at the beginning of the post was of the Nexus 7, this next screenshot is of an emulator with a 480 x 800 px resolution and an older version of Android.

Screenshot_1479681603

Up next

There is much that could be improved, for instance a back button would be nice, or making users aware that these white icons can be clicked, etc. But within the existing design, this solution worked and I’m happy with the improvement.

It would be nice to look more into custom views and see what could be improved based on that. Also, while I was researching I came across a video that explained how you can make a custom view that allows users to doodle. That could be nice to incorporate in my Idea Growr app.

 

Proof of concept for Hacking For Sustainability competition

I’m working on a project with Laura for Hacking for Sustainability.:
http://www.hackingforsustainability.nl

I’m doing development, she does design, we’re both responsible for concept.
You can find the proof of concept app here:
https://play.google.com/store/apps/details?id=com.juliushuijnk.tools.hierofdaar

Because of this project, and a different project that resulted in 0 year old who’s living with us, all other projects are on pause for now.

What the project is about

The game tries to let kids explore open data in a way that makes sense to them. No maps, coordinates, tables or graphs. Instead it’s based on pictures of specific iconic locations, supported by audio and a simple question: “Here or there?”

With this app we like to show how open data can be used to create simple fun games, where teachers and parents can expand on the game content by simply adding pictures and audio and selecting a postal code.

The app comes with a single data set, but can be easily expanded on with many more in future versions. We see this as a potential international platform where lot’s of games and experiences can be played, customized and shared.

For now, it is a bit rough around the edges and very much a work in progress.  We made it specifically for the Nexus 7 (2013) in landscape.

Why

We see that there is a huge amount of open data, and it’s not really finding it’s way to a lot of people in experiences they care about. So we want to bridge that gap by proving this platform.

As small and simple as possible

(Video is slightly old compared to state of app)

Obviously the app is for from the platform we have in mind. It’s a good example of starting with something as small and simple as possible. One data set, one super simple game, one way to play, etc.  The point is to make it easy for people to imagine that such a platform can exist and trigger ideas how this best should be done.

At the same time, we have something concrete we we can receive feedback on and improve, while learning. Also it fits nicely with my personal goals.

From a tech perspective

It’s a simple Android app. I wanted to use simple csv files for the data sets, that then load into the database. It made take a deeper look at different ORM’s.

How to lay out the views

At the moment I’m doing the layout with the new constraint-layout.

It doesn’t feel ready to be included in the stable release of Android Studio. Also it’s hardly documented. For instance try to figure out how to put a rules in the horizontal center of the layout. I’ll write the spoiler, because it doesn’t really say:

The design Laura made was not so conventional, so it made me look into custom view groups. For now I’m not using those, but it’s clear that this is right path forward if the proof of concept needs to look good on more than one device.

Later more..

Adding instrumentation tests to Idea Growr

SpoonEditSet01

At work, I’m learning more about how to use instrumentation tests with Android development. I’m now applying this to my Idea Growr app.

Tools used

These type of tests will ‘fake’ a user pressing buttons, and it’s quite fun to watch. I’m using Espresso to make the test scenarios, and Spoon for making a nice rapport on each test.

In the beginning I had the problem of not being able to take screenshots of pop-up windows with Spoon. So I’m using the Falcon library to make this happen.

Than I ran into the problem that Idea Growr supports android version with SDK 9 (really old), and the Falcon library has a minimum of SDK 10. So I needed to add a line in my manifest file to work around that:

At first that didn’t work, but then I found out that I should put it in a separate AndroidManifest file.

I’ve complained about this before, but I keep being surprised how things that seem like ‘core’ parts of Android require you to do some quite obscure Googling. But on the positive side, it’s quite easy to make test scenarios with Espresso.

Up next

One of the main goals is to make it easier to develop new features without accidentally breaking existing functionality. Also, I can much easier see how the app works on different devices (emulators).

I’m not there yet. Todo:

  • Add more tests
    I’ve made a couple of basic tests, like creating an idea with a note, but there is more to be done.
  • Figure out how to best test for mutiple languages
    There doesn’t seem to be something in Espresso for doing the same test for multiple languages. But it should be do-able
  • Figure out screen orientation changes
  • Add even more tests

 

Getting closer to a charities website prototype ready for testing

Some of the progress on the charities website I wrote earlier about:

  • Wrote web scraper to gather charities content
    Since we don’t want to start the platform with no content on it, I wrote a web scraper in python that goes over publicly available information on charities. On our site we will make it very clear what content is coming from other websites and a link to them will provided right next to it.
  • Created illustrations
    Some of them you can see in the screenshot below.
  • Used Bootstrap to create front-end. Most of it is ready.
    Creating front-end that looks decent has been much easier than I thought.  Also the icons of font-awesome and bootstrap are awesome and also very easy to use.
  • We seem to have gotten the Twitter login working
    Starting with only allowing users to create accounts via Twitter has a couple of advantages; It’s quick to build, robust and makes it a little bit easier to spot spammers.
  • Wrote texts
    That was a bit more work than I expected. There is still some work in that area.

What home will look like

static_home_3

Up next:

  • Get more pages working
    The static front-end of most pages is there, like the write review and edit account. But as the prototype is improving we’ll probably see more pages and states we need to build.
  • Get search working
    In the beginning search will be very simple, and probably will only find charity pages.
  • Figure out a good name
    As a working title we have “Charities we trust”, but I think that will cause problems. If someone visits the site and enters on a specific charity page, this person might think we endorse the charity since we say ‘we trust’ them.
  • Tweak all the details
    There is a whole lot of texts, code and other work that needs to be one..

Here’s visualization on the work what has been done so far.

Made with gource.

Soon I’ll hope to be able to share a link to an early prototype :)

What Test Driven Design is (no development skills required)

I’m going to create these short videos as a way to share what I’m learning while creating the charities website. More about the charities website concept.

In this video I’m giving a short example of how Test Driven Design (TDD) works in practice.

For a beginner; what you see me using

I’m using Flask, a web-framework written in Python. If you want to learn how to create websites, this is probably one of the easier frameworks to create a website in. At least I hope so, because that’s the reason I picked it.

The development software (IDE) I’m using to edit the code and run the tests in, is Pycharm. More information about how and why to do these type of tests you can find over here.

For developers; a great video on why these tests are important

New project: charities platform in the spirit of Helpalot

I’d like to show you this thing I’m working on.

A pet project with a long history

10 years ago I set up Helpalot.org, a charity social network site. The goal was to make it easy to find charity projects you could trust.

Here I am, introducing the concept on Netsquared in 2006:

I am going to build a website that can facilitate people to help the world in a better way. Taking the openness of Wikipedia and adding the social network aspect, I’m going to create a website that has the potential to be a charity guide that not only contains every charity in the world, but also is the home of an energetic community that will change the world for the better.

So it wasn’t lacking ambition. At the time, I had a day job, was setting up a games company (fourcelabs.com) and was probably spread to thin to really make it work. Either way,  with a very small team we worked on it in our spare time for over 3 years. It had about 300 profiles and we learned a lot.

The time is right to have another go at this.

Last time I was trying to create a full social network site, like Hyves or Facebook. This time I’m taking a more agile approach to the same problem, where the first prototype is much simpler and I’ll be one of the core developers.

Sharing the progress

I have a background in interaction design and recently I decided to focus fully on becoming a software developer. One of the main reasons is that I want to be able to move my ideas forward in a more substantial way.

I’m learning as I’m doing and I’m going to share the progress on both the website and the lessons learned as a developer.

Test Driven Development

This video above introduced me to Test Driven Development (TDD)

It inspired me to try to work in this manner on this new charities website. In the next post I’ll show you a quick example of how I’m going about this for the prototype. Also I’ll share who is working on this with me :)

 

Idea Growr update – Import ideas from zip file

As of version 1.54 of Idea Growr, you can now import your ideas. This enables you to move all your ideas to a new phone, or collaborate with someone by sharing your idea(s).

How to import

This assumes you have exported your ideas to an app like Dropbox. You can export your ideas using the up-arrow-icon on the main screen.

1. Download the .zip file to your device

Screenshot_2016-04-07-16-58-15Screenshot_2016-04-07-16-58-23

Go to your Dropbox app (or where you have stored your idea) and download the .zip file to your device. For instance ideas-2016-04-07.zip to your Download folder.

2. Open Idea Growr and go to settings

Screenshot_2016-04-07-16-43-50_highlight_settings

3. Tap the ‘Import from zip file’ button

Screenshot_2016-04-07-16-43-56 - Copy

4. Select your zip file from folder you downloaded to in step 1

Screenshot_2016-04-07-16-47-38 - CopyScreenshot_2016-04-07-16-47-48

A progress bar will show the progress of the unzipping. This does not mean the ideas are imported yet.

Screenshot_2016-04-07-16-47-57

5. Select how many ideas you want to import

Screenshot_2016-04-07-16-48-17

6. Select ideas to import (optional)

Screenshot_2016-04-07-16-48-52

7. Idea Growr checks for potential duplicates. If those are found, select if you want to import them.

Screenshot_2016-04-07-16-49-30

The app looks at the ideas in your zip file and can see that one or more of these ideas have a name this is also in your current list of ideas in your app. It’s up to you what to do next:

  • Import all anyway
  • Skip the ones that are probably duplicates
  • Import the content of the ideas with a known name as notes.

I struggled a bit with how to best describe this. If you want to help out, let me know in the comments if this seems clear from the screenshot or how it might be improved. 

8 After another progress bar your ideas are imported

And that’s it. If you have any questions, bugs or feature requests, let me know in the comments.

You can download the free android app Idea Growr here.

Idea Growr update – More control over your own questions

I have added a couple of new features in Idea Growr with the goal to give you more control over your own questions.

Download the Android app here, or learn more and watch a video here.

  • Create and edit multiple of your own question sets
  • For every idea select what ideas you want to use
  • Select any of the 11 languages in the settings

Create and edit multiple of your own question sets

Idea Growr settings Manage your own sets Edit question set

When I rewrote the database last year, I set up a structure that would allow me to do this update. I hope to later use this as a first step to a simple platform where you can share and import your question sets.

I put a lot of effort into creating a list of fields, and I was very close. But in the end I had to use a pop-up dialog where you can enter your question. I could write a rant about how Android should make this easy, but I won’t.

For every idea select what ideas you want to use

Screenshot_2016-03-20-22-51-38

I got a number of requests for this feature and it is one of those things that I hadn’t thought about myself. You could say that seeing a title of a question set you aren’t using is not a problem. But when you really think about it does matter.

Idea Growr is about helping you in your thinking process and it makes sense to want to remove as much clutter as possible.

Select any of the 11 languages in the settings

Pop-up language select, if you scroll you would see Portuguese too.

The app always supported a large number of languages. I wrote about it from the start. The way that Android works out of the box, is that it will use the language of your device. I received feedback that people wanted to switch languages. I can understand, because to be honest, most of these translations are far from perfect.

While some have helped, I use Google translate for most of them. The thought being that if you don’t know English, you would rather have something you could read but had some strange sentences, than have an app that you can’t read at all.

You might think it would be easy to implement such a feature, once you have all the translations, but it was not so simple. Either way, I now have it working and I wonder if more people will switch to English or use the feature to switch to a different language at all.

Idea Growr update – Add picture to note

As often requested by users, you can now* add a picture to a note.

To keep things as simple as before, you can only add a picture to a note. So no need for a media library or other (mental) overhead.

I could re-use some code from my other app, My Picture Books. And while I was at it, I rewrote most of the create/edit note code making it much easier to maintain.

Next up will probably be the option to export all your ideas in a .zip file that also includes all your pictures and audio, just like I made for My Picture Books. It might even be possible to export ideas from Idea Growr and import them to My Picture Books or the other way around. I’ll have to look into that :).

* Now = version 1.48 rolling out today, but not for all users at once.