Having a problem with nested LinearLayouts to use as a custom row in a ListView.
App is a kind of internal corporate phone book and this row will be repeated in the ListView.
The "Details Witheld" on the right looks fine when gravity is set to left for it, but if gravity is set to center then it appears half off the page.
I'd guess my parent LinearLayout is too wide for the screen but it's set as fill_parent so I don't see how.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
Full XML source is below.
Aligned Left looks like this and I'd like Details to be a space in so it's centered above the Witheld.
Aligned Center looks like this
Full XML Source
<?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="horizontal" >
<!-- Left side name & post / parish -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:orientation="vertical" >
<TextView
android:id="#+id/txtrowname"
android:layout_marginBottom="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Smtih, Mr John"
android:textSize="24sp"
android:textColor="#color/darkblue_text"
android:textStyle="normal" />
<TextView
android:id="#+id/txtrowpost"
android:layout_marginBottom="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12 Some Street, SomeTown. SS11 1SS"
android:textSize="12sp"
android:textColor="#000000"
android:textStyle="normal" />
</LinearLayout>
<!-- Details withheld on right -->
<TextView
android:id="#+id/txtrowwitheld"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:text="Details Witheld"
android:layout_weight="20"
android:textSize="18sp"
android:gravity="center"
android:lines="2"
android:maxLines="2"
android:textColor="#FF0000"
android:layout_marginBottom="2dp"
android:textStyle="normal" />
</LinearLayout>
Image with layout_gravity as suggested by Ramesh
try layout_gravity in place of gravity that will work and dont use line="2". it will automatically fit into 2 lines if width exceeds.
I ended up just making do without it being centered.
Related
I have a custom info window for Google Maps API v2 that uses a RelativeLayout added by overwritting getInfoWindow in my class. This layout has a TextView with a title in the first line and three TextViews in the next line, one aligned to the left, another to the center and the thrid one to the right. It works, but the window takes the whole of the screen, which is very ugly in big screens like tablets.
I have tried to set the width of the RelativeLayout to some fixed value (let's say "50dp") or to "wrap_content", but it always takes the whole of the screen.
This is the XML for the layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bus_stop_info_window"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffffff" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="A title" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:gravity="left"
android:text="Test1" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:gravity="center"
android:text="Test2" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:gravity="left"
android:text="Test3" >
</TextView>
</RelativeLayout>
How can I achieve the desired effect?
For that make root element as Linear-layout and put Relative-layout inside it.so that window will not fill the whole screen in tablet.This will not affect whether Relative-layout width is wrap_content or fixed size.
U can try my answer here
I'm trying (in vain) to add margins to my ListView items. I have tried adding margin values to my RelativeLayout below but no matter what I do all I seem to get is a 1px line between each item.
What I really would like is to have rounded corners on each item, a 1px black border and a 3-5px margin left, top, and right but right now I'll settle for just a margin around each item :-)
How do I achieve my goals? Just the margin for now... ;-)
Here's what I have:
UPDATE: I have updated the xml below removing main layout and fragment layout. I have also updated the ListView item layout to what I have now which is closer to what I want but still not perfect. Screenshot added as well
listview item layout xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/matchMargin"
android:paddingRight="#dimen/matchMargin"
android:paddingTop="#dimen/matchMargin" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#cfcfcfcf" >
<include
android:id="#+id/matchKampstart"
layout="#layout/kampstart_layout" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/matchKampstart"
android:layout_marginTop="#dimen/belowKampstartMargin" >
<ImageView
android:id="#+id/tournamentImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/tournamentImageViewContentDescription"
android:gravity="left"
android:src="#drawable/sofabold_launcher" />
<ImageView
android:id="#+id/homeTeamImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/homeTeamImageViewContentDescription"
android:src="#drawable/sofabold_launcher" />
<TextView
android:id="#+id/homeTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:text="#string/home"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/dash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="#string/dash"
android:textSize="12sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/awayTeamImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:contentDescription="#string/awayTeamImageViewContentDescription"
android:src="#drawable/sofabold_launcher" />
<TextView
android:id="#+id/awayTeam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="#string/away"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/matchKampstart"
android:layout_marginTop="#dimen/belowKampstartMargin" >
<ImageView
android:id="#+id/tvChannelImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:contentDescription="#string/tvChannelImageViewContentDescription"
android:gravity="right"
android:src="#drawable/sofabold_launcher" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
This gives me the following where you'll notice a very small line to the right and left for each item. That I would also like to get rid of.
I'm not great with layouts, but I have noticed in the past that ListView rows often ignore LayoutParams. I have no idea where this happens or if it's possible to override, I do know you can easily work around it by adding another layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:background="#990000ff" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#9900ff00"
android:paddingLeft="10dp" >
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#99ff0000" />
</LinearLayout>
</LinearLayout>
Typically layouts that only have one child can be removed, but as you can see this one serves a purpose:
The outer-most layout is blue, the TextView is red, and the green is the extra layout that allows you to add some extra spacing. Notice the difference between padding (the green on the left) and margin (no green on the right). You have clearly stated that you want to use margins (android:layout_margin) but your code clearly uses padding (android:padding) so I included both.
A little late seeing this, but just add the following lines to your ListView xml element
android:divider="#00000000"
android:dividerHeight="10dp"
See the answer here for why. In short the child asks the parent, and the list view row uses AbsListView.LayoutParams, which doesn't include margins.
Why LinearLayout's margin is being ignored if used as ListView row view
In your adapter, catch your relative layout in getView(), then give a layout params ,
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)view.getLayoutParams();
params.setMargins(80, 0, 0, 0); //substitute parameters for left, top, right, bottom
YourRelativeLayoutInAdapter.setLayoutParams(params);
I suppose you have a ListView defined in an XML file somewhere, if so, you could add some padding to it, so that there will be some space between the edge of the screen and the ListView.
Example:
<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp"/>
I have a RelativeLayout containing a pair of side-by-side buttons, which I want to be centered within the layout. I could just put the buttons in a LinearLayout and center that in the RelativeLayout, but I want to keep my xml as clean as possible.
Here's what I tried, this just puts the "apply" button in the center and the "undo" button to the left of it:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15sp">
<TextView
android:id="#+id/instructions"
android:text="#string/instructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15sp"
android:layout_centerHorizontal="true"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/apply"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/undo"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>
android:gravity will align the content inside the view or layout it is used on.
android:layout_gravity will align the view or layout inside of his parent.
So adding
android:gravity="center"
to your RelativeLayout should do the trick...
Like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="15sp">
</RelativeLayout>
Here is an extension of BrainCrash's answer. It is a non nested option that groups and centers all three horizontally and vertically. In addition, it takes the top TextView and centers it horizontally across both buttons. If desired, you can then center the text within the TextView with android:gravity="center". I also removed the margins, added color, and set the RelativeLayout height to fill_parent to highlight the layout. Tested on API 11.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:background="#android:color/black"
>
<TextView
android:id="#+id/instructions"
android:text="TEST"
android:textSize="20sp"
android:background="#android:color/darker_gray"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignLeft="#+id/undo"
android:layout_alignRight="#+id/apply"
android:gravity="center"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="APPLY"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="UNDO"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>
android:layout_gravity="center"
will almost give what you're looking for.
Here is a combination of the above answer's that solved my specific situation:
Centering two separate labels within a layout that also includes a button in the left most position of the same layout (button, label, label, from left to right, where the labels are centered relative to the layout containing all three views - that is, the button doesn't push the labels off center).
I solved this by nesting two RelativeLayout's, where the outer most layout included the
Button and an Inner-RelativeLayout.
The Inner-RelativeLayout contained the two text labels (TextView's).
Here is a snippet that provides the details of how the centering and other layout stuff was done:
see: RelativeLayout Gravity not applied? and
Gravity and layout_gravity on Android
for the difference's between gravity and layout_gravity.
Tweak the paddingLeft on the btn_button1 Button to see that the TextView's do not move.
(My apologies to havexz for the downvotes. I was too hasty in thinking that just b/c your suggestions didn't solve the exact question being ask, that they do help to solve very similar situations (the answer here solves a very specific situation, and only the combination of all these answer's solved my problem. I tried upvoting, but it won't let me unless I edit the answer's, which I don't want to do.)
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_outer"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:background="#FF0000FF">
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/btn_button1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF00FF00"
android:text="<"
android:textSize="20sp"
android:paddingLeft="40dip"/>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FFFF00FF"
android:layout_centerInParent="true"
android:gravity="center">
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:text="Complaint #"
android:gravity="center"/>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:layout_toRightOf="#id/tv_text1"
android:gravity="center"/>
</RelativeLayout>
</RelativeLayout>
LinearLayout is a good option. Other than that there are options like create an invisible view and center that and then align left button to the left it and right on the right of it. BUT those are just work arounds.
I need to create an XML with the following content:
* Two TextViews with varying text (1- 3 rows), one TextView below the other.
* One ImageView to the right of the 2 TextViews, centered vertically, 30x30 px.
One major limitation is that it can't take the whole screen when inflated into a PopupWindow, which means that I cannot use the attributes fill_parent in many places.
I tried a lot of different layouts, but the ImageView keeps getting pushed away by the TextViews when the text is long. When the text is "half long" the image gets tiny but is still visible. I want it to always be 30x30 px, the text can wrap and use another line instead.
I tried to specify values for width and minWidth. Also tried layout_weight="1" for the ImageView. Also tried wrapping the ImageView into a LinearLayout and give that the layout_weight="1" parameter. Nothing works.
Here's an example of what is not working:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView android:id="#+id/popupTitle" android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/popupContent"
android:layout_width="wrap_content" android:layout_height="wrap_content"/>
</LinearLayout>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/img_30x30_px" />
</LinearLayout>
I've had a similar problem and i found that the TableView layout worked for me. It took a while but you can play with the stretch and strink columns proeprties to change the behaviour of how the columns expand to match there content.
Note that you should be able to set the linearLayout of your text to fill_parent (to fill the column space).
Read this on how TableRow works http://developer.android.com/resources/tutorials/views/hello-tablelayout.html
<TableRow>
<!-- Column 1 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
</LinearLayout>
<!-- Column 2 -->
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/img_30x30_px" />
</TableRow>
(Afraid i'm not on a machine with Android so i couldn't test the above code).
Thank you so much Emile! It works! You made my weekend! :)
I had to try it right away (althought it's friday evening), and here's what my xml now looks like:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:shrinkColumns="0">
<TableRow>
<!-- Column 1 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView android:id="#+id/popupTitle"
android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<TextView android:id="#+id/popupContent"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
<!-- Column 2 -->
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:src="#drawable/img_30x30_px" />
</TableRow>
</TableLayout>
I have a relative layout which looks like this:
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/nameText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip"
android:layout_alignParentLeft="true"
android:text="Symbol"
/>
<TextView
android:id="#+id/priceText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip"
android:layout_toRightOf="#+id/nameText"
android:gravity="right"
android:text="100"
/>
<TextView
android:id="#+id/changeText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip"
android:layout_toRightOf="#+id/priceText"
android:gravity="right"
android:text="1.3"
/>
</RelativeLayout>
How can I get the company name to line up next to the number 1.3?
Following up on Mayra's answer, here's one way to do it using layout_weight:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TableRow>
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:padding="5dip"
android:layout_weight="0"
android:text="Code"
/>
<TextView
android:id="#+id/middle_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:padding="5dip"
android:layout_weight="1"
android:text="Name of Company"
/>
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip"
android:gravity="right|center_vertical"
android:layout_weight="0"
android:text="1.3"
/>
</TableRow>
</TableLayout>
It's not clear exactly what you want to have happen, but here are a few options:
If you want columns to be aligned across rows, you might consider using a TableLayout.
You can also use the "weight" atribute to affect what percentage of the screen each TextView takes up. If you assign a value of 1 on the left-most text view, and 0 on the other 2, this will cause the left text view to take up all the extra space, and thus push the middle text view to the right. This will probably cause the middle text view to look right aligned though. You could instead give the left one 20%, the middle one 50% and the right one 30% by assign 2, 5 and 3.
You could also just set an explicit size for the text views (in dpi), but this might be problamatic with different sized screens.
I agree with Mayra! Use the TableView, you'll get the formatting your looking for as well as keep almost all functionality of a ListView (scolling, and list oriented functionality)