QuickAndroid - QML Component Library for Android

benlau

Hi ,

I would like to share my latest open source project here. It is called as QuickAndroid, a QML component library for Android.

Project site:
https://github.com/benlau/quickandroid

Main Features:

Provides "DP" unit
Page transition management
“Drawable” component that could support color , image , QML component , simulated nine patch image as input source
Theme / Style Engine
Animation Management

If you have any comment , feature request, merge request , please feel free to let me know. I wish we can gather the resource here to provide a better Qt development for Android.

Iktwo

Thanks for sharing, it looks very nice.

I have only one comment for your ActionBar, you are setting the height to 48dp, which is actually the height for phones in portrait, landscape should be 40dp and it should be 56dp on tablets, I took my values from here:

"Android Cheatsheet For Graphic Designers":http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/

I also have my set of components, my project also focuses on Android right now, but the idea is to target iOS also.

"Components":https://github.com/iktwo/components

Maybe we can help each other :)

benlau

[quote author="Iktwo" date="1410886440"]Thanks for sharing, it looks very nice.

I have only one comment for your ActionBar, you are setting the height to 48dp, which is actually the height for phones in portrait, landscape should be 40dp and it should be 56dp on tablets, I took my values from here:

"Android Cheatsheet For Graphic Designers":http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/

I also have my set of components, my project also focuses on Android right now, but the idea is to target iOS also.

"Components":https://github.com/iktwo/components

Maybe we can help each other :) [/quote]

yes , it will be great!! Followed you on github already. wow , you did a lots of C++ component already.

For the problem of Action Bar , I know that the height is different for phone and tablet , pc. But my library don't have the code to detect type of device and a provide menuBar that could scale the image automatically. Need to support those feature first. Thank for reminding~

(p.s I suppose menu icon should be scaled to fit the action bar height instead of making new icon for tablet . Am I correct?)

I have read from your code that you have provided the interface but seem that the detection is also not done yet?

I will also work for iOS later but probably will be another library since they are quite different. Will only share some basic components like drawable , button etc.

By the way , I have listed my wish list / todo items as a vision of the library at. Just wonder do we share similar vision:

https://github.com/benlau/quickandroid/wiki

benlau

v0.1.2 has been released.

Changes:

New Components & Features

Support tintColor in QADrawableProvider.
ListItem
FloatingActionButton

System

QADrawableProvider
Supported to load image from drawable/ folder. Not only from drawable-*dpi
May tint a drawable image by using tintColor argument to provider.

Android Integration

Added QuickAndroidActivity.java as an alternative Activity class for launching Qt application
Once the onActivityResult() is invoked, it will forward the arguments to SystemDispatcher
SystemDispatcher
Add onActivityResult() helper function to forward the arguments passed to onActivityResult.

ActionBar:

Align icon and title according to keyline as described in Material design
Renamed the "icon" property to "iconSource"

Deprecated:

DividerHorzonalHoloLight - Replaced by ListDivider

benlau

v0.1.3 has been released.
Changelog

Critical Changes

Min requirement of Qt version has been raised to Qt 5.4
Dropped QuickAndroid.def package. All the constant value has been merged into Constants singleton component.
Renamed the package of QuickAndroid.style to QuickAndroid.Styles
Dropped Style singleton component. User should get current theme from ThemeManager.currentTheme from QuickAndroid.Styles package.
All the Style components use DP unit for component size.

The following components are dropped. They are not implemented by Material design :

PopupMenu
DropDownList
Spinner

New Components

TabBar and TabView
DropDownMenu
Paper
Text
Button

Style Components

Added “extend” property for user to create derived style class form existing Theme object.

Example:

ActionBar {
    style: ActionBarStyle {
    extend: [ ThemeManager.currentTheme.actionBar, {
       “titleTextStyle.textColor” : Constants.white100
    }  ]
   }
}

or

ActionBar {
   style: ActionBarStyle {
      Component.onComponent {
         merge(this,ThemeManager.currentTheme.actionBar);
            titleTextStyle.textColor = Constants.white100   
         }
   }
}

Drawable Provider

Bug Fix - Crash on handling mono image (1bit depth)
Bug Fix - It don’t resize image according to sourceSize.

Drawable

Now it may take Component as input to source property

e.g

Drawable {
    source: Rectangle { color:”red” };
}

Bug Fix - Can not handle Color object as input to source property

