I have a LinearLayout, horizontal, and with variable width (width is set to fill parent) containing two textboxs A and B.
I need :
textbox B (the black one) takes as much width as it needs (wrap_content ?)
textbox A takes what's left.
Pictures to illustrate :
Try the following code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.35"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="asd" />
</LinearLayout>
use relativelayout instead.like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- black box -->
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"/>
<!-- white box -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/txt1"
android:singleLine="true"
android:layout_alignParentTop="true"/>
</RelativeLayout>
NOTE: i see in some device,because of language direction or device setting, linearlayout change children position. for example black text box come to left and white text box goes to right,but if use relativlayout it never happen.
Related
I'm trying to place two TextViews side by side such that both are always on the screen.
They should always stay next to each other, touching borders. But the text keeps changing dynamically, so even if the text in the first TV becomes too long, it should not push the second TV off the screen.
Here's the basic layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:padding="10dp"
android:text="Aa" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Bb" />
</LinearLayout>
This is what it looks like:
However, if the text becomes long, the second TextView gets pushed off the screen.
I even tried the same thing using RelativeLayout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<TextView
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/a"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Bb" />
</RelativeLayout>
Still the same problem, the second TextView just won't stay on the screen. I want the first textView to get ellipsized, or convert into two lines without pushing the second TextView off the screen. But I also don't want the second TextView to be stuck to the right of the screen (this can be done by giving the first TextView a weight of 1)
PS: For me, the background of the Views is immaterial, so even if I can manage this by latching the view onto the right side of the screen, it's perfectly fine.
For this, I've tried using weights on both views in LinearLayout, and layout_alignParentRight in RelativeLayout - but without any success.
Edit:
If i use weights on both layouts - this is what it looks like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal">
<TextView
android:id="#+id/a"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:layout_weight="1"
android:text="Aaa" />
<TextView
android:id="#+id/b"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Bbfbd" />
</LinearLayout>
This is fine if the text is long, but with short text, it defeats the purpose.
With long text it works perfectly.
Solution:
The only solution I could figure out was to define the maxWidth property for the first TextView. This property is defined in dimens.xml, with a different value for different screen sizes.
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:ellipsize="end"
android:maxLines="1"
android:maxWidth="#dimen/max_text_view_width"
android:padding="10dp"
android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
<TextView
android:id="#+id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:padding="10dp"
android:maxLines="1"
android:text="Bbbbbbb" />
</LinearLayout>
dimens.xml
<resources>
<dimen name="max_text_view_width">300dp</dimen>
</resources>
The Output for this looks like this:
TextView has a property of maxWidth . you can set that
programmatically
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x; //width of the screen
int height = size.y; // height of the screen
textView1.setMaxWidth(width/2);
textView2.setMaxWidth(width/2); //disable this if you want to have the rest of the screen by second textView
Now, textView will initially have the minimum size and will grow to
the maximum of the half size of the screen. You can customize this
with condition to fullfill your needs.
If it is ok for the textviews to be static you can leave them in LinearLayout and assign weight=1 to each of them. That way they are always going to stay the same.
For a much better and flexible solution use Google's flexbox layout. It is an awesome library where you can do all kinds of stuff.
Enter the below code and the problem will be solved:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="horizontal"
android:layout_margin="10dp">
<TextView
android:id="#+id/a"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:scrollbars="vertical"
android:maxLines="2000"
android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/a"
android:background="#color/colorPrimary"
android:padding="10dp"
android:scrollbars="vertical"
android:layout_alignParentRight="true"
android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
</LinearLayout>
This will definately works :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal">
<TextView
android:layout_weight="1"
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:text="Asssda" />
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/a"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Bxdadsdc" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_margin="10dp">
<TextView
android:id="#+id/a"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:padding="10dp"
android:text="wqkdnoqwndowqndowqowndowqndodnwqodnqow" />
<TextView
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Aaaaaaaaainqwdiwdiwdniwqndiwqiwndiwqndiwqdniqwnnwiqdwoqndqowqndolnqwdlnaa\nkpaaaa" />
</LinearLayout>
Its not exaclty the solution but you should use this approach of using weights in linear layouts.
What could work is setting the maxWidth for the first View. You could set the maxWidth using xml resources for multiple screen sizes.
android:maxWidth="#dimen/max_width"
Then you could set max_width in dimens.xml
Giving each view an equal weight would make them occupy half the screen. That is not what you're looking for, I guess.
I think the best option here is to programmatically calculate the screen width of the device and set the max width of the first textView as a percentage of the screen width.
What finally worked for me was to set the maxWidth for the first View.
I set the maxWidth in the dimens xml and overridded the value for multiple screen sizes. It was difficult testing it out on multiple screens, but that's what finally worked for me.
android:maxWidth="#dimen/max_width"
I am working the DeveloperWalkthrough example from developer.xamarin.com. Everything works after adding the imageview and the second layout with the two text widgets. When I change the orientation value of the root linear layout, the second linear layout with the two text widgets disappears from the designer
Here is the source code
<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">
<ImageView
android:src="#android:drawable/ic_menu_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout1">
<TextView
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView1" />
<TextView
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView2" />
</LinearLayout>
</LinearLayout>
Attached are the before and after screenshots of the designer when I change the root LinearLayout orientation to horizontal
Your ImageView in the LinearLayout has a width of match_parent. This means it's going to fill out the entire screen. Your elements aren't disappearing, they're being pushed off-screen. They're siting next to the ImageView. Shorten the width and you can see them.
I need a table-like view in Android which I can fill with custom name-value rows. A row consists of two horizontally-placed text views which hold the name and the value. Every row should have the following properties:
The left text view is aligned to parent-left, and the right one is aligned to parent-right.
The right text never becomes longer than 7 ems, but can be smaller.
The left text should fill up the remaining space in the row.
Obviously, the two text views should never overlap.
Currently I'm trying to solve this with a LinearLayout as the container and two TextViews wrapped in a RelativeLayout, but something's clearly out of place here (the underlined bit is clearly longer than 7 ems):
My XMLs:
The row layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="4dp"
android:paddingTop="4dp">
<TextView
android:id="#+id/tb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:ellipsize="end"
android:maxEms="7"
android:maxLines="2" />
<TextView
android:id="#+id/tb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:ellipsize="end"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#id/tb2"
android:layout_toStartOf="#id/tb2" />
</RelativeLayout>
The container layout into which the rows are added programatically:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:padding="16dp"/>
I'm using this layout as part of a dialog. Not sure if it adds anything to the problem or not.
Any ideas/solutions?
You don't need to do anything special, just use LinearLayout instead of RelativeLayout with layout_weight:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="4dp"
android:paddingTop="4dp">
<TextView
android:id="#+id/tb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxEms="7"
android:maxLines="2" />
<TextView
android:id="#+id/tb1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:ellipsize="end" />
</LinearLayout>
Maybe some margin on the left of the right text would be good too.
it will work as per your requirements you can adjust weights
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:orientation="horizontal">
<TextView
android:id="#+id/tb1"
android:layout_width="0dip"
android:layout_weight="2.5"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:ellipsize="end"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#id/tb2"
android:text="nameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"
android:layout_toStartOf="#id/tb2" />
<TextView
android:id="#+id/tb2"
android:layout_width="0dip"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:ellipsize="end"
android:maxEms="7"
android:maxLines="2"
android:text="valuessss"/>
</LinearLayout>
All the above answer are correct but you have to understand RelativeLayout align components relative to each other e.g (left,right,top,bottom) to achieved require result you have to limit second component width, there is one issue your second component will alway have fixed width even first component is empty.
LinearLayout align component the way they are presented in xml mean linearly one next to other. the weight attribute tell the layout how much space component should occupy on the screen.A larger weight value allows it to expand to fill any remaining space in the parent view.
I need to create navigation bar (which I include in many activities.xml) with background which has TextView at center with titlw and back button (sometimes Back button is visible sometimes is not). How to to center TextView to be always in center of Layout ? At the moment when Back is visible TextView is moved slightly to right.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:background="#drawable/header_background"
android:gravity="center_vertical"
android:orientation="horizontal" >
<Button
android:id="#+id/btnPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_previous_arrow"
android:visibility="gone" />
<TextView
android:id="#+id/title"
style="#style/title"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center_vertical|center_horizontal"
android:text="Title" />
</LinearLayout>
A RelativeLayout will suit your needs better:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header_background" >
<Button
android:id="#+id/btnPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:paddingLeft="5dp"
android:background="#drawable/selector_previous_arrow"
android:visibility="gone" />
<TextView
android:id="#+id/title"
style="#style/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Title" />
</RelativeLayout>
Attribute layout_centerInParent will only work if the width and height are set to wrap_content. Alternatively, you can set the height and width to fill_parent and set the TextView's android:gravity="center".
Why your original layout was not working:
A LinearLayout does not allow overlapping of views. So, even though you set the TextView's height and width to fill_parent, it actually only fills up the space leftover after placing the back button. So, when the button is not visible, TextView is centered. When the button is visible, TextView is centered in the remainder of space: thus shifted a bit to the right.
Edit: Correction made (replaced android:layout_alignLeft="true" with android:layout_alignParentLeft="true")
<TextView
android:id="#+id/title"
style="#style/title"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="Title" />
I have a weird situation. I have a relatively simple layout with some rows and an image.
My layout looks like this (high level drawing):
The red square is an ImageView, the others are LinearLayouts and TextViews. My problem is that if i use Java code (setImageBitmap) to update the red ImageView's bitmap image then the Text 3's LinearLayout's weight seems disappear and its height will equal to the Text 3's TextView's height.
Like on this mockup (the green square is the new image):
The Text 3's LinearLayout's Weight is set to 1 so its height will force the Text 4's LinearLayout to be pushed to the bottom of the screen. So the Text 4 wont be on the bottom anymore, it jumps right after the Text 3's LinearLayout's bottom.
Here is my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text 1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/text2text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 2" />
</LinearLayout>
<ImageView
android:id="#+id/Pic2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/timage" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/Text3Container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 3" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" >
<TextView
android:id="#+id/TextView03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 4" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
It looks like im using some LinearLayouts that i should not but it contains more elements in the real layout, i just stripped it a little bit to be more simple to analyse here. But generally this is my xml.
Do you guys have any suggestion why is this happening? I also tried to put the image into a FrameLayout, same...
Thanks!