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.

Using RelativeLayout, LinearLayout and layout_weight at the same time - weird behaviour

I've got an activity layout specified in an XML file - activity_intro.xml - and I'm trying to create another one that is similar but slightly different - that's going to be activity_instructions.xml.
The Intro activity has a 9patch image at the bottom of the screen that is supposed to stay there and only adjust to different widths of the screens.
The Instructions activity is supposed to contain the same image but above 2 more buttons - all three of these views need to be always located at the bottom of the screen.
activity_intro.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/introAnimationImageView"
android:layout_width="152dip"
android:layout_height="176dip"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/intro_animation_content_description"
android:src="#drawable/animation_intro01" />
<TextView
android:id="#+id/introTextViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_title"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/introTextViewSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_subtitle"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/introButtonLoginSignup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/intro_button_label_login_signup" />
<Button
android:id="#+id/introButtonInstructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/introButtonLoginSignup"
android:text="#string/intro_button_label_instructions" />
<Button
android:id="#+id/introButtonReportAnonymously"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/introButtonLoginSignup"
android:layout_centerHorizontal="true"
android:text="#string/intro_button_label_report_anonymously" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:contentDescription="#null"
android:scaleType="fitXY"
android:src="#drawable/footer_cityscape" />
</LinearLayout>
Result:
Since I've got working code for Intro, I wanted to make Instructions follow its example but the layout_weight property isn't behaving as expected. First of all, I was only trying to put in the 2 buttons and leave out the image:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="0.1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/instructionsTextViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/instructions_title_1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
<ImageView
android:id="#+id/instructionsImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/instructions_image_content_description"
android:src="#drawable/forms" />
<TextView
android:id="#+id/instructionsTextViewDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/instructions_description_1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/instructionsButtonPrevious"
style="#style/ButtonPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/instructions_button_label_previous" />
<Button
android:id="#+id/instructionsButtonNext"
style="#style/ButtonNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/instructions_button_label_next" />
</RelativeLayout>
</LinearLayout>
This only worked when I set the layout_weight of the bottom RelativeLayout to 1 (instead of 0) and for the ScrollView 0.1 (instead of 1). If I used the original values the RelativeLayout would take up all the screen. Could anyone explain to me why that is?
I also tried googling the issue and noticed people would suggest to set layout_height to 0dip which I tried but it also didn't work as expected.
Secondly, I tried adding the already mentioned ImageView to the bottom RelativeLayout. This, however, basically displays only the ImageView and not the buttons - or one of the buttons is on top of the image (hiding it). Why is that? Don't I specifically set the buttons to be placed below it?
What should the code look like in order for it to be doing what I expect it?
Further explanation:
Below are images that should help indicate what exactly I want to achieve. The green bits are the ScrollViews - I added them because Android devices tend to have diverse screen sizes. Their purpose is to present the content properly independently of the screen size, i.e. if the screen is small, the user will be able to scroll that part to read the entire text and view the image.
The red bit on the left (Intro) shows the ImageView that is supposed to always be at the bottom of the screen; it'll always be there, visible, and it's the green bit above it that will be movable.
If you take a look at the red bit on the right (Instructions), there's a Next button that's covering the image with the lorry/truck that was visible in the Intro screenshot. Now that's wrong - there should be 2 buttons BELOW the image, as seen on the last screenshot (the 2 blue rectangles).

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 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.

Unable to specify the alignComponent for an ImageButton

I'm trying to set my TextView to the left of an ImageButton, but I can't seems to find this option.
I was expecting to use something like android:layout_alignLeft, but this option is missing.
I've tried to google the issue, but couldn't find any relative results.
Without it my TextView overlaps the ImageButton and I want to avoid it.
UPDATE
The full xml code is too complex, but here is the important part of it:
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:background="#color/white"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="#+id/frameLayoutBalanceClosed">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/button_edit_nickname"
android:id="#+id/card_closed_control_editNickname" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/card_closed_description_nickname"
android:layout_margin="8dp" android:layout_gravity="left"/>
</FrameLayout>

I think what you need is a RelativeLayout. You can specify your TextView to the left of your ImageView with it's specifications. Your code would look something like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/imagebutton1" />
<ImageButton
android:id="#+id/imagebutton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
The reason FrameLayout isn't working is because it's purpose is to overlay items on top of each other, which wouldn't work at all!
If that isn't what you're looking for, you could also use a TableLayout in which items are arranged in columns.