Develop Reference

Android, how to align text at a specific point over an image?

I am learning android programming and setting myself a task to get to grips with layouts. I am trying to create a virtual "Magic 8 Ball".
My aim is to have some random text appear in the white circle where the 8 would normally appear.
How do go about aligning the text so that on different devices the text always appears in the same relative position to the black ball, so is always within the white circle?
Here is an example of what I am trying to do
Here is my code so far
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|center_horizontal"
tools:context="uk.co.simoncarr.magic8ball.MainActivity">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="49dp"
android:layout_centerHorizontal="true"
android:text="#string/title"
android:textSize="36sp"
tools:layout_editor_absoluteX="107dp"
tools:layout_editor_absoluteY="10dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img8Ball"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:foregroundGravity="center_vertical|center_horizontal"
app:srcCompat="#drawable/magic8ball"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
<TextView
android:id="#+id/txtMessage"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="111dp"
android:layout_marginRight="111dp"
android:layout_marginTop="296dp"
android:text="The Anser is Yes"
android:textAlignment="center"
android:textSize="18sp"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="447dp" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>

Before answering the question I should comment on the fact that the elements inside you ConstraintLayout are not constrained in any way so when you run the app they will not keep the positions you have given them in the layout editor. You should fix this before doing anything else.
One approach you could look at could be to have 2 circle drawables, one with a black background and one with a white one and place one on top of the other. This way you could use the relatively new "Circular Positioning" feature in ConstraintLayout as outlined in this post. This will give you a lot of flexibility and power over choosing the positioning of the white circle in relation to the black.

Overlapping ripples on Android Lollipop

I'm seeing this odd things on Lollipop. The ripple effect on the list view seems to have two parts which causes this partial overlapping ripple to appear. Video can be seen here.
I've set the background of my TextView and CheckedTextView to #color/transparent, but it's still there. I also set the backgrounds to just solid colors, and they don't even line up where that square is. The square is always in the same spot, regardless of the name length.
Other goofiness is that if I do a screen recording, it won't show up. Slow down animation by 10x, it won't show up.
The ListView has the following layout:
<?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:gravity="center"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:paddingLeft="4dp"
android:minHeight="56dp"
android:theme="#style/Theme.LollipopTheme.Dark">
<ImageView
android:id="#+id/agent_directory_row_icon"
android:layout_width="64dp"
android:layout_height="64dp"
android:src="#drawable/default_agent_photo"
android:scaleType="fitCenter"/>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/check"
android:textColor="#color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:visibility="gone"
android:checkMark="?android:attr/listChoiceIndicatorMultiple"/>
<TextView
android:id="#+id/agent_directory_row_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text=""
android:textSize="24sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:maxLines="1"
android:ellipsize="end"
android:gravity="left"
android:textColor="#FF3e3e3e"/>
</LinearLayout>
UPDATE: It's occurring on my One Plus One with CM12S. I went and tested on a Nexus 4 and Nexus 7. It does not occur there.
Unfortunately, I don't have any more Lollipop test devices. I'd really like to verify on another non-Nexus device.
Maybe this is Cyanogenmod specific.

Background image being replaced by empty background in Android

I have an android app which first screen is a login form that has a blue background image.
My problem is that in some devices like a LG G2, the blue image appears for an instant and the it gets replaced by an empty or blank background like there was never an image there.
I really have no idea why is this happening. In Eclipse the image shows normally and I have tested my app in multiple devices and seems to be just fine.
Hope anyone can help me with this. Thanks in advance.
Here's where I set the background.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/login_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/login_background"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/button_login"
android:layout_width="200dp"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="226dp"
android:layout_marginTop="15dp"
android:background="#drawable/rounded_corner_green"
android:onClick="onClick_login"
android:text="#string/login_button"
android:textColor="#FFFFFF" />
<EditText
android:id="#+id/edit_username"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_above="#+id/edit_password"
android:layout_centerHorizontal="true"
android:layout_marginBottom="13dp"
android:ems="10"
android:hint="#string/username"
android:padding="5dp"
android:singleLine="true"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF" />
<EditText
android:id="#+id/edit_password"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_above="#+id/button_login"
android:layout_alignLeft="#+id/edit_username"
android:layout_alignRight="#+id/edit_username"
android:ems="10"
android:hint="#string/password"
android:inputType="textPassword"
android:padding="5dp"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF" />
</RelativeLayout>

i have an idea but not sure work,
1- use LinearLayout instead RelativeLayout
2- use dip for element height instead dp

Place your images in drawable--xxhdpi. Android scales up/down the image for high/low resolution devices. It efficiently scales down the image but while scaling up it messes with memory issues. When you keep your image assets in high res drawable folder, it doesn't need to scale them up. Hope this helps.

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

Android UI editor/display bug

While developing an Android application I have stumbled upon a baffling problem. The UI element I am creating is a header bar that has a custom search field. Everything looks wonderful on the Android UI editor but the second I use the emulator or a device it bugs out and compresses the magnifying glass image and clips the edit text. I have tried a number of things including changing the background image of the search area to the custom search field that is currently in the parent LinearLayout. This however results in the search field size growing out of control.
Any suggestions are welcome.
My questions are:
1) How would one fix this problem while maintaining the look of the search area?
2) Why is this problem occurring?
Confirmed on the following devices:
Samsung Galaxy Nexus 4.0.2
Motorola Zoom 4.0.3
Nexus S 2.3.7
This is a screenshot of the UI editor:
This is a screenshot of what it looks like on all devices tested:
The XML used to generate these UI elements:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/title_bar_matte"
android:gravity="center_vertical"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="10dp"
android:layout_weight="1.0"
android:background="#drawable/search_field"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginLeft="15dp"
android:src="#drawable/magnifying_glass" />
<EditText
android:id="#+id/campus_map_acitivity_search"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1.0"
android:background="#0FFF"
android:hint="Search"
android:imeOptions="actionSearch"
android:singleLine="true" />
</LinearLayout>
<Button
android:id="#+id/campus_map_activity_goto_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="#drawable/button_list" />
<Button
android:id="#+id/campus_map_activity_my_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/button_location" />
</LinearLayout>

Just figured out the problem. The search background image had the top and left sides set to 9-patch scale. This is all good and well but we had forgotten to set the bottom and right fill areas so that the content would have room to exist.
http://radleymarx.com/blog/simple-guide-to-9-patch/
Remember to set the fill areas!
It turns out the Android UI editor does not handle 9-patch images like the devices. That seems to be a bug to me.