Android Question How to create layout like in windows

[junaidahmed]

I am going to create tileview like window 8 as per below link sample. For this ,I have created four panel in my layout.Can you please help how to do this layout with image in four panel or share some example code ??.

For your reference,please check attached layout file...

Windows 8 Metro UI: A Bold New Face for Windows

Microsoft's Metro interface for Windows 8 takes some getting used to, but it delivers a better experience overall.

www.pcworld.com

 

[Andrew (Digitwell)]

you could use this example as a staring point

xCustomListView with Four Columns of Imageviews and many Rows

I wanted to accomplish what Erel did in the below link in post #3, but with 4 or multiple columns of imageviews not one imageview column. https://www.b4x.com/android/forum/threads/applying-lazy-loading-to-xcustomlistview-with-imageviews-bitmap-files.101299/ I have a list of bitmap files to show...

www.b4x.com

 

[junaidahmed]

you could use this example as a staring point

xCustomListView with Four Columns of Imageviews and many Rows

I wanted to accomplish what Erel did in the below link in post #3, but with 4 or multiple columns of imageviews not one imageview column. https://www.b4x.com/android/forum/threads/applying-lazy-loading-to-xcustomlistview-with-imageviews-bitmap-files.101299/ I have a list of bitmap files to show...

www.b4x.com

Thanks for reply
Can you provide layout for dashboard ui (card with image)??

 

[Andrew (Digitwell)]

I had a look at your layout. You need to add an imageview to each panel.

You need to use .settopandBottom as well as setleftandright

PnlScanIn.SetTopAndBottom(10%y,50%y)
PnlScanIn.SetLeftAndRight(10%x,50%x)
PnlScanOut.SetLeftAndRight(51%x,91%x)
PnlScanOut.SetTopAndBottom(10%y,50%y)
LblScanin.SetLeftAndRight(10%x,30%x)
LblScanout.SetLeftAndRight(10%x,30%x)
LblConfig.SetLeftAndRight(10%x,30%x)
LblExit.SetLeftAndRight(10%x,30%x)

PnlConfig.SetLeftAndRight(10%x,50%x)
PnlConfig.SetTopAndBottom(51%y,91%y)
PnlExit.SetLeftAndRight(51%x,91%x)
PnlExit.SetTopAndBottom(51%y,91%y)

It would probably be better to create a card customview and use that on your main screen.

 

[junaidahmed]

I had a look at your layout. You need to add an imageview to each panel.

You need to use .settopandBottom as well as setleftandright

PnlScanIn.SetTopAndBottom(10%y,50%y)
PnlScanIn.SetLeftAndRight(10%x,50%x)
PnlScanOut.SetLeftAndRight(51%x,91%x)
PnlScanOut.SetTopAndBottom(10%y,50%y)
LblScanin.SetLeftAndRight(10%x,30%x)
LblScanout.SetLeftAndRight(10%x,30%x)
LblConfig.SetLeftAndRight(10%x,30%x)
LblExit.SetLeftAndRight(10%x,30%x)

PnlConfig.SetLeftAndRight(10%x,50%x)
PnlConfig.SetTopAndBottom(51%y,91%y)
PnlExit.SetLeftAndRight(51%x,91%x)
PnlExit.SetTopAndBottom(51%y,91%y)

It would probably be better to create a card customview and use that on your main screen.

Can you provide example of card customview??

 

[Andrew (Digitwell)]

This uses a custom view I extracted from a working app. You can modify to your needs.

 

[junaidahmed]

T

This uses a custom view I extracted from a working app. You can modify to your needs.

Thanks for providing example code
Can you add animated text and animated image (with background color) like windows 8 tile

 

[Andrew (Digitwell)]

Can you add animated text and animated image (with background color) like windows 8 tile

Sorry, no. I'm happy to help but I'm not going to write all your code for you.

Adding background color is just using the color method on the panel/text.

There are examples on the forum of how to do animation. Such as,

Horizontal View Flip Animation

Hello everyone, i need to create a smooth horizontal flip animation for any view, i have something more or less working using ICOSFlip3DView library which works great, the only problem is that i would like the animation to be even, what I mean by even is that when the panel or imageview rotates...

www.b4x.com