I have two side by side TextViews in LinearLayout, but second TextView taking more space than first one and i want both to take equal width that's why i have used layout_weight="1" but did not solve my issue, check below:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_margin="20dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/as_individual"
android:gravity="center_vertical"
android:drawablePadding="5dp"
android:layout_weight="1"
android:textColor="#ffffff"
android:text="As" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/for_company"
android:gravity="center_vertical"
android:textColor="#ffffff"
android:drawablePadding="5dp"
android:text="For Company"/>
</LinearLayout>
If you want to use layout_wight for horizontal Linearlayouts android:layout_width must be "0dp" and for vertical layouts you need to set android:layout_height="0dp"
try replace
android:layout_width="wrap_content"
by
android:layout_width="0dp"
for each TextView.
works for me.
Change the attribute android:layout_height of the Textviews to
android:layout_height="0dp"
or
android:layout_height="fill_parent"
you were restriting width to "wrap_content" and that was the problem as the first textview's content was less than second's here is what you should do.
<LinearLayout
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:text="This is first"
android:layout_weight="1"
android:layout_height="match_parent" />
<TextView
android:layout_width="fill_parent"
android:text="This is second asdasdasdasdasdasdasdasdasd"
android:layout_weight="1"
android:layout_height="match_parent" />
</LinearLayout>
Related
I am trying to achieve the following layout for 2 elements in a LinearLayout:
So to sum up:
- The second element should be allowed to fill as much as it needs
- The first element should be shortened down (textview ending on "...") if it is necessary.
- On bigger devices, both elements should be visible (if possible of course) and left aligned.
So here is my solution so far:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/filter_topbar_height"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/filter_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="0">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:lines="1"
android:clickable="false"
android:text="#string/filter_uppercase_colon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:lines="1"
android:ellipsize="end"
android:id="#+id/category_spinner"/>
</LinearLayout>
<LinearLayout
android:id="#+id/sorting_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:lines="1"
android:text="#string/sorting_uppercase_colon" />
<Spinner
android:id="#+id/sort_spinner"
style="#style/spinner"
android:lines="1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:spinnerMode="dialog"
tools:entries="#array/sorting_options"/>
</LinearLayout>
</LinearLayout>
The result of my current solution, is the opposite of what I want. Here the first element takes the width that it needs while the second one is pushed away to the right.
Change the first LinearLayout as
android:id="#+id/filter_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
And the second LinearLayout as
android:id="#+id/sorting_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0"
android:orientation="horizontal"
You should use ellipsize property of textview like
android:scrollHorizontally="true"
android:ellipsize="end"
android:maxLines="1"
Add this two properties in your text view
android:maxLines="1"
android:ellipsize="end"
In my application I use the custom listview for tableview effect.
But each and every row not align properlly.
only first element give good alignment.
also try the gravity tag.but same effect found.
my xml code:
<?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="50dp"
android:weightSum="5"
android:layout_marginTop="15dp"
android:id="#+id/linearLayout">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/order_id"
android:id="#+id/tv_orderid"
android:textSize="20sp"
android:gravity="left"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/name"
android:gravity="left"
android:id="#+id/tv_name"
android:textSize="20sp"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/mobile_number"
android:id="#+id/tv_mobilenumber"
android:textSize="20sp"
android:gravity="left"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/order_date_and_time"
android:id="#+id/tv_orderdate_and_time"
android:textSize="20sp"
android:gravity="left"
android:layout_weight="2"/>
</LinearLayout>
can any one help me to align all the rows properlly.
Simple use
android:layout_width="0dp"
instead of
android:layout_width="wrap_content"
for each TextView.
The answer is here where is said:
To create a linear layout in which each child uses the same amount of
space on the screen, set the android:layout_height of each view to
"0dp" (for a vertical layout) or the android:layout_width of each view
to "0dp" (for a horizontal layout). Then set the android:layout_weight
of each view to "1".
I am new to android, I have a linear layout list item and would like the TextView itemName to fill the remaining blank space on the row while the other two views (itemIcon and itemTimestamp) just take up as much space as they require hence used wrap_content.
I have tried fill_parent and match_parent on ItemName android:layout_width but it ends up hiding itemTimestamp view. I have tried RelativeLayout but had no luck, would prefer to stick with Linearlayout if possible.
Appreciate your help.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemNotificationBuzz"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffff0000"
>
<LinearLayout
android:id="#+id/notificationHeader"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="#ffff0000"
>
<ImageView
android:id="#+id/notificationIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:maxHeight="35dp"
android:maxWidth="35dp"
android:background="#FF000000"
android:padding="1dp"
android:src="#drawable/ic_action_place" />
<TextView
android:id="#+id/notificationName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="5dp"
android:textSize="18sp"
android:textColor="#android:color/white"
android:background="#A4C739"
android:typeface="sans"
android:textStyle="bold"
android:maxLines="1"
android:text="Fname Lname"
/>
<TextView
android:id="#+id/notificationTimestamp"
android:layout_width = "wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:background="#FF000000"
android:ems="10"
android:maxLines="1"
android:text="2m"
android:textColor="#android:color/white"
android:typeface="sans" />
</LinearLayout>
</RelativeLayout>
If you want to use the LinearLayout you can achieve what you want by using weightSum attribute in your LinearLayout and layout_weight for your item Name TextView.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/notificationHeader"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffff0000"
android:orientation="horizontal"
android:weightSum="1">
<ImageView
android:id="#+id/notificationIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF000000"
android:gravity="left"
android:maxHeight="35dp"
android:maxWidth="35dp"
android:padding="1dp"
android:src="#drawable/ic_launcher"/>
<TextView
android:id="#+id/notificationName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#A4C739"
android:gravity="center"
android:maxLines="1"
android:padding="5dp"
android:text="Fname Lname"
android:textColor="#android:color/white"
android:textSize="18sp"
android:textStyle="bold"
android:typeface="sans"
android:layout_weight="1"/>
<TextView
android:id="#+id/notificationTimestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF000000"
android:gravity="right"
android:maxLines="1"
android:text="2m"
android:textColor="#android:color/white"
android:typeface="sans"/>
</LinearLayout>
This will make your item Name to fill all the space until it reaches the last element.
Note: When you use layout_weight you have to set the layout_width to 0dp. And also you should delete ems = 10 from your last element because it makes your notificationTimestamp element to have a larger width and it will push the Name element to the left leaving an empty space.
You can directly use RelativeLayout to achieve what you want. The answer is already here at How to make layout with View fill the remaining space?
If you want to still use the LinearLayout then that is also possible. In this case to achieve what you want, set the layout_weight property of the widgets that you want to just wrap content with to 0 (you should still set them to wrap_content) and then set the layout_weight of the widget that you want to occupy the remaining space to 1.
There is no reason to use RelativeLayout here. What you need to use is layout-weight. You need to set layout_width to 0dp and layout-weight to 1
Here is the updated layout (btw, I removed the parent RelativeLayout as it didn't have any use):
<ImageView
android:id="#+id/notificationIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:maxHeight="35dp"
android:maxWidth="35dp"
android:background="#FF000000"
android:padding="1dp"
android:src="#drawable/ic_action_place" />
<TextView
android:id="#+id/notificationName"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="5dp"
android:textSize="18sp"
android:textColor="#android:color/white"
android:background="#A4C739"
android:typeface="sans"
android:textStyle="bold"
android:maxLines="1"
android:text="Fname Lname"
/>
<TextView
android:id="#+id/notificationTimestamp"
android:layout_width = "wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:background="#FF000000"
android:ems="10"
android:maxLines="1"
android:text="2m"
android:textColor="#android:color/white"
android:typeface="sans" />
The following is the XML of my layout. It explicitly states that the title, time and description TextViews should be under the image of the alarm. However, as the screen shot shows, the TextViews have moved into the ImageView. Why does this happen and how can I fix this? The problem only started happening when I added the scrollview.
XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/img_alarm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/alarm"
android:layout_centerInParent="true"
android:contentDescription="#string/content_description_layout_alarm"/>
<TextView
android:id="#+id/lbl_alarm_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_below="#+id/img_alarm"
android:layout_alignLeft="#+id/img_alarm"
android:text="#string/empty"
/>
<TextView
android:id="#+id/lbl_alarm_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_below="#+id/img_alarm"
android:layout_alignRight="#+id/img_alarm"
android:text="#string/empty"
/>
<TextView
android:id="#+id/lbl_alarm_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/lbl_alarm_title"
android:layout_alignLeft="#+id/lbl_alarm_title"
android:layout_alignRight="#+id/lbl_alarm_time"
android:maxLines="1"
android:ellipsize="marquee"
android:text="#string/empty"
/>
<Button
android:id="#+id/btn_stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lbl_alarm_description"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dip"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="#string/stop_layout_alarm"
android:gravity="center" />
</RelativeLayout>
</ScrollView>
Image
Cute app :)
hmm... not sure why it's doing it, looks like you have the right code, without busting out eclipse. but i've also had some weird bugs with relativelayout that i didn't understand and didn't have time to debug.
i do know of an alternative way you can accomplish what you're looking for -
have a scrollview that encases a linearlayout instead of a relative layout. Do these things:
For the linearlayout, you can set orientation = vertical so that it's still a top down order.
For the part where you need two textviews where one is aligned to the right and the other is aligned to the right, you need another inner linearlayout with its orientation=horizontal. then have one element align parent left, and the other align parent right. add a weightSum=1 attribute to this linearlayout and have each of the two textviews layout_width=0.5 so that each is half the width of the screen
Apply a weightSum=1 attribute to your outer most linearlayout, and see each element inside so that it's layout_weight sum adds up to 1. layout_weight will allow an element to take up that much % of real estate on the screen. like if you set your imageView to have android:layout_weight=0.8 then it'll take up 80% of the screen... since mathematically, (layout_weight/weightSum) = (.08/1) = 80%
try to use that mechanism instead, and if should work :) if it's confusing i can give code
example
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<ImageView
android:id="#+id/img_alarm"
android:layout_width="match_parent"
android:layout_height="0dip"
android:src="#drawable/alarm"
android:layout_weight="0.7"
android:contentDescription="#string/content_description_layout_alarm"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1">
<TextView
android:id="#+id/lbl_alarm_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:text="#string/empty"
/>
<TextView
android:id="#+id/lbl_alarm_time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:text="#string/empty"
/>
</LinearLayout>
<TextView
android:id="#+id/lbl_alarm_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.1"
android:maxLines="1"
android:ellipsize="marquee"
android:text="#string/empty"
/>
<Button
android:id="#+id/btn_stop"
android:layout_weight="0.1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dip"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="#string/stop_layout_alarm"
android:gravity="center" />
</LinearLayout>
</ScrollView>
i hope this deserves at least an upvote for the effort :D
I need some help with alignment of custom list view with image and text.
I'm trying with this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center"
android:paddingTop="20dp"
android:layout_weight="2"
android:text="TextView" />
</LinearLayout>
And I thought that weight is keeping the ratio of element, not the content of the element, but apparently it takes care about things inside the text view, so my list looks messy.
How to align it to be the same, no matter how long the text is in text view?
So the green line should be straight vertical line, no matter of text on right hand side.
Tnx
Basically, your layout should be this:
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center"
android:paddingTop="20dp"
android:layout_weight="2"
android:drawableLeft="#drawable/ic_launcher"
android:text="TextView" />
The android:drawableLeft="#drawable/ic_launcher" defines the leftmost compound drawable, and it will align nicely.
Remove android:layout_weight.
This will align you images since you define the width.
If you want to align the text too, remove android:gravity or set it to left.
You can add android:marginRight to the imageView for better readability.
use
android:layout_height="0dp"
in your textView. it will give fixed size to all your elements. here, the size shared by the weight param is variable as it depends on the amount of text.
Try this instead:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="2"
android:text="TextView" />
</LinearLayout>