Action Bar

ActionBarStyle - Added “unitHeight” property to control the heigh of control item.
Reimplemented by Material Design
Title is not part of action button
Move title according to keyline
Added iconSource, background properties

A

Changed the implementation from C++ to QML
Added A.px() and A.drawable() functions

FloatingActionButton

Added “size” property to choose large/small size of button

Activity

“actionBar” property is not a component anymore. Now it take Item type.

ListItem

ListItemStyle - Added “showDivider” property

Screenshot

benlau

v0.1.4 has been released.

New Components

TextField

Features

Material Design look and feel
Long press will show PASTE button
Text handle to move cursor and selection
Floating Label

Screenshot

RaisedButton

System

Rename package of QuickAndroid.priv to QuickAndroid.Private
QASystemDispatcher::dispatched() - Changed the name of first argument from “name” to “type. Following the naming convention of Flux application framework

ActionBar

Changed the default height from 48p to 56dp

TabView

Emit appear() and disappear() signal for index changes.

FloatingActionButton

Use Theme.colorAccent as default color

TextStyle

Added “disabledTextColor” property
Added “bold” property

benlau

v0.1.5 has been released:

New Components

ImagePicker - Native Image Picker. Pick images from gallery or take photo by using native API.
Page/PageStack - A replacement solution for original Application/Activity pair.
BottomSheet

Updates on Style Engine

All the old Style classes are renamed to MaterialStyle. And inherit from components in QtQuick.Controls.Styles
Added new kind of class - “Material”. They are used to provide style parameter to MaterialStyle components.
ThemeManager - All the member’s data type has been changed from Style to Material.

Updates on component

Button

Added “pressAndHold” property
Change text and icon color in disabled mode

RaisedButton

Change text and icon color in disabled mode

Dialog.qml

Changed to Material Style
Changed default width

FloatingActionButton

Added FloatingActionButtonMaterialStyle and FloatingActionButtonMaterial component

Text
1, Show text with different color on disabled mode.

TextField

Add placeholderTextColor property
Add floatingLabelAlwaysOnTop property

Theme

Added “colorAccent” property

Updates on system

Registered an image provider for default images: “quickandroid-drawable"
SystemDispatcher
Able to work in non-Android environment.
Support List type conversion
Added “loadClass” method to load Java class.

Bug Fixes

Fixed a crash issue with JNI on Android 6.x
QADrawableProvider - applied wrong tintColor for images in drawable folder.

benlau

v0.1.6 of QuickAndroid has been released!

Release v0.1.6 release · benlau/quickandroid

Features Highlight

Support Ink effect on press
Class Reference is now available online (Incomplete)
Example program: Add splash screen (no black screen , no screen flicker)
Asynchronous page creation during push

New Component

Ink - A MouseArea with ink/ripple effect on press

Bug Fix

Fixed issue #14 - PageStack lost focus after opened dialog

Changes

ActionBar

Changed the type of “background” property from “var” to “Component"
Added “backgroundColor” property

Button

Support ink effect
Changed the type of “background” property from “var” to “Component"

FloatingActionButton

Support ink effect
Renamed property “color” to “backgroundColor"

RaisedButton

Support ink effect

Page Stack

Supported to create component in asynchronous mode
Added “asynchronous” property to enable/disable asynchronous component creation
Added “queueEnabled” property to enable/disable queued push/pop

TabBar

Support Ink effect

ListItem

Support ink effect

Device

Added “os” property
Added “isTablet” property (Experimental code)

Class Reference:
QuickAndroid Project Class Reference

sanekyy

Hello, I download your Library, and try to use this, but i can't run Example on Android device. Project builded, and when I try to run this, it floating in loader page with image of Qt. But if I try to run it on my computer, it's work.
I download apk from your blog, and it's work.
I try to use this Library in my project and some components work, but ImagePicker don't work. It's open library of photos on my mobile, but when i picked photos, it's don't download this photos in page.
May be you can help me with it.
Sorry for my English, and thank you in advance:)

benlau

@sanekyy

For the problem of example program, could you post the error log?

For the problem of ImagePicker, are you using custom Activity class? If not, you may change it to "quickandroid.QuickAndroidActivity"

Example:

quickandroid/AndroidManifest.xml at master · benlau/quickandroid

Since ImagePicker calls other Activity to pick image, it need to register a callback in Java code. "quickandroid.QuickAndroidActivity" will handle it for you.

