Qt Android Fullscreen bottom gap - android

I am having an issue when I deploy a Qt application on Android. Basically, my application contains two QML items, grouped into a stacked widget. It is a very simple code, but I can't remove the bottom grey bar as shown here:
Fullscreen failure
And my main code is:
QtWebView::initialize();
QApplication a(argc, argv);
MainWindow w;
w.setWindowTitle("Speakers Discovery");
w.showFullScreen();
return a.exec();
With the instantiation of the widget inside the MainWindow constructor:
m_page = new QQuickWidget(this);
m_page->setSource(QUrl("qrc:/loading_page.qml"));
With the .QML of the object displayed:
Item {
width: Screen.width
height: Screen.height
visible: true
Rectangle
{
anchors.fill: parent
color: "black"
Image { source: "qrc:/bg.jpg"; fillMode: Image.Stretch; anchors.fill: parent; opacity: 0.4 }
}
}
I had the same issue on windows, but changing showFullScreen to showMaximized made the trick. Do you have any clues for Android ?
Regards,
Julien.

Related

React-Native Element changing size while scrolling

I'm trying to make a react-native scrollview with 3 (or more) elements where the element in the middle of the screen is always 1.75 times the normal element size, and while scrolling the size changes dynamically. Can I find when the element is in the center of screen if the size of the scrollview will be changing? Is it possible to do without some complicated mathematical approach?
I was trying putting conditions to all elements' styles but can't find a way to determine when the condition is met.
handleScroll(event) {
var x = event.nativeEvent.contentOffset.x;
var page = x / this.state.totalWidth;
this.setState({ position: page })
}
isElementFocused(start, stop) {
return (this.state.position >= start && this.state.position < stop);
}
Element:
<View style={styles.swipeBox,
{
backgroundColor: this.isElementFocused(1, 2) ? this.getColor(1) : colors.primary,
width: this.isElementFocused(1, 2) ? this.getWidth(1) : this.state.baseWidth,
height: this.isElementFocused(1, 2) ? this.getHeight(1) : this.state.baseHeight,
}}>
<Text>test</Text>
</View>
I think you want to use smoothScrollToPosition()
please visit https://www.programcreek.com/java-api-examples/?class=android.support.v7.widget.RecyclerView&method=smoothScrollToPosition

Handling touch events in a QML game

Part of my game includes a table in which there is a ball rotating. There are also two rectangles like rackets that a player can use for the game. At first I used a simple rectangle with a mouse area filling the racket and some drag properties. It was somewhat fine when I ran the program on my Desktop but on Android devices, touching (i,e. by finger) the rackets is:
hard making the game unpleasant and also moving the rackets affects
the movement of the ball!
So I searched the Web and faced MultiPointTouchArea. So I tried to use it in both rackets with that hope it solves the issues.
I used this code:
import QtQuick 2.9
Rectangle {
id: root
width: 15; height: 65
property int oldY: y
property bool yUwards: false
property bool yDwards: false
onYChanged: {
if(y > oldY) yDwards = true
else if (y < oldY) yUwards = true
oldY = y
}
MultiPointTouchArea {
anchors.fill: root
mouseEnabled: true
minimumTouchPoints: 1
maximumTouchPoints: 1
touchPoints: [
TouchPoint { id: root }
]
drag.target: root
drag.axis: Drag.YAxis
drag.minimumY: table.y
drag.maximumY: table.height - height - 10
}
}
But there are errors like:
qrc:/Racket.qml:22 id is not unique
I mean, what is the correct use of that method for the rackets, please?

Mix-blend-mode: weird (temp) black background during SVG animation on android

I'm spinning a few rectangles atop each other, and their colors interact with using the css's mix-blend-mode.
In all browsers it's fine, but on chrome on Android there is a black background that is generated around the svg's rectangle shape while it's rotating. Once it settles into position, the black background disappears.
Pen: https://codepen.io/sashakevich/pen/YVMmZV
html:
<svg id="sl_logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.94 62.8"><g id="mark"><rect id="bar-1" class="cls-1" x="20.04" width="12.1" height="56" rx="3.24" ry="3.24"/><rect id="bar-2" class="cls-2" x="20.9" y="0.5" width="12.1" height="56" rx="3.24" ry="3.24" transform="matrix(0.5, 0.87, -0.87, 0.5, 37.29, -9.59)"/><rect id="bar-3" class="cls-3" x="20.9" y="0.5" width="12.1" height="56" rx="3.24" ry="3.24" transform="matrix(-0.5, 0.87, 0.87, 0.5, 15.5, -9.59)"/></g></svg>
css:
#bar-1, #bar-2, #bar-3 {
mix-blend-mode:multiply;
}
#bar-1 {
fill:#ed4237;
}
#bar-2 {
fill:#29aae2;
}
#bar-3 {
fill:#7ab642;
}
js
TweenMax.from("#bar-2", .35, {rotation:0, transformOrigin:"center center", delay:.4});
TweenMax.from("#bar-3", .7, {rotation:0, transformOrigin:"center center", delay:.4});
TweenMax.from("#letters", .7, {x:-40, opacity:0, transformOrigin:"left", delay:.4});
Any ideas how to get it to behave?
Ok, 2 hours later I have a solution....
Here's what didn't work in case you want to go down that road:
opacity: 0; fill-opacity:1;
enable-background: accumulate; on parent element
adding a white rectangle of 100% width and height
setting some large white stroke, setting no stroke, nor playing with stroke opacity.
What did work, was creating another blended element somewhere on the page. Not even interacting with the svg in any way FFS!
.blend-fix {
mix-blend-mode:multiply;
}
Working pen: https://codepen.io/sashakevich/pen/qmGBBL

