When I assign a button to android:background="#color/white", the button disappears behind the round corners, I know, it's related to android:background="#color/white", how do I solve this problem? how to change color and make rounded corners?
Theme
<resources xmlns:tools="schemas.android.com/tools"
xmlns:app="schemas.android.com/apk/res-auto">
<!-- Base application theme. -->
<style name="Theme.SnapChat"
parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="android:background">#color/white</item>
<item name="android:text">#string/button1</item>
<item name="android:textSize">14sp</item>
<item name="android:gravity">center|center_vertical</item>
<item name="strokeColor">#color/yellow</item>
</style>
</resources>
Code
<com.google.android.material.button.MaterialButton
android:id="#+id/button1"
android:layout_width="128dp"
android:layout_height="36dp"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="66dp"
android:layout_marginBottom="45dp"
android:style="#style/Theme.SnapChat"
app:cornerRadius="100dp"
/>
You should use
app:backgroundTint="#color/white"
Related
I have some very short text input (like only 2 numeric characters) yet using the endIcon will hog half of my textview and will cut off and display ellipses. I cannot make the TextInputLayout wider so I how can I display the full 2 characters (or more) while using endIconDrawable?
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"
android:layout_width="80dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_height="40dp"
android:background="#drawable/text_input_assessment"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
app:endIconDrawable="#drawable/ptx_down_arrow_android"
app:endIconTint="#color/colorPtxDarkBlue">
<com.google.android.material.textfield.MaterialAutoCompleteTextView
android:id="#+id/dropdownDay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#null"
android:fontFamily="#font/truenorg"
android:textSize="15sp"
app:autoSizeTextType="uniform"
app:autoSizeMinTextSize="10sp"
app:autoSizeMaxTextSize="15sp"
app:autoSizeStepGranularity="1sp"
android:inputType="none"
android:maxLines="1"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:singleLine="true"
android:text="12"
android:textAlignment="viewStart"
android:textColor="#color/colorPtxDarkBlue"
tools:ignore="LabelFor" />
</com.google.android.material.textfield.TextInputLayout>
It is a workaround, not a final solution.
You can reduce the padding between the text and endIcon by adding a negative value in android:drawablePadding.
Something like:
<com.google.android.material.textfield.MaterialAutoCompleteTextView
android:id="#+id/dropdownDay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:drawablePadding="-12dp"
../>
A final note. You don't need to use android:background="#drawable/text_input_assessment" to have rounded corners. Just add app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.Rounded" in the TextInputLayout with:
<style name="ShapeAppearanceOverlay.Rounded" parent="">
<item name="cornerSize">50%</item>
</style
You've defined a style for it already
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"
So, the above line will add the dropdown icon automatically. I think you'll need to remove this line
app:endIconDrawable="#drawable/ptx_down_arrow_android"
Maybe the above line is overlapping the default icon
Then if you want to set tint to the drawable, just create a custom style
<style name="CustomAutoCompleteLayout" parent="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu">
<item name="endIconTint">#color/colorPtxDarkBlue</item>
</style>
And you add this two lines if you like
style="#style/CustomAutoCompleteLayout"
android:theme="#style/CustomAutoCompleteLayout"
Also i suggest that you remove this line and add it to the com.google.android.material.textfield.TextInputLayout instead.
android:paddingTop="10dp"
android:paddingBottom="10dp
Okay, i created this just now after 2hours and it worked very fine for me..
styles.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="backgroundTint">#android:color/white</item>
<item name="colorPrimaryVariant">#color/colorPrimaryDark</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/colorSecondary</item>
<item name="colorSecondaryVariant">#color/colorSecondaryVariant</item>
<item name="colorOnSecondary">#color/white</item>
<item name="android:textColor">#android:color/black</item>
<item name="button_textcolor">#android:color/black</item>
<item name="android:textColorPrimary">#android:color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
Don't worry about the constans e.g #color/colorPrimary. What matters is the parent theme.
Remember to use this below as your parent theme for AppTheme in android_manifest.xml since you've added style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu to <com.google.android.material.textfield.TextInputLayout else app crashes
parent="Theme.MaterialComponents.Light.NoActionBar">
Then add this to styles.xml also
<style name="AppTheme.MaterialTextInputExposed" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu">
<item name="hintTextColor">#color/colorSecondary</item>
<item name="boxStrokeColor">#color/colorSecondary</item>
<item name="boxStrokeErrorColor">#android:color/holo_red_dark</item>
<item name="errorTextColor">#android:color/holo_red_dark</item>
<item name="boxStrokeWidth">#dimen/_2dp</item>
<item name="boxCornerRadiusBottomEnd">#dimen/_6dp</item>
<item name="boxCornerRadiusBottomStart">#dimen/_6dp</item>
<item name="boxCornerRadiusTopStart">#dimen/_6dp</item>
<item name="boxCornerRadiusTopEnd">#dimen/_6dp</item>
<item name="colorControlActivated">#color/colorSecondary</item>
<item name="android:textColor">#android:color/black</item>
<item name="button_textcolor">#android:color/black</item>
<item name="endIconTint">#color/spinner</item>
</style>
You can now modify your activity_main.xml
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/choose_admission_mode"
style="#style/AppTheme.MaterialTextInputExposed"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_10dp"
android:theme="#style/AppTheme.MaterialTextInputExposed"
app:hintEnabled="true"
app:layout_constraintBottom_toTopOf="#id/choose_faculty"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/choose_program">
<AutoCompleteTextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="start"
android:imeOptions="actionNext"
android:inputType="text"
android:textSize="#dimen/_18sp"
</com.google.android.material.textfield.TextInputLayout>
I Changed the below line but it's not necessary. You just need to be careful with the padding and remember #dimen/_6dp has value of 6dp and #dimen/_2dp has value of 2dp
<com.google.android.material.textfield.MaterialAutoCompleteTextView
to
<AutoCompleteTextView
TextInputLayout box stroke not showing when TextInputEditText is empty
![TextInputLayout when TextInputEditText is empty][1]
After typing some text is works
![TextInputLayout when TextInputEditText is not empty][2]
My XML code
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_login_email"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#color/transparent"
android:hint="#string/email"
app:boxCornerRadiusBottomStart="16dp"
app:boxCornerRadiusTopEnd="16dp"
app:boxStrokeColor="#color/kPrimaryDarkColor"
app:boxStrokeErrorColor="#color/red_primary"
app:boxStrokeWidthFocused="2dp"
app:errorEnabled="true"
app:helperText="example#example.com"
app:helperTextEnabled="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_login_app_logo">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="textEmailAddress"
android:text="#={userModel.email}" />
</com.google.android.material.textfield.TextInputLayout>
theme.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.JayaMaaManakamanaDental" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/kPrimaryColor</item>
<item name="colorPrimaryVariant">#color/kPrimaryDarkColor</item>
<item name="colorOnPrimary">#color/kPrimaryLightColor</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimary</item>
<!-- Customize your theme here. -->
<item name="android:textColor">#color/black</item>
<item name="android:background">?attr/colorOnPrimary</item>
</style>
</resources>
Color.xml
<color name="kPrimaryColor">#147EDB</color>
<color name="kPrimaryDarkColor">#134185</color>
<color name="kPrimaryLightColor">#DEEEF8</color>
<color name="kButtonColor">#D66D67</color>
I have put an edit text which has a tint color as white. But it looks black in android above 4.0 devices till lollipop.
I searched for this and got solutions as apply background color as white.
But I have another layout from which the edit text belongs which has dark blue color, so if I apply background color as white whole edit text looks white on that dark blue layout.
What can I do for this now?
Layout :
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/purple_bg"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="true"
android:id="#+id/linearLayout"
android:weightSum="1">
<EditText
android:layout_width="match_parent"
android:layout_height="42dp"
android:id="#+id/editTextOrderItem"
android:layout_gravity="center_vertical"
android:backgroundTint="#ffffff"
android:drawableTint="#ffffff"
android:hint="Type here..."
android:textColorHint="#ffffff"
android:paddingLeft="15dp"
android:imeOptions="actionDone"
android:textSize="12sp"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_centerVertical="true"
android:textColor="#ffffff"
android:layout_toLeftOf="#+id/imageViewSearch"
android:layout_toStartOf="#+id/imageViewSearch"
android:singleLine="true" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/imageViewSearch"
android:backgroundTint="#android:color/white"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_gravity="center"
android:src="#drawable/btn_search"
android:layout_centerVertical="true"
android:padding="10dp"
android:layout_marginRight="06dp" />
</RelativeLayout>
color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#ffffff</color>
<color name="colorPrimaryDark">#eeeeee</color>
<color name="colorAccent">#3e3e3e</color>
<color name="black">#747474</color>
<color name="drawerBacground">#e6f7fd</color>
<color name="themetextcolor">#009688</color>
<color name="darktextcolor">#000000</color>
<color name="lighttextcolor">#ACABAC</color>
<color name="activity_bg_color">#D9E7E4</color>
<color name="activity_footer_color">#37b0a0</color>
<color name="btn_text">#b3ffffff</color>
<color name="seperator">#dedede</color>
<color name="accent">#00B0FF</color>
</resources>
Please help, thank you..
EDIT:
I tried to add new theme and put it in activity in manifest, but did not help.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/black</item>
<item name="colorAccent">#color/accent</item>
<item name="android:typeface">monospace</item>
<item name="android:textSize">17sp</item>
</style>
<style name="AppTheme2" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:typeface">monospace</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimary</item>
</style>
<style name="AppTheme1" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:typeface">monospace</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/accent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
Manifest :
<activity android:name=".Activities.MainActivity"
android:theme="#style/AppTheme2"
/>
Create a drawable resource xml file (your requirement is only to have a bottom stroke)
Set givendrawable as the background of the editText then you can add the background color you need + bottom line you need with a color
Explain:
This is a resource drawable
dashGap & dashWidth is for doted/broken lines (remove them if you do not need dashes)
android:top -> you can give minus sizes to the views that you don't need to display.(here your requirement is to show only bottom line so top,right & left lines of the item has given -2dp )
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#FFF" /> <-- background color here
</shape>
</item>
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:dashGap="10px"
android:dashWidth="10px"
android:width="1dp"
android:color="#ababb2" <-- bottom line color here />
</shape>
</item>
</layer-list>
you can set different different color accent at activity in your manifest file.
<color name="colorAccent">#FFFFFF</color>
I am creating custom rating bar.The problem is that drawables are not overlaying properly,because there are two different images with same hight and width.It should be like this when the progress will be updated the default image should be replaced by the image2. Any idea?
<RatingBar
android:layout_weight="1"
android:numStars="5"
android:stepSize="1"
android:progressDrawable="#drawable/customselector"
android:layout_width="wrap_content"
android:layout_height="0dp"/>
Here is my custom selector
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/image1" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/image1" />
<item android:id="#android:id/progress"
android:drawable="#drawable/image2" />
</layer-list>
The way I set the selector to the RatingBar is a bit different, but I don't know if it will help:
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ratingBar"
android:rating="3"
android:numStars="5"
android:stepSize="1"
android:isIndicator="false"
style="#style/mileageRatingBar"/>
In your values/styles.xml file put this:
<style name="mileageRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/rating_stars</item>
<item name="android:minHeight">32dip</item>
<item name="android:maxHeight">32dip</item>
</style>
You can of course change the size. And as you can see here is the reference to the custom drawable.
Remove
android:progressDrawable="#drawable/customselector"
and add style in your values/styles.xml
to be like this
<RatingBar
android:layout_weight="1"
android:numStars="5"
android:stepSize="1"
android:layout_width="wrap_content"
android:layout_height="0dp"
style="#style/customRatingBar"/>
your style from styles.xml
<style name="customRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/customselector</item>
<item name="android:minHeight">32dip</item>
<item name="android:maxHeight">32dip</item>
</style>
the customselector.xml file must place in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/image1" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/image1" />
<item android:id="#android:id/progress"
android:drawable="#drawable/image2" />
</layer-list>
make sure item id is written correctly , then you have two option to assign drawable as image or put your selector into your drawable folder selector.xml with your custom setting
instead of image1 put ratingbar_empty.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_window_focused="true"
android:drawable="#drawable/image1" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/image1" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/image1" />
<item android:drawable="#drawable/image1" />
</selector>
the same to progress but change selector to image2
I have created a theme for my application using this action bar style generator.
http://jgilfelt.github.io/android-actionbarstylegenerator/
I have set the tab colors to orange, but it's not affecting the tabs in my layout.
My layout looks the following.
<android.support.v4.app.FragmentTabHost 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:id="#android:id/tabhost" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal" />
<FrameLayout
android:id="#+id/tabFrameLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
Here are the other things I have in my style files and in the manifest file.
The Manifest file
android:theme="#style/Theme.Silence"
styles_silence.xml
<style name="Theme.Silence" parent="android:Theme.Holo.Light">
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.Silence</item>
...
</style>
...
<style name="ActionBarTabStyle.Silence" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_silence</item>
</style>
tab_indicator_ab_silence.xml (this is generated by the program I linked earlier)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="#android:color/transparent" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_silence" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_unselected_focused_silence" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_focused_silence" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed_silence" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_silence" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed_silence" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_silence" />
</selector>
I checked this document, and it seems to me that everything is alright. What could be wrong?
What could be wrong?
That tool generates the styles for the tabs present in the ActionBar, but you're using normal tabs(through the standard TabWidget) which have a different style associated with them. That style is represented in the theme by the tabWidgetStyle attribute which points to the style Widget.(Holo).TabWidget style.
Unfortunately through the Widget.TabWidget style of the theme you can't change the background(and neither the tab layout as the attribute which manages this is hidden) but you can do it manually by assigning a new layout as the tab indicator and placing your selector in there:
fragmentTabHost.addTab(fragmentTabHost.newTabSpec("tabText").setIndicator(buildTabLayout("tabText")), YourFragmentClass.class, null);
where buildTabLayout() is a method like this:
private View buildTabLayout(String tag) {
View tab = getLayoutInflater().inflate(R.layout.new_tab_layout, null);
return tab;
}
The layout is:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/tab_indicator_ab_silence" // or you could have a style attribute
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" android:text="simple"/>
Copy paste the following res/values-v14/styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!--
Base application theme for API 14+. This theme completely replaces
AppBaseTheme from BOTH res/values/styles.xml and
res/values-v11/styles.xml on API 14+ devices.
-->
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- API 14 theme customizations can go here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item><!-- your theme name -->
<item name="android:actionBarDivider">#null</item>
</style>
<!-- style for the action bar backgrounds -->
<style name="MyActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:backgroundStacked">#drawable/tab_bar_bg</item> <!-- change your image -->
<item name="android:titleTextStyle">#style/MyActionBar.Text</item> <!-- to cusomize the font style on tab bar --.
</style>
<style name="MyActionBar.Text" parent="#android:style/TextAppearance">
<item name="android:textColor">#A3A3A3</item>
<item name="android:textSize">15sp</item>
</style>
</resources>
Change the default theme to your theme In AndroidManifest.xml
<application
android:theme="#style/AppTheme" >
----
----
</application>