Develop Reference

Android Studio: Images behind other images

What I am trying to do seems very basic in theory, but cannot find any information on this on the web. I have a series of clickable imagebuttons, containing images. I would like it so that when a user clicks on one of these imagebuttons, it becomes highlighted with a simple border.
To achieve this, I have created a basic solid-colour 62x62 pixel image and wish to place it -behind- my original 60x60 imagebutton. This will create the illusion of a border. My plan is to set it to non-visible by default and then have the code set it to visible on click. Sounds straight-forward.
However, in my layout, the solid-colour image always sits on top of the original image, and I cannot find any way of sending it behind. I would rather not do this in code, I am sure this is a layout issue (but will set it in code if I absolutely must).
Relevant section of layout, where the ImageView needs to sit behind the player 1 ImageButton:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="20dp"
android:paddingBottom="20dp" tools:context=".MainActivity"
android:id="#+id/Form_PlayerSelection"
android:background="#drawable/dark_wood">
<ImageButton
android:id="#+id/btnPlayer1"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/player_blank"
android:adjustViewBounds="false"
android:clickable="true"
android:cropToPadding="false"
android:padding="0dp"
android:scaleType="fitXY"
android:layout_marginLeft="15dp"
android:layout_marginTop="50dp" />
<ImageView
android:id="#+id/p1border"
android:layout_width="62dp"
android:layout_height="62dp"
android:src="#drawable/selectborder"
android:clickable="false"
android:cropToPadding="false"
android:padding="0dp"
android:scaleType="fitXY"
android:layout_marginLeft="13dp"
android:layout_marginTop="48dp"/>
<ImageButton
android:id="#+id/btnPlayer2"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/player_blank"
android:adjustViewBounds="false"
android:clickable="true"
android:cropToPadding="false"
android:padding="1dp"
android:scaleType="fitXY"
android:layout_marginLeft="85dp"
android:layout_marginTop="50dp" />
</RelativeLayout>

Each child is added in order and to the top of the ViewGroup. So, the bottom element should be your first child.

Android: How to align images depending on size of another image? (Controller consisting of 4 buttons)

I have 4 image buttons which should be aligned like this:
As you can see they overlap, so I can't use a simple table layout, because of "collapsing" table rows. My attempt was to use transparent images among those image buttons while I used nested and overlapping LinearLayouts to align them. With this attempt I don't have to worry about density related calculations. This seemed to work in the first place, but unfortunately one of the invisible buttons overlays the real image buttons, so I can't click at least one image button anymore, because it's like clicking the invisible button, overlaying the real image button.
Another difficulty is that I can't use density related alignments within the xml file. The reason is that these image buttons are scaled in a different way than other scaled images. This is because these image buttons should always be as big as a thumbnail despite of a phone or a tablet. So the usual alignment with margin is not applicable here.
I think the only way to achieve this is to calculate it programmatically. Or any other ideas?

Here's my version (less Views), based on my original tip:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/controller_container"
android:layout_width="240dp"
android:layout_height="240dp"
>
<ImageButton
android:id="#+id/button_invisible_center"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerInParent="true"
android:contentDescription="button_invisible"
android:visibility="invisible"
/>
<ImageButton
android:id="#+id/button_left"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_toLeftOf="#id/button_invisible_center"
android:layout_alignTop="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_left"
/>
<ImageButton
android:id="#+id/button_up"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_above="#id/button_invisible_center"
android:layout_alignLeft="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up"
/>
<ImageButton
android:id="#+id/button_right"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_toRightOf="#id/button_invisible_center"
android:layout_alignTop="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up"
/>
<ImageButton
android:id="#+id/button_down"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="#id/button_invisible_center"
android:layout_alignLeft="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_down"
/>
</RelativeLayout>
The result is:
I re-arranged the Views in order to minimize their count and therefore increase performances, being the layout lighter.
What was the trick? wrap_content in the container, shrunk everything to the center, whyle match_parent (which worked perfectly) was just out of specifics.
So I gave the buttons fixed sizes 80*80 dp and the container 3 times 80 dp (maximum combined width and height).
The image I used is't "cut out", so it better illustrates the concept.
Enjoy!
[EDIT]
In your case, this part
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
is not needed. Just replace it with
<RelativeLayout
since it's meant to be placed inside another container.

