Android Question [Solved] Zorder trouble...

[Blacky's Boss]

Allright, my first post here. I'm writing an App to communicate with my (arduino-based) home automation system. Just for fun. All went well until I somehow managed to mess up the Zorder of a Button and an Imageview. Both placed on a Panel in a Scrollview.
I know it isn't rocketscience, but I can't get it to work anymore and don't know why.
Here are the important bits:

Sub Globals
  Private Panel1 As Panel
   Private ScrollView1 As ScrollView
   
   Private Panel2(16) As Panel
   Private BTN1(16,16) As UnitButton

   Private BTN2(16) As Button
   Private Signal(16) As ImageView
   
   Private clrs As Int
   Private cdpanel As ColorDrawable
   
   Private cdConnect As BitmapDrawable
   Private cdDisconnect As BitmapDrawable
   Private cdWait As BitmapDrawable
   
   Private cdButtongroen As Bitmap
   Private cdButtonrood As Bitmap
   Private cdButtonoranje As Bitmap
   
   Private cdGroepsknop As BitmapDrawable
End Sub

Sub Activity_Create(FirstTime As Boolean)
   'Msgbox("create","Activity")
   If FirstTime Then
    Arduino.Initialize(Me,"Arduino",8900)

   End If
     
   clrs=Colors.ARGB(100,0,0,0)
   cdpanel.Initialize(clrs,10)
      
   cdConnect.Initialize(LoadBitmap(File.DirAssets,"Actions-network-connect-icon.png"))
   cdDisconnect.Initialize(LoadBitmap(File.DirAssets,"Actions-network-disconnect-icon.png"))
   cdWait.Initialize(LoadBitmap(File.DirAssets,"Actions-view-history-icon.png"))
   cdGroepsknop.Initialize(LoadBitmap(File.DirAssets,"button_wood.png"))
   cdButtonrood.Initialize(File.DirAssets,"001.png")
   cdButtongroen.Initialize(File.DirAssets,"030.png")
   cdButtonoranje.Initialize(File.DirAssets,"015.png")
     
   Dim y1 As Int
   
   Dim breedte As Int=90%x
   
   Activity.LoadLayout("Main")
     
   Panel1.Width=90%x
   Panel1.Height=10%y
   Panel1.Top=1%y
   Panel1.Left=5%x
     
   y1=Panel1.Height
   
   ScrollView1.Height=100%y-y1
   ScrollView1.Width =100%x
   ScrollView1.Top=11%y
   ScrollView1.Left=0
   
   ScrollView1.Panel.Height=182%y
   For j=1 To 15
     Panel2(j).Initialize("Panel2")
     ScrollView1.Panel.AddView(Panel2(j),5%x,(j-1)*(12%y)+1%y,breedte,11%y)
     Panel2(j).Background=cdpanel
     
     BTN2(j).Initialize("Groepsknop")
     Panel2(j).AddView(BTN2(j),0.05*Panel2(j).Width,1%y,0.9*Panel2(j).Width,9%y)
     BTN2(j).TextSize=20
     BTN2(j).Text="Group "&j
     BTN2(j).Background=cdGroepsknop
     
     Signal(j).Initialize("Signal")
     Panel2(j).AddView(Signal(j),0.075*Panel2(j).Width,BTN2(j).top + 0.25*BTN2(j).height,0.5*BTN2(j).height,0.5*BTN2(j).height)
     Signal(j).Gravity=Gravity.FILL
     Signal(j).Bitmap=cdButtongroen

Dim t As GroepButtonTags
     t.index=j
     BTN2(j).Tag=t

     For i=1 To 15
         BTN1(j,i).Initialize(Me,"BTN1",0.1*Panel2(j).Width,(i)*(10%y)+1%y,0.85*Panel2(j).Width,9%y)
       Panel2(j).AddView(BTN1(j,i).AsView,0.1*Panel2(j).Width,(i)*(10%y)+1%y,0.85*Panel2(j).Width,9%y)  
       
       BTN1(j,i).index=(j*16)+i
       BTN1(j,i).Group=j
       BTN1(j,i).Unit=i
       
     Next
     
   Next
End Sub

Now, what this does is place the button(BTN2) on top of the Signallight. Tried everything, and it used to work. BringToFront or SendToBack even don't seem to do anything.

Any clues?

 

[stanmiller]

Upload a zip of the sample project. Then anyone can load it up in the IDE, take a look, and provide feedback.

 

[Blacky's Boss]

Allright, Here you go, but I warn you, it is not as 'clean' as it should be....

 

[stanmiller]

Allright, Here you go, but I warn you, it is not as 'clean' as it should be....

No worries. "Meaningful invention is a messy process..."

What is the expected behavior? Tap on a button and it shows the yellow icon? Do the buttons reflect the current status of the assigned hardware at startup? (e.g. if the device is on, then the yellow icon would be on top? Otherwise the group button?

This?

Or this?

 

[Blacky's Boss]

Neither of those. The Icon should always be on top of the button, and shows the status of the group. Tap the Groupbutton to expand/collapse the grey panel, showing the 15 unitbuttons. If all the units are off, then the Icon on the Groupbuttun is Red, if one or more of the units are on, then the icon is orange, and if they are all on, the icon is green(ish,).

Long-pressing a Groupbutton switches a whole group on/off, and offcourse pressing a unitbutton switches a unit on/off. If the unit is a dimmer, the unitbutton shows the dimmericon, and the user is should be able to slide a Lightbulb icon left and right on the button. But I'm still working on the dimmer part.

The unitbuttons have the same problem, there should be a Lightbulb and a Dimmer icon on there.
And it did work, but somehow I managed to #$%$ it up, an now all the Icons are behind the buttons.

 

[KMatle]

Ehm. "BringToFront"? Or put it next to the buttons?

 

[Blacky's Boss]

BringToFront doesn't seem to do anything.

Putting it next to the button... No. That's avoiding the problem, not solving it.

 

[DonManfred]

The Icon should always be on top of the button

If you are using android 5+ then you need to change the buttons elevation.

unitbutton:

Sub SetElevation(v As View, e As Float)
    Dim jo As JavaObject
    Dim p As Phone
  
    If p.SdkVersion >= 21 Then
        jo = v
        jo.RunMethod("setElevation", Array As Object(e))
    End If
End Sub

and then set the buttons elevation

    Knop.Initialize("Knop")
    Hbase.AddView(Knop,0,0,W,H)
    Knop.TextSize=20
    Knop.SetBackgroundImage(Bitmaps.Achtergrond)
    Knop.TextColor=Colors.White
    Knop.Gravity = Bit.Or(Gravity.CENTER_HORIZONTAL, Gravity.CENTER_VERTICAL)
    SetElevation(Knop,0)
    cover.Initialize("cover")
    Hbase.AddView(cover,0,0,W-D,H)

results on my device running Android 6.

 

[Erel]

The correct solution is to change the panel elevation and set it to more than 2dip. You can do it with the designer or at runtime.

 

[Blacky's Boss]

Well, thnx so far guys, but It still does not work overhere. I literally copied DonManfreds solution, and it just doesn't.... I don't get it...

 

[Erel]

How do you reach the screen with the ScrollView?

 

[Blacky's Boss]

Hmmm.. If there is no settingsfile, or there are no systems in the file, you are redirected to the settings page. As you might suspect, I'm a little reluctant to give you the data of the only working system, as it's controlling my domestic lights, catflap and the pump in the gardenpond

So if you want to give it a go, then please -try to- disable the redirect. I'm not at home right now to do it myself....

 

[Erel]

To fix the z order issue, where buttons appear above all other views, you need to set the front panel elevation to 2dip or more.

 

[stanmiller]

While some diagnosis can be done with a glance of code, it's easier with an example we can work with. As noted, your project was missing a settings file. I worked around by commenting out 'StartActivity(Settings). Your project also uses automation to create the views adding math to the mix.

The misbehavior is a UX matter. The nested loops and offsets and positioning calculations muddy the picture.

In situations like these it's often easier to create a simple prototype in the Designer, model the desired behavior with a few layered icons and buttons and panels, and sort things out. Then set the layout aside and automate as you've done using code to replicate the behavior you set forth in the designer.

We can jump in and help with the prototype layout if you get stuck. And I expect this could be done in your existing project. Just create a new activity for your modeling work inside the project.

Also checkout this post from Klaus. It shows a clever way to load a layout into a ScrollView. Magic! This way you could keep your current architecture but temporarily substitute a designer layout for the automated view creation and attachment.

ScrollView example with a Panel higher than the screen
https://www.b4x.com/android/forum/t...-panel-higher-than-the-screen.9539/#post52833

 

[Blacky's Boss]

Allright, I picked this up again. I simply opened a new layout with a button, a checkbox and and an imageview. the abstract designer shows the right Zorder, but the WYSIWYG designer on my phone always places the button on top, whatever I try. I can't believe I am the only one experiencing this?

To fix the z order issue, where buttons appear above all other views, you need to set the front panel elevation to 2dip or more.

Well, then I'm either really blind, or really stupid, but I don't see how....

 

[DonManfred]

Well, then I'm either really blind, or really stupid, but I don't see how....

APSMTW ;-) (A Picture say more than thousand words)

 

[Cableguy]

Since you have a bunch of similar buttons, why not create a custom view? That way it would be a lot easier to work with, and it would be easily re-usable in other projects

 

[Blacky's Boss]

@ DonManFred, well, in my latest test, there is no panel. No scrollview. Just a new activity with a new button and a new imageview. As simple as that. Whatever I do, the button is allways displayed on top of all other views.

@ Cableguy, I'm in the process of making a class for the button. There will be no other project to use these in.

 

[DonManfred]

Whatever I do, the button is allways displayed on top of all other views.

This is - starting from android 5 - expected.
See https://www.b4x.com/android/forum/threads/android-5-0-information-and-resource-thread.45825/#content

 

[Blacky's Boss]

Ah, ok.... So the real problem was the Material theme...

I knew there should be a simple solution....: https://www.b4x.com/android/forum/threads/make-your-app-compatible-with-android-5-0-devices.45967/

I did that earlier, but because B4A threw a warning, I commented the line out.

So, once again, I am a happy camper, sort of...