Develop Reference

Adding Views Between Items in GridView

I have a scrollable GridView where the items have a decent amount of empty space between them. for some of the objects in the grid, I'd like to add arrow images leading from one to the other
For reference to what I mean, think of the World of Warcraft talent trees (http://calculators.iradei.eu/talents/mage). You'll see some of the talents have arrows leading from one item to the next.
The layout I'm dealing with just contains a gridview in a framelayout, nothing else
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="4"
android:scrollbars="none"
android:id="#+id/talent_tree_grid_view">
</GridView>
</FrameLayout>
I'm trying to add these ImageViews in code, as I don't think there is any way I could add this logic into the adapter for the GridView.
I've tried adding them as children of the parent FrameLayout, based on the x and y coords of the GridView items, and this works, but when scrolling the GridView, the arrows do not also scroll
I've also tried adding them directly as children of the GridView, but it does not support this behavior (it throws java.lang.UnsupportedOperationException)
Are there any ideas as to how I could add these imageviews between the gridview items?

This sounds very similar to Romain Guy's "Shelves" app where a custom GridView is used and the background image of a bookshelf scrolls. Take a look at the project here. Source for the custom GridView can be found in the file ShelvesView.java in the source code. A quick intro from Guy Romain is here;
For the arrows, you may want to consider a 9-patch drawable.
I have investigated the above approach a little more and have a sample app based upon
Google's Hello GridView example.
Taking this example app, I have built a custom GridView (DogsGridView.java) and connected the photos across empty cells similar to your example of World of Warcraft talent trees. I just use simple lines, but the class can be modified to connect cells with arrows or another graphic.
Here is a quick video with connecting lines. Here is another with 9-patch arrows.
The project source can be found here.

How to make the Eclipse Android layout editor expand in height?

I've been playing around with Android lately and I've run into a problem building UIs. More precisely, I'm pretty sure when I was building the first layout, the layout editor in Eclipse adjusted the visible area so when I added new widgets, it stretched in height to display them.
Now I have a problem that whenever the widgets fill the area, it's impossible for me to properly lay them out since the preview window displays only the height of a single screen, even if it's a simple LinearLayout with a bunch of textviews to fill about 2 screen heights.
Also, I'm using the latest stable Eclipse and ADT plugin, target platform is 2.2.
EDIT
What I meant was that the editor doesn't display the elements that don't fit inside a single screen height and clips the stuff (see the image to see how it clips, there are actually 2 more textviews that are clipped totally) which makes impossible to build UIs that are taller that a single screen height.

That's normal there is a clipping occuring. I just tested it on my eclipse and I have the same behavior than you.
If what you want to achieve is creating a layout bigger than your screen size, you should use scroll views (and insert your initial layout in it):
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
isScrollContainer="true" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/exampleView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
...
Once in scroll mode, the layout will auto adjust.

Try this:
Hope this helps. If this hasn't solved your problem, then please explain your question again in different words, because that's how I understood it.

android best layout to display image button that will fills the screen

what's the best layout to use to display a series of image button, side by side (as displayed in attached image), and that will fills the screen horizontally when the orientation changes to horizontal (as attached)?
horizontal orientation http://img254.imageshack.us/img254/657/layoutxs.png
vertical orientation http://img208.imageshack.us/img208/2428/layouthy.png

<GridView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="auto_fit" >
</GridView>

It looks like you want to use something like FlowLayout, which doesn't exist in Android. You can make your own, however. More information
How can I do something like a FlowLayout in Android?
http://nishantvnair.wordpress.com/2010/09/28/flowlayout-in-android/
I have an activity with a layout similar to yours, but I use a different method. What I do is define a different xml layout for landscape and portrait. So I have layout-port/mylayout.xml and layout-land/mylayout.xml and the system determines which one the activity should use.

just create two separate layout files and call setContentView() in your onOrientationChanged().

Android custom gridview layout (textview with imageview on top)

I'm trying to work out how to create the layout for a gridview for my game. I have a gridview which will be the level selector. At the moment I have each gridview item as a TextView, just showing the Level Number (1, 2, 3, etc).
I would like to add 3 imageviews over the top of the textview and be able to manipulate the image shown in the views. The 3 image views are stars, showing what difficulty the level was completed on.
I figure I need to write my own Adapter and inflate the XML layout when creating the views for the grid items but I'm stuck with how to create the actual layout for this, the overlapping part has me scratching my head?
Here's a mockup of what I've tried to describe, and what I want to create:
PS. I know I could use 4 images and set the textview background to one of those images but I wondered if there was a more technical way of creating the layout.

I would use a relative view!
The basics would be, define your button background Bitmap/Drawable with the #1 on it, and then, for each button, have a layout with the copper, silver and gold stars. You can use android:layout_alignParentLeft="true" and android:layout_alignParentBottom="true" on the Copper start and base the other alignments off of that one. Then you just set the stars drawable based on if the star is toggled on or of.
I'm going to use rough psuedo code here:
<RelativeLayout android:id="button1">
<ImageView android:id="copper_star" android:layout_alignParentLeft="true" android:layout_alignParentBottom="true" />
<ImageView android:id="silver_star" android:layout_alignParentBottom="true" android:layout_rightOf="#id/copper_star"/>
...etc...
</RelativeLayout>
Once you've got it looking the way you want, you can see this discussion by Mark Murphy. He explains how to set the properties of a button to do what you'd like.

I went with the un-technical 4 images in the end, it was simple and easy and there aren't any issues scrolling through the grid so it's all good.

Overlapping Views in Android

Is it possible to have overlapping views in Android? I would like to have an ImageView with a transparent png in the front and another view in the background.
edit:
This is what I have at the moment, the problem is that the image in the imageView is not transparent, the parts that should be transparent are just black.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/gallerylayout"
>
<Gallery android:id="#+id/overview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ImageView android:id="#+id/navigmaske"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/navigmask"
/>
</RelativeLayout>
edit:
I got it to work, it was a theme file from another programmer on the team.
Just changed this
<item name="android:background">#FF000000</item>
to this
<item name="android:background">#00000000</item>

Android handles transparency across views and drawables (including PNG images) natively, so the scenario you describe (a partially transparent ImageView in front of a Gallery) is certainly possible.
If you're having problems it may be related to either the layout or your image. I've replicated the layout you describe and successfully achieved the effect you're after. Here's the exact layout I used.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gallerylayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Gallery
android:id="#+id/overview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ImageView
android:id="#+id/navigmaske"
android:background="#0000"
android:src="#drawable/navigmask"
android:scaleType="fitXY"
android:layout_alignTop="#id/overview"
android:layout_alignBottom="#id/overview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
Note that I've changed the parent RelativeLayout to a height and width of fill_parent as is generally what you want for a main Activity. Then I've aligned the top and bottom of the ImageView to the top and bottom of the Gallery to ensure it's centered in front of it.
I've also explicitly set the background of the ImageView to be transparent.
As for the image drawable itself, if you put the PNG file somewhere for me to look at I can use it in my project and see if it's responsible.

Also, take a look at FrameLayout, that's how the Camera's Gallery application implements the Zoom buttons overlay.

If you want to add your custom Overlay screen on Layout, you can create a Custom Linear Layout and get control of drawing and key events. You can my tutorial- Overlay on Android Layout-
http://prasanta-paul.blogspot.com/2010/08/overlay-on-android-layout.html

The simples way arround is to put -40dp margin at the buttom of the top imageview

A visible gallery changes visibility which is how you get the gallery over other view overlaps. the Home sample app has some good examples of this technique.

Now with Jetpack Compose in android, you should use Box for overlapping views.
Example.
Box(modifier = Modifier.fillMaxWidth().fillMaxHeight()){
RecipesList(viewModel.recipes.value)
Snackbar()
}
Here RecipesList and Snackbar are composabes positioned one on top of the other in the composition order
Check out this for Jetpack Compose samples - https://androidlearnersite.wordpress.com/2021/08/03/jetpack-compose-1-0-0-sample-codes/

Yes, that is possible. The challenge, however, is to do their layout properly. The easiest way to do it would be to have an AbsoluteLayout and then put the two images where you want them to be. You don't need to do anything special for the transparent png except having it added later to the layout.