Android - margins specified in custom style not taking effect - android

I wish to have the default margin for EditText's be 10dp. Therefore, in my styles.xml file I set up the following:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="MyTheme" parent="android:style/Theme.NoTitleBar">
<item name="android:editTextStyle">#style/edit_text_default</item>
</style>
<style name="edit_text_default" parent="android:style/Widget.EditText">
<item name="android:layout_margin">10dp</item>
</style>
</resources>
Then in AndroidManifest.xml, I set the applications theme to the one I defined:
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/MyTheme" >
...
The "No Title Bar" aspect of the theme is working. However, the default margin for EditText's is not, it is still filling the parent. Here is my table view:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF" >
<TableRow>
<EditText android:hint="#string/last_name" />
</TableRow>
<TableRow>
<EditText android:hint="#string/first_name" />
</TableRow>
</TableLayout>

Short Answer: If you are specifying layout_margin in a custom style, this style must be explicitly applied to each individual view that you wish to have the specified margin (as seen in the code sample below). Including this style in a theme and applying it to your application or an activity will not work.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF" >
<TableRow>
<EditText android:hint="#string/last_name" style="#style/edit_text_default" />
</TableRow>
<TableRow>
<EditText android:hint="#string/first_name" style="#style/edit_text_default" />
</TableRow>
</TableLayout>
Explanation: Attributes which begin with layout_ are LayoutParams, or one of its subclasses (e.g. MarginLayoutParams). LayoutParams are used by views to tell their parent ViewGroup how they want to be laid out. Each and every ViewGroup class implements a nested class that extends ViewGroup.LayoutParams. Therefore, LayoutParams are specific to the ViewGroup's type. What this means is that while a TableLayout and a LinearLayout may both have layout_margin as one of it's LayoutParams, they are considered to be completely different attributes.
So layout_margin is not just general attribute that can be applied anywhere. It must be applied within the context of a ViewGroup that specifically defines it as a valid argument. A view must be aware of the type of its parent ViewGroup when LayoutParams are applied.
Specifying layout_margin in a style, including that style in a theme, and attempting to apply that theme to an application/activity will result in the layout attributes being dropped, because no ViewGroup parent has been specified yet and so the arguments are invalid. However, applying the style to an EditText view that has been defined with a TableLayout works, because the parent ViewGroup (the TableLayout) is known.
Sources:
Android documentation on Layout Parameters.
Answer given to this question by Android framework engineer and StackOverflow user adamp.
Also, answer given to this question by StackOverflow user inazaruk.

You arent using the correct theme name in your Manifest. Try changing it to:
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/MyTheme" >

Just in case it is useful for others, I'd like bring the answer by Oliv to another SO question here.
I was trying to add margins to all buttons and found layout_margin does not work.
The theme:
<style name="FooThemeStyle" parent="Base.Theme.AppCompat">
<item name="android:buttonStyle">#style/FooButton</item>
<item name="buttonStyle">#style/FooButton</item>
</style>
The button style:
<style name="FooButton" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_background</item>
</style>
Here is button_background.xml where the answer by Oliv to another SO question is used to set the margin to 2dp: :
<?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 xmlns:android="http://schemas.android.com/apk/res/android">
...
</selector>
</item>
</layer-list>

Related

Button is not filling parent container height [duplicate]

