Develop Reference

Handles of EditText are underlined

I encountered a problem recently, which was to change the default underline bar of an edittext from a default blackish color to white.
I used this solution, which seemed to me the best practices by changing the style of the EditText :
EditText
<android.support.v7.widget.AppCompatEditText
android:id="#+id/nom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/Activity_Main_EditText_Nom"
android:imeOptions="actionNext"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:textColor="#android:color/white"
android:textColorHint="#color/activityBackground"
android:theme="#style/EditTextStyle"
android:visibility="gone"
/>
style.xml
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDisablePreview">true</item>
<item name="android:windowBackground">#color/activityBackground</item>
<item name="windowActionBar">false</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:windowNoTitle">true</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="EditTextStyle" parent="Widget.AppCompat.EditText">
<item name="colorControlNormal">#android:color/white</item>
<item name="colorControlActivated">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
It worked ! But it also added to the handles of the EditText an underline bar...
Any ideas ?
Answer
By discussing with #rafsanahmad007, we finally got to a final solution.
style.xml
<resources>
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDisablePreview">true</item>
<item name="android:windowBackground">#color/activityBackground</item>
<item name="windowActionBar">false</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:windowNoTitle">true</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="MyTheme.EditText" parent="MyTheme">
<item name="colorControlNormal">#android:color/white</item>
<item name="colorControlActivated">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
</resources>
Apply MyTheme to application, as usual. When you want to tweak an EditText just add to it :
EditText
<EditText
...
android:theme="#style/MyTheme.EditText"
...
/>

Problem is with your style themes.. parent
use below code:
<android.support.v7.widget.AppCompatEditText
android:theme="#style/MyStyle.EditText"/>
Now in your styles.xml
<style name="MyStyle.EditText">
<item name="editTextStyle">#style/MyEditTextStyle</item>
</style>
<style name="MyEditTextStyle" parent="Widget.AppCompat.EditText">
<item name="colorControlNormal">#android:color/white</item>
<item name="colorControlActivated">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
try not to use the theme parent directly
EDIT
add the color property in base theme also
<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#android:color/white</item>
<item name="colorControlActivated">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
make sure you select the theme in your activity in manifest...

Use this doc.I think this URL will helpfull for your problem.
http://www.materialdoc.com/edit-text/

Can't inherit button color on style

I am trying to define button properties on style.
My code is
<style name="button">
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:textAllCaps">false</item>
<item name="colorButtonNormal">#f37022</item>
<item name="android:textColor">#ffffff</item>
</style>
And using as
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Prepaid Package"
style="#style/button"/>
But the color of the button's normal state is not changing.
This button style is only for some buttons. Not for all butons.
What to do now?

edit after question clarification
Save you style.xml in res/values/
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="custom_button" parent="#android:style/Widget.Button">
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:textAllCaps">false</item>
<item name="colorButtonNormal">#f37022</item>
<item name="android:textColor">#ffffff</item>
</style>
Apply it like so:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Prepaid Package"
style="#style/custom_button"/>
first answer
You need to inherit the parent style.
<style name="Button" parent="#android:style/Widget.Button">
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:textAllCaps">false</item>
<item name="colorButtonNormal">#f37022</item>
<item name="android:textColor">#ffffff</item>
</style>
That way all your Button's that are not styled will have your custom style. i.e. no need to put in the style value.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Prepaid Package"/>

How do I fix my navigation bar which appears to be shifted in nexus devices?

