I want my rows to be 50dp high, but for some reason it will only wrap_content.
Here is my 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="50dp"
android:background="#drawable/master_selector" >
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_gravity="center_vertical"
android:layout_marginTop="3dp"
android:contentDescription="Category" >
</ImageView>
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:text="#+id/label"
android:textColor="#ebebeb"
android:textSize="25sp" >
</TextView>
</LinearLayout>
I cannot figure out WHY the 50dp is having no effect? It's on a regular ListView
Edit: Screenshot:
As you see, the rows are close together. The text is only 25sp (on regular text size).
Edit: Changing TextView height to 50dp and gravity to center_vertical fixes it.
The layout values of an inflated view can be easily forgotten in some implementations (Usually because they're added with a specified LayoutParam object as is the case in ListView).
You can fix this by adding one of the childrens heights to be 50dp which will correctly display.
Related
I have a TextView and ImageView in a ListView row, positioned next to each other. However, the ImageView doesn't show up at all, and doesn't register clicks either. This is the XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:text="text"
android:layout_width="320dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_centerVertical="true"
android:padding="10dp" />
<ImageView
android:id="#+id/imageView"
android:clickable="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/textView"
android:src="#drawable/ic_action"/>
</RelativeLayout>
The problem seems to lie in the layout_toRightOf line, if I remove it, the ImageView is shown, but in the wrong place. But I don't understand why it's causing a problem. What am I missing?
The issue is that the TextView is pushing the ImageView off the screen.
You can fix this using a LinearLayout and android:layout_weight
eg:
<?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:id="#+id/textView"
android:text="text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:layout_centerVertical="true"
android:padding="10dp" />
<ImageView
android:id="#+id/imageView"
android:clickable="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/textView"
android:src="#drawable/ic_action"/>
</LinearLayout>
More info on the layout_weight attribute:
This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.
For example, if there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight will not grow and will only occupy the area required by its content. The other two will expand equally to fill the space remaining after all three fields are measured. If the third field is then given a weight of 2 (instead of 0), then it is now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.
You need to use LinearLayout with weight.. if you set fixed width and the size of the phone is small, it will either stretch out of the screen.
//do linearlayout with orientation horizontal
<LinearLayout
...
orientation = "horizontal"
...
>
<TextView
....
android:layout_width="0dp"
android:layout_weight="1"
...
/>
<Button
....
android:layout_width="wrap_content"
...
/>
</LinearLayout>
Play with android:layout_weight, you will understand
I got following simple Layout. The problem can be reproduced in the android studio designer:
<?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">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_small"
android:text="#string/long_string"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/x"
android:layout_toEndOf="#+id/x"
android:layout_centerVertical="true" />
</RelativeLayout>
This layout works fine if the text length of the textview is short. The checkbox is placed on the right of the textview. But if the text gets long and even wraps maybe, then the checkbox is pushed out of the view. It is not visible anymore. I would like that the checkbox is always visible on the right of the textview even, if it fills the whole width of the screen.
I tried to rewrite the layout with a LinearLayout which doesn't work either.
<?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/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_small"
android:text="#string/long_string"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
Do you know a trick to to achieve this with relative layout? I would somehow expect this behaviour from relative layout by default. Thanks ;)
This is working for me: make checkBox alignParentRight and make TextView toLeftOf it:
<?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">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/y"
android:text="This is very-very-very looooooooooooong stringgggg, very-very, long-long"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Edit. You can include this Relative Layout into other (parent) layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="left">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/y"
android:text="this is veryyyyy yyyyyyyyyy yyyyyy yyy loooooo oooooooo ooon nnggggg gggg striiii iiiiin gggggg ggggg ggggggg ggg"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true" />
</RelativeLayout>
</RelativeLayout>
It's also working. If you put android:gravity="left" into Relative layout, it will locate its content on the left side.
One way out would be to put the textview and checkbox in a linear layout with orientation horizontal. Set width of checkbox to be whatever you want (a constant) and the width of textbox to be 0dp and layout_weight of 1.
You should put the property layout_weight to make your views (TextView and Checkbox) have a deff space in the screen instead of use a hard value
<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/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:layout_marginEnd="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_small"
android:text="#string/long_string"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_weight="0.1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
I guess the desired layout is not possible by default. I tried to do this using RelativeLayout, LinearLayout and TableLayout. It is technically understandable that the these layout do not support that behaviour. The relative layout would have to explicitly respect the case that an element on the left or right is minimal visible inside the parent even it is placed to left or right. Another solution would be if the table layout would allow a column to consume the rest of the space but respects min width of other columns as well.
For my case i wrote a workaround. I used the initial relative layout of my question but set a max width to the textview using following calculation:
DisplayMetrics displaymetrics = new DisplayMetrics();
context.getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int displayWidth = displaymetrics.widthPixels;
That guarantees the checkbox to be visible. I know the solution could be hardly possible in scenarios where the given layout is embedded in a more complex layout.
Following is my .xml file
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical" >
...
<TextView
android:id="#+id/tvAlternateRoad"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/fancy_dashboard_max_speed_circle_strock_size"
android:gravity="start"
android:text="Via A11"
android:lines="1"
android:textColor="#808080"
android:textSize="#dimen/fancy_dashboard_lable_size" />
</TableRow>
I am calling the above .xml file in my main view .xml as following,
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.85"
android:gravity="end"
android:orientation="horizontal" >
<TableLayout
android:id="#+id/layAlternateRoute"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="#dimen/fancy_dashboard_max_speed_circle_strock_size"
android:background="#drawable/bg_round_rect_alternate_route" />
</RelativeLayout>
http://i.stack.imgur.com/a0KRs.png
I am displaying a view on the screen which has above TableRow element. I am setting this Textview tvAlternateRoad's text value at run time. Sometimes when Text is large then it is moving outside the view. I tried to truncate it using android:ellipsize="end" from some S.O. posts but it seems it is not working now a days.
Can somebody help me on this?
Give paddingRight to text view. Also, text view has width wrap content and no relation with any other view. So your text view width can exceed the rounded corner background image as per text length. So either give some maxWidth value or relate it to some other views.
Edit
I just made this 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="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textview_Statu"
style="#style/text_view_login_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/more_txt3_margin_t"
android:background="#android:color/white"
android:ellipsize="end"
android:singleLine="true"
android:text="1234567890qwertyuiopasdfghjklzxcvbnm"
android:textColor="#color/blue_end" />
</LinearLayout>
In graphical view, It looks like this
Its working fine.
I have noticed that TextView will do different things with respect to wrapping and truncating depending on the container it's in. Try having the TableRow cell be, for instance, a FrameLayout. Then put your TextView inside the FrameLayout and see what happens.
Just use:
android:singleLine="true" and android:ellipsize="end"
and set a fixed width for your textview like "match_parent" or something in dp like "180dp" etc.
singleLine="true" needs your textview to have a fixed width which is not provided by "wrap_content".
A textview will only show ellipses at the end of its view's bounds and since you have set "wrap_content" your textview does not have any fixed bounds.
try this
tablelayout should be
<TableLayout
android:id="#+id/tbl"
android:layout_height="wrap_content"
android:layout_width="match_parent"
>
the remaining part should be
<TableRow
android:layout_height="wrap_content"
android:layout_width="match_parent"
>
<TextView
android:id="#+id/tvAlternateRoad"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:ellipsize="end"
android:maxLines="1"
android:minLines="1"
android:layout_marginRight="#dimen/fancy_dashboard_max_speed_circle_strock_size"
android:gravity="start"
android:text="Via A11"
android:layout_weight="1"
android:textColor="#808080"
android:textSize="#dimen/fancy_dashboard_lable_size" />
Ok, after long effort I have solve the issue my self.
Logic:
fetch the screen size programmatically
int screen_width = context.getResources().getDisplayMetrics().widthPixels;
then I used 42% of the screen_width as maxwidth of textView
((TextView)alternate.findViewById(R.id.tvAlternateRoad)).setMaxWidth((int)(screen_width*0.42));
I have also set below values in xml
android:ellipsize="marquee"
android:maxLines="1"
I have this XML layout in my App (example of one button):
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollViewMain"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff0e8" >
///some views
<Button
android:id="#+id/btnVysledkySportka"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/chckSprotka"
android:layout_alignRight="#+id/chckSprotka"
android:layout_alignTop="#+id/chckSprotka"
android:layout_margin="3dp"
android:layout_toRightOf="#+id/textView3"
android:background="#ffe118"
android:gravity="center"
android:onClick="vysledkySportka"
android:text="Archiv výsledků"
android:textStyle="bold" />
///some views
</RelativeLayout>
</ScrollView>
But when I start my app at Android 4.3, the text of buttons isn´t in center of button. Look at the screenshot (in red rectangle):
Where can be problem?
EDIT:
Whole layout
When you specify:
android:layout_alignBottom="#+id/chckSprotka"
android:layout_alignRight="#+id/chckSprotka"
android:layout_alignTop="#+id/chckSprotka"
It does make the bottom/right/top edge of your button match the bottom edge of the given anchor view ID & accommodates bottom/right/top margin, but while doing that, the android_gravity does not take the resultant height/width into consideration.
So the gravity of the text is center according to wrap_content for layout_height and layout_width.
You can verify that by setting values for layout_height and layout_width (Eg. 200dp and 100dp to try with) and you will get the text with gravity center but for that height and width.
To confirm the same, what you can do is use a container LinearLayout for your Button like:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/chckStastnych"
android:layout_alignRight="#+id/chckStastnych"
android:layout_alignTop="#+id/chckStastnych"
android:layout_margin="3dp"
android:layout_toRightOf="#+id/textView3"
android:background="#ffe118" >
<Button
android:id="#+id/btnVysledkyStastnych"
android:layout_gravity="center"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffe118"
android:gravity="center"
android:onClick="vysledkyStastnych"
android:text="Archiv výsledků"
android:textStyle="bold" />
</LinearLayout>
Set the gravity of LinearLayout as center and then center the Button within or as shown above, use layout_gravity for the button to center it in parent LinearLayout.
This will work as a solution when you do that for all 4 buttons, however there might be better options if you restructure your xml and avoid this kind of nesting.
Try This:
<Button
android:id="#+id/btnVysledkySportka"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/chckSprotka"
android:layout_alignRight="#+id/chckSprotka"
android:layout_alignTop="#+id/chckSprotka"
android:layout_margin="3dp"
android:layout_toRightOf="#+id/textView3"
android:background="#ffe118"
android:gravity="center_vertical"
android:onClick="vysledkySportka"
android:text="Archiv výsledků"
android:textStyle="bold" />
I have posted the exact layout below. I want to show an image and text vertically centered inside the footer. I have applied:
android:gravity="center_vertical|center"
To both the LinearLayout containing these elements and the TextView inside but nevertheless the whole line image and text appears way too far towards the top of the footer. I want it centered vertically but instead it is in the top 30 % of the footer at all times.
<?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="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/someMessageMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_margin="10dip"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical|center"
android:paddingBottom="2dip"
android:paddingTop="16dip" >
<ImageView
android:id="#+id/myImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dip"
android:paddingTop="3dip"
android:src="#drawable/picimg" >
</ImageView>
<TextView
android:id="#+id/myMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:gravity="center_vertical|center"
android:text="This message appears way to close to the top of the footer. It should be along with the image in the center:"
android:textStyle="bold"/>
</LinearLayout>
<Button
android:id="#+id/myButton"
style="#style/mybuttonstyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:text="#string/lbl_send"
android:visibility="gone" />
</LinearLayout>
After seeing your layout it seems you haven't given android:paddingTop to your TextView. Thats why its appearing to the top.
Moreover you can also remove android:paddingTop from ImageView if that suits to your layout.
Hope that helps.
How big is the image? I think the problem is in your second LinearLayout. You're setting the height to be "wrap_content" so that means that it will only be as big as the biggest child. If the image and the text are about the same height, then it won't seem as if anything is getting centered. You can test this theory by forcing the height to be something big enough.