Currently, I have the following bottom log in button.
When button is not being pressed
When button is being pressed
The XML looks like this
<LinearLayout
android:background="?attr/welcomeBottomNavBarBackground"
android:orientation="horizontal"
android:id="#+id/sign_in_bottom_nav_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
style="?android:attr/buttonBarButtonStyle"
android:id="#+id/sign_in_button"
android:layout_width="0dp"
android:width="0dp"
android:layout_weight="1.0"
android:layout_height="48dp"
android:gravity="center"
android:layout_gravity="center"
android:enabled="true"
android:textAllCaps="true"
android:text="#string/log_in" />
</LinearLayout>
I would like to remove the padding (Or should I call it margin? Please refer to my bottom most p/s section) around button when it is being pressed.
I look at How to remove padding around buttons in Android?
I had tried
<Button
...
...
android:minHeight="0dp"
android:minWidth="0dp" />
It doesn't work and has no effect.
I further try
<Button
...
...
android:background="#null"
android:minHeight="0dp"
android:minWidth="0dp" />
No more padding when pressed. However, the material designed pressed visual effect will gone too.
May I know what is the best way to remove button padding during pressed, yet retain the material designed pressed visual effect?
P/S
I don't really know whether I should call it padding or margin. What I wish to achieve is that, when we press on the bottom region, press visual effect change should be covered entire 100% bottom bar region (#+id/sign_in_bottom_nav_bar), instead of current 95% bottom bar region.
A standard button is not supposed to be used at full width which is why you experience this.
Background
If you have a look at the Material Design - Button Style you will see that a button has a 48dp height click area, but will be displayed as 36dp of height for...some reason.
This is the background outline you see, which will not cover the whole area of the button itself.
It has rounded corners and some padding and is supposed to be clickable by itself, wrap its content, and not span the whole width at the bottom of your screen.
Solution
As mentioned above, what you want is a different background. Not a standard button, but a background for a selectable item with this nice ripple effect.
For this use case there is the ?selectableItemBackground theme attribute which you can use for your backgrounds (especially in lists).
It will add a platform standard ripple (or some color state list on < 21) and will use your current theme colors.
For your usecase you might just use the following:
<Button
android:id="#+id/sign_in_button"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:background="?attr/selectableItemBackground" />
<!-- /\ that's all -->
There is also no need to add layout weights if your view is the only one and spans the whole screen
If you have some different idea on what your background should look like you have to create a custom drawable yourself, and manage color and state there.
As simple, use the inset property like:
android:insetTop="0dp"
android:insetBottom="0dp"
android:insetRight="0dp"
android:insetLeft="0dp"
In styles.xml
<style name="MyButtonStyle" parent="Base.Widget.AppCompat.Button">
<item name="android:background">#drawable/selector</item>
<item name="android:textColor">#android:color/black</item>
</style>
In values/drawable:
my_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp" />
<!-- specify your desired color here -->
<solid android:color="#9e9b99" />
</shape>
selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/my_drawable"/>
<item android:state_pressed="true" android:drawable="#drawable/my_drawable"/>
<item android:drawable="#android:color/transparent"/>
</selector>
In values/drawable-v21:
my_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
android:tint="?attr/colorButtonNormal"
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
</shape>
selector.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:id="#android:id/mask"
android:drawable="#drawable/my_drawable" />
</ripple>
In layout:
<Button
android:id="#+id/button"
style="#style/MyButtonStyle"
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="Test"/>
Result on API 19:
Result on API 21:
Source code
I think the best solution to solve that is create your own Ripple Effect. The padding when you press the button is respecting the default Ripple Effect of the component.
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
</ripple>
Or you can try change the style of your button to style="?android:textAppearanceSmall"
Remember: This effect is only shown on Android Lollipop (API 21) or higher.
I have been through what you are going through. Long story short, you just cannot do it cleanly with a <Button> tag alone, while ensuring backwards compatibility.
The simplest and the most widely practiced method is to use a <RelativeLayout> underlay, around a <Button>.
Button Code:
<RelativeLayout
android:id="#+id/myButtonUnderlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:visibility="visible">
<Button
android:id="#+id/myButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackgroundBorderless"
android:text="I am as cute as a Button"/>
</RelativeLayout>
Wherever you need to use a button, you use this complete code.
Here is the breakdown:
OnClick events will be hooked to myButton.
Control dimensions of your button, by changing attributes of myButtonUnderlay.
In myButton, android:background="?attr/selectableItemBackgroundBorderless". This will make it a transparent button with just the text, and backwards compatible ripples.
In myButtonUnderlay, you will do all the other background applications, like setting the color of the button, margins, paddings, borders, gradients, and shadows etc.
If manipulation of the button's visibility (programmatic or not) is wish, you do it on myButtonUnderlay.
Note: To ensure backwards compatibility, make sure that you use
android:background="?attr/selectableItemBackgroundBorderless", and NOT
android:background="?android:attr/selectableItemBackgroundBorderless"
As #David Medenjak answer you can read the Google Material design Button-style to its developer site. Use button style as #David Medenjak explained in his answer. You can also do by the following way also
It is not a padding or margin but it is actually background effect of button.
If you want to remove that then you can do as following.
Option 1:
Step 1: Put the below code in styles.xml
<style name="myColoredButton">
<item name="android:textColor">#FF3E96</item>
<item name="android:padding">0dp</item>
<item name="android:minWidth">88dp</item>
<item name="android:minHeight">36dp</item>
<item name="android:elevation">1dp</item>
<item name="android:translationZ">1dp</item>
<item name="android:background">#FF0000</item>
</style>
Step 2:Create a new XML file under drawables folder and add the following code: I named my XML file as button_prime.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorPrimary">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1dp" />
<solid android:color="#8B8386" />
</shape>
</item>
</ripple>
Step 3: Use the style and drawable in your Button as follows.
<Button
style="#style/myColoredButton"
android:layout_width="250dp"
android:layout_height="50dp"
android:text="Cancel"
android:gravity="center"
android:background="#drawable/button_prime"
android:colorButtonNormal="#3578A9" />
Option 2:
With the Support Library v7, all the styles are actually already defined and ready to use, for the standard buttons, all of these styles are available.So you can set your button style like this
<Button
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="BUTTON"
android:gravity="center"
android:minHeight="0dp"
android:minWidth="0dp"
android:background="#color/colorAccent"/>
For more detail of Button style please check this answer
I think you will check this answer also. I hope you will get your solution.
The padding and margin may be a result of the original resources used in the button.
So you could try to change the resources used, using a selector:
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/btn_action_hover" />
<item android:state_selected="true" android:drawable="#drawable/btn_action_hover" />
<item android:state_focused="true" android:drawable="#drawable/btn_action_hover" />
<item android:drawable="#drawable/btn_action_normal" />
</selector>
That would change the default images/shapes for your buttons, so you could try using drawables and set every item to a drawable. The drawable being either a bitmap, or a .xml file(style file) defining the look of the button in its current state. I assume there still are some native styles included even though you have set the button-style yourself. This may be because you aren't using a custom theme. So the issue may also be solved by defing
theme="#style/myNewTheme"
where myNewTheme is your theme, and it should have any parents(parent="" should not be defined).
Take any given theme(designed by Google/Android, for an instance Theme.AppCompat.[name]), it does also come with a buttonStyle. This is a part of Theme.Holo.Light:
<!-- Button styles -->
<item name="buttonStyle">#style/Widget.Holo.Light.Button</item>
<item name="buttonStyleSmall">#style/Widget.Holo.Light.Button.Small</item>
<item name="buttonStyleInset">#style/Widget.Holo.Light.Button.Inset</item>
<item name="buttonStyleToggle">#style/Widget.Holo.Light.Button.Toggle</item>
<item name="switchStyle">#style/Widget.Holo.Light.CompoundButton.Switch</item>
<item name="mediaRouteButtonStyle">#style/Widget.Holo.Light.MediaRouteButton</item>
<item name="selectableItemBackground">#drawable/item_background_holo_light</item>
<item name="selectableItemBackgroundBorderless">?attr/selectableItemBackground</item>
<item name="borderlessButtonStyle">#style/Widget.Holo.Light.Button.Borderless</item>
<item name="homeAsUpIndicator">#drawable/ic_ab_back_holo_light</item>
As you see, this theme defines how your buttons will look/work in basic features. You can override parts of it, but you haven't overridden the important parts(being buttonStyle and similar). So if you create a new theme yourself and style it to your liking and set the theme(using theme="themename") and that theme does not inherit any theme, you should be able to style your buttons to your liking without having to worry about the default styles in the theme
Basically:
calling padding/margin="0dp" will not help. The default drawable defined by the theme has this in the button drawable, meaning you cannot change it. So you have to either change the button style, or change the theme completely. Make sure that theme does not have any parents, because many themes define the button style. You do not want the button style defined by the theme.
The best solution these days is just to use MaterialButton in place of Button.
Note: MaterialButton is visually different from Button and AppCompatButton. One of the main differences is that AppCompatButton has a 4dp inset on the left and right sides, whereas MaterialButton does not. To add an inset to match AppCompatButton, set android:insetLeft and android:insetRight on the button to 4dp, or change the spacing on the button’s parent layout.
When replacing buttons in your app with MaterialButton, you should inspect these changes for sizing and spacing differences.
Source: https://material.io/develop/android/components/material-button/
I'd suggest you taking a look at this just in case before all.
Then, if not working i'd suggest you to create your own style (like azizbekian suggest)using android xml drawables, and drawable states to differentiate pressed/notpressed.
I think using your own style may be the best answer as it will further give you more control on how your app is displaying, but using android default themes and styles also allows the user to have custom styles which is a good idea. However, you cannot test every custom style so you cannot check that your app will display correctly on ALL custom styles, and therefore may encounter problems with some.
Set the Button background as android:background="?selectableItemBackground"
<LinearLayout
android:background="?attr/welcomeBottomNavBarBackground"
android:orientation="horizontal"
android:id="#+id/sign_in_bottom_nav_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
style="?android:attr/buttonBarButtonStyle"
android:background="?selectableItemBackground"
android:id="#+id/sign_in_button"
android:layout_width="0dp"
android:width="0dp"
android:layout_weight="1.0"
android:layout_height="48dp"
android:gravity="center"
android:layout_gravity="center"
android:enabled="true"
android:textAllCaps="true"
android:text="#string/log_in" />
</LinearLayout>
After trying lots of solution, Finally I came to a conclusion that with tag alone we can't achieve this. to remove this unwanted space around button my solution is as below:
<RelativeLayout
android:id="#+id/myButtonUnderlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:visibility="visible">
<Button
android:id="#+id/save_button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="-5dp"
android:layout_marginBottom="-5dp"
android:layout_above="#+id/content_scrollview"
android:layout_gravity="bottom"
android:background="#drawable/ripple_theme"
android:enabled="true"
android:text="SetUp Store"
android:textColor="#fff"
android:textSize="18sp"
android:visibility="gone"
tools:visibility="visible"
style="#style/MediumFontTextView" />
</RelativeLayout>
1.add a drawable resource file named maybe button_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#ff0000"/>
<stroke android:width="5dp" android:color="#00ff00"/>
</shape>
</item>
<item>
<shape>
<solid android:color="#00ff00"/>
</shape>
</item>
</selector>
2.Use the button_background.xml as the button background, done!
github
blog
I don't really know whether I should call it padding or margin.
The button is enacting surface elevation for providing visual feedback in response to touch. It is one of two feedbacks used for surface reaction; the first one being the ripple effect. For example, a raised button has resting state elevation of 2dp and pressed state elevation of 8dp (See raised button under Shadows). The button meets the finger as it touches the surface.
May I know what is the best way to remove button padding during pressed, yet retain the material designed pressed visual effect?
Having answered the first part, I do not believe you are having all of the material design if you wish to remove the surface elevation effect.
Anyways, here is how to remove surface elevation visual feedback:
Add animator file button_raise.xml to animator directory under res directory having the following code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:state_pressed="true">
<objectAnimator
android:duration="#android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType" />
</item>
</selector>
Refer newly created animator in the button using stateListAnimator property:
<Button
...
android:stateListAnimator="#animator/button_raise"
... />
Hope this helps.

