I'm having some trouble changing the color of an AutoCompleteTextView's underline, through styles.
We're using appcompat-v7, minimum SDK version is 16 and target and compiled are 21.
This is my toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
style="#style/ToolbarTheme"
android:minHeight="?attr/actionBarSize">
<AutoCompleteTextView
android:id="#+id/shop_chooser"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Autocomplete"
android:hint="#string/chooseShop"
android:imeOptions="actionSearch"
android:inputType="textAutoComplete|textAutoCorrect"
android:drawableRight="#drawable/ic_action_cancel"
android:textIsSelectable="true" />
</android.support.v7.widget.Toolbar>
This is how I include it in other layouts:
<include
android:id="#+id/toolbar_inc"
layout="#layout/actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
This is my Autocomplete style:
<style name="Autocomplete" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColor">#d9fafafa</item>
<item name="android:textColorHint">#80bdbdbd</item>
<item name="android:background">#drawable/bg_autocomplete</item>
</style>
And this the background's 9 patch image:
My problem is that the AutoCompleteTextView gets positioned way lower than it should:
This is how the app looks if I remove the 'background' attribute from my custom style:
I know that this can be achieved on api 21 using 'accentColor', but I'm talking about pre-21 here.
I want just to change the line's color, any suggestion or alterative solution is appreciated. Thanks!
The problem is with you 9.patch image .. It has way too much space on the top of it.
Either edit it yourself or ask your graphics designer to shave off some space from top.
Related
I'm using the github repository project for testing purposes and I stumbled accross BottomSheetDragHandleView which displays a handle bar in the demo license (see link for the code):
The issue I am having is that using the the similar layout structure or almost the same structure in my demo license, the handle bar is not visible.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="#dimen/view_margin_small"
android:paddingBottom="#dimen/view_margin_small">
<com.google.android.material.bottomsheet.BottomSheetDragHandleView
android:id="#+id/handlebar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/setImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/set_image"
app:icon="#drawable/baseline_photo_camera_24"
style="#style/ThemeStyleBottomSheetIconMaterialButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/handlebar"
/>
<com.google.android.material.button.MaterialButton
android:id="#+id/deleteImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/delete_image"
app:icon="#drawable/baseline_no_photography_24"
style="#style/ThemeStyleBottomSheetIconMaterialButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setImage"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Is there anything that must be taken care of in order to display the handle bar?
This seems to be happening when using material 2 themes currently and works as expected when switching to material 3 (tested on material lib version 1.8.0 - seems it won't be addressed in the future).
While BottomSheetDragHandleView seem to have default style defined its not picked up - which results in the view not showing up.
Even if thats fixed this style expect material 3 color attributes for tint color so it needs to be overridden anyway with the color of your choice.
Workaround:
define new style:
<style name="Widget.MaterialComponents.BottomSheet.DragHandle" parent="Widget.Material3.BottomSheet.DragHandle">
<item name="tint">?colorOnSurface</item>
<!--Alpha can be added optionally to achieve nice color blend-->
<item name="android:alpha">0.3</item>
</style>
use it in your theme by adding:
<item name="bottomSheetDragHandleStyle">#style/Widget.MaterialComponents.BottomSheet.DragHandle</item>
Hello I ran into problem with aligning icon in material button on Android. I have button with match_parent width, text and icon next to text. I want to align icon 8dp left to text and I tried do it by com.google.android.material.button.MaterialButton app:iconGravity. But result was not as expected.
As you can see, with longer text, icon padding is smaller and smaller. I also tried define app:iconPadding (default is 8dp) but with same result.
Is this bug or I'm doing it wrong?
Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<com.google.android.material.button.MaterialButton
style="#style/MaterialButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:icon="#drawable/ic_launcher"
app:iconGravity="textStart"
tools:text="L" />
<com.google.android.material.button.MaterialButton
style="#style/MaterialButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:icon="#drawable/ic_launcher"
app:iconGravity="textStart"
tools:text="Lorem ipsum" />
<com.google.android.material.button.MaterialButton
style="#style/MaterialButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:icon="#drawable/ic_launcher"
app:iconGravity="textStart"
tools:text="Lorem ipsum dolor sit amet" />
</LinearLayout>
Style:
<style name="MaterialButton" parent="Widget.MaterialComponents.Button">
<item name="android:textColor">#color/white</item>
<item name="android:textAppearance">#style/TextTitleAllCapsBold</item>
<item name="android:fontFamily">#font/roboto_condensed_regular</item>
<item name="android:padding">#dimen/padding_medium</item>
<item name="backgroundTint">#color/colorPrimary</item>
<item name="iconSize">32dp</item>
</style>
Using implementation 'com.google.android.material:material:1.0.0'
remove app:iconGravity="textStart"
TL;DR
only use capitalized text and/or monospace fonts for buttons and use textAlignment="center" (the default) when specifying an icon with iconGravity="textStart"
I found reason and workaround how to fix this bug.
It calculates leftPadding of icon badly becouse of attribute android:textAllCaps.
If you have same experience, remove (or set to false) attribute android:textAllCaps and replace it with uppercased text in strings.xml or using .toUpperCase( ) in Java or Kotlin
It is issue that was found on September 2018 and by October is marked as Fixed on Google's issuetracker. But I'm using latest stable version of library and still have the bug. Here is my issue
UPDATE
The bug is now fixed in version 1.1.0-alpha02.
Recently, I stunned with a problem. On my android phone elements of the list or scroll views with the same elevation have different shadows related to their positioning. For example, views on the top of the screen have a small light shadow, whenever views on the bottom of the screen have more dark and strong shadow. Here is a screenshot from Google Keep application:
So, I thought that this is because of exactly Google Keep application. Maybe guys from Google decided to do that trick with shadows for their application. Thus, I created a sample application.
My 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="match_parent"
android:orientation="vertical">
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
</LinearLayout>
My styles:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppButton">
<item name="android:background">#color/colorAccent</item>
<item name="android:elevation">4dp</item>
<item name="android:gravity">center</item>
<item name="android:padding">16dp</item>
<item name="android:textColor">#android:color/white</item>
</style>
</resources>
And the output is:
As you see, we have the same effect (top view has a small shadow, bottom view have a big shadow). So my questions are:
What I did wrong?
How can I achieve the same shadow for all views (not different by their positions)?
Also, I haven't found any explanations in docs, so where I can read about that phenomenon?
Does it happen on all devices or only on specific?
P.S.: I have Nexus 5X, Android 7.1.2.
UPD:
An important mention that from Android Studio Preview Window everything is fine. Every view has the same shadow as other. But on a real device, you can see the difference.
Shadows generated by Elevation API are positioned in 3D space, which means that the look of each shadow is affected not only by its elevation value, but also by shadow caster's x and y position on screen. It's pretty much like in the real world - objects beneath a light source cast shorter shadows than objects further away.
Take a closer look at the first image you posted. Shadows are longer on left edges of the left cards and on right edges of the right cards than on the edges at the horizontal center.
Ad. 1. Nothing. It just works that way.
Ad. 2. It's not possible using Elevation API. You can draw shadows by yourself.
Ad. 3. Don't know, sorry.
Ad. 4. All devices.
Ad. UPD. Shadows in the editor are static, so there's no effect you're observing.
I try to use the TextInputLayout, I success changing the color of the floating label by following this post, using android:theme="#style/TextLabel" makes floating label color change. However, it only works for Android version 5.0 and above.
For lower version of Android, I use app:hintTextAppearance="#style/TextAppearance.AppCompat". Here is my code:
<style name="EditTextHint" parent="TextAppearance.AppCompat">
<item name="android:textColor">#bbbbc9</item>
<item name="android:textColorHint">#bbbbc9</item>
<item name="android:textSize">11.5sp</item>
</style>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintTextAppearance="#style/EditTextHint">
<EditText
android:id="#+id/fet_input_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:paddingTop="7.5dp"
android:textColor="#595968"
android:textSize="14sp" />
</android.support.design.widget.TextInputLayout>
The problem is that the color of floating label only change to #bbbbc9 when user tab on the EditText. If user tab on the other EditText, the color is changed to default. Here is the picture:
Correct Color: bbbbc9
Error Colorlt: default color
If you have any suggestions, please let me know. Any ideas would be appreciated.
Thank you in advance!
After doing "on the fly", I try to add android:textColorHint="#bbbbc9" in TextInputLayout and it works. Here is the full code:
<style name="EditTextHint" parent="TextAppearance.AppCompat">
<item name="android:textColor">#bbbbc9</item>
<item name="android:textColorHint">#bbbbc9</item>
<item name="android:textSize">11.5sp</item>
</style>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColotHint="#bbbbc9"
app:hintTextAppearance="#style/EditTextHint">
<EditText
android:id="#+id/fet_input_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:paddingTop="7.5dp"
android:textColor="#595968"
android:textSize="14sp" />
</android.support.design.widget.TextInputLayout>
Do you have open two style.xml? one is style.xml while another is style-21.xml ?
in style-21.xml, it is used for android-21 / android 5.0 or above
original one is for lower support
This worked for me;
Make a custom style as;
<style name="TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
<!-- Floating label appearance here -->
<item name="android:textColor">#color/colorLightGrey</item>
</style>
And use ;
<android.support.design.widget.TextInputLayout
android:id="#+id/store_til"
app:hintTextAppearance="#style/TextFloatLabelAppearance"
android:textColorHint="#color/colorWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite"
android:hint="#string/your_string">
</AutoCompleteTextView>
This is what I did to change the floating text to a custom color.
First off, I know that this question has been asked before, but it hasn't been answered before. I hope someone can give me an answer.
In my application, I use the Toolbar from Appcompat_v7 (API 21). This is my code:
<android.support.v7.widget.Toolbar
style="#style/DarkActionbarStyle"
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="#dimen/actionbar_height" />
And this is the ToolBar style I use:
<style name="DarkActionbarStyle" parent="#style/Widget.AppCompat.Toolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="titleTextAppearance">#style/ActionBarTitle</item>
<item name="android:elevation">2dp</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/ThemeActionBarDark</item>
</style>
<style name="ThemeActionBarDark" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="actionBarItemBackground">#drawable/btn_dark_orange</item>
<item name="selectableItemBackground">#drawable/btn_dark_orange</item>
</style>
The problem is, that elevation doesn't work pre-lollipop. So my question is: Is it possible to have a shadow under the ToolBar on pre-lollipop devices?
This worked for me very well:
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
card_view:cardElevation="4dp"
card_view:cardCornerRadius="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:minHeight="?attr/actionBarSize" />
</android.support.v7.widget.CardView>
Using CardView container for toolbar is a bad idea.
CardView is heavy, especially for low end devices.
The best way is to put a gradient Shadow view below the toolbar. Shadow view must be a direct child to the coordinator layout. ie. The appbar which contains toolbar and shadow View must be siblings.
Add this view component to your layout.
<View
android:id="#+id/gradientShadow"
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_shadow"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_collapseMode="pin"/>
The drawable toolbar_shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#33333333"
android:startColor="#android:color/transparent"/>
</shape>
This will solve the problems in pre-lollipop devices. But we don't want this shadow in lollipop and above devices so make visibility to gone in devices with lollipop and above.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
findViewById(R.id.gradientShadow).setVisibility(View.GONE);
}
Done.
You can add the shadow (elevation) back by using a FrameLayout with foreground="?android:windowContentOverlay". The elevation attribute is not supported pre-Lollipop. So if you are using FrameLayout like fragment container just add foreground attribute to it.
As I've had issues with the CardView widget method, I've used the FrameLayout method as mentioned by #Sniper; it is working perfectly!
I just wanted to share the code snippet you'll have to use.
Just put this directly under the toolbar where your main content starts:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:windowContentOverlay">
And don't forget to close with:
</FrameLayout>
It's possible to have real shadows - animated and generated. The method used by Lollipop is available since Froyo. Hardware acceleration used for shadow generation is available since Honeycomb I guess. Here's how it works:
draw your view to an off-screen bitmap with LightingColorFilter set to 0,0
blur the black shape (the off-screen bitmap) using the ScriptIntrinsicBlur class and elevation value as radius
draw the bitmap beneath the view
It requires adding custom elevation attributes, custom views capable of rendering shadows, and using render script and the compatibility library (for older devices). I'm not going to dive into the details, because there's a lot of them including issues with compilation and minor performance optimisations. But it's possible.
Why there's no shadows in the official support library?
it would require changes in the UI framework as it's impossible to freely draw outside view bounds
smooth animation requires a quite good GPU
See:
https://www.youtube.com/watch?v=jbU4SXblO5s
https://androidreclib.wordpress.com/2014/11/25/lollipops-shadows-on-gingerbread/
https://github.com/ZieIony/Carbon
I'm using this answer:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/orange"
android:titleTextAppearance="#color/White"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_shadow" />
</LinearLayout>
toolbar_shadow.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#3f3f3f"
android:endColor="#android:color/transparent"
android:angle="270" />
</shape>
You can't use the elevation attribute before API 21 (Android Lollipop).
You can however add the shadow programmatically, for example using a custom view placed below the Toolbar.
For example:
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#drawable/shadow"/>
Where the shadow is a drawable with a black gradient.
To show shadow under your toolbar please use AppBarLayout available in Google Android Design Support Library. Here is an example of how it should be used.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"/>
</android.support.design.widget.AppBarLayout>
To use Google Android Design Support Library enter following into your build.gradle file:
compile 'com.android.support:design:22.2.0'
The solution with a view to add a shadow manually would work as long as there are no action bar menus. If so, the shadow view would stop before the action bar icons.
i think it is easier to have a vertical linear layout with appbar on the top and a view for shadow below it as the next linear layout item or in my case, it is
<LinearLayout Vertical>
<v7 toolbar/>
<RelativeLayout>
<View for shadow with alignParent_top= true/>
....
</RelativeLayout>
</LinearLayout>
I really hope the near future appCompat would fix this.