Develop Reference

Android: How to add a line to TextView?

I'm trying to achieve this:
I know that using a vertical LinearLayout that constains a TextView and just below a View that works as a line is a possible a solution, but I'd not like to use 3 widgets to achieve that. What I want is to use only a TextView and draw the line using a drawable. I have done an implementation but it does not work (I do not see the line). Find below the code I wrote:
<TextView
android:layout_width="100dp"
android:layout_height="150dp"
android:gravity="center"
android:text="Text"
android:drawableBottom="#drawable/line"/>
line.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="10dp" android:color="#3b50ec"/>
</shape>
If is possible to achieve what I want using my approach, does anyone know what's wrong in my code?

The problem is in your line.xml file, replace its content for this implementation:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<size
android:height="1dp"
android:width="100dp" />
<solid android:color="#3b50ec" />
</shape>

I think to do this requires a 9 patch. Here's one from the sdk (ab_transparent_dark_holo.9.png):
And then change it to a background attribute:
<TextView
android:layout_width="100dp"
android:layout_height="150dp"
android:gravity="center"
android:text="Text"
android:background="#drawable/line"/>

Make ImageView or its parent circular from left side

I have a very basic layout as follows. I'm just using a red background in the ImageView just to depict the situation.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/custom_bg_grey_stroke_radius"
android:orientation="vertical" >
<ImageView
android:id="#+id/IV"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:background="#ff0000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:layout_toRightOf="#+id/IV" />
</RelativeLayout>
This is the custom background I'm using:
custom_bg_grey_stroke_radius.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- background color of the entire rectangle -->
<solid android:color="#FFFFFF" />
<!-- color of borders -->
<stroke
android:width="1dp"
android:color="#c1c1c1" />
<corners
android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp"
android:topLeftRadius="4dp"
android:topRightRadius="4dp" />
</shape>
I found various links which make the images circular but from all the 4 corners.
This link tells how to make image circular from top or bottom.
Android round a Layouts background image, only top or bottom corners
Can someone please figure out how to make Image circular from the left.
It would be good if I could specify the exact radius. I want it just barely circular around 5dp.
And, I apologize for the repetitiveness, but I'm just not able to work this out.

Android creating Circular layout

I am trying to create a circular layout that always stay's on the screen.
To do so, I have created a System overlay and added a button.
But, now I want to make it round.
Either I can use 4 different ImageView and and textView and add both to FrameLayout.
I read somewhere that simple things like this can be made by XML.
How do I do it?
I want to achieve something like this :
EDIT
After following your guide I was able to achieve this :
But I am not satisfied by the way I used.
What I did was created 2 shaped (background, forground) and added them to a layerlist.
BACKGROUND
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#50000000" />
</shape>
FORGROUND
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#99009900" />
</shape>
LIST
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/circleback">
</item>
<item
android:bottom="5dp"
android:drawable="#drawable/circlefront"
android:left="5dp"
android:right="5dp"
android:top="5dp">
</item>
</layer-list>
Then, I used a framelayout and added 2 textview.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#drawable/circle" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="33dp"
android:text="#string/data_left"
android:layout_marginTop="8dp"
android:textColor="#fff"
android:textSize="30sp"
android:typeface="sans"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:text="#string/band"
android:layout_marginTop="40dp"
android:textColor="#fff"
android:textSize="20sp"/>
</FrameLayout>
And then inflated them by service. But I am not happy with the textposition and the fact that I have to random hit and trial to find center of circle.
I'll later add pinch to zoom to view so, I really want to find a way that text align itself to centre of circle.

You need to create a shape drawable (in the res/drawable folder) like:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"
<solid android:color="#ff00ff00 />
</shape>
See docs: https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Possible to create a fixed-width drawable in XML?

I'm trying to simplify some graphics from requiring a 9-patch for each density, to just using an XML drawable. It's a fairly simple graphic:
2 Segments:
8dp wide for both segments
Top segment is 2dp tall
Bottom segment fills the view
Right side is filled with transparency
Giving this result when set as a background image:
It seems like this should be fairly simple to recreate as an XML drawable, and would avoid creating 5 different 9-patch graphics. However, I've looked into layer-list drawables, inset drawables, clip drawables -- they all seem to require that you know the size of the view beforehand (e.g. to keep it 2dp for an inset, you'd need to set insetRight to the width of the view - 2dp). I also tried using the shape tag's size tag, but that doesn't keep a fixed size, just a fixed proportion (so for taller views it will scale proportionally).
Am I overlooking something simple, or is this something I'd have to resort to checking programatically after layout?