Now I have a solution due to Golem's tip although it doesn't work with just one centered invisible item. I had to place invisible buttons left of "up", right of "up", left of "down" and in the center where one button has 100x100dp, the invisible side buttons have 80x80dp and the invisible center button has 60x60dp. If you know any better, let me know.
<RelativeLayout
android:id="#+id/controller_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left" >
<ImageButton
android:id="#+id/button_invisible_top_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_control_invisible_side"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_invisible_top_left"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up" />
<ImageButton
android:id="#+id/button_invisible_top_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_up"
android:background="#drawable/button_control_invisible_side"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/button_invisible_top_left"
android:background="#drawable/button_control"
android:contentDescription="#string/button_left" />
<ImageButton
android:id="#+id/button_invisible_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_left"
android:layout_below="#id/button_up"
android:background="#drawable/button_control_invisible_center"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_invisible_center"
android:layout_below="#id/button_invisible_top_right"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up" />
<ImageButton
android:id="#+id/button_invisible_bottom_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/button_left"
android:background="#drawable/button_control_invisible_side"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_invisible_bottom_left"
android:layout_below="#id/button_invisible_center"
android:layout_alignBottom="#id/button_invisible_bottom_left"
android:background="#drawable/button_control"
android:contentDescription="#string/button_down" />
</RelativeLayout>

How can I evenly space my ImageViews in a RelativeLayout

