I'm trying to get my textview to hug the left side of the screen while the button hugs the right side (and if possible just for ocd sake have the text view center itself vertically to be in line with the button) but not do it using absolute values. Here's my coding:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Change City:"
/>
<Button
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Click"
android:id="#+id/citychoicebutton"
/>
</LinearLayout>
I thought layout_gravity took care of what I'm trying to do but apparently not.
Gravity specifies how to place the element within the element itself, not within the boundaries of the parent (screen).
What this means is if your text takes only 50px in width but you have allocated 100px to TextView, the actual characters will place themselves to the left, center or right of the 100px space (as per gravity value).
With a LinearLayout, you will have to assume a screen width to reach your desired effect and use "dip" as a unit, and hope for the best (test it on different screen sizes on your emulator).
A better alternative is Relative Layout, and use android:layout_alignParentLeft and android:layout_alignParentRight.
Incidentally, it is recommended to use "dip" (density independent pixels) and not "px" for layout units in general.
Density independent pixels unit is now "dp". "dip" still works though.
You could try using RelativeLayout with
android:layout_alignParentLeft
for TextView and
android:layout_alignParentRight
for Button. To align the button and TextView you could use
android:layout_alignbaseLIne
attribute on Button.
Related
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.
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"
why should i put android:layout_width="0px" when i use android:layout_weight property? For example following is my main.xml file , and in that i used android:layout_width="wrap_content", and everything works fine, so why android:layout_width="0px" should be used when i am using the layout_weight property?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText" android:hint="enter your name"
android:layout_weight="3"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Send"
android:id="#+id/button"
android:layout_weight="0"/>
</LinearLayout>
and this is how my layout looks:
You certainly don't have to. Additionally weight=0 doesn't make much sense. The weight parameter controls what part of the remaining space in the layout the widget occupies. So setting width=0 effectively tells it to take up only the remaining space. If you set width=30, it will occupy 30 px|dp + all the remaining space. Setting 0 as the width makes it easier to get a predictable result on different screen sizes.
A common pattern is to have two widgets with width=0 and equal weight to make them equally sized inside the parent container, where you don't care about the actual size (width or height).
Layout weight itself is used to give appropriate width as per weight property.
Check this
This attribute assigns an "importance" value to a view in terms of how
much space is should occupy on the screen. A larger weight value
allows it to expand to fill any remaining space in the parent view.
So eclipse suggests to give width as 0px
layout_weight you can specify a size ratio between multiple views.
E.g. you have a Tabelview and a image which should show some additional information to the layout. The tabel should use 3/4 of the screen and image should use 1/4 of the screen. Then you will set the layout_weight of the tabelview to 3 and the layout_weight of the image to 1.
To get it work you also have to set the height or widthto 0px.
http://developer.android.com/guide/topics/ui/declaring-layout.html#CommonLayouts
I have a RelativeLayout which currently has a fixed size. Widths, heights, margins, font heights of child views are specified so everything looks just right.
I now want to scale the layout (to fit screen size). The layout should scale as if it was a flat image, so everything gets smaller in proportion (fonts, margins etc.)
I made a simplified example, below. Scaled to 0.5, this would display the text "ONE QUARTER" with margin left 200dip and margin top 120dip.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="1600dip"
android:layout_height="960dip"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<TextView
android:text="ONE QUARTER"
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="400dip"
android:layout_marginTop="240dip"
></TextView>
</RelativeLayout>
Of course, I'm not asking anyone to help me hand code an algorithm to scale all these values: just wondering if there's some simple way to achieve this...
Thanks!
If you just want your app to look ok on another device then specifying things in dip and sp should do the trick.
If you actually want to shrink or expand the scale of your app on the same device then you would have to do it manually, perhaps using themes or styles.
In Android, when layout out widgets, what's the difference between fill_parent (match_parent in API Level 8 and higher) and wrap_content?
Is there any documentation where you can point to? I'm interested in understanding it very well.
Either attribute can be applied to View's (visual control) horizontal or vertical size. It's used to set a View or Layouts size based on either it's contents or the size of it's parent layout rather than explicitly specifying a dimension.
fill_parent (deprecated and renamed MATCH_PARENT in API Level 8 and higher)
Setting the layout of a widget to fill_parent will force it to expand to take up as much space as is available within the layout element it's been placed in. It's roughly equivalent of setting the dockstyle of a Windows Form Control to Fill.
Setting a top level layout or control to fill_parent will force it to take up the whole screen.
wrap_content
Setting a View's size to wrap_content will force it to expand only far enough to contain the values (or child controls) it contains. For controls -- like text boxes (TextView) or images (ImageView) -- this will wrap the text or image being shown. For layout elements it will resize the layout to fit the controls / layouts added as its children.
It's roughly the equivalent of setting a Windows Form Control's Autosize property to True.
Online Documentation
There's some details in the Android code documentation here.
fill_parent (deprecated) = match_parent
The border of the child view expands to match the border of the parent view.
wrap_content
The border of the child view wraps snugly around its own content.
Here are some images to make things more clear. The green and red are TextViews. The white is a LinearLayout showing through.
Every View (a TextView, an ImageView, a Button, etc.) needs to set the width and the height of the view. In the xml layout file, that might look like this:
android:layout_width="wrap_content"
android:layout_height="match_parent"
Besides setting the width and height to match_parent or wrap_content, you could also set them to some absolute value:
android:layout_width="100dp"
android:layout_height="200dp"
Generally that is not as good, though, because it is not as flexible for different sized devices. After you have understood wrap_content and match_parent, the next thing to learn is layout_weight.
See also
What does android:layout_weight mean?
Difference between a View's Padding and Margin
Gravity vs layout_gravity
XML for above images
Vertical LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="width=wrap height=wrap"
android:background="#c5e1b0"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="width=match height=wrap"
android:background="#f6c0c0"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="width=match height=match"
android:background="#c5e1b0"/>
</LinearLayout>
Horizontal LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="WrapWrap"
android:background="#c5e1b0"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="WrapMatch"
android:background="#f6c0c0"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="MatchMatch"
android:background="#c5e1b0"/>
</LinearLayout>
Note
The explanation in this answer assumes there is no margin or padding. But even if there is, the basic concept is still the same. The view border/spacing is just adjusted by the value of the margin or padding.
fill_parent will make the width or height of the element to be as
large as the parent element, in other words, the container.
wrap_content will make the width or height be as large as needed to
contain the elements within it.
Click here for ANDROID DOC Reference
fill_parent :
A component is arranged layout for the fill_parent will be mandatory to expand to fill the layout unit members, as much as possible in the space. This is consistent with the dockstyle property of the Windows control. A top set layout or control to fill_parent will force it to take up the entire screen.
wrap_content
Set up a view of the size of wrap_content will be forced to view is expanded to show all the content. The TextView and ImageView controls, for example, is set to wrap_content will display its entire internal text and image. Layout elements will change the size according to the content. Set up a view of the size of Autosize attribute wrap_content roughly equivalent to set a Windows control for True.
For details Please Check out this link : http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html