Develop Reference

Import a Photoshop Shape (Button) without the Background from Photoshop android

I have no idea how to import my Photoshop shape that I made for my buttons, into android, without it bringing along the background. Even if i set the Background in photoshop to Transparent and save it as a PNG, the background still takes up space when I use it in android as an android:background for my Button. Please Help!
Also, a quick side note: If i make the buttons the appropriate px size that is equivalent to the right mdpi, hdpi, and xdpi, will it still be an issue if it doesn't look proportional in the GraphicalLayout of Eclipse? Like will it adjust itself on the screen?

Ok ok ok!
What you need to do, is to create a CUSTOM BUTTON instead of actually just using a background.
First, you need 3 png's:
1) When the button is idle.
2) When the button is pressed.
3) When the button is highlighted.
The Highlighted and idle could use the same image if you dont need such effect.
Create a resource in your drawable carpet. I usually start with MDPI then move on to the bigger screensizes, but this will give you the main idea.
The resource would be your entire button. It goes like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/button_focused"
android:state_focused="true" />
<item android:drawable="#drawable/button_idle" />
</selector>
Let's name it "custom_button.xml"
The Selector is THE BUTTON.
You will need to add the 3 resources explained above "button_pressed" is what the button should look when pressed. And so on... the names are self explanatory.
Now in your layout page you could use 2 ways to create your button.
1) If the button is an ImageButton:
<ImageButton
android:src="#drawable/custom_button"
android:background="#null"
...
You have to eliminate the background in this case.
2) If the button is a Normal button with text:
<ImageButton
android:background="#drawable/custom_button"
...
In this case you can add padding to make it contain text.
And yes, you would have to work with photoshop for the actual size of the button. The button can strech or crop when it grows but the results would be not as good and clean as if you nail the right size from photoshop.

Circular Button and textview in android

Can someone please guide me how exactly can i create a circular buttons and textview in android apps, I am still a new into android development. Please help

You cannot create a real circular view (button or textview) in android - all views are rectangular. That said, you can imitate the look of a circular button by giving it a circular background. There are several ways of doing this. One simple way would be to create a PNG image of a circle, save it in your drawable folder and then set it as a background for your button:
<Button android:background="#drawable/circle_bg" .../>
Another way would be to use custom shapes to draw a circle:
<shape android:shape="oval" ...>
<solid android:color="#FFFFFF"/>
</shape>
Save that as an XML file in your drawable as circle.xml and then reference it in your layout:
<Button android:layout_width="40dp" layout_height="40dp"
android:background="#drawable/circle" ... />
This will create a circular button with 20dp radius.
Of course, you may want to combine this with state selectors to get the highlighted states on touch or focus.
There are loads of examples on the internet. Just search.

As some1 mentioned, to make your custom buttons you've to define Styles:
Custom circle button
About TextView: What do you want to do? Change font? Change colour? Change Size?
You've XML attributes for TextViews if you're doing this by XML. Except to change font, that it was implemented in 4.1.
android:text="TextView"
android:textColor="#288BA2"
android:textSize="30sp"

How can I make an ImageButton display just an image?

I have got a cool image (fancy with rounded corners). I want to implement that image in my android app. When clicked on it, I want it to darken a bit (like a button when pressed) and launch a new activity.
How can I do that and what should I use (ImageView, ImageButton or just Button) ?

You'll require two version of your cool image call it as active.png (clicked state i.e darken a bit) and inactive.png (normal state).
in the drawable folder create a Selector file for them as follows
Like : /drawable/cool_button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/active"/>
<item android:drawable="#drawable/inactive"/>
</selector>
and then user the ImageButton like this:
<ImageButton
android:id="#+id/coolImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/cool_button_selector"
android:background="#null" />
Added: android:background="#null" to <ImageButton>
Hope this helps :)

You can use any of the above depending on what your requirements are. For button like behavior, you can use an ImageButton, Here's the instructions to change the image onTouch
change button image in android
You can similarly change the image of ImageView.
ImageView img = (ImageView) getViewById(id-here);
img.setImageResource(R.drawable.my_image);

