Code design for reusable drag&drop UI parts in android

Question

I am new to android and writing an learning app for children in primary school. The app is for practicing simple calculations (add and subtract).

So far, I have finished the UI design and written a simple proof-of-concept implementation to demonstrate the basic usage of the app.

The design for one of the activities (addition of 123 and 456) would look like this:

|-----------------------------|
|  |c| 1   |c| 2   |c| 3      |
|                             |
|      4       5       6      |
|    --------------------     |
|   | r1 |  | r2 |  | r3 |    |
|                             |
|                             |
|  1  |  2  |  3  |  4  |  5  |
|  6  |  7  |  8  |  9  |  0  |
|    cancel    |     check    |
|-----------------------------|

The numbers (0-9) in the numblock are views that can be drag&dropped to the carry fields (|c|) or the result fields (|r1| etc). Values already dropped to the carry or result fields also can be moved (again with drag&drop) to another carry or result field.

There are going to be multiple practice modes, e.g.:

|-----------------------------|
|   1   +   9   =   |r1|r2|   |
|   2   +   8   =   |r1|r2|   |
|   3   +   7   =   |r1|r2|   |
|   4   +   6   =   |r1|r2|   |
|   5   +   5   =   |r1|r2|   |
|                             |
|                             |
|  1  |  2  |  3  |  4  |  5  |
|  6  |  7  |  8  |  9  |  0  |
|    cancel    |     check    |
|-----------------------------|

or:

|-----------------------------|
|  1   2   3   4   5          |
|  |   |   |   |   |          |
|   |+|     |+|    |          |
|    |       |     |          |
|   |r1|    |r2|   |          |
|    |       |     |          |
|    \       \    /           |
|     \       |-|             |
|      \       |              |
|       \     |r3|            |
|        \     /              |
|         \   /               |
|          |+|                |
|           |                 |
|          |r4|               |
|                             |
|                             |
|  1  |  2  |  3  |  4  |  5  |
|  6  |  7  |  8  |  9  |  0  |
|    cancel    |     check    |
|-----------------------------|

For my current implementation, I have all the drag&drop stuff in one activity and the layout is one single .xml file.

I would like to reuse the code for the drag&drop functionality in some way to keep the code clean and not have the same functionality implemented in many different activities.

I have already read about fragments in android and thought about making one fragment for the numblock and one fragment for each area where the numbers would be dropped, but as far as I researched, drag&drop between fragments is not really the way to go here (drag and drop between two fragments, the proposed solution does not seem to be very elegant).

Right now, I am thinking about just creating all content but the numblock dynamically in onCreate() of a single activity depending on the required mode. I would like your opinion on this approach. Are there probable issues when going that way?

Is there another way to achieve the same functionality and keep the code maintainable? Have you suggestions on how I could design my code as simple and maintainable as possible? How would you design an app with the required functionality?

Answer 1

The general advice that leaving design decisions until you have to make them would certainly apply here. I am sure there are hundreds of ways in which you could organise code like this.

In the Activity (or could be a Fragment) you so far have the following functionality:

• Dragging and dropping numbers
• Calculating if the answer is correct
• Setting up the problem
• Doing the things all activities must do - e.g. having an onCreate()

Can you split those different functionalities out somehow?

Are there things that are good candidates for making there own classes?

• Draggable numbers?
• Non draggable numbers?
• Mathematical symbols?
• Places you drag from and to?
• Rows that form a calculation (which can be nested on top of each other)?

How will these elements communicate with each other?

• To calculate if the answer is correct?
• So that an element knows where it is?

How are you going to create a new instance of the Activity?

• What data will you pass to the Activity?
• Do you want to call one of a set number of different types?
• How will what type the Activity loads be determined?

I haven't even begun to answer your question and yet this answer is getting very long.

The most important question is what do you want from the design? I'm guessing the answer is to make it as easy as possible to add new types of problem to the app.

Things that might help you:

• You can add views programatically to a layout. You don't need to specify things in an xml file. This could simply be used for generating new numbers when you drag from the bottom or more complexly to define the entire setups programmatically.
• I imagine interfaces and listeners will be the best way for elements to communicate.
• It may be good to take a look at some patterns: Template Method, Static Factory Method or even Strategy could be helpful here.
• Remember that you can split functionality out into separate Java files easily from Activities and then call them as needed.
• It feels quite game like. I think it is 50/50 as to whether it might be worth spending time looking into if a game engine could help you.
• Keep it simple - stick to splitting out one thing at a time. Work on one class at a time. I wouldn't try to make some huge, complex, intricate design all at once.