Develop Reference

Android ListView items: image and text too small

I'm working on a ListView where each item has an image and some text. On my older phone, HTC Evo 4G, things came up exactly as expected. Image is nicely sized and text looks fine. Then I loaded the same app on my new phone, HTC One, and the images are so tiny they are useless. I know the HTC One has a significantly higher resolution, but I cannot figure out how to make each item in the ListView larger.
I'm not sure what to post, but I think the layout xml files are the issue.
Here's activity_main.xml:
<?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="fill_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_height="wrap_content" android:orientation="horizontal"
android:layout_width="fill_parent" android:gravity="center_horizontal"
android:layout_marginTop="2dip" android:background="#669900">
<!--
Use layout_weight to stretch the EditText and compress the button.
To avoid text wrap, the editable text is forced to occupy only one
line
-->
<EditText android:layout_width="wrap_content"
android:typeface="normal"
android:layout_weight="1" android:lines="1" android:ellipsize="middle"
android:hint="#string/hint" android:id="#+id/search_key" android:layout_height="fill_parent" android:maxLines="1"></EditText>
<ImageButton android:layout_width="wrap_content" android:src="#drawable/ic_menu_search" android:adjustViewBounds="true"
android:layout_weight="0" android:id="#+id/btn_ok" android:layout_height="wrap_content"></ImageButton>
</LinearLayout>
<TextView android:layout_height="wrap_content" android:id="#+id/tweet_header"
android:gravity="right" android:layout_width="fill_parent" android:paddingRight="4dp"
android:background="#99cc33" android:textColor="#000000" android:textSize="21dp"></TextView>
<ListView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/tweet_list"></ListView>
</LinearLayout>
And the ListView is made up of this item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/itemImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_height="wrap_content"
android:id="#+id/created_at"
android:text="now"
android:textSize="10sp"
android:layout_below="#id/itemImage"
android:layout_alignParentRight="true"
android:textStyle="italic"
android:layout_width="wrap_content"></TextView>
<TextView
android:id="#+id/itemURL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="itemURL"
android:visibility="invisible" />
</RelativeLayout>
So the app does this: It taps ebay for car data and presents the search results as line 1 with a picture, line 2 with the ebay item title. A hidden value is the URL so users can tap the ListView line and launch a web browser.

Looks like the wrap_content setting for the ImageView's layout_width and layout_height are the issue. When I switched that to numerical values, suddenly I saw it change size. Finally setting it to 100dp made the images viewable.
As an aside, I had a terrible time with ADS and the emulator. It consistently failed to re-load my updated app. Often complaining about the Package Manager and suggesting the some process was running. I little idea what was running and how to fix it. When I switched to loading the app straight to the phone, then it worked fine.
So, I think now I need to create a system that is proportional, and takes in to consideration the displaying devices resolution.

Problem is the Relative Layout width being wrap_content. Try changing that to match parent. then you would not have to go thru this ordeal

Lockscreen Widget is too Small

I'm having a lot of trouble finding references for lockscreen widgets that were introduced in Android 4.2.
I've created a widget that works fine on the launcher and it is sized as I expect. However I've enabled this widget to be on the lockscreen and it doesn't size properly, vertically.
According to http://developer.android.com/guide/topics/appwidgets/index.html#lockscreen it will take up the size available vertically if you set android:resizeMode="vertical"
If the widget marks itself as vertically resizable, then the widget
height shows up as "small" on portrait phones displaying an unlock UI.
In all other cases, the widget sizes to fill the available height.
Also I used the sizing described at http://developer.android.com/guide/practices/ui_guidelines/widget_design.html
Tiles > Size
1 > 40dp
2 > 110dp
3 > 180dp
4 > 250dp
… > …
n > 70 × n − 30
I've set this and at appears to be even smaller than a "small" widget. Basically, does anyone know what is wrong with the widget in image 1 that it won't expand? My code is below.
1) What it looks like in its default state.
2) What it looks like when expanded on another screen.
xml/clock_widget.xml
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:initialKeyguardLayout="#layout/clock_widget"
android:initialLayout="#layout/clock_widget"
android:minHeight="110dp"
android:minWidth="180dp"
android:resizeMode="vertical"
android:updatePeriodMillis="1000"
android:widgetCategory="keyguard|home_screen" >
</appwidget-provider>
layout/clock_widget.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/clock_widget"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/widget_hour"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="36sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=":"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="36sp" />
<TextView
android:id="#+id/widget_minute"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="36sp" />
</LinearLayout>
<TextView
android:id="#+id/widget_date"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

Looks like this only happens in the emulator. Testing on real hardware works fine.

AppWidget looking different on emulator and phone - shifted View content