I have a navigation bar at the top of my app. It look fine if galaxy/htc devices as follows:
However, in nexus devices it seems to shift a little as follows, not sure why:
Here is my code for the same : (actionbar.xml) :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:foo="http://schemas.android.com/apk/res/com.justin.abc"
android:id="#+id/title_information_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#27272b"
android:fillViewport="true" >
<com.justin.abc.utils.FontTextView
android:id="#+id/actionbar_title"
android:layout_width="wrap_content"
android:layout_height="#dimen/actionbar_title_height"
android:layout_marginTop="#dimen/actionbar_title_topmargin"
android:layout_marginLeft="#dimen/common_left_padding"
android:text="#string/title_about"
foo:customFont="proxima-nova-regular-Regular.ttf"
android:textColor="#color/white"
android:textSize="#dimen/actionbar_title" />
<Button
android:id="#+id/button_done"
android:layout_width="wrap_content"
android:layout_height="#dimen/done_button_height"
android:layout_marginTop="#dimen/done_button_topmargin"
android:layout_alignParentRight="true"
android:layout_marginLeft="#dimen/done_button_leftmargin"
android:layout_marginRight="#dimen/done_button_rightmargin"
android:background="#drawable/done_cancel_button"
android:text="#string/menu_done"
android:textColor="#drawable/done_button_text"
android:textSize="#dimen/button_text" />
<View
android:layout_width="wrap_content"
android:layout_height="2dp"
android:layout_marginTop="#dimen/actionbar_view_margintop"
android:background="#color/black"
android:visibility="visible" />
</RelativeLayout>
Any clues how I can fix the same so it works well in all devices? Thanks!
This is the associated theme:
<style name="AppTheme" parent="#style/Theme.Sherlock"></style>
<style name="AppTheme.NoActionBar" parent="#style/Theme.Sherlock.NoActionBar"></style>
<style name="AppBaseTheme.NoActionBar" parent="AppTheme.NoActionBar"></style>
<!-- Although this is doing exactly what AppBaseTheme is doing,
it fixes the initialization display of the icon being truncated -->
<style name="ABTheme" parent="AppTheme">
<item name="homeAsUpIndicator">#null</item>
<item name="selectableItemBackground">#drawable/btn_selector_home_icon</item>
</style>
<style name="AppBaseTheme" parent="AppTheme">
<item name="homeAsUpIndicator">#null</item>
<item name="selectableItemBackground">#drawable/btn_selector_home_icon</item>
<item name="android:listViewStyle">#style/ListViewAppTheme</item>
<item name="android:listViewWhiteStyle">#style/ListViewAppTheme.White</item>
<item name="android:spinnerItemStyle">#style/SpinnerItemAppTheme</item>
</style>
<style name="ListViewAppTheme" parent="android:Widget.ListView">
<item name="android:listSelector">#drawable/list_selector_holo_light</item>
</style>
<style name="ListViewAppTheme.White" parent="android:Widget.ListView.White">
<item name="android:listSelector">#drawable/list_selector_holo_light</item>
</style>
<style name="SpinnerItemAppTheme" parent="android:TextAppearance.Widget.TextView.SpinnerItem">
<item name="android:textColor">#000000</item>
</style>
<style name="abc.TextView" parent="android:Widget.Holo.TextView"></style>
<style name="T1UserContactCountry">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#cccccc</item>
<item name="android:textSize">#dimen/title</item>
<item name="android:paddingLeft">#dimen/common_left_padding</item>
<item name="android:layout_gravity">left</item>
</style>
<style name="T1UserContactPhone">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#color/abs__holo_blue_light</item>
<item name="android:textSize">#dimen/title</item>
<item name="android:onClick">onPhoneNumberClicked</item>
<item name="android:paddingRight">#dimen/common_right_padding</item>
<item name="android:layout_gravity">right</item>
<item name="android:clickable">true</item>
</style>
<style name="T1TableRowSeparator">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingTop">10dp</item>
<item name="android:paddingBottom">10dp</item>
</style>
<style name="T1ViewSeparator">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">2dp</item>
<item name="android:background">#color/header_grey</item>
<item name="android:layout_span">2</item>
</style>
<style name="abc.TextView.ListsTextView">
<item name="android:ellipsize">end</item>
<item name="android:gravity">right</item>
<item name="android:singleLine">true</item>
<item name="android:background">#android:color/transparent</item>
</style>
<style name="abc.TextView.ListsTextView.Header">
<item name="android:paddingTop">2dp</item>
<item name="android:textSize">15sp</item>
<item name="android:background">#android:color/transparent</item>
</style>
<style name="CustomTheme">
<item name="android:windowBackground">#color/custom_theme_color</item>
<item name="android:colorBackground">#color/custom_theme_color</item>
</style>
<style name="abc.TextView.ListsTextView.Value">
<item name="android:textSize">15sp</item>
<item name="android:background">#android:color/transparent</item>
</style>
<style name="abc.TextView.NavigationItem">
<item name="android:clickable">true</item>
<item name="android:padding">3dp</item>
<item name="android:textSize">20sp</item>
<item name="android:background">#color/black</item>
</style>
<style name="search_autosuggest_header" parent="android:Widget.Holo.TextView">
<item name="android:paddingBottom">5dp</item>
<item name="android:paddingLeft">3dp</item>
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/search_autosuggest_header_text</item>
<item name="android:background">#drawable/background_search_auto_suggest_header</item>
<item name="android:textStyle">bold</item>
</style>
<style name="abc.TextView.Preferences">
<item name="android:padding">8dp</item>
</style>
<style name="abc.TextView.Preferences.Title">
<item name="android:background">#color/black</item>
<item name="android:textColor">#color/background_preferences_item</item>
</style>
<style name="abc.TextView.Preferences.Item">
<item name="android:background">#color/background_preferences_item</item>
<item name="android:textColor">#color/background_preferences_title</item>
</style>
<style name="abc.TextView.Preferences.Item.clickable">
<item name="android:background">#drawable/background_preferences_layout_selector</item>
<item name="android:textColor">#color/background_preferences_title</item>
</style>
<style name="abc.Button.Toggle" parent="android:Widget.Holo.Button.Toggle">
<item name="android:button">#null</item>
<item name="android:textOff"></item>
<item name="android:textOn"></item>
<item name="android:background">#drawable/toggle_selector_abc</item>
</style>
<style name="LoginEditText" parent="#android:style/Widget.EditText">
<item name="#android:textColor">#color/textbox_hint</item>
<item name="#android:textSize">16sp</item>
<item name="#android:maxLines">1</item>
<item name="#android:fontFamily">Roboto-Regular</item>
</style>
<style name="MenuDialogAnimation">
<item name="android:windowEnterAnimation">#anim/grow_from_topright_to_bottomleft</item>
<item name="android:windowExitAnimation">#anim/shrink_from_bottomleft_to_topright</item>
</style>
<style name="MenuDialogAnimationLeft">
<item name="android:windowEnterAnimation">#anim/grow_from_topleft_to_bottomright</item>
<item name="android:windowExitAnimation">#anim/shrink_from_bottomright_to_topleft</item>
</style>
<style name="BriefcaseMenuDialogAnimation">
<item name="android:windowEnterAnimation">#android:anim/fade_in</item>
<item name="android:windowExitAnimation">#android:anim/fade_out</item>
</style>
<style name="ButtonText">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#ffffff</item>
<item name="android:gravity">center</item>
<item name="android:layout_margin">3dp</item>
<item name="android:textSize">30dp</item>
<item name="android:shadowColor">#000000</item>
<item name="android:shadowDx">1</item>
<item name="android:shadowDy">1</item>
<item name="android:shadowRadius">2</item>
<item name="android:paddingLeft">15dp</item>
<item name="android:paddingRight">15dp</item>
</style>
<style name="Divider">
<item name="android:divider">#drawable/divider</item>
<item name="android:dividerHeight">1px</item>
</style>
<style name="related_buttons" parent="android:Widget.Holo.TextView">
<item name="android:clickable">true</item>
<item name="android:gravity">center_vertical|left</item>
<item name="android:layout_marginBottom">3dp</item>
<item name="android:layout_marginTop">3dp</item>
<item name="android:paddingLeft">12dp</item>
<item name="android:paddingRight">12dp</item>
<item name="android:visibility">gone</item>
<item name="android:drawableRight">#drawable/arrow_chevron_selector</item>
</style>
In my manifest I am referencing it as follows:
<application
android:name=".abcApplication"
android:allowBackup="true"
android:icon="#drawable/abc_launcher"
android:label="#string/app_long_name"
android:theme="#style/ABTheme" android:debuggable="false">
Here's my java code:
public void manageActionBar() {
final ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(R.layout.actionbar_no_button);
getSupportActionBar().setDisplayShowHomeEnabled(false);
final TextView titleView = (TextView) actionBar.getCustomView().findViewById(R.id.actionbar_title);
titleView.setText(R.string.personal);
}

The reason this is not working is because this is not the way you customize the Action Bar, I suggest reading about how to customize the Action Bar here.
What you want to do basically is define a theme for your application, as you stated in the comments you want to change the look based on your project requirements.
Here is the example from the article I've linked above:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">#style/TabTextStyle</item>
<item name="android:actionMenuTextColor">#color/actionbar_text</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="actionBarTabTextStyle">#style/TabTextStyle</item>
<item name="actionMenuTextColor">#color/actionbar_text</item>
</style>
<!-- general styles for the action bar -->
<style name="MyActionBar"
parent="#style/Widget.AppCompat.ActionBar">
<item name="android:titleTextStyle">#style/TitleTextStyle</item>
<item name="android:background">#drawable/actionbar_background</item>
<item name="android:backgroundStacked">#drawable/actionbar_background</item>
<item name="android:backgroundSplit">#drawable/actionbar_background</item>
<!-- Support library compatibility -->
<item name="titleTextStyle">#style/TitleTextStyle</item>
<item name="background">#drawable/actionbar_background</item>
<item name="backgroundStacked">#drawable/actionbar_background</item>
<item name="backgroundSplit">#drawable/actionbar_background</item>
</style>
<!-- action bar title text -->
<style name="TitleTextStyle"
parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/actionbar_text</item>
</style>
<!-- action bar tab text -->
<style name="TabTextStyle"
parent="#style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">#color/actionbar_text</item>
</style>
</resources>
After doing that, you can customize the look of your Action Bar to look just the way you want it to (Make sure you set the colors the right way).

