Proportional width of elements in LinearLayout - android

I have a horizontal LinearLayout and in it I have EditText and Spinner elements.
Which attributes I need to adjust so I would get proportional widths: I want EditText to take 3/5 and Spinner - 2/5 of all available width?
My code looks like this:
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/LinearLayout01">
<EditText
android:layout_height="wrap_content"
android:id="#+id/EditText01"
android:singleLine="true">
</EditText>
<Spinner
android:layout_height="wrap_content"
android:id="#+id/Spinner01"
android:layout_width="wrap_content">
</Spinner>
</LinearLayout>
I tried setting android:layout_weight, but somehow it does not look "stable" enough for me - when EditText has no text - everything looks fine, but as soon as I start entering text into it - it starts expanding and Spinner shrinking accordingly...

To literally achieve your request, try setting both widgets' android:layout_width="0px", then set your android:layout_weight values as appropriate (3 and 2).

Try setting the layout_width to 0dip as well as using layout_weight. That should do it.

Related

xamarin android How to increase multiline edit text height with screen height?

I want to manage multi line edit text control's height with respect to device screen height. Height should be 40% of screen.
I have used max lines, lines and min lines properties. If I set these properties then height does change but if screen height changes or device shifted to horizontal then edit text goes out of the screen. in short, multi line edit text height must be dynamic with screen size. It should shrink and expand as other control does with screen size.
Screenshot:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:focusableInTouchMode="true"
android:background="#e8eeff">
<EditText
android:id="#+id/etTextMultiLine"
android:inputType="textMultiLine"
android:gravity="top|left"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:scrollbars="vertical"
android:hint="Enter a Text"
android:background="#layout/EditTextStyle"
android:textColorHint="#404144"
android:textColor="#404144"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:padding="5dp" />
Since you wish to achieve sizes with percentages, consider using PercentFrameLayout as your EditText's parent and just match both weight and height. The documentation says PercentFrameLayout is deprecated, so consider the replacement suggested, ConstraintLayout.

Why my TextView under an ImageView is not showing

I am writing an Android game. In the level selection activity's layout file, I want to layout the levels' buttons (They are actually ImageViews) like this:
x x x
x x x
And each level button has a TextView, with that level's name as the text, below it (Let's call these two views together as a "level choice"). I used a lot of LinearLayouts to do this. Here is the code for a level choice:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</LinearLayout>
As you can see, the two views' height and width are all wrap_content. But when I look at the designer, the text view doesn't show up.When I select the text view in the component tree, it shows where the text view is:
P.S. The picture isn't showing all six levels because I haven't made them yet.
As you can see, the text view is right at the bottom! When I select the ImageView, it shows that it is occupying all the space of its parent!
I don't know why this is happening, my image is certainly a square! Can you explain why this is happening and how do I fix it?
If you need my whole layout code, feel free to tell me in the comments.
For me, the best solution is to position and size it properly by code (where you have total control) instead of xml.
Anyway, i think your problem can be solved by setting ImageViews ScaleType
imageView1.setScaleType(ScaleType.FIT_START);
By XML:
android:scaleType="fit_start"
Hope this helps.
I use background color for textview when I'm studying the layout.
If you use wrap content in both dimension for TextView, that is invisible since you did not write any text inside it. wrap content means that the view take the minimum space. And no text means 0px; try to set ImageView and TextView with layout_weight 1 and layout_height 0dp. In this way both view take half of space of parent layout
Because right now, your LinearLayout doesn't know how to distribute the ratio of its children. And in fact, your imageview's wrap content already
consumes the whole space.
So, LinearLayout says "Sorry TextView, you have no space left".
Use layout_weight to both of the children.
I guess you want to have your picture twice the size of your text.
2:1
That is,
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=2
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight=1
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</LinearLayout>
I just realized that I posted a question about ImageViews leaving out too much whitespace:
LinearLayout leaving out too much white space. Why?
I think this is the same as that problem. So I tried setting adjustViewBounds to true in the xml. And it works! Now the image view look like this:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/parallel_lines"/>
You can use relative layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/angles"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:textSize="#dimen/level_text_size"/>
</RelativeLayout>
or simple you can set background of textview to that image by putting this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/angles_level"
android:background="#drawable/angles"
android:textSize="#dimen/level_text_size"/>

First TextView Overlaps the second one ,Android