This is not possible. This is the best solution I found. Only xml, no coding, no bitmaps, no additional views )
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#ff0000" />
</shape>
</item>
<item
android:top="4dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#00ff00" />
</shape>
</item>
<item
android:left="10dp">
<shape
android:shape="rectangle">
<solid
android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
Via code you can make your own drawble type with desired behavior. Xml drawable very limited. IMHO my suggestion is the closest to what you demanded.

I think the answer by #Leonidos is very close to what I'm proposing, except I'm using the drawable as a separate view instead of the background for the entire list detail layout. This allows it to be a fixed width and to let the item text have its own background. Let me know if I'm not understanding your constraints.
The following file is "res/drawable/list_left_border"
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#e76e63" />
</shape>
</item>
<item android:top="2dp">
<shape android:shape="rectangle" >
<solid android:color="#ffc257" />
</shape>
</item>
</layer-list>
Then on the layout for the list item in "res/layout/list_item.xml"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity" >
<View
android:background="#drawable/list_left_border"
android:layout_width="8dp"
android:layout_height="match_parent" />
<TextView
android:id="#+id/listItemText"
android:textSize="15sp"
android:padding="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Here's the image. The background is pink to show that the list item is transparent.

I'm going to go one further and suggest a slight reworking of AndroidGuy's answer, which itself includes Leonidos' answer.
Same drawable XML, different list item XML as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="100sp">
<ImageView
android:layout_width="8dp"
android:layout_height="match_parent"
android:src="#drawable/list_left_border" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Item Text"
android:textSize="22sp" >
</TextView>
</FrameLayout>
The FrameLayout gives the original background behaviour, rather than separation into a new view.
I've shown this below, with backgrounds to demonstrate:
This doesn't really deserve the points though.

Buttons spacing

I'm trying to set the margin of the buttons to 0, (so no spacing between the buttons).
Basically, I want my buttons to look something like that(with the following style and colors):
Any idea how can I accomplish this kind of task? I do not want to create a 9 patch image by myself (since I don't have any knowledge doing that).

In this specific case, you can do this task easily with XMLs.
This is how you can achieve it in two steps:
Step 1
Create 3 shapes in drawable folder:
First shape is for the left button: shape_button_left.xml. This shape has radial left corners and gradient background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="1dp"
android:color="#BFBFBF" >
</stroke>
<corners
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp" >
</corners>
<gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>
</shape>
Second shape is for the center button: shape_button_center.xml. This shape doesn't define anything for corners and also has gradient background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="1dp"
android:color="#BFBFBF" >
</stroke>
<gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>
</shape>
Third shape is for the right button: shape_button_right.xml. This shape has radial right corners and gradient background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="1dp"
android:color="#BFBFBF" >
</stroke>
<corners
android:bottomRightRadius="10dp"
android:topRightRadius="10dp" >
</corners>
<gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>
</shape>
Step 2
Now, we can use these shapes in simple views to get the effect of buttons.
In your layout XML add the next code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<!-- Button Left -->
<LinearLayout
android:id="#+id/button_left"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#drawable/shape_button_left"
android:gravity="center"
android:padding="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#333333"
android:textSize="20sp" />
</LinearLayout>
<!-- End Button Left -->
<!-- Button Center -->
<LinearLayout
android:id="#+id/button_center"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#drawable/shape_button_center"
android:gravity="center"
android:padding="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Center"
android:textColor="#333333"
android:textSize="20sp" />
</LinearLayout>
<!-- End Button Center -->
<!-- Button Right -->
<LinearLayout
android:id="#+id/button_right"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#drawable/shape_button_right"
android:gravity="center"
android:padding="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right"
android:textColor="#333333"
android:textSize="20sp" />
</LinearLayout>
<!-- End Button Right -->
</LinearLayout>
That's it
Now, you can add onClick listener in your code to LinearLayouts and work with it like a button.
Testing this code on my mobile gives next result:

Any idea how can I accomplish this kind of task? I do not want to create a 9 patch image by myself (since I don't have any knowledge doing that).
I'm afraid you may not have much choice. The inherent spacing found in between each button is a result of extra transparent pixels built directly into the existing 9-patch backgrounds that the framework uses. To replace this behavior you must set the background of the buttons to a different Drawable that doesn't include this inherent spacing.
Another option would be for you that could be done in code is to create XML drawable shapes to use for each background. You can create an individual shape that has corner radii, a fill gradient, and a stroke just like your image. You can read more about creating XML Drawables in the docs.