Develop Reference

Qt Android Fullscreen bottom gap

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.

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

button with image with transparent background

I'm trying to make a 'custom button' for my app.
I have an image of egg with transparent backgroung and I need this image to be a button that ignore tapping on the transparent part.
Right now , I use gesturedetcetor , I also tried inkwell ,they are both detect tapping all the whole image, include the transparent back.
Align(
alignment: Alignment(0, 0.75),
child: Container(
width: swidth * 0.75,
height: sheight * 0.6,
child: GestureDetector(
onTap: () {
setState(() {
pushes--;
});
},
child: Image.asset(
'images/egg.png',
fit: BoxFit.fill,
)),
))

Welcome maor ts in Stackoverflow and Flutter dev.
I was very interesting with your question and your problem, so I decided to solve it with a new package you can use.
This package is transparent_image_button which I recently coded it.
You can use it as this example
TransparentImageButton.assets( "assets/images/egg.png",
width: 200,
onTapInside: () => print("You tapped the image."),
onTapOutside: () => print("You tapped outside the image."),
)
As you can see, you can set function when you tapped on image and another function when you tapped outside the image.
I hope other people can benefit from it also. Thanks for giving me the idea with your question.

In the way, you are implementing it will detect the tap on all over the image.
I will suggest you add the transparent view on the image in the fill area and then add GestureDetector on that view. In this way, you can avoid the click on the transparent area.

Try this code may solved your issue
Row(children: <Widget>[
GestureDetector(child: Container(
width: swidth * 0.75,
height: sheight * 0.6,
),onTap: (){
setState(() {
pushes--;
});
},),
Image.asset(
'images/egg.png',
fit: BoxFit.fill,
)
],)

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.

Titanium/Appcelerator images will not show on Android

I'm back with tales of frustrating adventures. This time concerning images on the android side of titanium.
Long story short, I can't get any images to show up for android whatsoever, whether it be a background image or a plain image in an imageView object.
I will provide code I'm trying and keep it extremely small and simple so that it can be easily replicated for all of our testing purposes.
The Code:
Attempt #1 programatically creating view and image:
index.js
var header = Ti.UI.createImageView({
width: 300,
image: '/images/header.png',
width: 300
});
var win = Ti.UI.createWindow({
backgroundColor: 'white',
height: Ti.UI.FILL,
title: 'test',
width: Ti.UI.FILL
});
win.add(header);
win.open();
Attempt #2 plain jane .xml and .tss styling:
index.js:
$.index.open();
index.xml:
<Alloy>
<Window class="container">
<Label id="label">Hello World!!</Label>
<ImageView id='img1'></ImageView>
</Window>
</Alloy>
index.tss:
".container": {
backgroundColor: 'white'
}
"#img1": {
width: 300,
image: '/header.png',
width: 300,
top: 0,
left: 0
}
file locations (i copied the same image to 3 different locations to try and get something):
app/assets/header.png
app/assets/android/header.png
app/assets/android/images/header.png
IMPORTANT, What I have tried:
using "/images/header.png
using "images/header.png"
using "header.png"
using "/header.png"

First thing, in the ImageView property you have mentioned the width twice, so you can remove one declaration and put the height of the image, like 300 (you can put Ti.UI.SIZE to maintain the aspect ratio)
Second, put the images inside app/asset/android/images/res-<density> respectively. Replace <density> with for example mdpi / hdpi / xhdpi. (you can put this in res-hdpi for testing)
Do a clean build and then check if it is getting reflected or not.

Very Simple!
Alloy example:
Put your image at app/assets/images for example app/assets/images/header.png .
Now your code is
<ImageView id='img1' image='/images/header.png' ></ImageView>
Or in .tss file
"#img1": {
width: 300,
image: '/images/header.png',
width: 300,
top: 0,
left: 0
}
End !

put your image :
app/assets/images/header.png
then access it with
<ImageView id='img1' image="/images/header.png"></ImageView>
important : try to clean your project first for every changes you made at assets folder before you run the app!