you can use a normal Imageview with an onClickListener, the imageview's drawable will be a state list drawable xml file that comes with its own built in event listeners which can be linked to separate image assets.

image on top of button android

Is it possible to add an image(view) on top of a button (which as a background image)?
I'm porting an iOS app to Android and it wasn't a problem on iOS, but I'm wondering if it is the right approach on Android because of layouts.
Edit :
To clarify, check this screen shot :
http://a4.mzstatic.com/us/r1000/062/Purple/v4/7c/4b/cd/7c4bcd53-ba55-94d7-a26c-ce1bfe040003/mza_2736801523527387264.320x480-75.jpg
I need to do the bottom left button "carte" (card in french)
I need :
a button with a background image
an image displayed on top of the button which is loaded from internet (a card , there is a lot of different and news cards are added daily, in the screnshot it s "MIDI PASS" )
a text localised on the button , so I cant use Imagebutton class.

It is not quite clear what you want to achieve, but the following may be helpful for you:
Use an ImageButton
Set the Image as the background of the button either in XML (using android:background) or in code (using setBackgroundResource)
Update:
Looking at your updated requirements, it would be better to use a custom component to achieve what you want.

Your question is somewhat unclear but from what i understood, following may work for you:
<ImageButton android:id="#+id/imgButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_image"
android:src="#drawable/top_image"/>
Hope it will be helpful.
UPDATE:
If Your background is common, then you can set the bitmap using following code:
((ImageButton)findViewById(R.id.imgButton)).setImageBitmap(bmp);
Here, you will need to get the bitmap of the card image in bmp variable.

You can also use an ImageView and implement the onClickListener.

Yes it is possible.
Use an ImageButton then....
set your android:src="#drawable/foreground Image"
set your android:background="#drawable/background Image"
So if you wanted a an apple for the background image and a 3-d word "apple" for your foreground image.

