Develop Reference

Android layerlist drawable

I am creating a login layout for an app.For the background of the LinearLayout(id=#+id/lgn_lyt) I tried to make it look like the image below.It looks fine in design editor,but in the device it look weird.The drawable I used is a vector image.Is it because of the vector image I used it coding mistake in the layerlist?Expecting your answers....
login_lyt.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/lgn_lyt"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="#dimen/usr_nm_lyt_hght"
android:background="#drawable/usr_lyt_bg"
android:layout_marginLeft="#dimen/usrnm_lyt_mrgn_left"
android:layout_marginRight="#dimen/usrnm_lyt_mrgn_right"
android:layout_marginTop="#dimen/usrnm_lyt_mrgn_top">
<EditText
android:id="#+id/usrnme"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/usr_hnt"
android:background="#android:color/transparent"
android:layout_marginLeft="#dimen/usrnm_mrgn_left"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/psswrd_lyt"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="#dimen/usr_nm_lyt_hght"
android:background="#drawable/psswrd_lyt_bg"
android:layout_marginLeft="#dimen/usrnm_lyt_mrgn_left"
android:layout_marginRight="#dimen/usrnm_lyt_mrgn_right"
android:layout_marginTop="#dimen/usrnm_lyt_mrgn_top">
<EditText
android:id="#+id/psswrd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/psswrd_hnt"
android:inputType="textWebPassword"
android:background="#android:color/transparent"
android:layout_marginLeft="#dimen/usrnm_mrgn_left"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginTop="#dimen/usrnm_lyt_mrgn_top"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/login"
android:text="#string/login"
android:textColor="#ffffff"
android:background="#color/colorPrimary"
/>
</LinearLayout>
</LinearLayout>
usr_lyt_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
>
<shape
android:layout_height="match_parent"
android:shape="rectangle"
android:thickness="2dp">
<solid android:color="#10000000"></solid>
</shape>
</item>
<item
android:gravity="center_vertical|left"
android:drawable="#drawable/user"
android:left="15dp"
>
</item>
</layer-list>
In design editor:
In Device:

for image you can use "android:drawableLeft="" " property in EditText.
No need to use background property in LinearLayout

If they dont provide any function other than design why not just add the images using Drawable-left = myImage with the appropriate padding?

change your layout like this: you need to use android:drawableStart: in your edittext not as a background. Your device is showing the right results.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/lgn_lyt"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="#dimen/usr_nm_lyt_hght"
android:layout_marginLeft="#dimen/usrnm_lyt_mrgn_left"
android:layout_marginRight="#dimen/usrnm_lyt_mrgn_right"
android:layout_marginTop="#dimen/usrnm_lyt_mrgn_top">
<EditText
android:id="#+id/usrnme"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/usr_hnt"
android:drawableStart="#drawable/usr_lyt_bg"
android:drawableLeft="#drawable/usr_lyt_bg"
android:background="#android:color/transparent"
android:layout_marginLeft="#dimen/usrnm_mrgn_left"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/psswrd_lyt"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="#dimen/usr_nm_lyt_hght"
android:layout_marginLeft="#dimen/usrnm_lyt_mrgn_left"
android:layout_marginRight="#dimen/usrnm_lyt_mrgn_right"
android:layout_marginTop="#dimen/usrnm_lyt_mrgn_top">
<EditText
android:id="#+id/psswrd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/psswrd_hnt"
android:drawableStart="#drawable/psswrd_lyt_bg"
android:drawableLeft="#drawable/psswrd_lyt_bg"
android:inputType="textWebPassword"
android:background="#android:color/transparent"
android:layout_marginLeft="#dimen/usrnm_mrgn_left"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginTop="#dimen/usrnm_lyt_mrgn_top"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/login"
android:text="#string/login"
android:textColor="#ffffff"
android:background="#color/colorPrimary"
/>
</LinearLayout>
</LinearLayout>

How do I get a line to wrap around textview without passing through the text?

I am planning to achieve something like this:
---------------Text---------------
where "-----" is actually a line ,(view line perhaps? or a divider) .
more accurately, this is an example of what i am trying to achieve:
I was wondering how do I achieve that in my textview. here's my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/mydate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp"/>
</RelativeLayout>

You can do this by creating a single, full-width line, and then putting the TextView on top of it. If you give the TextView the same background color as the parent's background, and give the TextView some left and right padding, it will look like you example.
You can use this for the line (line.xml in your res/drawable directory) :
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line"
>
<stroke
android:color="#android:color/darker_gray"
android:width="1dp"
/>
</shape>
and then use this layout:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="10dp"
android:src="#drawable/line"
android:layout_gravity="center"
/>
<TextView
android:id="#+id/mydate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#android:color/white"
android:textColor="#android:color/darker_gray"
/>
</FrameLayout>

ImageButton background with XML

I am trying to make a round Android ImageButton. To do so, I write the following code according to the link.
In my main.xml
<?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="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_gravity="center"
android:textColor="#333"
android:textSize="18sp"
android:text="Invite Activity." />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButton"
android:src="#drawable/round"
android:background="#drawable/roundcorner"
android:padding="50dp" />
</LinearLayout>
In my res/drawable/roundcorner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#33DDFF" />
<corners android:radius="100dp" />
</shape>
But the code doesn't work. The output is like below
However, when I change ImageButton to ImageView in main.xml
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButton"
android:src="#drawable/round"
android:background="#drawable/roundcorner"
android:padding="50dp" />
It works as below
I am confused since as I know ImageButton inherits from ImageView. Why does it work differently? Is there anyway to fix this? Thanks in advance!

Make your src as android:src="#drawable/roundcorner", or make it transparent so you can see the rounded background behind it.

why there is some space in this layout?

I use this code for making this layout.
<?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="match_parent"
android:layout_margin="20dp"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_centerInParent="true"
android:background="#drawable/rounded_white_bg">
<EditText
android:id="#+id/login"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#drawable/dialog_edittex"
android:layout_margin="10dp"/>
<EditText
android:id="#+id/password"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:background="#drawable/dialog_edittex"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#android:color/black"
android:text="AAAAAAAAAAAA"
android:layout_gravity="center"
android:textSize="20sp"
/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:src="#drawable/dialog_button_bg"/>
</LinearLayout>
</RelativeLayout>
rouded_whiite.bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<corners
android:radius="20dp"/>
</shape>
But when I do this I have see this result. As you can see there is some margin below of red button. I didn't set any margin or something but there is some space there. What should I do here for getting exact result as in fist image.

Remove the margin from your RelativeLayout and make your LinearLayout gravity android:layout_centerHorizontal="true"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:background="#drawable/rounded_white_bg">

Use :
android:layout_centerHorizontal="true"
instead of
android:layout_centerInParent="true"
and remove margin from bottom...

<LinearLayout
android:layout_height="wrap_content"
it is because of this. remove the imageview from the linear layout and set in the relative layout and give property as alignparent bottom and for the linear layout give alignparent top and above the image view property,

Try This
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#drawable/rounded_white_bg">
<EditText
android:id="#+id/login"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#drawable/dialog_edittex"
android:layout_margin="10dp"/>
<EditText
android:id="#+id/password"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:background="#drawable/dialog_edittex"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#android:color/black"
android:text="AAAAAAAAAAAA"
android:layout_gravity="center"
android:textSize="20sp"
/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:src="#drawable/dialog_button_bg"/>
</LinearLayout>
</RelativeLayout>

If your using drawable for imageview as .png or .jpg use the following drawable for your image may be it would help. save this as backgroung_bg.xml or anything else as you wish
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape >
<corners android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp"/>
<solid android:color="#CF4647"/>
<padding android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp"/>
</shape>
</item>
when you apply this you would get following warning just ignore and run it. if you need gradient type of color ask me
The graphics preview in the layout editor may not be accurate:
Different corner sizes are not supported in Path.addRoundRect. (Ignore for this session)

Android List Item: TextView on left, Image on right

I'm creating a custom list item in and android list view. it's very simple, it has a textview on the left and an image on the right. the image should align all the way right, and the text view should take up all the space on the left. problem is, i can get the image to show up, but it pushes left. if i set the textview width to fill_parent, the image disappears. here's my layout:
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="50px" android:layout_gravity="center_vertical">
<!-- item -->
<TextView android:id="#+id/txtItem" android:gravity="center_vertical" android:textSize="20px" android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<!-- disclosure image -->
<ImageView android:layout_gravity="right|center_vertical" android:src="#drawable/common_icon_arrow_disclosure"
android:layout_width="wrap_content" android:layout_height="wrap_content"/>
</LinearLayout>
i've also tried a relative layout, but the same thing happens. what am i doing wrong?
EDIT: for clarification, this is what i'm trying to accomplish:
i want the text field to take up the whole left area, and the image to be on the right, unscaled, vertically centered.

You can also just add the drawable to the textview directly like this.
<TextView
android:id="#+id/txtItem"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawableRight="#drawable/common_icon_arrow_disclosure"
android:gravity="center_vertical"
android:textSize="20px" />

You can use bitmap drawable like this (this also adds rounded corners):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#android:color/white" />
<stroke
android:width="2dp"
android:color="#adadad"
/>
<corners android:radius="5dp" />
</shape>
</item>
<item android:right="5dp"
android:top="2dp"
android:bottom="2dp">
<bitmap
android:src="#drawable/image"
android:gravity="right"
/>
</item>
</layer-list>
and put this drawable in background property of your TextView:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/right_image"
android:text="some text"
/>

Left-align your text with the parent, and set the gravity of the image to right:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="48dp">
<TextView
android:id="#+id/team_member_name"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:singleLine="true"/>
<ImageView
android:id="#+id/team_member_icon"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="right"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:src="#drawable/circle_green"/>
</RelativeLayout>

Relative layout is what you want. In your case the fill_parent attribute was causing the text view to push the image off of the screen. If you use Relative layout and set the text view to use the layout_toLeftOf it should work.
Here is a quick example that I think will work (I haven't tested it out and it's from memory but the idea is there)...
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="50px"
android:layout_gravity="center_vertical">
<ImageView android:id="#+id/img"
android:layout_gravity="right|center_vertical"
android:src="#drawable/common_icon_arrow_disclosure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/txtItem"
android:gravity="center_vertical"
android:textSize="20px"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toLeftOf="#id/img" />
</RelativeLayout>

This worked for me:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:padding="10dp"
android:layout_marginRight="10dp"
android:textSize="16sp"
android:textColor="#color/text_color"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"/>
<ImageView android:id="#+id/imageBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:padding="10dp"
android:contentDescription="#string/delete"
android:src="#drawable/delete_minus_png"
android:layout_alignParentRight="true" />
</RelativeLayout>
Line android:layout_marginRight="10dp" did the trick.
Hope it helps!

Looks like there is some layout bug or so. If the TextView has fill_parent flag, the ImageView will be pushed away from the layout, even if the TextView contents are small enough.