Develop Reference

Android - having trouble properly sizing an xml layout used for a listview row

I'm trying to set up an xml layout to be used for a row in a ListView. The layout consists of a root LinearLayout with a child RelativeLayout containing two ImageViews (one anchored to the other's bottom/right corner) and a child vertical LinearLayout containing two TextViews. I want each row in the listview to have the same width and height, despite the size of the content in the subviews. I realize I cannot use wrap_content which will size the views based on their content, but I'm unclear on what I should use to accomplish a uniform width/height. I tried using fixed dp values, but that just made it even worse. I've attached two screenshots. The first one, from the iOS version, shows how it should look, while the second one shows how it looks on the Android version with the following layout. As a said, I know what's wrong (the wrap_content attributes), but how do I change it to size correctly? Thanks in advance!
<?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" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/campaign_thumbnail_container" >
<ImageView
android:id="#+id/campaign_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView
android:id="#+id/campaign_mark_new"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/campaign_thumbnail"
android:layout_alignRight="#id/campaign_thumbnail"
android:src="#drawable/new1" />
</RelativeLayout>
<LinearLayout
android:id="#+id/campaign_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/word_bar"
android:orientation="vertical" >
<TextView
android:id="#+id/campaign_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/campaign_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/campaign_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/campaign_footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>

