Split button text into two sections - android

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>

Related

make the textview align vertically on the left side of the screen

I am trying to implement a listview that will be having a textview (used as a label) to fit the left side of the screen in a vertical way that will take the size of the row of the listview. check the image.
This is easily implemented in iOS.
I want to have the Phonecall1 and Phonecall2 mimiced.
Many solutions on stackoverflow suggest creating a custom class and so forth.
Is there any simple way for this ?
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/weather"
android:background="#000000"
android:gravity="center|left"
android:rotation="90"
android:text="something" />
For API 11 and above , In your text view Use android:rotation and set height

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.

Fixed-width TextView with stretched compound drawable

I'm trying to achieve the following layout: a fixed width TextView aligned to the left of its parent, with the text inside it aligned to the right side of that TextView (that's why fixed width, can it be done other way?) and the rest of the parent is filled with a drawable (simple line). Like this:
It's a ListView containing 2 types of rows and the layout for the rows with lines is quite trivial - LinearLayout with TextView and ImageView (I can post the exact code later if needed). And I'm getting a warning that it could be replaced with a single TextView with compound drawable.
I'm all for optimization so I really tried to follow that advice. Unfortunately I wasn't able to get the same result - the line is either constrained to TextView's width or text is aligned to the right side of the ListItem, now to fixed position.
Am I missing something?
Edit: Apparently it is not actually possible and since there are some other complications (the drawable is now a level-list drawable, which is not always a line and sometimes it has a non-fixed height that I have to set) I will leave it as it is now - linear layout, containing one TextView and one ImageView.
I don't think that you're missing anything. The TextView compound drawable features are not very customizable and in general are not worth the time you spend trying to get them to look right. Some lint warnings are a little overzealous and premature.
The optimization that the lint refers to is something that is better attributed for a fixed size image. In your case, the line has to stretch the rest of the screen length and as such it is not something that can be done with a textview with compound drawable. This kind of lint warning is more of a suggestion rather than something that MUST be done and is detected by just checking for a linear layout with only a textview and an imageview rather than checking what would need to go in the image view. If you already have it working the way you did it I think you should leave it alone.
Your view create from this -
<?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="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/time"
android:layout_width="#dimen/today_time_width"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:gravity="right"
android:layout_marginRight="5dp" />
<ImageView
android:layout_gravity="center"
android:id="#+id/border"
android:layout_width="match_parent"
android:layout_height="#dimen/today_current"
android:src="?attr/item_boundary" />
</LinearLayout>
There is no way to achive this using only standart TextView. If you really want to reduce view count you can create your custom TextView class, set layoutWidth to matchParent and draw line from text end to right border. But it's not worth to be doing. Some extra views won't slow your list.
I am not sure if you will be able to achieve what you really want to , but then you could change the linear layout in the link you posted to something like this:
<RelativeLayout
android:id="#+id/relTrial"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txtTime"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:gravity="right"
android:text="12:45 AM"
android:layout_alignParentLeft="true"/>
<LinearLayout
android:id="#+id/lnrSep"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:gravity="bottom"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_centerVertical="true"
android:orientation="horizontal"
android:background="#android:color/darker_gray"
android:layout_toRightOf="#+id/txtTime"
android:layout_alignParentRight="true"></LinearLayout>
</RelativeLayout>
This way the time text will be right aligned although being at the left side, and the line will also be visible.
Hope that helps.
If I got you right, you want to add bottom border to list view item?
What about to try this:
android:drawableBottom="#drawable/line"

Draw an Image beside an Edit text in android

I want to draw an image on the left of an EditText. I don't want the image appear insde the EditText though.
I use this:
<EditText
android:id="#+id/firstNameTxt"
style="#style/UserInfoInputs"
android:drawablePadding="20dp"
android:drawableLeft="#drawable/first_name" >
</EditText>
It displays the image inside of the EditText. However I use this on TextView and it works fine:
<TextView
android:id="#+id/positionValue"
style="#style/userInfo"
android:drawableLeft="#drawable/position" />
How this can be done for an EditText?
try this
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/go_image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/icon"
/>
<EditText
android:id="#+id/url"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:lines="1"
android:layout_weight="1.0" />
</LinearLayout>
let me know if this works.
The difference between the two use-cases you describe are simple. There is no difference. With an EditText, there are lines that are easily discernible. With a TextView there is not. Try setting the background property of the textview, and you'll see that the drawable is, in fact, drawn on the left side, but still 'inside', the TextView.
The simplest way to accomplish your task (as described) is to utilize an ImageView. Depending on what ViewGroup (LinearLayout, RelativeLayout, etc) you're using, the code may be a bit different; so, update your question with the appropriate info and I'll make my answer a bit more specific.
I should note that, another method you could use is to create your own custom component, which is really very easy to do. See this article Custom Components | Android Developer, be sure to scroll down to the Compound Controls heading title "Compound Controls". This would be especially helpful when this is a 'common' format of controls that you'll use often (I.E. you have an image next to a TextView throughout your app).
That is because the background part of the EditText stretches behind the entire contents of the view, including the drawables.
If you are using a RelativeLayout you can just add a separate ImageView:
<ImageView
layout_width="wrap_content"
layout_height="wrap_content"
layout_toLeftOf="#+id/firstNameTxt"
src="#drawable/first_name"
other imageview attributes as neccessary...
/>
<EditText
android:id="#+id/firstNameTxt"
style="#style/UserInfoInputs"
/>
Or if you use another kind of layout, create a LinearLayout-wrapper:
<LinearLayout
layout_width="wrap_content"
layout_height="wrap_content">
<ImageView
layout_width="wrap_content"
layout_height="wrap_content"
layout_toLeftOf="#+id/firstNameTxt"
src="#drawable/first_name"
other imageview attributes as neccessary...
/>
<EditText
android:id="#+id/firstNameTxt"
style="#style/UserInfoInputs"
/>
</LinearLayout>

How can I make button text extend outside 9 patch content area?

I have a row of buttons with custom 9 patch images, and variable length text. I would like the buttons to be the same height. When the text is long enough to wrap, it expands the button size, making the button with wrapped text bigger than the others. I'm laying these buttons out in code in linear layouts. I can fix the size of the button, but then it just cuts off the bottom. How can I make the text take up more of the padding space of the button, so that the text butts up against the top line of the button?
9patch content area is just used to set a padding. If you change the button's padding you will override the one set by the 9patch.
edit
try something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button android:text="ButtonButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="0dp"
android:paddingBottom="10dp"/>
<Button android:layout_width="wrap_content" android:text="Button"
android:layout_height="match_parent"/>
<Button android:layout_width="wrap_content" android:text="Button"
android:layout_height="match_parent"/>
</LinearLayout>
this way the button will be as high as the others. Sadly, I don't know if it depends on the original button's 9patch that might have asymmetrical paddings, but I can't make the text align with that from other buttons (I think gravity is by default set to center). Maybe with your 9patch it works though. (EDIT: oh, but if you'll have two lines of text who cares about alignment)
Ultimately I was unable to find a nice way of doing this without creating a custom view class.

Categories

Resources