I'm having some problem with the ActionBar as well. And the problems only appears on Nexus 7 (I don't have other Nexus). I placed my custom view inside the action bar, to completely cover it up (because it can't be configure to the way I want).
LayoutParams layout = new LayoutParams( LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT );
LayoutInflater inflator = (LayoutInflater) getSystemService( Context.LAYOUT_INFLATER_SERVICE );
View v = inflator.inflate( R.layout.my_actionbar_layout, null );
getActionBar().setDisplayShowCustomEnabled( true );
getActionBar().setDisplayShowHomeEnabled( false );
getActionBar().setCustomView( v, layout );
However, there is a gap on the left size and the view goes too far over the right edge of screen.
The solution, however, is very simple:
getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
Hope this help you (and others).
Credits:
I found the answer from this page:
http://answer.techwikihow.com/1352928/actionbar-customview-extra-padding-cannot-removed.html

How can I use a style within another style for a button?

Does anyone have an idea how to add the style "MarginButton" to the style "bluebutton" or "OrangeButton"? The reason I'm doing this is to prevent double code, is this the correct way to do or are there better ways to solve this?
<style name="OrangeButton" parent="android:Widget.Button">
<item name="android:textColor">#000</item>
<item name="android:background">#drawable/roundedbutton_orange</item>
</style>
<style name="BlueButton" parent="android:Widget.Button">
<item name="android:textColor">#FFF</item>
<item name="android:background">#drawable/roundedbutton_blue</item>
</style>
<style name="MarginButton" parent="android:Widget.Button">
<item name="android:layout_marginTop">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:layout_marginLeft">3dp</item>
<item name="android:layout_marginRight">3dp</item>
</style>
Thnx,
Joris

Update
Set your orange button parent to #style/MarginButton. I've just tried this and it's working,
<style name="orangeButton" parent="#style/MarginButton">
<item name="android:textColor">#000</item>
<item name="android:background">#drawable/roundedbutton_orange</item>
</style>
<style name="MarginButton" parent="#android:style/Widget.Button">
<item name="android:layout_marginTop">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:layout_marginLeft">3dp</item>
<item name="android:layout_marginRight">3dp</item>
</style>

I think that you can obtain it by doing:
Buttons.xml ->
<style name="OrangeButton" parent="MarginButton">
<item name="android:textColor">#000</item>
<item name="android:background">#drawable/roundedbutton_orange</item>
</style>
<style name="BlueButton" parent="MarginButton">
<item name="android:textColor">#FFF</item>
<item name="android:background">#drawable/roundedbutton_blue</item>
</style>
MarginButton.xml ->
<style name="MarginButton" parent="android:Widget.Button">
<item name="android:layout_marginTop">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:layout_marginLeft">3dp</item>
<item name="android:layout_marginRight">3dp</item>
</style>

If you guys want to use borderless button like me or use two style. Try it.
View ->
<com.google.android.material.button.MaterialButton
android:id="#+id/btnCreateNewAcc"
android:text="#string/or_create_a_new_account"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4"
style="#style/textButtonStyle"
/>
Style ->
<style name="textButtonStyle" parent="android:Widget.Material.Button.Borderless">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:insetTop">0dp</item>
<item name="android:insetBottom">0dp</item>
<item name="android:minWidth">0dp</item>
<item name="android:minHeight">0dp</item>
<item name="android:padding">0dp</item>
<item name="android:fontFamily">#font/inter</item>
<item name="android:textAllCaps">false</item>
<item name="android:textColor">#color/grey</item>
<item name="android:textFontWeight">400</item>
<item name="android:textSize">15sp</item>
<item name="android:background">#android:color/transparent</item>
</style>

You can do it changing the parent attribute. For example:
<style name="BlueButton" parent="MarginButton">
<item name="android:textColor">#FFF</item>
<item name="android:background">#drawable/roundedbutton_blue</item>
</style>

Styled EditText inside a compound view doesn't gain focus

I have made a very simple compound view:
<LinearLayout>
<ImageView />
<EditText />
</LinearLayout>
Everything worked fine until I have decided to style the Edit text throught my project:theme:
<style name="Theme.MyProject" parent="Theme.Sherlock.Light.DarkActionBar">
<item name="actionBarStyle">#style/Widget.Theme.MyProject.ActionBar</item>
<item name="android:actionBarStyle" tools:ignore="NewApi">#style/Widget.Playout.ActionBar</item>
<item name="android:buttonStyle">#style/Theme.Theme.MyProject.Button</item>
<item name="android:editTextStyle">#style/Theme.Theme.MyProject.EditText</item>
</style>
and
<style name="Theme.Playout.EditText">
<item name="android:textSize">15sp</item>
<item name="android:textColor">#color/field_text</item>
<item name="android:background">#color/field</item>
<item name="android:minHeight">50dp</item>
<item name="android:padding">5dp</item>
<item name="android:gravity">center</item>
<item name="android:fontFamily">sans-serif-light</item>
</style>
Now my EditText is beautiful but is not gaining focus so text cannot being entered (so useful). It works fine adding values directly to the Compound view from layout but I whould like to do it from a confortable theme.
Thanks in advance!

Try this:
<style name="Theme.Playout.EditText">
<item name="android:textSize">15sp</item>
<item name="android:textColor">#color/field_text</item>
<item name="android:background">#color/field</item>
<item name="android:minHeight">50dp</item>
<item name="android:padding">5dp</item>
<item name="android:gravity">center</item>
<item name="android:fontFamily">sans-serif-light</item>
<!-- I added these attributes: -->
<item name="android:focusable">true</item>
<item name="android:focusableInTouchMode">true</item>
<item name="android:clickable">true</item>
</style>