The Layout is looking as expected on the phone and looking different on the emulator. I am using SDK API 10 (Android 2.3). The test phone is a Motorola Milestone with Android 2.3.3 (Cyanogen Mod 7).
The SDK layout preview renders the preview like the Emulator.
The following image shows the expected rendering on the right side (rendered by phone) and the unexpected rendering on the left side (SDK API 10, emulator and preview).
What is the reason for the difference and how do I fix it? Removing margin and padding (by setting it to 0dp at TextView1) did not help.
main layout (parent)
<?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"
android:background="#drawable/test_bg_red"
android:padding="20dp"
>
<include
android:layout_width="fill_parent"
android:layout_height="26dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
layout="#layout/test_child" />
/>
<include
android:layout_width="fill_parent"
android:layout_height="26dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
layout="#layout/test_child" />
</RelativeLayout>
child layout
<?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="26dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="4dp"
android:gravity="top"
android:includeFontPadding="false"
android:text="42"
android:textSize="32dp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_toRightOf="#+id/textView1"
android:includeFontPadding="false"
android:text="TextView2"
android:textSize="12dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView2"
android:layout_alignParentTop="true"
android:includeFontPadding="false"
android:text="TextView3"
android:textSize="10dp" />
</RelativeLayout>

I believe this is caused by different screens having different aspect ratios. Since phones have 4x4 cells regardless of physical screen size, each cell must be wider or narrow to fit 4 in a row. Using DP takes care of density, but screens which are more or less square will still require cells to be more or less square. That means the number of DP per cell will vary and cause your views to not look the same on different devices.
The only solution I have found is to make your layouts as flexible as possible.

Emulator: no more room on this home screen

something happened to my app as i cannot place the widget in the Emulator. It says: no more room on this home screen. I tried to modifiy the layout_width parameters but nothing have changed. Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="200px"
android:layout_height="100px"
android:layout_gravity="left"
android:id="#+id/widgetlayout"
android:background="#drawable/blacktrans"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="200px"
android:layout_height="20dip"
android:id="#+id/widgetlayoutinside3"
android:paddingTop="3px"
android:layout_marginLeft="5px"
>
<TextView android:id="#+id/widget_textview3"
android:text="widget_text"
android:layout_height="wrap_content"
android:layout_width="70px"
android:textColor="#FFFFFF"
android:textSize="13sp"
android:paddingLeft="15px"
android:layout_gravity="fill_horizontal"
android:layout_marginLeft="5px"
/>
<Button
android:id="#+id/ButtonP3"
android:layout_width="28px"
android:layout_height="28px"
android:layout_toRightOf="#+id/widget_textview3"
android:layout_marginLeft="5px">
</Button>
<Button
android:id="#+id/ButtonS3"
android:layout_width="28px"
android:layout_height="28px"
android:layout_marginLeft="5px"
android:layout_toRightOf="#+id/ButtonP3">
</Button>
<Button
android:id="#+id/ButtonM3"
android:layout_width="28px"
android:layout_height="28px"
android:layout_marginLeft="5px"
android:layout_toRightOf="#+id/ButtonS3">
</Button>
</RelativeLayout>
</RelativeLayout>

If there is too many icon on screen and your widget is so big, you can't place it. I think you must move the icons and make smaller widget.

Read the section about widths for widgets again.
http://developer.android.com/guide/practices/ui_guidelines/widget_design.html#sizes
I'd suggest using a standard size, and trying to see how that works for you.

widget screen sizes are in 80x100y dip in portrait per cell and 106x74y dip in landscape. You need to make sure your widget can either statically conform to that size or be dynamically assigned to it (i.e. fill_parent)

1x1 size Nine-patch image not showing up on Android emulator device

I'd like to use a 1x1 size Nine-patch image from Android drawable resources.
When I'm trying to display it with <ImageView> in my layout xml file, this one is never showing up on the Android emulator device. Here's the xml code below:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10px"
>
<RelativeLayout
android:gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:id="#+id/text_label"
android:text="#string/text"
android:textSize="10pt"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<CheckBox android:id="#+id/my_checkBox"
android:layout_alignBaseline="#id/text_label"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<ImageView android:paddingTop="10px"
android:paddingBottom="10px"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:src="#android:drawable/divider_horizontal_bright" />
</LinearLayout>
I tried another one with the same size and I have the same problem it's still blank.
My research on Google was irrelevant. Hope you can find what am I doing wrong here.
Thanks in advance for your help.
Lorenth

What version of the SDK are you writing for?
Take a peek at the divider_horizontal_bright.png files in the different versions :)
It's 99% transparent in 8, but like 50% transparent light grey in 4.
Or, Perhaps you meant divider_horizontal_bright_opaque?

This works for me:
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#android:drawable/divider_horizontal_dark"
android:scaleType="fitXY"
/>