ConstraintLayout constraints attribute in style

How to use constraint attributes in style?
When I'm trying to use it as any other attributes with custom namespace it's has no effect on my view.
<style name="Header.Center" parent="Header">
<item name="layout_constraintBottom_toBottomOf">parent</item>
</style>
Adding namespace app: is not helping.
First of all, make sure that the View that you're applying the style on is a direct child of the ConstraintLayout. Otherwise, the constraints will not be taken into account when positioning the View.
I have tried it and the way you tried does in fact work. I have added the following style to the styles.xml:
<style name="CustomStyle">
<item name="layout_constraintBottom_toBottomOf">parent</item>
<item name="layout_constraintEnd_toEndOf">parent</item>
</style>
Created a basic layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/CustomStyle"/>
</android.support.constraint.ConstraintLayout>
And it does indeed position the TextView at the bottom right corner of the parent.
maybe your view's attribute is "match_parent",but it is wrong.
It should be "wrap_content".
<TextView
android:text="Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/CustomStyle"/>

How to disable padding on TextInputLayout?

There appears to be left padding automatically added when using a TextInputLayout to wrap an EditText as you can see in the screenshot below.
There is no padding added to the EditText in the layout XML, but when the view is rendered there appears to be left padding on the EditText. You can see this when comparing the TextView below the TextInputLayout.
How do I disable this left padding from being added?
Thank you!
You can just set the start and end padding on the inner EditText to 0dp.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="0dp"
android:paddingEnd="0dp" />
</com.google.android.material.textfield.TextInputLayout>
Here's a screenshot with Show Layout Bounds turned on so you can see that the hints go all the way to the edge of the view.
With the TextInputLayout included in the Material Components Library you can use a custom style to reduce the padding.
Just use something like:
<com.google.android.material.textfield.TextInputLayout
....
android:hint="Hint text"
style="#style/My.TextInputLayout.FilledBox.Padding" >
Then you can define a custom style for the EditText using the materialThemeOverlay attribute:
<style name="My.TextInputLayout.FilledBox.Padding" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="materialThemeOverlay">#style/MyThemeOverlayFilledPadding</item>
</style>
<style name="MyThemeOverlayFilledPadding">
<item name="editTextStyle">#style/MyTextInputEditText_filledBox_padding</item>
</style>
<style name="MyTextInputEditText_filledBox_padding" parent="#style/Widget.MaterialComponents.TextInputEditText.FilledBox">
<!-- left and right padding -->
<item name="android:paddingStart" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingEnd" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
<!-- top and bottom padding -->
<item name="android:paddingTop">28dp</item>
<item name="android:paddingBottom">12dp</item>
</style>
Here the final result:
Note: it requires at least the version 1.1.0 of the Material Components library.
Make the padding 0dp like this
<com.google.android.material.textfield.TextInputLayout
style="#style/UserTextLayout"
android:layout_height="50dp"
app:boxBackgroundMode="none">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/emailEditText1"
style="#style/UserEditText"
android:layout_width="match_parent"
android:hint="MATRIC NUMBER"
android:inputType="number"
android:maxLines="1"
android:padding="0dp"
android:text="20181766" />
</com.google.android.material.textfield.TextInputLayout>
Here is the result
I managed to remove that left space by making a copy of the original theme of the edittext background
res/drawable/my_edit_text_material.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_edit_text_inset_horizontal_material"
android:insetRight="#dimen/abc_edit_text_inset_horizontal_material"
android:insetTop="#dimen/abc_edit_text_inset_top_material"
android:insetBottom="#dimen/abc_edit_text_inset_bottom_material">
<selector>
<item android:state_enabled="false" android:drawable="#drawable/abc_textfield_default_mtrl_alpha"/>
<item android:state_pressed="false" android:state_focused="false" android:drawable="#drawable/abc_textfield_default_mtrl_alpha"/>
<item android:drawable="#drawable/abc_textfield_activated_mtrl_alpha"/>
</selector>
</inset>
res/drawable-v21/my_edit_text_material.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetTop="#dimen/abc_edit_text_inset_top_material"
android:insetBottom="#dimen/abc_edit_text_inset_bottom_material">
<selector>
<item android:state_enabled="false">
<nine-patch android:src="#drawable/abc_textfield_default_mtrl_alpha"
android:tint="?attr/colorControlNormal"
android:alpha="?android:attr/disabledAlpha"/>
</item>
<item android:state_pressed="false" android:state_focused="false">
<nine-patch android:src="#drawable/abc_textfield_default_mtrl_alpha"
android:tint="?attr/colorControlNormal"/>
</item>
<item>
<nine-patch android:src="#drawable/abc_textfield_activated_mtrl_alpha"
android:tint="?attr/colorControlActivated"/>
</item>
</selector>
</inset>
in the two files delete:
android:insetLeft="#dimen/abc_edit_text_inset_horizontal_material"
android:insetRight="#dimen/abc_edit_text_inset_horizontal_material"
Create a new style for your editText and add it as background
/res/values/styles.xml
<resources>
<!-- Other styles . -->
<style name="AppTheme.EditText" parent="Widget.AppCompat.EditText">
<item name="android:background">#drawable/my_edit_text_material</item>
</style>
</resources>
Add the style to your editText
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_lastname"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="0dp"
android:layout_marginStart="0dp"
android:textColorHint="#color/Cool_Gray_2_C"
app:layout_constraintEnd_toStartOf="#+id/profile_guideline_end"
app:layout_constraintStart_toStartOf="#+id/profile_guideline_start"
app:layout_constraintTop_toBottomOf="#+id/input_layout_firstname" >
<EditText
style="#style/AppTheme.EditText"
android:id="#+id/txfLastname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/last_name"
android:inputType="textPersonName"
android:textColor="#color/Cool_Gray_2_C"
android:textColorHint="#color/Cool_Gray_2_C"
android:textSize="17sp" />
</android.support.design.widget.TextInputLayout>
That is the way I found removing the left and right space.
I hope help, thanks
The horizontal space on the left and right of the EditText default drawable is controlled by the abc_edit_text_inset_horizontal_material dimension. You can confirm that by looking at the abc_edit_text_material.xml drawable file, which represents AppCompat's default EditText background. To remove the space completely you can just set the dimension to 0 by specifing the dimension with exact same name inside your own project's dimens.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen tools:override="true" name="abc_edit_text_inset_horizontal_material">0dp</dimen>
...
</resources>
However, there is a catch. AppCompat library will only use it's own abc_edit_text_material.xml background if the host OS doesn't support material design. So If you're running your app on Android 4, you'll see that side margins disappear after you add the dimension mentioned above. If, however, you launch your app on say Android 10, you'll see that margins are still there. That is because on newer Android versions, compat library will actually prefer background drawable specified inside the OS itself.
So you need to force all of your EditTexts to use abc_edit_text_material.xml background specified inside the AppCompat library. Luckily, you can do that just by adding one line to your syles.xml file:
styles.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="editTextBackground">#drawable/abc_edit_text_material</item>
...
</style>
...
</resources>
Any Theme.AppCompat.* will do as a parent theme and of course you have to use this theme as your app's theme in order to get any effect.
This solution uses private AppCompat identifiers (Android Studio will complain about this), but I still think this solution is much cleaner than using negative margins.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textField_driver_age"
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:padding="0dp"
android:textColorHint="#color/brown_grey"
app:boxBackgroundColor="#color/white"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
app:endIconMode="none"
app:layout_constraintBottom_toBottomOf="#+id/lable3"
app:layout_constraintStart_toEndOf="#+id/lable3"
app:layout_constraintTop_toTopOf="#+id/lable3">
<AutoCompleteTextView
android:drawablePadding="8dp"
android:drawableEnd="#drawable/ic_email"
android:id="#+id/et_driver_age"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dropDownHeight="250dp"
android:inputType="none"
android:lines="1"
android:padding="0dp"
android:text="30"
android:textColor="#color/greyish_brown"
android:textSize="12sp" />

