I had saw many ways to align a textview with an imageview, but I didn´t find how to make when the text is bigger than the image, and when you want that text occupy all the parent layout. My layout is this:
<RelativeLayout
android:id="#+id/accordion_toogle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone">
<ImageView
android:id="#+id/accordion_image"
android:layout_width="#dimen/accor_img_wid"
android:layout_height="#dimen/accor_img_hei" />
<TextView
android:id="#+id/accordion_msg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/accordion_image"
android:paddingLeft="5dp"/>
</RelativeLayout>
In this case, assuming that the image occupy the half of the RelativeLayout, the accordion_msg continues to occupy the half of the relativeLayout once the imageView finish.
Do you understand me?? Have I expressed well?? Any suggestion??
Thank you.
EDIT
A picture to help what I try to do:
The pink square is the picture, the purple and white rectangles are where the text must to be, but until now, the purple is empty. The text only occupy the white square.
EDIT 2
I am trying what #Elltz says... but I cannot make what I want, I have this code:
draw.setBounds(0, 0, width, height); //width: 128 height: 172 in this case
textview.setCompoundDrawablesRelative(draw, null, null, null);
But no image is shown, I try other many things, like:
textview.setCompoundDrawablesRelative(null, draw, null, null);
And the image stays on the top of the text. Other diferent this I tried was:
textview.setCompoundDrawables(draw, null, null, null);
And the image is on the left... but it is vertically align at center, and top and bottom of image are blank (no text, no picture... no nothing). I try changing the parent to LinearLayout, using gravity left, gravity top, RelativeLayout...
Oooppsss!!! now the layout is this:
<RelativeLayout
android:id="#+id/accordion_toogle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone">
<TextView
android:id="#+id/accordion_msg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/accordion_image"
android:paddingLeft="5dp"/>
</RelativeLayout>
*The visibility gone on the parent is not important, I change it programmatically.
Thank you.
Ok... after a hard job of experimentation, searching-> attempting-> failing-> searching-> attempting-> failing-> searching-> attempting-> success ;)
In this stack question #K_Anas gives the solution... I will type what I do for the next case on this situation (Furthermore, it is possible process a link on the text, resolving it with Html.fromHtml and preserving the link property after the SpannableString):
The Layout
<RelativeLayout
android:id="#+id/accordion_toogle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
android:visibility="gone"
android:gravity="top">
<ImageView
android:id="#+id/accordion_image"
android:layout_width="#dimen/img_width"
android:layout_height="#dimen/img_height"
android:src="#drawable/default_image"/>
<TextView
android:id="#+id/accordion_msg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"/>
</RelativeLayout>
The Java code
final TextView msgView = (TextView)view_aux.findViewById(R.id.accordion_msg);
String msg_text = dbStructure.getMsg();
if(msg_text.contains("href=\"")) {
String[] msg_aux = msg_text.split("href=\"");
if (!msg_aux[1].toLowerCase().startsWith("http"))
msg_aux[1] = "http://" + msg_aux[1];
msg_text = msg_aux[0] + "\"href=\"" + msg_aux[1];
}
msgView.setText(Html.fromHtml(msg_text));
msgView.setMovementMethod(LinkMovementMethod.getInstance());
int lines = (int)Math.round(height / msgView.getLineHeight());
SpannableString ss = new SpannableString(msgView.getText());
ss.setSpan(new MyLeadingMarginSpan2(lines, width+10), 0, ss.length(), 0);
msgView.setText(ss);
In this case the width and height are the meassures of the ImageView.
Related
Background
Suppose I want to show an image of the something using an ImageView, and I want to put new views on top of it (animated ImageViews that show pins on a world map image, for example, or a Switch view on top of a smartphone image).
This means that no matter how the ImageView shows the image, the views should be in it, inside correct spot, with the same size as specified, or in a size related to the imageView itself
The problem
As opposed to other views, the ImageView can have a certain size, but its content is something else (to keep aspect ratio).
What I tried
I tried to use ConstraintLayout, but this can't really help, because the ImageView can change its size (for example when changing orientation), and thus ruining the position I've given the views compared to the ImageView.
I've found some libraries that can handle a similar thing (like here) and I even asked a similar question before (here), but all those solutions are for a static image within the ImageView, yet what I search for is adding a view on top of an ImageView.
The question
How do I put the views on top of the ImageView's content correctly?
How do I also scale the views down/up compared to the size of the ImageView's content ?
Can ConstraintLayout be used to change the scale of the views according to the ImageView's size ?
Make FrameLayout with wrap_content around ImageView. Then you could set SwitchView on top of ImageView. You could align it to center, side or corners and using margins to get some fine position.
It still won't scale with image, but you can get pretty good results. If that doesn't fit you, you can programatically get width/height of ImageView and alter position (or margins) of SwitchView accordingly.
With below you can manage width of switch or any other view as per image view width
android:layout_alignLeft="#+id/imageView"
android:layout_alignRight="#+id/imageView"
<Switch
android:id="#+id/swi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView"
android:layout_alignRight="#+id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/swi"
android:src="#drawable/download" />
In Java,
ImageView imgView = (ImageView) findViewById(R.id.imageView);
imageView.setBackgroundResource(R.drawable.yourDrawable);
int width = imgView.getDrawable().getIntrinsicWidth();
Switch switchKey = (Switch) findViewById(R.id.switchKey);
switchKey.setMinimumWidth(width);
And in XML, align it with alignLeft and alignRight with ImageView.
As far as i get it, you need the image size displayed inside the image view and set that as the max width of your switch view right?
You need both Java and XML for this,
The XML file is basically as RelativeLayout with the view stacked as needed.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/nonet_icon"
android:id="#+id/iconView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:visibility="gone"
android:layout_centerInParent="true"
android:layout_height="wrap_content"
android:id="#+id/switchView"/>
</RelativeLayout>
And the Java Code gets the imageWidth and sets it to the SwitchView.
mSwitchCompat.setVisibility(View.VISIBLE);
// 20% x 25% of Content in ImageView
final float x = mImageView.getDrawable().getIntrinsicWidth()*.2f;
final float y = mImageView.getDrawable().getIntrinsicHeight()*.25f;
// waiting for the view to be drawn
mSwitchCompat.post(new Runnable() {
#Override
public void run() {
// scale current view W.r.t. x and y values
mSwitchCompat.setScaleX((float)mSwitchCompat.getWidth()/x);
mSwitchCompat.setScaleY((float)mSwitchCompat.getHeight()/y);
}
});
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
WindowManager.LayoutParams.WRAP_CONTENT);
// 30% x 35% of content, for location
int xMargin = Math.round(mImageView.getDrawable().getIntrinsicWidth()*.3f);
int yMargin = Math.round(mImageView.getDrawable().getIntrinsicHeight()*.35f);
// set margin values, can optionally add for top and bottom
layoutParams.setMargins(xMargin,0,yMargin,0);
mSwitchCompat.setLayoutParams(layoutParams);
Ref: Getting Displayed image size of an ImageView
Trying to get the display size of an image in an ImageView
Ref: Dynamic size values
Do comment if you need a detailed explaination.
Example: Check this image!
Scaled View on Image: Scaled View on Image!
You can use MarginLayoutParams with Relative Layout to set left and top position in ImageView.
image = (ImageView) findViewById(R.id.imageID);
MarginLayoutParams marginParams = new MarginLayoutParams(image.getLayoutParams());
marginParams.setMargins(left_margin, top_margin, right_margin, bottom_margin);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(marginParams);
image.setLayoutParams(layoutParams);
find complete information for this in below link :
MarginLayoutParams
Try this, may be it will help you.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/semi_transparent"
android:layout_margin="#dimen/spacing_small"
android:layout_alignTop="#+id/img_background"
android:layout_alignBottom="#id/img_background">
//this layout will expand according to your image size
</RelativeLayout>
</RelativeLayout>
Do you want to show switch that lay on imageview ?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_download"
android:layout_width="100dp"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:orientation="vertical">
<ImageView
android:src="#android:drawable/btn_star_big_on"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Switch
android:id="#+id/mySwitch"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Switch" />
</RelativeLayout>
I want to increase the height of green line with increase in size of aa length of aa(suppose aa is of multiline around 7 line, then the green line should automatically gets increased),
i had tried my effort but failed, and now i have no more idea to achieve the above mentioned, following is my xml for the above mentioned layout,
//My root layout, which/who contain all the two child layouts(relative and linear layout)
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content">
//Layout for image and line, here i want to increase the height of "profile_view_line(green line)" with increase in size of text "profile_tv_descriptionName"
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/profile_layout_relDescription">
//This is the imageview,whose background is tranparent, so if i remove "layout below " property from "profile_view_line", then "profile_view_line"
//appear behind imageview(profile_img_description),which must/should not happen, but here i fail as well (as i don't want to appear this behind imageview)
<ImageView android:id="#+id/profile_img_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/description_icon"
android:layout_alignParentLeft="true"/>
//This is the line to be expanded with increase in size of "profile_tv_descriptionName" but with minimum size of 30dp as height
//and must grow with the "profile_tv_descriptionName" if (profile_tv_descriptionName) is multi-line
//i can't set property depending on "profile_tv_descriptionName"
as it is in another viewgroup(relativeayout), due to which i can't set property on this one
<View android:layout_below="#id/profile_img_description"
android:layout_width="#dimen/1dp"
android:id="#+id/profile_view_line"
android:layout_height="#dimen/30dp"
android:background="#color/colorGreen"
android:layout_centerHorizontal="true" />
</RelativeLayout>
//Layout for description title and description text "aa" which exapnds as expected, here the dependincy is based on above maintained relative layout "profile_layout_relDescription"
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_toRightOf="#id/profile_layout_relDescription"
android:layout_alignBottom="#id/profile_layout_relDescription">
//This is the title, useless in this case but need for appearance
<TextView
android:id="#+id/profile_tv_description"
android:text="#string/profile_description"
android:textSize="#dimen/8dp"
android:gravity="left"/>
//this is the dependency factor which can increase and according to which "profile_view_line" green line must expand but i can't do
//that because it is in another viewgroup(linearlayout), due to which i can't set property on this one
<TextView
android:layout_height="wrap_content"
android:id="#+id/profile_tv_descriptionName"
android:text="Vikram"
android:textSize="#dimen/13dp"
android:gravity="left"/>
</LinearLayout>
</RelativeLayout>
Try a layout like this:
<LinearLayout, horizontal>
<LinearLayout, vertical, width wrap_content, height match_parent, gravity center_horizontal>
<ImageView set width, set height>
<View, greeen line, height 0, weight 1>
</LinearLayout>
<LinearLayout, vertical, width 0, height wrap_content, weight 1>
<TextView title, wrap_content>
<TextView description, wrap_content>
</LinearLayout>
</LinearLayout>
Explanation:
You need 4 things in a square:
AB
CD
where A is the image, B is the title, C is the line, and D is the text.
B and D need to be aligned vertically with each other, and next to A and C, so that says to me that each of those pairs should be in a vertical linear layout, and then those two should be aligned in a horizontal one to line them up.
A and C together have the width that A has, but the other two need to take up the remaining space. That means width of 0, and weight 1.
Now we have:
A B----------------------
C D----------------------
Now we need to deal with height. A has a fixed height. B and D have a fixed height, defined by the text in them. That leaves C as having a variable height, taking up the rest of the space. So we say that AC has height matching the parent, which is then defined by the height of BD. Then C has a height 0 and weight 1, making it fill all the remaining height. This gives us:
A B----------------------
C D----------------------
- -----------------------
So I'm trying to put a textview to the left side of an image that fills the parent. Any ideas how to do it in XML? are there any ways to put the textview with witdh 200dp and height 300dp but in the right corner of the parent?
TY
Here's my code for the imageview to the left:
<TextView
android:id="#+id/display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="200dp"
android:height="300dp"
android:gravity="left"
android:background="#00ffffff"
/>
Note that I am new with this
Use the following attribute in your text view:
android:layout_toLeftOf="#id/your_image_view_id"
Just make sure your ImageView is declared in your xml before the TextView and you give it an id (as an example, android:id="#+id/your_image_view_id").
If I understand this correctly, you are wanting to "Overlay" the text views on top of the Image?
I.E. The image occupies the entire parent view and the text views align with the top and left edges of the image..
If that is the case you probably want something like:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/superawesomeimage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/photoofmyholiday" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/superawesomeimage"
android:layout_alignRight="#id/superawesomeimage"/>
</RelativeLayout>
This should produce a textView along (the top by default) of the image, matching the image width of the image container (to make the image fully occupy the imageview you will need to specify a scale I think (fitXY probably).
I might be a bit off with the keywords/syntax here.. I was just typing it off the top of my head, but you get the general idea.
The important things to note are the order of the TextView/ImageView (it determines who is on top of whom) and the TextView layout alignment. With relative layouts you can position relative to other views.. so setting align left and align right to the image will make the left and right edges of the text view line up with the left and right edges of the image view. Hope that helps. Have fun!
I am not sure what you want to align where but if you want something aligned on the right you can use this in a RelativeLayout:
android:layout_alignParentRight="true"
I am trying to create simple layout with an image and two labels (one above the image and one below it). I use the inflated view to paint it to a canvas. My interest is to create the view with a rectangle that has as center the center of the image. Using fill_parent or match_parent dimensions for layout is not desired since the final view will occupy all the available space, not the minimal space (resulting in a too big bitmap).
This is the code I have used so far:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:layout_centerInParent="true"
android:layout_width="wrap_content" android:id="#+id/ivBeaconType"
android:layout_height="wrap_content" android:src="#drawable/bt_beacon"></ImageView>
<TextView android:layout_above="#id/ivBeaconType" android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="12dp" android:text="AABBCCDDEEFF" android:id="#+id/tvId"
android:textColor="#72C8E0"></TextView>
<TextView android:layout_below="#id/ivBeaconType" android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall"
android:text="-99 dB" android:id="#+id/tvRssi" android:textColor="#FF0000"></TextView>
</RelativeLayout>
This has a problem. The relative layout does not grow to fit both texts (the label above does not show up and the one at bottom is painted too close to the image). I could render correctly the view by aligning image below first text and third text below image but that would not result in a perfect center around image center (or by using a linear layout).
What can do? Another valid solution would be getting the center of the image relative to the layout drawing area. Any ideas?
I got it. getLeft()/getRight()/getTop()/getBottom() methods of a view return the relative position within parent. The only captcha is that they only return valid values after the layout phase so this solved my question:
if (beaconBitmap == null)
{
/* Calculamos las dimensiones si no está creado el bitmap */
beaconView.invalidate();
beaconView.refreshDrawableState();
beaconView.measure(
MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),
MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
beaconView.layout(0, 0, beaconView.getMeasuredWidth(),
beaconView.getMeasuredHeight());
ImageView ivBeaconType = (ImageView) beaconView
.findViewById(R.id.ivBeaconType);
Rect beaconIconArea = new Rect(ivBeaconType.getLeft(),
ivBeaconType.getTop(), ivBeaconType.getRight(),
ivBeaconType.getBottom());
beaconBitmapCenterX = beaconIconArea.centerX();
beaconBitmapCenterY = beaconIconArea.centerY();
}
I need to locate text on view:
text 'Some more text' should be located in bottom|center_horizontal
text 'Short text' should be located on with align right, but about 10% from the top of the screen
text 'x.x.x.x' should be aligned to the center of the screen (right/bottom align of the 1st quater)
text 'Some long text ..' should be aligned to the top/left of the 3-rd quater of the screen, but it should cross the center_horizontal of the screen.
Here a couple quick guidelines:
Android Layouts tend to be much more deeply nested than you would normally expect. You often end up with "empty" layouts that just take up space so that other elements lay out correctly.
RelativeLayout is your friend whenever you are aligning text to a particular edge.
Use the padding settings to put text "a little away from" an edge.
Gravity aligns the text within that TextView or button.
Looking again I your diagram, I reproduced it this way:
Start with a relative layout ('fill_content') that takes up the entire screen.
Put in the "short text" and "some more text" by anchoring to the top and bottom.
Put a zero-width item with the property "centerInParent" for a point in the middle
of the screen.
Put the remaining to items above and aligned with that centerpoint.
Unfortunately, nothing in step 4 worked correctly. Nothing like "layout_below" worked when the referenced item was a centerInParent item. with relative layouts to step 3. Turns out it had to do with failing to fill_content on the top level. Yes, the layouts are tricky, and I wish there was a debugger for them.
Here's the correct version:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/r1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/short_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Short Text"
android:gravity="right"
android:layout_marginTop="30dip"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/more_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Some More Text"
android:gravity="center"
android:layout_alignParentBottom="true" />
<TextView android:id="#+id/centerpoint"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="0dip"
android:height="0dip"
/>
<TextView android:id="#+id/run_fox"
android:text="Run, fox, run!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/centerpoint"
android:layout_toLeftOf="#id/centerpoint"
/>
<TextView
android:layout_below="#id/centerpoint"
android:text="The quick brown fox jumped over the lazy dog, who had been a frog, and then got features and ran slowly."
android:layout_alignRight="#id/centerpoint"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
If I understand correctly you want to simply put a serious of strings on the text view. You can do this in XML. A handy GUI tool for this would be DroidDraw You can run it in a browser or on your Desktop. I find it handy for some GUI things. Other than that you can Draw a view, something like this...
class DrawOnTop extends View {
public DrawOnTop(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
#Override
public void onDraw(Canvas canvas) {
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.RED);
paint.setTextSize(15);
Paint paint2 = new Paint();
canvas.drawText("Test", 30, 30, paint);
}
}
In the above example I've defined a new paint. This is to set the properties of the text. I've given it a red colour and text size 15. You can add more attributes too. I've also drawn a string "Test". It is at coordinates (30,30) these are the x and y coordinates where I want Java to draw it. It's then using paint's attributes.
EDIT: this page may also be of some help http://developer.android.com/reference/android/graphics/Canvas.html