Develop Reference

Align the drawableEnd image to the end of the text on the button

How to align the drawableEnd image to the end of the text on the button? Button width set to match_parent.
I want to get the following button:
[]
I'm sorry, but I couldn't find a solution and can't give any code examples.

for that you have to make custom and give click event to parent layout button(try this code it will work for you)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/value_40"
android:background="#color/text1">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:textColor="#color/white"
android:layout_centerInParent="true"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/cross"
android:layout_toRightOf="#+id/tv1"
android:layout_centerVertical="true"
android:layout_marginStart="5dp"/>
</RelativeLayout>
</LinearLayout>

RelativeLayout align Textview and Edittext

I want to use a RelativeLayout to align horizontally a textview and after that an edittext and then again a textview and then an edittext. I know that you can do that with a LinearLayout, but I want to accomplish that with a relativeLayout.
My Code is the following:
<?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="wrap_content">
<TextView
android:id="#+id/userNameLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Username:"
android:layout_alignParentLeft="true" />
<EditText
android:id="#+id/userNameText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/userNameLbl"
android:minWidth="200dp"
android:text="Sample Text" />
<TextView
android:id="#+id/pwdLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password:"
android:layout_toRightOf="#+id/userNameText"
android:layout_toEndOf="#+id/userNameText" />
<EditText
android:id="#+id/userNameText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/pwdLbl"
android:minWidth="200dp"
android:text="Sample Text" />
</RelativeLayout>
But it doesn't work. All the controls (edittexts and textviews) are put on each other! What is wrong with my code? I have used layout_toRightOf to put them next to each other.
And because it was mentioned, there is enough place for the controls.
Here is also a picture of the designer, how it is looking like:

I copied your code just to see the exact problem, but everything looked fine. However The last EditText was cramped on the right side due to space-issues.
Are you sure you have enough space so that everything can fit?
With too little space given it might be possible that the views get crammed onto each other.

When you look closer, in android:layout_toRightOf and android:layout_toEndOf attributes you are using #+id/... values. Delete the + in order to refer to an existing resource item.

Ok, the problem seems to be in Xamarin Studio itself which is not rendering the content of the layout correctly. Because when I run this layout on a device the controllers are put next to each other and there is not such a problem, but the designer show it completely different.

Try this code it will align as you need:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_height="match_parent">
<TextView
android:id="#+id/userNameLbl"
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="wrap_content"
android:text="Username:" />
<EditText
android:id="#+id/userNameText"
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="wrap_content"
android:minWidth="200dp"
android:text="Sample Text" />
<TextView
android:id="#+id/pwdLbl"
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="wrap_content"
android:text="Password:"
/>
<EditText
android:id="#+id/userNameText2"
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="wrap_content"
android:minWidth="200dp"
android:text="Sample Text" />
</LinearLayout>
Comment below if you need any further info

Buttons not getting displayed

I have the following code defined in my xml file, but I don't see the buttons getting displayed. I have read way too many posts, and pretty much tried all possible combinations, but no luck :( I'd really appreciate if someone could help me here.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:gravity="center"
android:text="#string/hello_world"
android:textSize="32sp" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:hint="#string/ad_desc"
android:inputType="text" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/phone" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sms" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/maps" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/video" />
</LinearLayout>
I would like to see my App Name on top (Text view - #string/hello_world), right beneath it, a big box that allows me to EditText(#string/ad_desc), and beneath that, all my buttons. The button should be at the bottom, next to each other aligned in this manner - http://www.mkyong.com/android/android-linearlayout-example/ (Linear layout - Horizontal example), except I want my buttons to be at the bottom, and not at the top. Instead I see something else (Image attached)
Please feel free to ask me if you'd like me to attach anything else. I am new to Android programming, and this is totally beyond me on why it isn't working.

If you want to align your Buttons at the bottom then you are better off with a RelativeLayout as the root. Try changing it to the following and notice the properties
<?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="fill_parent" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="#string/hello_world"
android:textSize="32sp" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/ad_desc"
android:inputType="text"
androidi:layout_below="#id/textView2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/phone" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sms" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/maps" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/video" />
</LinearLayout>
</RelativeLayout >
You may have to add some margin to the TextView and EditText for appropriate spacing but this should give you your TextView with the EditText below it and your Buttons in a horizontal LinearLayout aligned at the bottom of the screen.
Edit
Notice this property
androidi:layout_below="#id/textView2"
of the EditText and this property
android:layout_alignParentBottom="true"
Of the LinearLayout that I added.

The easiest thing is to create a new relative layout, and place the item that you need from the palette.
Or start to try and learn to make matrioska layout via xml ;)
http://developer.android.com/guide/topics/ui/declaring-layout.html

