Is it possible to achieve something like this:
I have one picture to set as a background on layout in which is also TextView. So I want that layout to set his height to wrap content (which should be the height of TextView) and ImageView to has fill_parent as height and width.
I tried using:
LinearLayout with background and TextView
TextView with background
RelativeLayout with ImageView (set height to fill_parent) and TextView (set to wrap_content)
Is there a way to do this?
Sorry, if it's next question about the same, but I have no idea how to find a solution.
EDIT:
I'll try to be more specific. I want a TextView with background. But I want that background to be scaled to fit TextView which should be wrap_content width and wrap_content height. But I have image in higher resolution so there is a lot of unused space (background doesn't scale).
No, there is no way to set a view's width/height to both wrap_content and fill_parent simultaneously.
What exactly are you trying to achieve? Is this what you mean?
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
...
android:background="#drawable/image" >
<TextView
android:layout_width="wrap_content"
android:layout_width="wrap_content"
... >
</TextView>
</LinearLayout>
EDIT
If you want to nicely scale a background image for a TextView, I think what you might want to look into is a 9-patch image. See this post for more info. Also this.
Related
I want to set a background to any layout.
Usually, I would go on about this like here:
<LinearLayout
android:orientation="vertical"
android:background="##drawale/somedrawable"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="100dp"/>
But this will always make the background fit the LinearLayout. But what if the layout was smaller in height than the image I set as background? I do NOT want to destroy the image's aspect ratio but just center the image inside the layout and have the height overlap so that it isn't visible anymore.
To clarify:
Left is what happens currently, but right is how I want to to be. Since the layout container is smaller than the imageview or background image is, it is supposed to stay centered but only show what fits without altering the aspect ratio.
Use an ImageView inside the linear layout with width and height match_parent and set the scaleType="centerCrop"
<ImageView
android:src="#drawable/somedrawable"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
you cannot apply the scaletype property in linearlayout its better to use imageview to achieve this following is the link how to use scaleType attribue, to avoid the stratching behaviour use the 9 patch image, follwoing is the link to convert your image into 9patch
I have a layout (can be relative, linear or constraint)
with TextView aligned to parent left and then ImageView (fix width) aligned that start right to the textView.
I want the image to be rendered first and only then to render the text view.
Meaning I want the text view to be truncated according to the left space after the image was rendered.
<RelativeLayout
android:id="#+id/account_name_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginBottom="#dimen/account_menu_account_name_layout_bottom_margin">
<TextView
android:id="#+id/account_name"
style="#style/AccountDataAccountName"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:lines="1"
android:ellipsize="end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
tools:text="emailisverylongaswellwewantittogettruncated#gmail.longdomain.com"/>
<ImageView
android:id="#+id/account_name_chevron"
android:layout_width="#dimen/account_menu_chevron_size"
android:minWidth="#dimen/account_menu_chevron_size"
android:layout_height="#dimen/account_menu_chevron_size"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/account_name"
android:layout_marginTop="#dimen/account_menu_chevron_top_margin"
android:layout_marginLeft="#dimen/account_menu_chevron_left_margin"/>
</RelativeLayout>
I have tried few options:
1) telling the text to be left to the image view
2) putting weight on the text view - made gap between the two elements.
3) setting minWidth to the image view - didn't help just made the imageView scale smaller.
Any idea how to render the image first and how to limit textView's width according to left width?
You can force the width on the imageView. That will prevent the textview from pushing it off the space. If you are saying you did this, please post the resulting image as that wouldn't make any sense.
Your above example has no constraints to each other, no enforcement to not overlay or push off. You need some constraints, such as "toTheLeftOf" or "Weight" or LinearLayout to enforce it as Weight only works in LinearLayout.
The easiest way is to just give the imageView a hard coded DP width and height, then set the text to 0 width with a weight of 1 inside a Linear Layout.
You can also use percentages if you want, use a LinearLayout then put a weight sum of like 100 for example (representing 100%). Then assign your image whatever percentage it needs like layout_weight=30 and give the textview 70.
Any of these options will work fine for you. If you try it, and it does not, then post your tried code as it will work unless you are doing something goofy that is not visible in your current example. As I do this all the time, every time you make a row, you typically have an image on the left fixed and text on the right to grow.
I have following widget in my app and it contains an ImageView with width and height set as WRAP_CONTENT. Root view is a RelativeLayout again with width and height set as WRAP_CONTENT.
My issue is why there are some padding (marked in black) on top and bottom of the widget? I want it to be perfectly square. Following is my widget layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget_battery_2x2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000000"
android:layout_margin="#dimen/widget_margin"
android:padding="#dimen/widget_padding" >
<ImageView
android:id="#+id/image_widget_arc_battery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0000"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
#dimen/widget_margin and #dimen/widget_padding is zero.
ImageView contains a dynamically generated Bitmap (width and height is 400).
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
This is my first widget app :) I'm kinda lost and can not figure out why this extra padding is there. Anybody has an idea?
Thanks for your help.
From App Widget Design Guidelines | Android Developers
When your widget is added, it will be stretched to occupy the minimum number of cells, horizontally and vertically, required to satisfy its minWidth and minHeight constraints.
Each device has a grid on its home screen that widgets are forcefully aligned with. You can even see on some devices that the aspect ratio of the grid cells change when rotating between portrait and landscape.
The docs at the link above have some advice for how to specify sizes for your widgets. Some of the information there might help you.
I would recommend that if you are only showing the ImageView, instead of using a RelativeLayout, use a FrameLayout with a gravity of center and a transparent background. That way the FrameLayout might get stretched but your ImageView should stay square.
Even better, you might not need a ViewGroup subclass at all. Just have the ImageView as your top level component and use a scale type of FIT_CENTER. Then your bitmap should square up inside the ImageView. (Oh, and don't specify a background color for the ImageView, just do the background color in the bitmap.)
I'm making horizontal RecyclerView with photos in it, and I have faced up with wrap_parent problem. If I put in my View width = wrap_content, it is screenWidth width, although image consumes very small space. If I change wrap_content to some value it works perfectly.RecyclerView is 75dp height and match_parent.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="75dp"
android:layout_height="wrap_content"
android:clickable="true"
android:foreground="#drawable/card_foreground">
<ImageView
android:id="#+id/bitmap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/image" />
</LinearLayout>
Screenshoot
Dark blue is screen and light blue is photos. Problem is I have case 1 when I set view to wrap_content.
SOLUTION:
I have solved this problem recently, there is some bug or something simmilar, when you try to have on scaled ImageView wrap_parent. It doesn't work very well.
To solve this, I have resized every photo to final size before put it in RecyclerView. In adition, I have some small space between ImageView again, and I have solved by adding padding=0 and margin=0 to childern of RecyclerView.
First solution: LinearLayout weight attribute
As long as you would use for that view LinearLayout you may use for all of your ImageView views this attribute:
android:layout_weight="{number_value}"
Shortly, if you add for all of your ImageView views the same value for weight they would get calculated the same space, but not more than their parent view attributes.
http://developer.android.com/guide/topics/ui/layout/linear.html
Read please this issue:
What does android:layout_weight mean?
If you still face the problem, give me a call.
Second solution: ImageView scale attribute
For ImageView you can use scaleX, scaleY, scaleType attributes. For having the same height you should use the same scaleY value for all your ImageView items.
Think also about using TableLayout or GridLayout for this purpose.
I have a TextView and an ImageView in a LinearLayout:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="72sp"
android:orientation="horizontal"
android:keepScreenOn="true" >
<TextView
android:id="#+id/instructionView"
android:layout_width="245sp"
android:layout_height="70sp"
android:textSize="18sp" />
<ImageView
android:contentDescription=""
android:id="#+id/ma_landmarkView"
android:layout_width="70sp"
android:layout_height="70sp"
android:layout_gravity="right" />
</LinearLayout>
In my Code, I set different Images to the ImageView (All 68x68 pixels size) with
myView.setImageDrawable(this.getResources().getDrawable(
R.drawable.mypicture));
The Problem is now, the Image is no more seen if the TextView gets other Text by .setText(...) and redraws itself. The Image also dissappears if other Views outside this LinearLayout change their size and get redrawn (e.g. an MapView that has been zoomed in/out).
If I set all .setText(...) from this TextView in comments //, the picture from the ImageView stays visible and doesn't disappear anymore.
But I don't want to go without that TextView...
I already hardcoded the Views heights and widths but that does not help.
Any Ideas ?
EDIT:
I just saw at testing, that by setting different Text to the TextView it can get a bigger width (even bigger than I stated in the *xml) if this TextView gets too width, the Image disappears. Maybe a work around solution works, that prevents the TextView from getting too width. Some1 knows how to?
Try .setBackgroundDrawable instead
You should change the different view's units to dp instead of sp. sp is usually used for the actual text size. So basically change the layout_width and layout_height to use dp units, and keep the textSize in sp units.
Please change these and re-run your application, and let me know if this changed the results. If it doesn't work, add some of your java code so I can better tell where the issue is.