Develop Reference

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.

Off-center alignment of text inside a TextView

I have a layout/alignment problem with a TextView which I haven't yet been able to find a solution for, that is, I want to align text off-center inside a TextView horizontally.
To give a little more context, I have an ImageView and a TextView side by side, the ImageView touching the left edge of the screen and the TextView filling the rest of the screen horizontally, like this:
[-img-|-----text-----]
The TextView is configured as singleLine="true" and maxLines="1", so that it will be truncated if its too long for its horizontal space. My aim is to align the text in the center of the screen, not the center of the TextView, because there are other elements on the screen that are aligned to the center and I need the text aligment to match that.
So, if I use gravity="center" on the TextView, I get the image above, but what I actually want is
[-img-|--text--------]
I tried putting image and text in a RelativeLayout, so that the TextView actually touches both edges of the screen, which does what I want with respect to the alignment, except that if the text is long enough, the first characters will be hidden by the image, since the TextView lies behind the image view.
I also experimented with margins, padding and a compound drawable to the left, but the text is always centered relative to the available space (which I would consider the expected behavior).
Does anybody have any clues on how to achieve this alignment, i.e. relative to the center of a different component than the TextView, maybe programmatically at runtime? Thanks in advance for any helpful advice.
Edit: user Budius suggested using padding to the right to achieve a centered alignment which works but leads to long texts being truncated before the right edge of the TextView is reached and I'm looking for a solution that avoids that, i.e. that uses the entire avilable space, if possible.

I believe that will center it and the move 20dp to the side.
gravity:centre padding:right=20dp

Try using
android:layout_weight="1"
if it helps you..

I know this is not the correct approach than too give it a try..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".33"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight=".33"
android:gravity="center"
android:text="text" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".33"
android:src="#drawable/ic_launcher"
android:visibility="invisible" />

How to split text in 2 textviews like if there were 1?

I have a listview where each item has 2 images, one on the right and the other on the left. Between them there is a textview that is filled from data. If text is long then it can continue down but there is a lot of free space just as you can see in the image. I want to use this space also to display text. I have been looking around the web and I have seen things like this http://code.google.com/p/android-flowtextview/downloads/detail?name=FlowTextDemo.zip&can=2&q= but this is useless. I don't want to lose the control of the images because I need their click method. What is the best way to do it? I have thought that maybe I can put a textview between images and an other down and when the first is filled continue in the second one but how can I know how many letters can keep the first textview?

I don't understand why FlowTextView (that you linked to) won't work for you. It's derived from RelativeLayout and flows text around any child views. The child views can be your images, positioned as you normally would in a RelativeLayout. Their onClick methods should work just fine.
<com.pagesuite.flowtext.FlowTextView
android:id="#+id/tv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/the_text >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:onClick="onTopLeftClick"
android:src="#drawable/top_left_image" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="onTopRightClick"
android:src="#drawable/top_right_image" />
</com.pagesuite.flowtext.FlowTextView>
You will need to set the text in code, or else extend FlowTextView and define your own custom attribute(s) to do it from xml.

Split button text into two sections

I am trying to port my WP7 app to android.
Does anyone know how I can layout the text on a single button so that some text appears aligned left and other text appears aligned right? (See below). I need access to be able to dynamically change the percentage number on the right side using code but the text on the right is just static.
Anyone know the answer to this?
The image is here:
http://i.imgur.com/zW7YV.png

Yes you could make it two buttons.
Remove all padding and margin from between them.
Set the same background drawable.
And just ensure when the left is clicked it invokes the right's onPress method (so it looks as if they depress together).
Or wrap the buttons/imageviews/textviews in a layout and perform the onClick on that.

I would use a RelativeLayout for this.
<RelativeLayout
android:width="fill_parent"
android:height="wrap_content"
android:clickable="true"
android:background="#18a2e7"
android:padding="10dip">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Something" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_align_parentRight="true"
android:text="0%" />
</RelativeLayout>