Listview item background image problem in my android application - android

I have in my application a listview with an adapter that uses different layouts for the items.
I want the result to be like in the attached exp_result.png.
http://imageshack.us/photo/my-images/717/expresult.png/
But unfortunatly - I get like in result.png.
http://imageshack.us/photo/my-images/839/resultf.png/
The problem is that image stretches on the screen not the way I wanted.
Any ideas?
Maybe other solution to this layout - maybe built in?
Drawables are in the links, since I cannot upload images. The original picture is like in the first listview item in the exp_result.png. I want to use 1 picture for each - top, buttom and middle and to be used no matter the listview item size. XML is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/list_up" >
<TextView
android:id="#+id/name_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="28dip" />
<TextView
android:id="#+id/number_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="28dip" />
</LinearLayout>
I can really really use some help here.
Yoav

This may be a good application of the 9-patch image type:
9-Patch

Related

How to fix imageview positions but have variable textview above them in Android

I am currently working on an app and my layout is as follows:
I have a recyclerview holding all of my items, each item has a textview above an imageview. So the text view can expand up to 3 lines but only if needed. The recyclerview is using a gridlayout manager to display all of my items.
The problem is that currently when the text view expands to have more than 1 line it presses down the image instead of keeping it aligned with the other images in the row
What I currently have
What I want is to prevent the text view from pressing down on the image but instead build it's way up so that way the images stay normal and the text view will grow upwards like the image below.
What I want
Is there any way to achieve this? I would think it shouldn't be hard but I can't seem to find a way to accomplish this, or more likely, can't google the right terms to find the solution I'm looking for.
So I found an answer, I had to set two properties for my textview:
android:lines="3"
android:gravity="bottom"
so in the end each item had a layout below:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingStart="31dp"
android:paddingEnd="32dp">
<TextView
android:id="#+id/app_name"
android:layout_width="#dimen/product_list_image_dimensions"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="#string/app_card_temp_name"
android:textSize="#dimen/product_list_text_size"
android:fontFamily="sans-serif-condensed"
android:lines="3"
android:textAlignment="center"
android:textColor="#color/app_name_product_list_color"
android:typeface="normal"
android:gravity="bottom" />
<ImageView
android:id="#+id/app_thumbnail"
android:layout_width="#dimen/product_list_image_dimensions"
android:layout_height="#dimen/product_list_image_dimensions"
android:layout_below="#id/app_name"
android:paddingTop="#dimen/product_list_text_bottom_padding"
android:scaleType="centerCrop"
android:layout_centerHorizontal="true" />
</RelativeLayout>

Android - User Interface to Control Number Input

I am trying to make a nice interface to control the input of the number of cars to my application..
I would like to have something like the icon of the car and then an upper arrow and lower arrow, so the user could control the amount of the cars in the application.. you get it?
The design would be something like this picture:
But I don't know if the Android Library was something already to handle this.. is there something ? Or do I need to make the widget myself ?
If I need to do it myself what would be the best way ? Using 3 images, and adding a image listener to the arrows images ? And how would I put it on the screen aligned like that ? Imagine that I would have cars and bikes.. and would be in the same line ?
Thanks alot in advance !
Let's say you make 3 separate images stored in your drawable folders: upArrow.png, downArrow.png, and car.png (or whatever type of image, your choice). To make them vertically aligned like that, you can place them in a linear layout with a vertical orientation. Since you want the arrows to be clickable, I would make them ImageButtons and use the arrow images as backgrounds for the buttons.
<LinearLayout
android:id="#+id/layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/upButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/upArrow.png"
android:onClick="incrementCars" />
<ImageView
android:id="#+id/carImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sample"
android:contentDescription="This is a car" />
<ImageButton
android:id="#+id/downButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/downArrow.png"
android:onClick="decrementCars" />
</LinearLayout>
You can do the same thing for bikes, just switching out the center image and the onClick methods.

Changing the Size of my ListView by one Pixel messes up Formatting