It is not documented yet. I will write about it later.

sanekyy

@benlau
Here is error log

About ImagePicker, I change Activity class as in your example in Manifest and it's working, thx

sanekyy

Hello, if I have idea that you can add to the library, where i can offer it to you?

benlau

@sanekyy said:

Hello, if I have idea that you can add to the library, where i can offer it to you?

You may submit a feature request at:

https://github.com/benlau/quickandroid/issues

benlau

v0.1.7 has been released.

New Features

Support high DPI mode. A.dp will be adjusted to a correct value

Bug Fixes

Crash with Visual Studio

New Singleton Components

Units - Units conversion class. Provide Units.dp() as replacement of A.dp

Changes

SystemDispatcher

Support nested map type

ink

Add minRadius property

Example code

Able to build with gradle

benlau

Hello, I have forked a new library called AndroidNative.pri from the QuickAndroid project. It is a helper library to access the Java library you wrote without using JNI. And it has bundled few components and Android API wrapper too.

http://www.github.com/benlau/androidnative.pri

Calling Android functions from Qt without using JNI

It is forked from the QuickAndroid project that aim to provide a library to access Android functions from Qt/QML without using JNI.

Remarks: This project only support gradle build system.

Features

SystemDispatcher - A message queue for C++/Qt and Java/Android
Send message in C++, receive in Java and vice versa.
Data type will be converted automatically (e.g QMap <-> java.util.Map). No need to write in JNI.
It could be used to write your own Java code
Bundled Components
Image Picker
Toast
Wrapper of android.os.Environment / android.os.Debug / MediaScannerConnection

C++ API

Environment::getExternalStoragePublicDirectory()
MediaScannerConnection::scanFile()
Debug::getNativeHeapSize()
Debug::getNativeHeapAllocatedSize()

The functions above do not require to config gradle before using.

QML Components

    import AndroidNative 1.0

ImagePicker
Toast

SystemDispatcher

SystemDispatcher is a message queue component for delivering action message between C++/QML and Java. Data type in message is converted to the target platform automatically (e.g QMap <-> java.util.Map) . So that user doesn't need to write JNI to access their Java functions.

Moreover, SystemDispatcher is compilable on a non-Android platform. It doesn't cause any trouble to run on your development host.

// C++ Example

#include <AndroidNative>

// Load a Java class. It will trigger the code within `static` block
SystemDispatcher::instance()->loadClass("androidnative.example.ExampleService");

QVariantMap message;
message["value1"] = 1;
message["value2"] = 2.0;
message["value3"] = "3";

// Dispatch a message
SystemDispatcher::instance()->dispatch("androidnative.example.dummyAction", message);

// QML Example

import AndroidNative 1.0

Item {

  Component.onCompleted: {
    var message = {
      value1: 1,
      value2: 2.0,
      value3: "3"
    }
    SystemDispatcher.dispatch("androidnative.example.dummyAction", message);
  }
}

// Java Receiver

public class ExampleService {

    static {

        SystemDispatcher.addListener(new SystemDispatcher.Listener() {

            public void onDispatched(String type , Map message) {

                if (type.equals("androidnative.example.dummyAction")) {
                    // Process then dispatch a response back to C++/QML                    
                    SystemDispatcher.dispatch(("androidnative.example.response");
                
                    return;
                }
                return;
            }        
        });        
     }
}

// Listen from QML

Connections {
  target: SystemDispatcher
  onDispatched: {
    // process the message
  }
}

Supported data type:

Qt	Java
int	int
bool	boolean
QString	String
QVariantList	List<T>
QVariantMap	Map<T>

Installation Instruction

androidnative.pri/installation.md at master · benlau/androidnative.pri

Example

An example program is available at: androidnative.pri/examples/androidnativeexample at master · benlau/androidnative.pri

example1.png (533×472)

Update: Forum Guidelines & Code of Conduct

QuickAndroid - QML Component Library for Android

Critical Changes

New Components

System

New Components

Updates on Style Engine

Updates on component

Updates on system

Bug Fixes

Features Highlight

New Component

Bug Fix

Changes

New Features

Bug Fixes

New Singleton Components

Changes

SystemDispatcher

ink

Example code

Calling Android functions from Qt without using JNI

Features

C++ API

QML Components

SystemDispatcher

Installation Instruction

Example