How to overlay 2 imageviews specifying the position - android

I want to place 2 ImageViews, one above the other.
Here is an example with a square and a circle.
How can I do that? I know only in runtime what images to use, so I cannot specify them in an xml file.
Thank you in advance.

You can use FrameLayout to stack views on each other.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/img_green" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/img_red"/>
</FrameLayout>
then you may set android:layout_margin="" to properly position the ImageViews.
Note that the last child of FrameLayout is the top most visible view

You should specify their location inside the layout programmatically, this is not exactly what you are asking for, but you will get an idea of what you have to do :
How to create a RelativeLayout programmatically with two buttons one on top of the other?
Since absolute layout is deprecated you probably have to play with margins.

Related

Inserting many views into one layout without them overflowing to the end of the screen

I'm looking for a way that I can dynamically add views into a layout (currently a LinearLayout) and that they won't overflow into the end of the screen and be hidden.
I can't use ScrollViews since it has to look like one sentence (It's a "fill the blanks" question).
I'm just looking for an idea on how to do this, not the code itself.
Thanks in advance, Shay.
If you are using linear layout than use linear layout with weights:
For example:
You have a LinearLayout with vertical orientation and you have 2 ImageViews inside it and you want these ImageViews always to take equal space.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="vertical"
android:layout_gravity="center">
You can set the layout_weight of each ImageView to 1 and the weightSum in LinearLayout to 2 to achieve this.
<ImageView
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_height="0dp"/>
This will work correctly for any device without overflow into the end of the screen and be hidden

Setting "z-index" on LinearLayout on android