Let me show you two links to demonstrate my point:
http://i.snag.gy/QP1i2.jpg (The ListView is 60 pixels)
http://i.snag.gy/DvXsL.jpg (The ListView is 61 pixels)
The whole file is done with an outer Vertical LinearLayout to provide weighted percentages (e.g. the ListView is 75%, the search part is 4%, so on and so forth) independent of device screen size. Within that outer LinearLayout I have a nested Layout (Linear or Relative) depending on my needs for the particular row.
It works beautifully, except for the last part. And it seems a lot of the items I try adding end up messing the formatting so I'm not sure if the problem is how I'm doing the ListView. Anyways, here's the relevant code:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:background="#null"
android:layout_weight="0.75"
android:paddingLeft="0dip" >
<ImageView
android:id="#+id/searchdivider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="2dp"
android:contentDescription="#string/desc"
android:src="#drawable/searchdivider" />
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/searchdivider" >
</ListView>
</RelativeLayout>
Thank you for your help!
EDIT: I should add that I don't want the height to be 60dp, obviously. I want it to fill_parent; however I picked the arbitrary value of 60 and 61 to figure out exactly what change makes the layout mess up.
2nd EDIT: I think I figured out the problem. It seems when I make the Theme AppCompat, it looks and acts fine. But when I make the Theme NoTitleBar (with or without fullscreen) then it acts all screwy. I haven't changed it in the manifest but rather the place in the graphical layout that lets you modify it for that one activity only.
Any suggestions?
android:gravity="left" on imageView and android:gravity="right" on the other listView

No padding by default on Android Spinner

I have a spinner with this code:
<Spinner
android:id="#+id/cover"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:prompt="#string/cover_hint"
android:layout_marginTop="10dip"
android:gravity="center"
android:layout_gravity="center_horizontal" />
Yet for some reason when it's first loaded (I am loading items in from an ArrayList<String>), it appears too small. Like the first image below. But once I select an item, then it appears normally like in the second image.
How can I get it to always appear like the second image?
You could try forcing the height with
android:layout_height="48dp"
That worked for me after I tried other things like android:padding and android:textSize, neither of which seemed to have an effect.

How to add the bubbles to textview android?

In my application, I want to set bubbles to a text view, in the text view I add the setBackgroundResource() as you can see in the code.
With this code i'm getting an image like this:
I want a bubble shape image like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#EDF5E4" />
<corners android:bottomLeftRadius="#dimen/corner_radius"
android:bottomRightRadius="#dimen/corner_radius"
android:topLeftRadius="#dimen/corner_radius"
id:topRightRadius="#dimen/corner_radius" />
Please tell me how to make this in my setBackgroundResource() XML.
What you need to use is essentially a 9-patch image (As already pointed out by Ken Wolf in this comment).
To get you started, I am including a set of 9-patch images from one of my apps along with a brief piece of code on how to use it when creating a layout XMl. ;-)
The 9-patch Image Set:
(These are named: bubble_white_normal_mdpi.9, bubble_white_normal_hdpi.9 and bubble_white_normal_xhdpi.9 respectively. Remove the _mdpi, _hdpi and _xhdpi from the file names after placing them in their respective drawable folders.
The XML:
<LinearLayout
android:id="#+id/linlaUserOther"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:baselineAligned="false"
android:orientation="horizontal"
android:padding="2dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="top|center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imgvwProfileOther"
android:layout_width="42dp"
android:layout_height="42dp"
android:adjustViewBounds="true"
android:contentDescription="#string/content_desc_user_profile"
android:scaleType="centerCrop"
android:src="#drawable/ic_contact_picture" >
</ImageView>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/bubble_white_normal"
android:gravity="top|center"
android:orientation="vertical" >
.... // OTHER STUFF HERE THAT IS NOT NECESSARY IN THIS CODE SNIPPET ON SO
</LinearLayout>
</LinearLayout>
NOTE 1:
Although, I am including a working set of Images (almost spoon feeding, if you will), I would strongly urge you to create your own set of images that fit in your scheme of things. Plus, this will also equip you to build your own resources in the future. The only reason I am going the extra mile is because I personally lost 3 days getting the speech bubble looking and working right. :-(
NOTE 2:
I am setting the image as a background to a LinearLayout. You, however, will need to set it to the TextView you need looking like a Speech Bubble.
Additional Sites (Tutorials):
http://blog.booleanbites.com/2012/12/android-listview-with-speech-bubble.html
https://github.com/AdilSoomro/Android-Speech-Bubble
http://developer.android.com/reference/android/graphics/NinePatch.html
http://developer.android.com/tools/help/draw9patch.html
I think you are going to have a hard time trying to do it using just shape drawables.
I would use a 9-patch png.
http://developer.android.com/reference/android/graphics/NinePatch.html
Basically you either find/buy an image or create one in your favourite drawing program. Then you define the stretchable regions using the draw9patch tool which allow it to scale properly in your View.
Here is a tutorial, it's even specific to speech bubbles!
http://adilsoomro.blogspot.co.uk/2012/11/android-how-to-use-9-patch-png.html
It takes a bit of time but it is a crucial technique in making more designed visual interfaces.

Categories

Resources