Phantom double clicks from MouseArea on Android

While testing out an application on Android I noticed something funky going on. A double click event handler has been triggering without any double clicks occurring on that particular item.
Trying to isolate the issue I discovered that pretty much every chain of clicks rapid as a double click on regardless what two objects would cause the second click on the second object to register as a double click, when in fact it is just a single click.
Below is an example consisting of a row of 3 randomly colored rectangles, each one with a mouse area inside of it. The double click of each mouse area is rigged to set the parent rectangle's color to a different random color. Clicking rapidly two different rectangles under android triggers a double click and a color change for the second. This does not happen on Windows or Ubuntu Linux.
Window {
id: main
visible: true
width: 400
height: 400
title: qsTr("Hello World")
Row {
Rectangle {
width: main.width * .33
height: main.height
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
border.color: "black"
border.width: 2
MouseArea {
anchors.fill: parent
onDoubleClicked: parent.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
}
}
Rectangle {
width: main.width * .33
height: main.height
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
border.color: "black"
border.width: 2
MouseArea {
anchors.fill: parent
onDoubleClicked: parent.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
}
}
Rectangle {
width: main.width * .33
height: main.height
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
border.color: "black"
border.width: 2
MouseArea {
anchors.fill: parent
onDoubleClicked: parent.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
}
}
}
}
It looks as if the "previous click" or whatever property that's supposed to be used to detect double clicks is shared between different mouse areas instead of being per mouse area. The issue manifests in both Qt 5.7 and 5.7.1.
It definitely looks like my 10th discovered Qt bug this year, but I still feel like asking on the odd chance someone knows what's going on and how to fix it, because I need this fixed, and the Qt bugreport process is not speedy. So any ideas are more than welcome.
Until there is a better answer with an actual solution, it may be useful to know that it is possible to somewhat mitigate the devastating effect this issue has on user experience by reducing the global interval for double click detection.
By default it is the rather lethargic 500 msec. I found out that by reducing it to 250 msec helps to avoid over 90% of the incorrect double clicks:
QGuiApplication app(argc, argv);
app.styleHints()->setMouseDoubleClickInterval(250);
Additionally, there is a quick and hacky qml-only way to create a "fixed" copy of MouseArea:
// MArea.qml
Item {
id: main
property alias mouseX : ma.mouseX
property alias mouseY : ma.mouseY
property alias acceptedButtons: ma.acceptedButtons
// etc aliases
signal clicked(var mouse)
signal doubleClicked(var mouse)
// etc signals, function accessors
MouseArea {
id: ma
property real lClick : 0
anchors.fill: parent
onClicked: {
var nc = Date.now()
if ((nc - lClick) < 500) main.doubleClicked(mouse)
else main.clicked(mouse)
lClick = nc
}
}
}
This one actually works as intended and can be made almost entirely "plug and play" compatible with the original one.

QML elements over device's status bar

I am facing a problem when the device's keyboard is shown. The elements go over the device's status bar as in the images.
I have already tried to use the Flickable type but it does not work. Every time the keyboard appears, it push the app elements over the status bar.
PS: The problem occurs in both Android and iOS.
Here is the code:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
Window {
visible: true
property int larguraTela: 360
property int alturaTela: 640
width: larguraTela
height: alturaTela
maximumWidth: larguraTela
maximumHeight: alturaTela
minimumWidth: larguraTela
minimumHeight: alturaTela
title: "OverStatusBar"
Rectangle{
id: retangulo1
width: parent.width
height: parent.height * 0.5
anchors.top: parent.top
color: "grey"
}
Rectangle{
id: retangulo2
width: parent.width
height: parent.height * 0.5
anchors.top: retangulo1.bottom
color: "lightgrey"
TextField {
id: campoTexto
width: parent.width * 0.7
height: parent.height * 0.15
anchors.centerIn: parent
inputMethodHints: Qt.ImhDigitsOnly
}
}
}
This behavior was accepted as bug by Qt. If someone would like to keep up with, here is the link
https://bugreports.qt.io/browse/QTBUG-50200
On Android: You need to add android:windowSoftInputMode="adjustResize" in the end of activity tag, so it will look something like this:
<activity ... android:windowSoftInputMode="adjustResize">

Categories

Resources