You could try something like this:
First, you create a selector for the button in the res/drawable/ folder (let's call it selector_button.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/image_resource_for_button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/image_resource_for_button_pressed"
android:state_focused="true" />
<item android:drawable="#drawable/image_resource_for_button_normal" />
</selector>
Here you can define as and android:drawable not just #drawable's, but #color's or #layout's, too. If you want a more complex layout, you should define one with the background image of the button and another image on top of it using a RelativeLayout for example.
In order to do this, you have to have image_resource_for_button_pressed.png (for pressed and focused state) and image_resource_for_button_normal.png (for normal state) in your res/drawable/ folder.
After that, you create a button, like this:
<Button
android:id="#+id/aButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/selector_button"
android:text="Hardcoded string" />
This approach helps you maintain code readability, since you just extracted the changing of the image resource into an .xml file.

Problem with EditText background (android)

I have a problem with EditText background like this
<EditText
android:id="#+id/edit"
android:layout_width="fill_parent"
android:layout_height="35sp"
android:singleLine="true"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:layout_marginTop="5px"
android:textAppearance="?android:attr/textAppearanceSmall"
/>
alt text http://i765.photobucket.com/albums/xx299/trieutrinhtrinh/edittext.jpg
After try to set the background, It look worse
<EditText
android:id="#+id/edit"
android:layout_width="fill_parent"
android:layout_height="35sp"
android:singleLine="true"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:layout_marginTop="5px"
android:textAppearance="?android:attr/textAppearanceSmall"
android:background="#ffffff"
/>
alt text http://i765.photobucket.com/albums/xx299/trieutrinhtrinh/edittext2.jpg
What's happen with EditText background? How to make EditText keep default style?

Here is 2 Solution to change background of EditText i have investigate before, hope it can help you:
★Issue:
When set Background to EditText it look so terrible
★Analysys:
EditText used ninepath image for background. Their used a selector to change background image base on current state of EditText (Enable/Focus/Press, Default)
★There are two solution to solver this problem, each solution have both advantage and disadvantaged:
★Solution1:
Create custom yourself EditText (follow this solution we have freely change view of EditText.
▲Advantage:
Your freely render EditText view follow your purpose, No need to create Ninepath image as current implement of Android EditText. (Your must provider IF in your EditText to change background smoothly base on state of EditText (Enable/Focus....)
Reused able and more custom in case you want to change color of Background or add more color
▼Disadvantage:
Take much effort to create and test your custom EditText.
(I choose solution 2 so have no demo implement of solution 1, if any one follow this solution feel free to share with us your demo code)
★Solution2:
Used selector as Android implement
❶Create xml file call edittext_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/edittext_selector">
<!-- Image display in background in select state -->
<item
android:state_pressed="true"
android:drawable="#drawable/your_ninepath_image">
</item>
<!-- Image display in background in select state -->
<item
android:state_enabled="true"
android:state_focused="true"
android:drawable="#drawable/your_ninepath_image">
</item>
<!-- Default state -->
<item android:state_enabled="true"
android:drawable="#drawable/your_ninepath_image">
</item>
</selector>
❷On EditText xml set selector:
<EditText
...
android:background="#layout/**edittext_selector**"
...
</EditText>
★Note:
● In this demo code i was remove some behavior of view state, refer android implement for detail behavior (focus/unfocus, enable/disable, press, selected ...)
● Take care order of item in your selector. Difference order of item in selector xml file will have difference background.
▲Advantage:
Simple, just create selector and set selector to background, in case you want more color, just set more selector then set by code.
▼Disadvantage:
Take effort to create ninepath image for selector, in case you want change color or add more color you must create more image and selector. So it less robust than Solution1
This is my investigate to handler background of image, so it may right or wrong, if you have better solution or explain, feel free to share with us.
I was implement follow solution 2 and it worked.

My solution is a single line of code:
<your-widget-component-that-has-a-background-color>.getBackground().setColorFilter(Color.<your-desired-color>, PorterDuff.Mode.MULTIPLY);).
It breaks down like this:
"getBackground()" fetches the background from the component
"setColorFilter" will call a filtering on the background image itself
"Color.<your-color-here>" determines what color you want to pass onto the filter
"PorterDuff.Mode.<your-desired-filter-mode>" sets the kind of manipulation you would like to do with the given color and the fetched background image.
People with knowledge of image editing software might recognise the mode. Each mode has a certain effect on how the color is applied to the background image. To simply "override" the color of the image, while preserving its gradients, borders and such, use MULTIPLY.

If you set your EditText background to a color you will effectively suppress Android's default background which is probably a Nine Patch but definetely not just a simple color. As result - you will get a simplest form of EditText - a square box. Here's slightly outdated list of built-in drawables to give you some idea

If you wish to edit the color of the Android background on the fly without changing the background image completely, try the following: (it is probably not the best solution but it works):
YourEditText.getBackground().setColorFilter(getResources().getColor(R.color.your_color), PorterDuff.Mode.MULTIPLY);

You don't need to create the image. There is a built in image in the android system that you can use.So edit your EditText in xml as following;-
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="10dp"
android:hint="#string/campaign_message"
android:inputType="textMultiLine"
android:background="#android:drawable/editbox_background_normal"
android:minHeight="80dp" >
</EditText>
Note this line : android:background="#android:drawable/editbox_background_normal"

As I think you should change background Color, not the background. Because it's using xml custom shape.
A drawable to use as the background. This can be either a reference to a full drawable resource (such as a PNG image, 9-patch, XML state list description, etc), or a solid color such as #ff000000 (black).
May be a reference to another resource, in the form #[+][package:]type:name or to a theme attribute in the form ?[package:][type:]name.
May be a color value, in the form of #rgb, #argb, #rrggbb, or #aarrggbb.

Check out http://www.androidworks.com/changing-the-android-edittext-ui-widget if you want to style your EditText's.

I had to use SRC_ATOP for it to work for me
mEditText.getBackground().setColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP);