Develop Reference

DrawableLeft in center with text

I can't center my drawableLeft icon.
I can easily put icon on the left of text, but if I set gravity to center, then only text is centered, but no icon.
<Button
android:id="#+id/patient_list_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/patientList"
android:drawableLeft="#drawable/ic_icon_two_heads"
android:layout_marginBottom="15dp"
style="#style/darkBlueButtonWithImage"/>
This is what I want:
This is what I have:
<style name="darkBlueButtonWithImage">
<item name="android:drawablePadding">10dp</item>
<item name="android:textColor">#color/white</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:background">#drawable/radius_dark_blue_button</item>
<item name="android:gravity">center_vertical|left</item>
<item name="android:drawableTint">#color/white</item> <!-- has to be set in activity.java -->
</style>
How can I achieve this?

Finally, after all these years, we have possibility to achieve such behavior in simple and intuitive way.
All you have to do is use MaterialButton from Google Material library. Then use style with icon. After that you can use app:iconGravity property and set it to textStart
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.Icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text"
app:iconGravity="textStart"
app:icon="#drawable/some_icon" />

The easiest solution IMO:
yourButtonView.text = SpannableString(" ${getString(R.string.your_string)}").apply {
setSpan(
ImageSpan(requireContext(), R.drawable.your_icon),
0,
1,
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
}
Is a bit hacky? Maybe. Does it work with every button (MaterialButton, AppCompatButton, Button, etc)? It does.
I prefer this rather than going with all the hassle of creating a custom view or something like that.

After giving Google's approach a try over 9000 times, I almost always ended up using a ViewGroup to put both side by side, particularly a RelativeLayout or LinearLayout and then adding an ImageView and a TextView. It's lame, but drawableStart/End have so many missing features that you'll waste a lot of time before you realize "you can't do it".
Alignments, tinting, Vectors, etc. All those things are harder or impossible with the "built in" drawable.

Using Button attributes android:drawableLeft and android:drawablePadding you won't be able to get your expected result. You can create a custom button using RelativeLayout or LinearLayout, TextView and ImageView. Use <selector> to define your button state(normal/pressed) behavior.
Here is an working example. Try this:
<!--- Custom Button -->
<RelativeLayout
android:id="#+id/patient_list_button"
android:layout_width="match_parent"
android:layout_height="48dp"
android:clickable="true"
android:background="#drawable/custom_button_selector">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerInParent="true"
android:gravity="center_vertical">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#drawable/icon_refresh"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:textSize="16dp"
android:text="CUSTOM BUTTON"
android:textStyle="bold"
android:textColor="#FFFFFF"/>
</LinearLayout>
</RelativeLayout>
custom_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:state_enabled="true"
android:drawable="#drawable/bg_custom_button_pressed" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#drawable/bg_custom_button_pressed" />
<item
android:state_enabled="true"
android:drawable="#drawable/bg_custom_button_normal" />
</selector>
bg_custom_button_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- view background color -->
<solid
android:color="#01A1DD" >
</solid>
<!-- Here is the corner radius -->
<corners android:radius="8dp" >
</corners>
</shape>
bg_custom_button_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- view background color -->
<solid
android:color="#303F9F">
</solid>
<!-- Here is the corner radius -->
<corners android:radius="8dp" >
</corners>
</shape>
OUTPUT:
Hope this will help~

a) Increase "paddingLeft" value and shrink or remove "drawablePadding" in your case, adjust the value to a proper one; for example:
android:paddingLeft="50dp"
android:gravity="center_vertical|left"
b) Use a custom view.

A bit hacky solution:
<TextView
android:id="#+id/tv_whatsapp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/tv_call"
app:layout_constraintTop_toBottomOf="#id/tv_completed_message_desc"
android:layout_width="0dp"
android:layout_height="40dp"
android:textStyle="normal"
android:layout_marginTop="#dimen/rs_dp_13"
android:layout_marginRight="#dimen/rs_dp_12"
android:background="#drawable/rs_dark_teal_rectangle_bg"
android:textSize="14sp"
android:textColor="#color/dark_teal"
**android:paddingHorizontal="38dp"**
android:includeFontPadding="false"
**android:drawableStart="#drawable/rs_user_journey_whatsapp_icon"**
**android:drawableLeft="#drawable/rs_user_journey_whatsapp_icon"**
android:visibility="visible"
android:letterSpacing="0.04"
app:layout_constraintHorizontal_chainStyle="packed"
**android:gravity="center_vertical|end"**
android:text="Whatsapp"/>
Setting horizontal padding along with gravity as center_vertical|end will achieve the required behaviour. You can increase/decrease the padding as per requirement.

Change default button color from grey to white android

I have a cardview. The button default color is grey. I want it to look like the right side image(like the blessings). This right one has been created setting backgroundtint to white but in older versions its still shows grey.
<android.support.v7.widget.CardView
android:id="#+id/programm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardCornerRadius="2dp"
android:layout_alignParentBottom="true"
android:layout_margin="6dp"
card_view:cardElevation="6dp"
android:layout_gravity="end|right"
card_view:cardBackgroundColor="#color/hotpink"
android:onClick="openNextActivity">
<Button
android:layout_width="wrap_content"
android:drawable="#color/white"
android:layout_height="wrap_content"
android:text="#string/Programme"
android:textColor="#color/hotpink"
android:onClick="openNextActivity"
/>
</android.support.v7.widget.CardView>
If i change the background of the button to white the entire color changes to white:
<android.support.v7.widget.CardView
android:id="#+id/programm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardCornerRadius="2dp"
android:layout_alignParentBottom="true"
android:layout_margin="6dp"
card_view:cardElevation="6dp"
android:layout_gravity="end|right"
card_view:cardBackgroundColor="#color/hotpink"
android:onClick="openNextActivity">
<Button
android:layout_width="wrap_content"
android:drawable="#color/white"
android:background="#color/white"
android:layout_height="wrap_content"
android:text="#string/Programme"
android:textColor="#color/hotpink"
android:onClick="openNextActivity"
/>
</android.support.v7.widget.CardView>
As per google search, this default grey color is set in some theme.I probably need to overwrite some theme and set some attribute. But I am not sure what do I need to change.

Try this:
<Button
android:layout_width="wrap_content"
android:text="Button Text"
android:theme="#style/myButtonTheme"
android:layout_height="wrap_content"/>
set this myButtonTheme in your styles.xml file:
<style name="myButtonTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColorPrimary">#color/white</item>
<item name="colorButtonNormal">#5552f1</item>
</style>
[ set your desired background color in colorButtonNormal ]
Output:

i haven't tested it for this kind of situation, but i think something like this can work
you can create a background.xml in your drawable directory and set it as background
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item>
<shape>
<!-- set the shadow color here -->
<stroke
android:width="3dp"
android:color="#77000000" />
<!-- setting the thickness of shadow (positive value will give shadow on that side) -->
<padding
android:bottom="3dp"
android:left="1dp"
android:right="3dp"
android:top="1dp" />
<corners android:radius="4dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#fff" />
<corners android:radius="4dp" />
</shape>
</item>
things you can try with this is that you can set the shadow color the color you want or something else that i had in mind was set the opacity of shadow color to zero so that it would be transparent and you can set its thickness by the paddings of the shadow
hope this helps

In yout styles define:
<style name="BlueButtonTheme" parent="#style/AppTheme">
<item name="android:buttonStyle">#style/Widget.AppCompat.Button.Colored</item>
<item name="colorButtonNormal">#color/disabledButtonColor</item>
<item name="colorAccent">#color/enabledButtonColor</item>
<item name="android:disabledAlpha">1</item>
<!-- button text color-->
<item name="android:textColor">#drawable/colored_button_text_color</item>
</style>
And in your layout xml file:
<Button
android:id="#+id/buttonId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:theme="#style/BlueWhiteButtonTheme"
android:text="#string/buttonLabel"/>

Just set background for button in your layout
<Button
android:background="#android:color:white"
</Button>

How to change bottom line color of an edit text?

I have a dialog layout in that i have 3 edit texts, for the 1st edit text it shows the underline color as green(primary color), and other two edit text shows the color pink(color accent).
Why so? It should be same as other two edit texts.
Tried to change this with :
name.getBackground().mutate().setColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_ATOP);
name.getBackground().setColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_ATOP);
also by the SO solutions. But nothing helped.
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
....
<item name="android:editTextStyle">#style/EditTextStyle</item>
</style>
<style name="EditTextStyle" parent="Widget.AppCompat.EditText">
<item name="colorControlNormal">#color/border_gray</item>
<item name="colorControlActivated">#color/border_gray</item>
<item name="colorControlHighlight">#color/border_gray</item>
</style>
layout :
<?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="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<LinearLayout android:layout_height="50dp"
android:layout_width="match_parent"
android:background="#color/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Schedule"
android:textColor="#android:color/white"
android:textAppearance="#android:style/TextAppearance.Medium"
android:layout_gravity="center"
android:layout_marginLeft="20dp" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="20dp">
<EditText
android:id="#+id/edt_name"
android:layout_width="match_parent"
android:layout_height="45dp"
android:textColor="#000000"
android:textSize="14sp"
android:inputType="textCapSentences"
android:hint="Name"
android:cursorVisible="false"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp" />
<EditText
android:id="#+id/edt_dateTime"
android:layout_width="match_parent"
android:layout_height="45dp"
android:textColor="#000000"
android:textSize="14sp"
android:cursorVisible="false"
android:inputType="textCapSentences"
android:hint="Date and Time"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/edt_name"
android:layout_alignStart="#+id/edt_name"
android:layout_below="#+id/edt_name"
android:layout_alignRight="#+id/edt_name"
android:layout_alignEnd="#+id/edt_name"
android:layout_marginTop="05dp" />
<EditText
android:id="#+id/edt_budget"
android:layout_width="match_parent"
android:layout_height="45dp"
android:textColor="#000000"
android:textSize="14sp"
android:cursorVisible="false"
android:hint="Budget"
android:layout_below="#+id/edt_dateTime"
android:layout_alignLeft="#+id/edt_dateTime"
android:layout_alignStart="#+id/edt_dateTime"
android:layout_alignRight="#+id/edt_dateTime"
android:layout_alignEnd="#+id/edt_dateTime"
android:layout_marginTop="05dp"
android:inputType="number" />
</RelativeLayout>
</LinearLayout>
This is what i got after implementing drawable.
Thank you..