Button's text is only half visible

I am having troulbe fixing the following issue. I have a button with text OK. The button is nested inside a LinearLayout. This layout is nested inside two RelativeLayout. The second/inner RelativeLayout has `android:layout_margin="15dp". This is causing the text inside the button to be only half visible.
The XML is below. I am using it because it gives me the "popup" dialog with the (X) button on the top right corner.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<RelativeLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:padding="2dp"
android:background="#drawable/xml_round_corners_background"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="15dp"
android:background="#drawable/xml_round_corners_background"
android:gravity="center_vertical|center_horizontal"
android:layout_weight="1"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1"
>
<TextView
android:id="#+id/exitTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:textAlignment="center"
android:text="TEXT....\n\n\n"
android:textColor="#color/white"
/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:id="#+id/bluetooth_error_button_linearlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_below="#+id/exitTV"
>
<Button
android:layout_margin="15dp"
android:id="#+id/bt_error_message_ok_button"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/xml_botton1"
android:text="OK"
android:textColor="#color/DarkMagenta" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<Button
android:id="#+id/bt_error_message_x_button"
android:layout_alignParentRight="true"
android:text="X"
android:textColor="#FFF"
android:background="#drawable/xml_round_dismiss_button"
android:gravity="center_vertical|center_horizontal"
android:layout_margin="7sp"
android:layout_height="30sp"
android:layout_width="30sp"
android:textSize="15sp"
android:textStyle="bold"
android:onClick="cancelActivity" />
</RelativeLayout>
Could anyone please tell me what can i do to make the text fully visible?
I have changed/addded/removed attributes to the LinearLayout and the RelativeLayout the TextView, and the Button as well. but I could not make it work.
Thanks
EDIT:
This photo is how Eclipse shows the window, and its actually how I want it to be.
This is a partial screen shot from my phone. Samsumg Galaxy S III mini (4.0" screen)

I jsut realized that I was using another XML file as the background for each button. This XML was causing those issues.

rather than try to "text" with "background" in your XML, try using drawableTop (or ~Left ~Right or ~Bottom). These set the text so that the drawable is above "drawableTop" your text or where ever you want it

How to place button inside of EditText

I want to place an image button inside of EditText, but I don't have Idea please tell me how to do so as shown in the figure . Thanks

If You dont want click on that Image, Then you can use drawableRight property for EditText..
android:drawableRight="#drawable/icon"
If you want click then use below code.
<?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" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter search key" />
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/search"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:text="Button"/>
</RelativeLayout>

If you want such layout and also image as clickable then you can do something like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true" >
</EditText>
<ImageView
android:id="#+id/imageView1"
android:padding="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/editText1"
android:layout_alignBottom="#+id/editText1"
android:layout_alignRight="#+id/editText1"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
Output:

In Material, there is that underline under EditText. In most applications the icons appear inside that underlining.
For that purpose, just use padding
android:paddingEnd = "#dimen/my_button_size"
Don't forget paddingRight for sub 4.2 versions.
<RelativeLayout ....>
...
<EditText
...
android:id="#+id/my_text_edit"
android:textAlignment = "viewStart"
android:paddingEnd = "#dimen/my_button_size"
android:paddingRight = "#dimen/my_button_size"
.../>
<ImageButton
....
android:layout_width="#dimen/my_button_size"
android:layout_height="#dimen/my_button_size"
android:layout_alignEnd="#id/my_text_edit"
android:layout_alignRight="#id/my_text_edit"/>
...
</RelativeLayout>
It will limit the text to the image and the image will not overlap the text, however long the text may be.

My solution will fit all screen sizes without the editText going "behind" the imageButton. This also uses android resources, so you do not need to provide your own icon or string resource. Copy and paste this snippet wherever you would like a search bar:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:layout_margin="8dp"
android:id="#+id/etSearch"
android:hint="#android:string/search_go"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<ImageView
android:id="#+id/ivSearch"
android:background="#color/transparent_black"
android:padding="2dp"
android:layout_width="wrap_content"
android:layout_margin="8dp"
android:src="#android:drawable/ic_menu_search"
android:layout_height="wrap_content"
tools:ignore="contentDescription" />
</LinearLayout>
Restult:

you can Use the Below Code :
android:drawableRight="#android:drawable/ic_menu_search"

How about placing it in a RelativeLayout like this ?:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- EditText for Search -->
<EditText android:id="#+id/inputSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Search whatever..."
android:textSize="14dp"
android:textStyle="italic"
android:drawableLeft="#drawable/magnifyingglass"
android:inputType="textVisiblePassword"
android:theme="#style/EditTextColorCustom"/>
<Button
android:id="#+id/btn_clear"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_marginTop="10dp"
android:layout_alignRight="#+id/inputSearch"
android:layout_marginRight="5dp"
android:background="#drawable/xbutton"
android:visibility="gone"/>
</RelativeLayout>
Also this way you´ll be able to handle the visibility of the Button (GONE / VISIBLE) in code.
Hope it helps.

Place your EditText inside a linear layout (horizontal) and add a Image Button next to it (0 padding). Setting the background color of EditText and ImageButton will blend in.

There's solution with clickable compound drawable. It's working very well - I have tested it
SOLUTION

This is pretty simple I feel. Use relative layout as your parent layout.
Place the editText to left and ImageButton to the right using either,
alignRight property for the ImageButton
by specifying the layout weight for each of the fields

In the accepted answer the ripple effect doesn't work, it stays behind the button in the back.
This example has 2 buttons in the textbox.
The ripple effect works because the parent layout has
android:background="#android:color/transparent"
To make sure the ripple works and doesn't stay on the back, set the imagebutton's parent background to transparent.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:focusableInTouchMode="true"
android:layout_margin="4dp">
<EditText
android:id="#+id/editText"
style="#android:style/TextAppearance.Medium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginTop="2dp"
android:layout_marginRight="2dp"
android:background="#drawable/shape_textbox"
android:hint="text"
android:imeOptions="actionDone"
android:importantForAutofill="no"
android:inputType="text" />
<ImageButton
android:id="#+id/btn1"
android:layout_width="44dp"
android:layout_height="44dp"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:layout_toStartOf="#+id/btn2"
android:background="?android:selectableItemBackgroundBorderless"
android:src="#drawable/ic_btn1" />
<ImageButton
android:id="#+id/btn2"
android:layout_width="44dp"
android:layout_height="44dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:background="?android:selectableItemBackgroundBorderless"
android:contentDescription="#string/clear"
android:src="#drawable/ic_btn2" />
</RelativeLayout>
Or you can also wrap your button in a frame layout:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
>
<ImageButton ... />
</FrameLayout>

I don't know why you want to place ImageButton to achieve, which can be done with simple property of EditText
android:drawableRight="your drawable"
Can't it be work for you?

Use the android:drawableLeft property on the EditText.
<EditText
...
android:drawableLeft="#drawable/my_icon" />