I had a Android application built in which I had 3 ImageViews placed horizontally across a LinearLayout, they were placed with a android:layout_width="0dp" and android:layout_weight="1" such that they had an even spread in the layout.
Now I have to switch to use a RelativeLayout (because I want to overlap another image and that can't be done with a LinearLayout) so I want to start with replicating the same effect of having the 3 ImageViews evenly spread/scaled across the parent layout, but I'm not sure how to achieve this.
I feel like I need to make use of the android:scaleType... maybe center crop:
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
Which sounds good but I can't seem to get it to work right... Any thoughts on how I would achieve this even spread of ImageViews across my RelativeLayout?
Snippet of code right now:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="wrap_content"
android:tag="circle"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/circle" />
<ImageView
android:id="#+id/dragsquare"
android:layout_width="wrap_content"
android:tag="square"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/dragcircle"
android:adjustViewBounds="false"
android:src="#drawable/square" />
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="wrap_content"
android:tag="triangle"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/dragsquare"
android:adjustViewBounds="false"
android:src="#drawable/triangle" />
Note: I can't find a question with the same constraints as this one on SO. There are a number of questions like:
Android: how evenly space components within RelativeLayout?
and
android RelativeLayout, equal spacing?
But if you check out the details you'll see that they are people who have not considered the LinearLayout as an option for equal spacing and switching layout types ends up being the solution. I have, I was using it, but it does not work for me because I need to overlap an image:
Note the example, I have 3 ImageViews with basic shapes, but I also have a 4th ImageView (it starts hidden) which is overlapping the middle one. This is why I must use a RelativeLayout

I think you're going to want to go back to your original LinearLayout to meet all of your needs here.
If the size of your fourth image must match one of your existing image then either you'd want to create a resource that is a composite of the two images to swap to when it needs to be overlaid or replace your center ImageView with a RelativeLayout or FrameLayout that contains the ImageView. When you need to add the fourth image, add it to that layout.
Something like:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="circle"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/circle" />
<FrameLayout
android:id="#+id/centerimagewrapper"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/dragsquare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:tag="square"
android:src="#drawable/square" />
<ImageView
android:id="#+id/arrow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/arrow"
android:visibility="invisible" />
</FrameLayout>
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="triangle"
android:layout_height="wrap_content"
android:src="#drawable/triangle" />

You could hide the icon you want to place on existing images and keep your previous LinearLayout to achieve this. Each component of your LinearLayout would be a custom layout (inflated):
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
>
<ImageView
android:id="#+id/img"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:src="img1_src"
/>
<ImageView
android:id="#+id/imgOverlap"
android:layout_width="50dip"
android:layout_height="50dip"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:src="img2_src"
android:visibility="gone"
/>
</RelativeLayout>
It appears not possible to use "layout_weight" in a RelativeLayout.
You could also consider a GridView and set its number of columns; each item of the GridView would be the inflated layout above.

you could also do it programatically and tell them to be 33% of the screen width. Look at DisplayMetrics and the attributes of each ImageView if you want to achieve this.

Try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:scaleType="fitXY"
android:src="#drawable/circle"
android:tag="circle" />
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/triangle"
android:scaleType="fitXY"
android:tag="triangle" />
<ImageView
android:id="#+id/dragsquare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/dragtriangle"
android:layout_toRightOf="#id/dragcircle"
android:src="#drawable/square"
android:scaleType="fitXY"
android:tag="square" />
</RelativeLayout>

How do you layer imageViews in an android application?

I'm trying to create my first real Android app, the code seems easy enough, but the layout is giving me problems.
My app will be a drag and drop application, very simple, just drag shapes to the correct place in the "puzzle". Here's an example of how it looks right now:
What I have currently is 4 ImageViews, one for the "empty puzzle" at the top, then 1 for each of the shapes below. I think the correct way to do this is to have each of the empty spots in the puzzle be an ImageView (what the arrow is pointing to, for example, should be an ImageView)
If I am correct on this, I need to "layer" ImageViews, put 3 "empty shape" image views over the "puzzle" image view at the top. The problem is I can't find any examples or suggestions for this anywhere online. So my questions are:
Does it make sense to have 3 ImageViews sitting on top of a "background" ImageView, or is there a more correct way to do this?
If I'm heading in the right direction, could someone explain/examplify how one builds ImageView layers?
XML for my current screen:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/emptyPuz"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/EmptyPuzzle" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizantal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:src="#drawable/Circle" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:src="#drawable/Square" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:src="#drawable/Triangle" />
</LinearLayout>
</LinearLayout>

The solution I ended up using was to add a new LinearLayout with the background set to a "puzzle base" image and added three new images with "empty puzzle" pieces on it. Ie: I broke up each of the 3 "empty" puzzle slots into individual images like in this example:
Then used them as backgrounds to a new layout, so where I had this code before:
<ImageView
android:id="#+id/emptyPuz"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/EmptyPuzzle" />
I now have:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/emptypuzzle"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dropsquare"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="square"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:src="#drawable/emptysquare" />
<ImageView
android:id="#+id/droptriangle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="triangle"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:src="#drawable/emptytriangle" />
<ImageView
android:id="#+id/dropcircle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="circle"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:src="#drawable/emptycircle" />
</LinearLayout>
Ending with a resultant drag and drop game looking like:
It's not pretty, but my toddler likes it. :)

How to achieve this kind of layout in Android

I'm new to Android development and I'm trying to achieve a layout for my app that is capable of handling different screen resolutions/ratios.
I've been reading a lot of the documentation and questions on this site to try to understand the basics and concepts.
First I went through:
developer.android.com/guide/practices/screens_support.html
And questions like:
stackoverflow.com/questions/6403619/how-to-support-all-the-different-resolutions-of-android-products
I've got a pretty basic idea on how to handle things out. But still, its pretty difficult for a starter to get going, and I found myself stucked trying to achieve the solution I came up with.
I designed my app to a target resolution of 480x800, and set it up to always show in portrait mode.
This is how it looks like and how I understand it should work (I used Waldo for the sake of example haha):
(sorry for the link, I need 10 rep to post images)
http://i.imgur.com/KXTAXir.jpg
My root Layout is a LinearLayout, wich contains 3 other Layouts being A and C set up to a weight of 0.8 while B is at 8.4. This is all fine, but the contents of B are set up to DP units at the moment just to be able to test.
B consists of a frame Layout who has 3 other Layouts inside, where 2 of them are working fine, and shown only when needed. The problem is that I need B to be able to adapt based on the contents of it first child: a LinearLayout wich contains 2 ImageView and 1 ProgressBar. I need that those ImageView always keep their ratio.
Here is an example of how it should work:
http://i.imgur.com/cH7fUze.jpg
Imagine those 4 are real screens, wich vary in ratio and size. So my app should only adapt B (from my first image) to keep the images original ratio.
Here is the layout code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkgray"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="LEVEL"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/level_text_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="SCORE"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/level_text_clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="01:59"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8.4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="1000"
android:progress="0" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
</LinearLayout>
<RelativeLayout
android:id="#+id/pauseMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:visibility="gone" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/gameoverMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:visibility="gone" >
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="0/0"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="useHint" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button1"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="toggleSound" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button2"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="togglePause" />
</RelativeLayout>
The last thing that stays unclear to me is how to handle the text and button sizes. Should I set them in DPs? How do I get them to scale accordingly like it can be seen on the bottom of my second picture.
Thank you for your help, I also want this to serve as an example to others that are having trouble to understand how to handle this kind of scenarios.

I'm not sure, if I got your question right.
However, you can specify different layouts for different screen sizes and orientations, as described here: http://developer.android.com/guide/practices/screens_support.html
Just give the respective suffix in the name of your layout XML file.

I ended up creating a custom View for my images. The view calculates the space thats left on its parent, scales the images manually and then resizes itself to the same size of the resulting image.
To resize the progress bar to have the same width as the images, I used a custom listener that gets triggered when my custom views get resized. Then I resize the progressbar to match their width.
With this I achieved what I wanted, a layout that will work perfectly in all screen sizes.