I have to do some flattening on my layout, below piece of it after. Percent TextView and RadioButton are in same place on the left and are switching using animations. Second TextView shows some text fulfilling width. Problem is that RadioButton is shorter than percent TextView, but I'm using alignLeft and alignRight for same width, and even with gravity set to center radio drawable is aligned left. I've found this topic, but is a bit old, before Material, and currently this class is more complicated. Any advice how to center this radio in own width (or width of percent textview) without! adding another ViewGroup? (precent and radio might be in another RelativeLayout and set centerInParent, as I had before tries for flattening)
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/option_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:singleLine="true"
android:gravity="center"
android:ems="3"
android:visibility="invisible"/>
<RadioButton
android:id="#+id/option_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignLeft="#id/option_percent"
android:layout_alignRight="#id/option_percent"
android:gravity="center"/>
<TextView
android:id="#+id/option_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/option_percent"/>
</RelativeLayout>
OK, I have some workaround for my case. I'm not accepting this post, because its not a proper answer. Im still counting on another way, more elegant ;)
from above xml I've set fixed width for percent and removed ems, practically no difference. also removed aligning left and right to percent in radio attributes, so it have own size in both dimensions (wrap_content). next step is in code:
if(radioMarginLeft<0) {
int widthMeasureSpec = View.MeasureSpec.makeMeasureSpec(
percentTextView.getLayoutParams().width, View.MeasureSpec.AT_MOST);
int heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
radioButton.measure(widthMeasureSpec, heightMeasureSpec);
radioMarginLeft = (percentTextView.getLayoutParams().width -
radioButton.getMeasuredWidth())/2;
}
((RelativeLayout.LayoutParams) radioButton.getLayoutParams()).leftMargin=radioMarginLeft;
measuring radio, percent now has fixed width, so no need to measure. radioMarginLeft is calculated only once and kept outside method, in my case it may be even static.
additional: be careful with setting padding for radio, because of Add margin between a RadioButton and its label in Android? (check most upvoted answer)
Related
I am trying to make a View as a divider on my application to separate two elements (two Buttons, two TextViews or whatever) and I would like to have a padding on the left and on the right of that View (to move the background some space on the left and on the right).
It allows you to set a padding but the View still continues occupying the full width screen. Here is the code I have:
<View
android:layout_width="wrap_content"
android:layout_height="0.5dp"
android:background="#FFFFFF"
android:paddingLeft="10dp"
android:paddingRight="10dp"/>
How can I set a space on the left and on the right of that View so the divider will be smaller than screen?
Thanks in advance!
use margins instead of padding
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
Finally I got it. As on Android documentation it says: Even though a view can define a padding, it does not provide any support for margins, I am not able to use marginLeft or marginRight properties.
If you try to set directly android:marginLeft="10dp" you will get the following error:
No resource identifier found for attribute 'marginLeft' in package 'android'
Nevertheless, you can use android:layout_marginLeft="10dp" and android:layout_marginRight="10dp" to get the desired result.
The final View xml will be like this:
<View
android:layout_width="wrap_content"
android:layout_height="0.5dp"
android:background="#FFFFFF"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"/>
Padding takes care of the inner space. Therefore you would use padding to increase the space between the outline of the view and the elements inside it, whether they are buttons, textviews etc.
Margin takes care of the outer space. You would use this to increase the space between the outline of the view and the element which contains it. Hence what you need. To implement this in a view use the following:
private void setMargins (View view, int left, int top, int right, int bottom) {
if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
p.setMargins(left, top, right, bottom);
view.requestLayout();
}
}
Hope this helps :)
I am trying to make a simple LinearLayout composed of an ImageView and TextView.
The ImageView should scale to match the LinearLayout height and not lose proportions while doing so.
This is the xml I currently have.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:background="#CCCCCC"
android:scaleType="fitCenter"
android:src="#drawable/strip" />
<TextView
android:id="#+id/logoText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:singleLine="true"
android:text="what an awesome text"
android:textSize="18sp" />
</LinearLayout>
Using the above xml, the result is that the ImageView height will indeed match the LinearLayout height and it's width will be the same as the src image but the rendered image will scale properly and center, but this leaves the ImageView itself filling about 90% of the Layout's width as it's the src image width, leaving no space for the TextView.
I just would like to scale the ImageView to match the parent's height and it's width should be just as much needed to scale it proportionately.
Add a linear layout on the image view. Just the image view and nothing else. :) hope it helps
EDIT 1: As many of the other answers mentioned Using the layout_weight property will also help resolve this issue.
add weight 1 on imageview so there will be space for the textview
As I mentioned in the comment under your answer post where you cite KISHORE_ZE, it seems to be helpful only with an image of particular size, and on a particular screen density and resolution. So while it looks acceptable on your current device, it might be a mess on a different one. I suggest that you figure out what part of the layout you want to use for the image and use android:weight attributes for your ImageView and TextView to achieve wanted result.
As #KISHORE_ZE said, this solves the problem.
"Put the image view in a linear layout. Just the image view. Nothing else. "
this visual guide is a lot helpful.
link
in your image view add:
android:scaleType="fitCenter"
or
android:scaleType="fitXY"
whichever suites you.
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----------------------
- -----------------------
I'm just starting out with android and trying to make a simple user interface.
I'm using TableLayout and each TableRow is supposed to contain an image and several buttons next to it. I set the width and height of the buttons to wrap_content, which is exactly what I want. Now I want the image to have exactly the same height as the buttons. The image is way bigger, so wrap_content doesn't work.
Obviously I can just adjust the dp value of the image height until it fits, but there has to be an easier way and I guess that pretty much defeats the purpose of using wrap_content in the first place...
Set the height of the image to match_parent. Your buttons are doing all the height-sizing work having the wrap_content set. When the row gets sized it uses the button height, as they say "you will be as tall as our content", and then when the image is going to be sized, it will use the available height, as specified before by the buttons. Even if the buttons are smaller than the image, the image will still take the available space.
Try this
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
I have a layout with element TextView
<TextView android:textColor="#ffffff" android:text="18 августа"
android:id="#+id/program_day1" android:layout_gravity="center"
android:textSize="18sp" android:textStyle="bold"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_weight="1" android:gravity="center" />
How can I detect the real size (and margins) of this in the onStart (or other) event? Now it shows "-2" values
try with
myTextView.getPaint().measureText(myTextViewtext)
it didn't return the size of the view but the size of the text,hope it could help you
Views don't get height or width until they are actually drawn on screen.
Try to show the width in the onSizeChanged function. Check if a real size will be shown. Use getwidth.
Apart from that, you can use TextView.getWidth() and Textview.getHeight() to get w/h and LayoutParams lp = (LayoutParams) TextView.getLayoutParams(); to get margin values