It simply consists of overriding the value for colorControlActivated, colorControlHighlight and colorControlNormal in your app theme definition
<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">#color/accent</item>
<item name="colorControlHighlight">#color/accent</item>
</style>
or by java
editText.getBackground().mutate().setColorFilter(getResources().getColor(R.color.your_color), PorterDuff.Mode.SRC_ATOP);

by changing your "colorAccent" color you will change color or edittext bottom line and text input layout as well.

Create textfield_bg_drawable.xml in drawable folder. and set it as background resource in EditText.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="2dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<selector>
<item
android:state_enabled="true"
android:state_focused="true">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/focused_line_color" />
</shape>
</item>
<item android:state_enabled="true">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/normal_line_color" />
</shape>
</item>
</selector>
</item>
</layer-list>

Try with this following code properly working on my side
Drawable drawable = editText.getBackground(); // get current EditText drawable
drawable.setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP); // change the drawable color
if (Build.VERSION.SDK_INT > 16) {
editText.setBackground(drawable); // set the new drawable to EditText
} else {
editText.setBackgroundDrawable(drawable); // use setBackgroundDrawable because setBackground required API 16
}
Where editText is the id of your EditText

I think it is because Your 1st editText focusing, when your alert layout appear.
add this line in your editText
android:focusable="true"

You need to disable focus from your first edittext when the activity is opened, so set
android:requestFocus= "false"
in your xml file. Or try the following
edittext.clearFocus();
in your java file.
It will not pick your primary color then.
Hope it works!

What is the correct way to create full width forms in Android

I'm having trouble figuring out how one goes about creating a full width form in the style of a normal compose window, say for an email or forum topic. The screenshot below from material design guidelines should give an idea of what I'm trying to achieve. If you need anymore details about the layout let me know, but its basically as of this moment, just two EditText views in a LinearLayout.
[Edit]
I should clarify that I do understand how layouts works. I can get full width EditText fields, but the actual look of the example is quite different. I am not sure if this is a custom styling for the EditText or if the EditText are wrapped in a specific layout to make them look as if they are in a table or list.
[Edit with My Solution]
drawable/full_width_edit_text
<?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="#android:color/transparent" />
</shape>
</item>
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#FFE0E0E0" />
</shape>
</item>
</layer-list>
values/styles
<resources>
<style name="EditTextLightFullWidth" parent="AppTheme">
<item name="android:textColorHint">#FF989898</item>
<item name="android:textSize">16sp</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
<item name="android:paddingTop">20dp</item>
<item name="android:paddingBottom">20dp</item>
<item name="android:background">#drawable/full_width_edit_text_bg</item>
</style>
<style name="EditTextLightFullWidth.NoBorder" parent="EditTextLightFullWidth">
<item name="android:background">#null</item>
</style>
</resources>
layout/compose_activity
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<EditText
android:id="#+id/titleText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Title"
android:theme="#style/EditTextLightFullWidth"
style="#style/EditTextLightFullWidth"
/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<EditText
android:id="#+id/bodyText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textMultiLine"
android:gravity="top|left"
android:hint="Body"
android:theme="#style/EditTextLightFullWidth.NoBorder"
style="#style/EditTextLightFullWidth.NoBorder"
/>
</ScrollView>
</LinearLayout>

This is actually a custom styling for EditText. They simply set the EditText background to transparent or null.
How to change style of a default EditText
android : how to change the style of edit text?

Add a width attribute in your layout.xml that has the value "match_parent" or "fill_parent" for each of your editText items and they should expand as wide as their parent container. As long as your parent also fills the width of the screen it should work.
Eg
<LinearLayout>
<!-- This will make your parent container fill the screen-->
android:layout_width="fill_parent"
android:layout_height="fill_parent"
<EditText
android:id="#+id/edit_message"
android:layout_height="40dp"
<!--Here is where we stretch editText item as wide as parent -->
android:layout_width="match_parent">
</LinearLayout>

Add bottom border line to the edit text widget

I want to add a bottom border line to the edit text widget like in a material design, but i cant find way to do it.
Thanks for helpers
EDIT:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffff" />
<stroke android:width="1dip" android:color="#000000" />
</shape>

Get a 9patch image This site might help you produce them and apply it as the background resource for your edit text
android:background="#drawable/9patchname"
Alternatively you can fake it with a separate view below the edit text
<style name="divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">#color/grey</item>
</style>
<View style="#style/divider" />

android:id="#+id/edt_password"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:singleLine="true"
android:background="#drawable/input_text_bg"
android:gravity="bottom"
android:hint="#string/hint_password"
android:inputType="textPassword"
android:paddingBottom="3dp"
android:paddingLeft="5dp" />