I have 2 TextViews which I need to both horizontally side by side, like category + nummber of products for category. The code is like below:
<?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"
android:paddingLeft="15dp"
android:paddingBottom ="10dp"
android:background="#color/navigation_background_sub">
<TextView
android:id="#+id/category_name_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:textColor="#color/ebuy_color_navigation_name" />
<TextView
android:layout_toRightOf="#+id/category_name_second"
android:paddingLeft="7dp"
android:id="#+id/category_number_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:textColor="#color/ebuy_color_navigation_number" />
</RelativeLayout>
Now the problem is that once the text for the first TextView is to long , the space left for the second is to little and the text is display in two ore more lines.
I have no reputation to post pictures so I am just trying to explain like below:
How it is:
Laptops (34)
Computer Software (1
4
)
How it should be:
Laptops (34)
Computer (14)
Software
use
layout_toRightOf= "#id/category_name_second"
It may help you
If you replace your RelativeLayout with a horizontal LineraLayout the available space will be distributed evenly among your text views. You can add a weight attribute to control the portion of each TextView in one line of length.
Well, the problem is that you have not enough space at the horizontally line, this is why the text view display more lines.
You must define how much space you want for each Textview. If your layout is so simple like that, you can choose a linear layout to align better the textview's.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="15dp"
android:weightSum="1" >
<TextView
android:id="#+id/category_name_second"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:text="Computers"
android:textSize="22sp"
android:singleLine="true"
android:textColor="#color/ebuy_color_navigation_name" />
<TextView
android:id="#+id/category_number_second"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:paddingLeft="7dp"
android:text="(24)"
android:textSize="22sp"
android:singleLine="true"
android:textColor="#color/ebuy_color_navigation_number" />
</LinearLayout>
You must add also the property singleLine to avoid the textview's display more lines. As you see, using the weight you can set the proportional width for each component in the horizontal line.
In TextView When you use wrap_content android device will adjust its width and height(if you use wrap_content for height) according to data you put in (length of text). If text is not fix in textview then don't use wrap_content(only if you don't want that text automatically write in second line).So if first Textview has taken more than half space, second textview must adjust its height to show full text.There is no permanent solution of it, because this text line depends on device's size. if device's screen is larger to show both textview in single line it will show you unless it will increase height of second textview in your case.
you can also make different layout for all type of screen size and set text's size according to it. you can check for supporting multiple screen size.

Making a View occupy a fixed width in Android layout

I have this as part of my layout:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:layout_weight="0.15">
<TextView
android:id="#+id/question_text"
android:layout_width="0dip"
android:layout_height="fill_parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/score_label" />
<TextView
android:id="#+id/score_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right" />
</LinearLayout>
The first TextView is empty at the beginning of the application. Its content is changed dynamically. This makes it occupy zero space so that the second TextView is aligned to the left, even though its layout_gravity is set to right.
How can I make it occupy a fixed width, without taking the contents into account?
I thought about using layout_weight, but I know the recommendation is against using nested weights (the parent ViewGroup has a layout_weight attribute). Maybe I should use a RelativeLayout?
Thanks for any suggestions.
I solved a similar problem using the attribute android:ems="<some number>" on the TextView. An "ems" is the width of the character "M". This attribute makes the TextView exactly the given no. of ems wide.
http://developer.android.com/reference/android/widget/TextView.html
You have all of your TextViews width set to android:layout_width="wrap_content" which means that if there's nothing in there it will have no width. You need to set that to either "match_parent" which will make it the same width as it's parent container or set it to a fixed value, something like android:layout_width="100dp".

android layout dynamic sizing

For many "header" TextViews across the pages I'm designing for a program, I would like them to be the parent.Width / 2 then properly aligned. While that would be fairly easy to code in the Java, I am attempting to do as much as possible in the XML layouts to avoid XML-Java code intersections until the last little bits (button presses, finish page, etc).
Do I have to go through each page and calculate every item's specific width myself or is there a way to put something along the lines of "fill_parent / 2"?
EDIT: Forgot to mention what is likely a key note - almost everything I am doing is in RelativeLayouts, I have very little use for LinearLayouts in this project.
If you have a LinearLayout that is flush to the left and right, you can do the following:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:gravity="left"
android:orientation="horizontal">
<TextView
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:text="I take up half the width!!!1" />
</LinearLayout>
By setting the weightSum on the parent, you're saying that the weights of the children should equal that amount. By setting the single child's weight to half of that, it'll take up half the space. Make sure to set the width of the child to 0 so it knows to use the weight value to calculate its space relative to its parent.
Then, you can align it however you'd like by setting gravity on the parent LinearLayout.
Use a tableview with two columns where each column is stretched and has a text view. Then hide the second textview
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1">
<TableRow>
<TextView android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Set Item Name "/>
<TextView android:id="#+id/hiddenTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="invisible"/>
</TableRow>
</TableLayout>

Categories

Resources