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.
Related
I have a TextView that displays an error message beside 2 Buttons. They are currently inside a horizontal LinearLayout. The problem is if the TextView is too wide, the 2 Buttons will be pushed off the screen. Is it possible to push the elements downwards in those cases?
If the text is short there are no problems:
(Textview text) (Button1) (Button2)|(Edge of screen)
If the textview is long, I want to push the 2 buttons down a "row"
(Realllllllllllly long text that may|(Edge of screen)
span 2 lines)
(Button1) (Button2)|(Edge of screen)
I think you need to keep one more Linear layout below to your horizontal linear layout and need to check text size runtime if it's width is greater than required two button space then need to hide horizontal linear layout buttons and need to show below layout buttons
to refer how to check text size runtime refer below link :
Refer this link
Try this way: Use FlowLayout
<org.apmem.tools.layouts.FlowLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</org.apmem.tools.layouts.FlowLayout>
Inside FlowLayout you can put your view's and it will auto move to next line if not fit.
Yes you can do that, flexbox-layout is the solution.
How to use
Gradle dependency
dependencies {
implementation 'com.google.android:flexbox:0.3.2'
}
And xml code
<com.google.android.flexbox.FlexboxLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:flexWrap="wrap"
app:alignItems="stretch"
app:alignContent="stretch" >
<TextView
android:id="#+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_alignSelf="flex_end"
/>
</com.google.android.flexbox.FlexboxLayout>
There are few other attributes also [read documentation], which you can try and find what works more suitable in you case.
you can use the TextView predefined method, to gave validation to end user like this
TextView textView=(TextView)findViewById(R.id.text_view);
textView.setError("Your Text is very wide please provide short text");
setError put red mark on textview view, with that we can tell the end user. provided text is wide
So, i wanted to put an image in background of my screen. My problem is that if i just add the image to "background" it will fill all the screen, and my image gets defaced. I could put as an ImageView, but the problem is that i have an expandableListView in the same screen, and i wanted the image to stay behind, as a background.
Any idea how to do this?
Can have 2 solutions: Put as an imagemView but behind the list. Or add as a background but resize it. How can i do it?
Here is what happened:
He is what happens if i put the image as an imageView:
Yes this is very easy to achieve with relative layouts
<RelativeLayout ... >
<ImageView ...
android:layout_alignParentTop="true"
android:scaleType="centerCrop“ />
<ListView ...
android:layout_alignParentTop="true“ />
</RelativeLayout>
With a relative layout z-index is decided by the order you declare the tags, so stuff towards the bottom of the xml is in front of stuff from closer to the top, when they are in the same position.
Use a FrameLayout (Inside FrameLayout view written on top will appear on top and so on)
<FrameLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
></ListView>
<ImageView
android:layout_width="your_width_in_dp"
android:layout_height="your_height_in_dp"
/>
</FrameLayout>
You can also place FrameLayout inside another layout.
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.
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.
How can I get a LinearLayout (or any other ViewGroup) to assume the size of it's child views rather than assuming the size of the background image?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/large_image300x300pix">
<TextView android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world!"/>
</LinearLayout>
The linear layout becomes the same size as the background image.
How can I get my linear layout to assume the same size as the textview?
OK, so this thread is a little old, but I have a solution that someone might someday find useful. I think Android has problems scaling large images down, so the LinearLayout size ends up getting bumped by the background drawable bitmap, and the ImageView ends up forcing up the size of the parent container.
Unless you use a relative layout. You can make the ImageView relative to the position of the LinearLayout, even when the ImageView is behind the layout in the parent. My solution looks something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:src="#drawable/activation_popup"
android:scaleType="fitXY"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignTop="#+id/activation_layout"
android:layout_alignBottom="#id/activation_layout"
android:layout_alignLeft="#id/activation_layout"
android:layout_alignRight="#id/activation_layout"
android:contentDescription="#string/act_code_label" />
<LinearLayout
android:id="#id/activation_layout"
android:clipToPadding="true"
android:padding="25dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- LinearLayout wraps a bunch of smallish views here -->
</LinearLayout>
</RelativeLayout>
I tried this on a top of display sizes and OS versions, seems to work great. Note that the padding in the LinearLayout is a trick to make space for a shadow border in the background image graphic. The LinearLayout doesn't need any relative positioning because top left is assumed.
You can create a FrameLayout and put an ImageView and your LinearLayout there. So you'll be able to configure the layout of your background image.
This happens because the Android view calculates its minimum size based on its background drawable size.
Check my answer here in this another post which covers the same problem which will help you to achieve your layout configuration.
If your image lends itself to being converted to a scalable 9-patch image, then doing that would cause the background to scale around the TextView.
I believe the best solution here is to set android:clipToPadding="true". What this does is excludes the padding for the main layout and wraps your layout to its children.