Develop Reference

How to make Android xml custom ui elements that are not images

When making a website with html and css you can simply make a box by giving a couple of div tags some attributes like color and such, what is the Android xml equivalent to this? I need to make a layout with simple elements like this example, whether it be just a rectangle or a circle, that can rescale with the screen. Is there a way to do that? Even a link to a tutorial would be greatly appreciated, i could not find anything myself.

what is the Android xml equivalent to this?
To the extent that there is an equivalent, you could use a a ShapeDrawable, used in an ImageView or possibly as a background to something else.
Please understand that not everything that is easy in Web development will be easy in other platforms, and not everything that is difficult in Web development will be difficult in other platforms.

You can use View and give it a background.
If you want a rectangle, you can just assign the color you want:
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" />
If you want to have a circle as background, or something other, you can create a drawable file using shapes:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#000000" />
</shape>
and assigning it to the view:
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/circle" />
where "circle" is the name of the file with the shape

The Fastest way to make custom buttons and any kind of background.
Oval, Rectangle etc.
In your case as i am getting is that you want an rectangle like we do in HTML/CSS.
Here is an video with very much clarity, i found :
https://www.youtube.com/watch?v=WkJTunLf5iE
In this video he described about custom buttons but you can use it same with your required background and set it to you view like this :
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rectangle" />
That's it !!

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.

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.

Android -- How to remove that little extra padding when using a ListView with custom background?

I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#EAEAEA">
<ListView
android:id="#+id/xxx"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#464C59"
android:divider="#A4C539"
android:dividerHeight="1px">
</ListView>
<ImageView
android:id="#+id/home_bottom_bar"
android:src="#drawable/bottombar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:clickable="true"/>
</FrameLayout>
The goal is to have some sort of advertising bar at the bottom of the activity (which contains a list of items). It works ok, except for one thing! There is some sort of extra space just under the bar (it's very small but it's noticeable enough). By the way, all the paddings are set to 0 so where does this space come from?
Thanks!
EDIT
After investigating the issue, it turns out that the custom background (#EAEAEA) is causing this extra space. Still don't know how to fix this though.

When you mention that it is a small extra space, it may be the tiny gradient at the top and bottom. Created by ListView, when it is made scrollable.
You may read about ListView Backgrounds, this should give you the idea on how to fix it, if it is caused by this special gradient.
This gradient line can apparently also be removed: extra line in tab host

You may want to use the merge tag since every activitys base layout is a FrameLayout.
(This may cause the padding. Im not 100% sure on this one though)
Look here.

Android: How to use an xml string value to determine layout orientation

I have a simple linear layout that I would like to change based on the screen size of the device. What I am trying to do is something like
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="#string/cover_orientation"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
I have created different dimen.xml files under values and values-xlarge so that the cover_orientation variable will take on a different value (either 'vertical' or 'horizontal') based on the screen size.
string name="cover_orientation">"vertical"
But this doesn't work. I have found a temporary work around that involves checking the screen size and changing the orientation manually:
if(getResources().getString(R.string.screen_size) == "xlarge"){
((LinearLayout)convertView).setOrientation(1);
}
but it seems like you should be able to do it the first way (much more elegant/less code).
I considered just having a different layout for each screen size, but the layout is actually quite big and this is the only change I need for the different screen sizes. So it didn't make much sense to me to duplicate the entire layout.
Thanks!

A nice way to do this is to add
android:orientation="#integer/cover_orientation"
on your LinearLayout and defining it like below.
in values/consts.xml:
<resources>
<integer name="orientation_horizontal">0</integer>
<integer name="orientation_vertical">1</integer>
</resources>
in values/something.xml:
<resources>
<integer name="cover_orientation">#integer/orientation_vertical</integer>
</resources>
in values-land/something.xml:
<resources>
<integer name="cover_orientation">#integer/orientation_horizontal</integer>
</resources>
This way you avoid hardcoding zeros and ones in your orientation variable definitions across the app.

I eventually found a solution to the problem by looking around the android docs. What I originally had was a LinearLayout, that contained an image an text inside of it (there was actually a lot more content inside of it but I'll keep it simple for this example), that looked something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView android:id="#+id/cover"
android:layout_width="#dimen/cover_width"
android:layout_height="#dimen/cover_height"/>
<TextView android:id="#+id/title"
android:gravity="top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="#dimen/title_font_size"
android:scrollHorizontally="true"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>
What I wanted was to be able to dynamically change whether the text was beside the image or below the image, based on the device screen size. In other words i wanted to dynamically change the android:orientation dynamically. My first thought, which I posted in my question, was to have a string variable declared in the res/values/dimen.xml as
<string name="orientation">horizontal</string>
and another string variable declared in res/values-large/dimen.xml as
<string name="orientation">vertical</string>
Then when I was setting the orientation in the LinearLayout I thought I could use
android:orientation="#string/orientation"
But this didn't work. What I ended up doing was splitting the layout up. I originally had reservations about having two separate layouts because I thought I would have a lot of duplicated code for one simple change. That was before I learned about include and merge. First I created a common layout file that was the image and text in res/layout/content.xml that looked like:
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<ImageView android:id="#+id/cover"
android:layout_width="#dimen/cover_width"
android:layout_height="#dimen/cover_height"/>
<TextView android:id="#+id/title"
android:gravity="top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="#dimen/title_font_size"
android:scrollHorizontally="true"
android:maxLines="1"
android:ellipsize="end" />
</merge>
(Sidenote: I was originally confused at what the merge tag did. It is not merging what is inside the merge tag (in this example the image and the text) it is basically saying whatever parent file includes this file, merge the contents in between the tags into the parent file)
Then I created two separate files for just the LinearLayout that included the image and description xml file. One in res/layout/container.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/library_item_container"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<include layout="#layout/content"/>
</LinearLayout>
and one in res/layout-large/container.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/library_item_container"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<include layout="#layout/library_item_contents"/>
</LinearLayout>
Notice the only difference between the two container.xml files is that the orientation has changed from vertical to horizontal. Now there is minimal code that is repeated and problem is solved!

#odiggity, thank you for posting this question. I was trying the same. Application crashed upon starting.
I would assume that it's a runtime typing issue. In other words, there are only two legal values for the orientation attribute, which is not reflected by the string "type". What the framework would probably have to do is introduce another specialized resource type, similar to dimen or boolean.
I feel there is an answer to your question which addresses more cases than your own answer above. One can use style inheritance to define all attributes except orientation in an orientation-independent parent style and then add only the orientation in a small orientation-dependent style definition with that as a parent.
This way, one can avoid duplication even in complex cases.

I suggest you do some reading: http://developer.android.com/guide/practices/screens_support.html