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.
Related
I have this layout as my list items:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:orientation="horizontal"
android:minHeight="42.3dp"
android:layout_height="wrap_content">
<TextView android:id="#+id/txtTagName"
android:textColor="#color/White"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_marginLeft="10dp"
android:textSize="13sp"
android:gravity="center"
android:layout_gravity="left"
android:background="#drawable/tag"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_discard"
android:layout_marginLeft="10dp"
android:layout_gravity="right"
android:gravity="center"
android:scaleType="center"
android:alpha="0.5"/>
</LinearLayout>
It looks like this:
The tag patch 9 looks like so:
I have 3 questions:
How to make the delete icon always on the right.
How to make the blurry part of the tag image scale properly? (its a patch 9)
Is it better to have a delete icon next to the tag, or use some sort of long click?
Thank you.
How to make the delete icon always on the right.
Use RelativeLayout instead of LinearLayout and use the property android:layout_alignParentRIght="true". left and right layout_gravity does nothing in a horizontal LinearLayout since that ViewGroup already lays Views out from left to right.
How to make the blurry part of the tag image scale properly? (its a patch 9)
Not sure without knowing more about the image but should be the same as the other image.
Is it better to have a delete icon next to the tag, or use some sort of long click?
This is relative to the users who will use your app, I suppose. The delete icon I think is fine and is more explicit. However, most users nowadays, especially younger ones may understand to long click depending on how your whole app works. However, since you have the room, I think the delete icon is probably good.
How to make the delete icon always on the right.
in your xml item layout, for your imageview of the delete icon, add android:layout_weight="0"
How to make the blurry part of the tag image scale properly? (its a patch 9)
sorry, no idea
Is it better to have a delete icon next to the tag, or use some sort of long click?
depends on the app, if there will be other options other than delete, then make all of them in long click, otherwise leave the icon, IMHO
I am new to Android, and wish to do a layout as below:
A Logo on top.
Following with a Rectangle with Rounded corners
Within that Rectangle, I will have two EditText box for User ID and Password, plus one Login button
Below the Rectangle with Rounded corners (outside) I have a Html Link to Terms & Conditions
I have tried various ways of layout out
Using only layout. Different kinds of layouts. All seems to be very difficult to achieve what I need
Using Layout + Background. The background is not really a background, but is more like a template, it will affect your layout, and is very difficult to control where you wants your control located.
Using onDraw. Flexible but worried that it might have problem with different screen sizes.
So, someone please enlight which is the best way to achieve what I need?
No one can really tell you what is best, it depends on exactly what you want but I would suggest using a RelatvieLayout as they are typically the easiest and most efficient to use once you work with them a little, in my opinion. You can read Here to see how to do the rectangle. You basically will use shape drawable and adjust the radius of the corners.
As far as the logo on top, if it will be reused in other Activitys then you can put it in its own layout and use the include tag in your layouts to reuse the logo layout
If you are worried about different screen sizes then read the Docs and find what works for you.
Just start on it and adjust as you go. Don't be afraid to screw up and redo some of it. Hopefully this is enough information to get you started
Using a RelativeLayout will give you more flexibility and allow you to use less Layouts such as nested LinearLayouts and Layouts with only one child which can improve performance
this is how it should be done:
start with linear layout with vertical orientation :
<linearLayourt xmlns=............
android:orientation="vertical"
.....other stuffs goes here
......
.....
<LinearLayout ......this is the child linearlayout
.....other stuffs goes here like width and height
<ImageView ...this is where you are gonna put your logo in
/>
</LinearLayout> ....close your child linear layout
<RelativeLayout ...
.........other stuffs here
<EditText ....1st edit text
...you position your boxes here
/>
<EditText ....2nd edit text
...you position your boxes here
/>
</RelativeLayout>
<TextView
....
...
...put yout hyperlink for this text
/>
</LinearLayout> ...this is the parent linear layout
For your case of creating a Log in screen it's not really matter as it is a relatively easy screen to design. I personally like to use XML to design my layouts and never seen it done using the onDraw method.
My suggestion to you as #codeMagic said is to learn how to use and manipulated RelativeLayouts,as those will prevent you from creating cascaded layouts that are really not recommended and take long time to load.
When I started to program for Android I found LinearLayout to be the easiest to understand and use but using it would bring me to many LinearLayouts inside of a LinearLayouts on complex screen designz, later with the use of RelativeLayout I realized that in most cases one RelativeLayout can replace many cascaded Linear ones.
in your case you could do some thing like that:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/drop_down_icon" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/imageView1" >
</EditText>
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/editText1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText2"
android:layout_centerHorizontal="true"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button1"
android:layout_centerHorizontal="true"
android:text="TextView" />
</RelativeLayout>
All what left is to add the desired padings and margins.
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.
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
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>