EDIT - According to comments below:
One general thing: To size elements in a LinearLayout uniformly, you need to do two things:
Use a equal android:layout_weight for each element
Make the width or height (whatever has to be uniquely sized) ="0dip"
This is, because the weight factor is only used to fill the rest of the available space. First all elements are placed using their weight/height, then the still available space is calculated and distributed by weight to each element.
EDIT-end
Now, let me create the layouts step by step.
First, this would be your layout of one entry without the "new campaign" indication.
<!-- Type 1: Picture left, text right. half-half size. Picture resized to fit -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_menu_camera" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Your Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
You get a warning, because the LinearLayout itself has a weight. That is necessary, to give all list entries the same height.
Here's type 2:
<!-- Type 2: Picture right, text left. half-half size. Picture resized to fit -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView2"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Your Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_menu_camera" />
</LinearLayout>
(Where's my "That was easy!" button?)
And Type 3. Even easier:
<!-- Type 3: Picture full width. Picture resized to fit -->
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_menu_camera" />
Now the final thing. Put these three layouts in separate XML-files and include them into a wrapping RelativeLayout.
<!-- Finally overlay the entry with a new indication -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" >
<ImageView
android:id="#+id/newIndication"
android:layout_width="24dip"
android:layout_height="24dip"
android:layout_alignRight="#+id/entry1"
android:layout_alignBottom="#+id/entry1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_input_add" />
<include
layout="#layout/type1entry"
android:id="#+id/entry1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
Note the include. I've put the Type1 LinearLayout in its own XML file named "type1entry". By giving this a new id with #+id/entry1 I can access this entry explicitely in the Activity. Also, I've given the indicator a size of 24dip in square. Change that to your image accordingly.
I've checked the layouts in Eclipse and they did look as I expected them.

Do you need to use a relative layout?
If not, use linearLayout with weights like this.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/campaign_thumbnail_container"
android:weightSum="100" >
<ImageView
android:id="#+id/campaign_thumbnail"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="50"
android:scaleType="fitCenter"
/>
<ImageView
android:id="#+id/campaign_mark_new"
android:layout_width="0dip"
android:layout_height="match_parent"
android:src="#drawable/new1"
android:layout_weight=50
android:scaleType="fitCenter" />
</LinearLayout>
This is untested, but similar solutions like this have worked for me in the past.

android main XML works diffrent on 2.3 and 4.0

this XML works different on 2.3 and 4.0. one of that shows table row elemens left fitted but other centered.
thanks for your help
<LinearLayout android:id="#+id/Scorelistic" android:layout_marginLeft="70dp" android:layout_marginTop="30dp" android:layout_gravity="center" android:background="#drawable/bestscore" android:layout_height="267dp" android:layout_width="432dp" android:orientation="vertical" android:weightSum="1">
<TableLayout android:layout_height="fill_parent" android:weightSum="1" android:layout_marginTop="50dp" android:id="#+id/tableLayout1" android:layout_gravity="center" android:layout_width="fill_parent">
<TableRow android:layout_height="85dp" android:layout_width="wrap_content" android:id="#+id/tableRow1">
<FrameLayout android:layout_width="349dp" android:layout_height="74dp" android:id="#+id/frameLayout5">
<ImageView android:layout_height="74dp" android:id="#+id/score1" android:layout_marginLeft="80dp" android:layout_width="349dp" android:background="#drawable/birincibg" android:visibility="visible"></ImageView>
<TextView android:id="#+id/birinci" android:textSize="16sp" android:layout_marginLeft="80dp" android:gravity="center" android:layout_width="fill_parent" android:layout_height="fill_parent" android:textColor="#000000"></TextView>
</FrameLayout>
</TableRow>
</TableLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>

This can be because you're specifying device points and so the whole layout becomes dependent on your device screen size. And so if your two devices have different screen sizes you see the difference. It's generally not recommended to use device points in layouts you may want to use gravity, alignments and weights instead. Especially in TableLayouts you don't really need device points or so it seems

Android - UI Elements going off screen

I'm having trouble positioning the layout elements. The AutoComplete in my TableLayout and the button after it are expanding the TableRow larger than the width of the screen. Anyone have an idea why? Below is my XML code as well as a picture of the problem.
Thanks in advance!!
<?xml version="1.0" encoding="utf-8"?>
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView android:id="#+id/installation"
android:textSize="14sp" android:completionThreshold="3" />
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:id="#+id/btn_find" android:text="#string/btn_find"></Button>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:id="#+id/error" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:paddingTop="20px"
android:textColor="#FF0000" />
</TableRow>
Picture of UI

For the ones that do need the table layout, use the layout_weight option. See code below.
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="6sp" android:id="#+id/detailsLayout">
<TableRow
android:layout_width="wrap_content"
android:id="#+id/TableRow03"
android:layout_height="wrap_content">
<TextView
android:id="#+id/TextView06"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Detail 1"></TextView>
<TextView
android:text="#string/empty_value"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/sessionAudience"
android:layout_weight="1"></TextView>
</TableRow>
</TableLayout>

By default, widgets in a TableRow have android:layout_width="wrap_content". That does not limit you to the size of the screen -- wrap_content means "wrap content", not "wrap content but please don't go off the edge of the screen, if you don't mind".
In this case, you do not need to use a TableLayout and set of TableRows, since you do not have a table.
So, one approach is to use a RelativeLayout and have your AutoCompleteTextView use android:layout_alignParentLeft="true" and android:layout_alignParentRight="true". That will pin it to the outer edges of the RelativeLayout, which you can size with android:layout_width=fill_parent to fill the screen.

How to make buttons cover full screen width in Android Linear Layout?

I have following three button in a Linear Layout with width fill_parent.
How can I set the width of these buttons to equally cover the whole screen area?
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnReplyMessage"
android:gravity="left"
android:text="Reply"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnMarkAsUnread"
android:gravity="left"
android:text="Mark as unread"
/>
<ImageButton
android:id="#+id/btnDeleteMessage"
android:src="#drawable/imgsearch"
android:gravity="right"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
/>

Give all buttons the following properties
android:layout_width="fill_parent"
android:layout_weight="1"
fill_parent tells them to consume as much width as possible, and weight determines how that width shall be distributed, when more than one control are competing for the same space. (Try playing around with different values of weight for each button to see how that works)

You should just specify these attributes for each button:
android:layout_width="fill_parent"
android:layout_weight="1"
So it should be something like that:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>

you can use following code:
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
You must to do 0dp in width on every button.

Android: How to make all elements inside LinearLayout same size?

I would like to create a dialog to display a video title and tags. Below text I would like to add buttons View, Edit and Delete and make these elements same size. Does anyone know how to modify .xml layout file in order to make elements inside LinearView same size?
The current layout file looks like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtTitle" android:text="[Title]" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtTags"
android:text="[Tags]" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnPlay"
android:text="View">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnEdit"
android:text="Edit">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnDelete"
android:text="Delete">
</Button>
</LinearLayout>
</LinearLayout>
I would appreciate if anyone could show the solution by modifying the pasted file content.
Thanks!

Use android:layout_width="0px" and android:layout_weight="1" on the three Buttons. That says the buttons should take up no more than 0 pixels, but the three of them should split any extra space between them. That should give you the visual effect you wish.

Another way is to make android:layout_width="fill_parent" and android:layout_weight="1" this will also works fine!!!

Use LinearLayout with your desired weightSum and create elements with equal layout_weight. Here is an example ...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="5">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_share_white_36dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_search_white_36dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_event_note_white_36dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_brush_white_36dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_menu_white_36dp"/>
</LinearLayout>
So, the weight sum of all elements is 5. Here is the screenshot ...
Note that, Google Material Design icons are used. Hope this is helpful.