I am placing four image views on a vertical linear layout. I want them to ocuppy the same space, so I assign to each an android:layout_weight="1". I also want them to overlap (that is a design requeriment), so I set a negative margin for each view. The last image I add (#+id/floor_1st) is the last to be added (the one at the bottom), so it stays at the front. However, I want it to be the other way around: I want the first image on layout to be at the front followed by the second and so on (the last image shuld be at the back).
I understand that it is easier to control the order the images are placed using a RelativeLayout, but I do not know how to place the images the way I want using this layout. I have also seen that is possible to use the method bringToFront(), but that just do not let the images to overlap.
So, is there any way to place the images in the order I want using LinearLayout? Or should I use another layout? In this case, how should I place the images?
Here is my xml code
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/floors_container"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/overview_buttons_top_margin"
android:layout_marginBottom="#dimen/overview_buttons_bottom_margin"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/floor_4th"
android:src="#drawable/piso_4"
android:layout_weight="1"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="#dimen/floors_overview_margin_three_quarter"
android:clickable="true" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/floor_3rd"
android:src="#drawable/piso_3"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:layout_marginTop="#dimen/floors_overview_margin_quarter"
android:layout_marginBottom="#dimen/floors_overview_margin_half"
android:clickable="true" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/floor_2nd"
android:layout_gravity="center_horizontal"
android:src="#drawable/piso_2"
android:layout_weight="1"
android:layout_marginTop="#dimen/floors_overview_margin_half"
android:layout_marginBottom="#dimen/floors_overview_margin_quarter"
android:clickable="true" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/floor_1st"
android:src="#drawable/piso_1"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:layout_marginTop="#dimen/floors_overview_margin_three_quarter"
android:clickable="true" />
</LinearLayout>
Thanks.
If you want to reverse drawing order, you need to subclass the LinearLayout class and override getChildDrawingOrder.
#Override
protected int getChildDrawingOrder(int childCount, int i) {
//The standard implementation just retuns i
return childCount - i - 1;
}
Make sure to enable custom ordering somewhere:
setChildrenDrawingOrderEnabled(true);
For Android from Level 21, you can use view.setZ() http://developer.android.com/reference/android/view/View.html#Drawing
For Android level below 21, I suggest to use either FrameLayout or RelativeLayout combine with bringToFront() and/or negative padding, margin if required. For using of bringToFront() method, refer to this Defining Z order of views of RelativeLayout in Android
For achieving this kind of layout FrameLayout would be your best bet.
This layout is generally used for z-Index based structure(overlapping). Take a look about this class here :- FrameLayout .
And here is one link which shows its use :- Example Given.
You can find other links too demonstrating its use.
Hope it helps,
Thanks.

Android Centering the content

I'm a total beginner in Android layout, but I want to center the content vertically and horizontally.
So this book I'm reading says this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/background"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:padding="30dip"
android:orientation="horizontal" >
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_gravity="center" >
...component.. etc...
This works and I think i get it, except Eclipse says:
This linearlayout or its parent is useless; transfer the background
attribute to the other view
But I do not understand this?
This linearlayout or its parent is useless; transfer the background
attribute to the other view
means that you can manage the entire layout by the parent it self, you are unnecessarily adding another LinearLayout which can degrade the layout performance
You can use android:gravity="center" instead of android:layout_gravity="center" which a child supplies to its parent.
Solution
you can combine your linear layouts as
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/background"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center"
android:padding="30dip"
>
add android:background parameter in both LinearLayout
This linearlayout or its parent is useless; transfer the background
attribute to the other view
This is a warning triggered when any Layout has only one child which is also a Layout. In your case LinearLayout. In these cases one of other can be removed without any problems. It is recommended to remove these redundant layouts. It is.. as it says just a warning, it wont cause any exception, but if you remove that redundant layout that will help improve overall performance
You should share your full code so that everyone get the whole scenario of your problem. Any way you can follow three way to do the things.
Approach One :
android:layout_centerInParent="true"
Above code will make your layout center horizontally and vertically.
Approach two :
And if you want to do individually.(May be needs sometimes)
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
Approach three :
android:gravity="center" (Though I see you have used. May be you have missed any point inside code).
Hope this will help you. Happy coding.

Overlap views in android?

I have a linearlayout which have a textbox(multiline, nearly 5 lines) and image view. Is it possible to draw a image on textview(overlapping)?
Note: I have to specify the coordinates of the image, which are not static, and may be anywhere above text.
Something like this mockup:
I think it can be achieved using RelativeLayout.
<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" >
<TextView
android:id="#+id/Textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="#string/Text2display"
android:textColor="#EEDCAA" />
<ImageView
android:id="#+id/choose_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="-46dp"
android:adjustViewBounds="true"
android:contentDescription="#string/description_logo"
android:src="#drawable/user2" />
</RelativeLayout>
By placing the TextView block above the ImageView, it ensures that the image view overlaps the TextView. Now, based on your requirements and position, use the following commands from the link :-
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
You can align left right, top and bottom. Use negative values to navigate the ImageView, if ur using align bottom and stuff.. This will make it to overlap. Please let me know if this was helpful
Is there any specific reason for Linear Layout?
You can do this easily using RelativeLayout . You can have an ImageView overlapping TextView Unless there is a specific reason for using LinearLayout .
If you really (really) need to use LinearLayout, you can subclass TextView and override onDraw to draw your image.
In all your xml files, should define the background color for it, it will solve the problem :
Add this android:background="#android:color/black" in to the View tag you defined.

android:layout_gravity effect in main.xml?

I have 4 buttons in a horizontal linear layout. I'd like the right edge of the 4th button to align with the right edge of the linear layout (equal to screen width) I've tried using android:layout_gravity="right" but it doesn't work - the right button is to the right of the 3rd one but not right aligned . Am I missing something obvious?
main.xml with only the relevant layout params only is:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_height="fill_parent"
android:layout_width="wrap_content">
<Button SAME LAYOUT AS BUTTON 1>
<Button SAME LAYOUT AS BUTTON 1>
<Button
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_gravity="right" />
</LinearLayout>
</LinearLayout>
This doesn't seem to match the stated behaviour for layout_gravity in the SDK reference :"Defines how to place the view, both its x- and y-axis, within its parent view group."
I know this isn't really the proper answer to your question, but you should really consider using RelativeLayout instead of LinearLayout. It scales better to different phone screen resolutions, and you can place the buttons in the correct order by using the layout_toRightOf and layout_alignParentRight attributes in your XML (or layout_above, layout_alignParentTop, etc.). Using gravity in a linear layout won't really behave as you expect because Android is still attempting to place the widgets in a fixed position.
RelativeLayout is a bit more of a pain to get working than LinearLayout, but it's worth the trouble and is also the one which Google recommends using. Once you get the hang of it, they are very convenient to work with.

Categories

Resources