Are layout_alignParentRight or layout_alignParentLeft work for include layout?

I have a little problem.
I am creating a custom button widget
<?xml version="1.0" encoding="utf-8"?>
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/barBtn"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:textColor="#color/white"
android:background="#drawable/sel_btn_bar"
android:layout_centerVertical="true"
/>
Then I place it into the RelativeLayout
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/bar"/>
<include layout="#layout/segm_btn_stores"/>
<include
layout="#layout/btn_bar"
android:layout_alignParentRight="true"/>
</RelativeLayout>
But align doesn't work until I place include tag into RelativeLayout which I can move as I want. But this method is creating another problems: button will be narrower than if it was outside RelativeLayout. What can I do? I want to setup button params in one place.
And yes, I can add this line: android:layout_alignParentRight="true" to Button tag and it will work!
So the question is: why it works for Button tag and doesn't work for include tag?
Update
Button and fragments layout are there.
I think the android:layout_centerVertical attribute (for your Button layout) is only valid in a RelativeLayout (at least it's documented in the RelativeLayout.LayoutParams document: http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html), hence I wouldn't expect it to work in, say, a LinearLayout.
As of the case when the button gets narrower within the RelativeLayout than outside it, I don't really know what to say. Given the XML snippet you provided it seems like your RelativeLayout is the document root, i.e. moving the <include ... /> tag outside it would generate illegal XML, hence compile errors (if using Eclipse).
I would actually prefer to define button themes in custom styles, which you then could set up in a application global style xml, like this, for example:
<resources>
<style name="my_custom_style" parent="android:style/Theme.NoTitleBar">
<item name="android:buttonStyle">#style/my_button_style</item>
</style>
<style name="my_button_style" parent="#android:style/Widget.Button">
<item name="android:gravity">center_vertical|center_horizontal</item>
<item name="android:background">#drawable/my_button_background</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:textColor">#color/my_custom_red_color</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">11sp</item>
</style>
</resources>
and then you'd set your custom style in the AndroidManifest.xml, like this:
<application
android:icon="#drawable/ic_launcher"
android:label="#string/application_title"
android:theme="#style/my_custom_style">
<!-- Your Activities, Services etc goes here -->
</application>
I'm confused about what your problem is. You are trying to take your view out of the relativelayout? If your making a layout, your views are going to have to belong to a ViewGroup. Align doesn't work because your view is outside of the ViewGroup which defines that attribute "RelativeLayout"

Custom title bar without padding (Android)

So I am using the techniques in this thread to use a custom background for my titlebar. Unfortunately the framework places my layout inside a FrameLayout (title_container) which has padding as seen below.
(source: ggpht.com)
Is there anyway to remove the grey borders? The frame layout is defined in com.android.internal.R.id.title_container, so accessing the frame by ID would be fragile.
I was struggling with this same issue and now I have the answer!
As you probably have seen several places, you need to create a themes.xml resource:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="android:Theme">
<item name="android:windowTitleSize">44dip</item>
<item name="android:windowTitleBackgroundStyle">#style/WindowTitleBackground</item>
</style>
</resources>
Note it is not often mentioned in the sites talking about custom title bars you need to select this theme at the view, activity, or application level. I do it at the application level by adding android:theme property to the application:
<application android:icon="#drawable/icon"
android:label="#string/app_name"
android:theme="#style/MyTheme">
You also need a styles.xml to define that WindowTitleBackgroundStyle. Unlike the various versions of this file I have seen floating aroung the web, I have added one additional line to the file that sets the padding to 0 which gets rid of the padding you are complaining about:
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<style name="WindowTitleBackground">
<item name="android:background">#android:color/transparent</item>
<item name="android:padding">0px</item>
</style>
</resources>
There is actually no need to use a custom layout to customise the background image. The following code in theme.xml will work:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="TitlebarBackgroundStyle">
<item name="android:background">#drawable/header_bg</item>
</style>
<style name="Theme.OTPMain" parent="android:Theme">
<item name="android:windowTitleBackgroundStyle">#style/TitlebarBackgroundStyle</item>
</style>
</resources>
However, if you do actually want to use a custom title bar, then the following code will remove the margin:
ViewGroup v = (ViewGroup) findViewById(android.R.id.title);
v.setPadding(0, 0, 0, 0)
title_bar_background was set as the ID of the background image in the XML. I set android:scaleType="fitXY".
There is a lenghty thread over on anddev.org that may be able to help you out
http://www.anddev.org/my_own_titlebar_backbutton_like_on_the_iphone-t4591.html
I have followed it and successfully created my own title bar which allows me to set the padding.
Xml for my title bar:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="#+id/header"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="38px" android:layout_width="fill_parent"
android:background="#drawable/gradient">
<TextView android:id="#+id/title" android:layout_width="wrap_content"
android:gravity="center_vertical" style="#style/PhoneText"
android:layout_alignParentLeft="true"
android:text="New Title" android:background="#android:color/transparent"
android:layout_height="wrap_content" android:layout_alignParentTop="true"
android:padding="5dip" android:layout_marginBottom="7px"/>
<TextView android:id="#+id/time" android:layout_width="wrap_content"
android:gravity="center_vertical" style="#style/PhoneText2"
android:layout_alignParentRight="true"
android:text="Test Text" android:background="#android:color/transparent"
android:layout_height="wrap_content" android:layout_alignParentTop="true"
android:padding="4dip" android:layout_marginBottom="7px"/>
</RelativeLayout>
The above creates a small gray bar with text aligned to the right and left sides
I got rid of the padding by getting the title container and setting the padding to 0. It works on Android 4.
titleContainerId = (Integer)Class.forName("com.android.internal.R$id").getField("title_container").get(null);
ViewGroup vg = ((ViewGroup) getWindow().findViewById(titleContainerId));
vg.setPadding(0, 0, 0, 0);
As mentioned by dalewking, you can change the Manifest like this:
<application android:icon="#drawable/icon"
android:label="#string/app_name"
android:theme="#style/MyTheme">
But it did not work for me until I added
android:theme="#style/MyTheme"
to the activity it self like:
<activity
android:name=".MainActivity"
android:screenOrientation="portrait"
android:theme="#style/CustomTheme" >
</activity>
As of 4.2 and ADT 21 when creating a default layout standard dimensions are added to the parent container:
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
</RelativeLayout>
Values are located in res/dimens.xml:
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
</resources>
Either remove them from the parent or change the dimens.xml values to your desired values.
I added the following padding item the AppTheme in styles.xml
<style name="AppTheme" parent="AppBaseTheme">
...
<item name="android:padding">0dp</item>
...
</style>
The Application manifest uses that theme:
<application
...
android:theme="#style/AppTheme" >
...
This resolved it for me.

Categories

Resources