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
Related
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"
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 use bottomNavigation.
I wanna fill the icon with the color "not the outside of the icon" when selected.
How can I do that?
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:paddingTop="2dp"
android:background="#FFFFFF"
android:theme="#style/BottomNavigationTextStyle"
app:labelVisibilityMode="labeled"
app:itemIconSize="24dp"
android:layout_alignParentBottom="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:menu="#menu/buttom_navigation_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
Use the itemIconTint attribute:
<com.google.android.material.bottomnavigation.BottomNavigationView
app:itemIconTint="#color/my_selector"
..>
and define a selector like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="1.0" android:color="..." android:state_checked="true"/>
<item android:alpha="0.6" android:color="..."/>
</selector>
Use custom made images as per your requirement. You would need to add 2 images one for the active state and for deactive state.
Create a selector home_icon_selector.xml for your icon
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/your_active_icon_here" android:state_selected="true" />
<item android:drawable="#drawable/your_active_icon_here" android:state_pressed="true" />
<item android:drawable="#drawable/your_active_icon_here" android:state_checked="true" />
<item android:drawable="#drawable/your_deactive_icon_here" />
</selector>
Update your menu buttom_navigation_menu to use the selector above
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_home"
android:enabled="true"
android:icon="#drawable/home_icon_selector"
android:title="#string/tab_title_home"/>
</menu>
I want to make BottomNavigationView Menu in UpperCase, How can i do that without using 3rd party library?
Here is my xml code:
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:foreground="?attr/selectableItemBackground"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color"
app:menu="#menu/navigation" />
And navigation.xml as follows:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_home"
android:icon="#drawable/home_icon"
android:title="#string/title_home"
/>
<item
android:id="#+id/navigation_deals"
android:icon="#drawable/ic_deals"
android:title="#string/deals" />
<item
android:id="#+id/navigation_myBookings"
android:icon="#drawable/ic_my_bookings"
android:title="#string/title_my_bookings" />
<item
android:id="#+id/navigation_more"
android:icon="#drawable/ic_more"
android:title="#string/title_more" />
</menu>
Try this
Create a style like this BottomNavigationViewStyle
<style name="BottomNavigationViewStyle">
<item name="android:textAllCaps">true</item>
<item name="android:textSize">15sp</item>
</style>
Than use like this
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:foreground="?attr/selectableItemBackground"
app:menu="#menu/navigation"
app:theme="#style/BottomNavigationViewStyle" />
OUTPUT
Apply this theme to your bottom navigation
<style name="AppTheme2" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textAllCaps">true</item>
</style>
I need delete a blue line that appears in my application when I compile with API 20 or higher but doesn't appear when I compile in API < 20.
This image shows the blue line I need delete.
that is mi code view XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="0dp"
android:background="#color/transparent"
android:layout_height="280dp" >
<net.simonvt.numberpicker.NumberPicker
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="?android:attr/textColorPrimary"
android:id="#+id/numberPicker1_popup"
android:singleLine="true"
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:configChanges="keyboard|keyboardHidden"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/title_picker"
android:layout_alignStart="#+id/title_picker"
android:layout_alignRight="#+id/title_picker"
android:layout_alignEnd="#+id/title_picker" />
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text=""
android:id="#+id/button_cancel"
android:layout_below="#+id/numberPicker1"
android:layout_alignParentLeft="true"
android:layout_marginLeft="15dp"
android:layout_alignParentStart="false"
android:background="#drawable/big_cancel"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/button_ok"
android:layout_alignTop="#+id/button_cancel"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="15dp"
android:background="#drawable/big_ok_line_green"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Title"
android:id="#+id/title_picker"
android:layout_marginTop="0dp"
android:layout_alignLeft="#+id/button_cancel"
android:layout_alignStart="#+id/button_cancel"
android:layout_alignRight="#+id/button_ok"
android:layout_alignEnd="#+id/button_ok"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="false"
android:textAlignment="center"
android:textColor="#000000"/>
</RelativeLayout>
and this is my style
<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>
<item name="numberPickerStyle">#style/NPWidget.Holo.Light.NumberPicker</item>
<item name="android:typeface">monospace</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.NowindowTitle">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
thanks for helpme
You need to customize your view appearance by setting background , etc if you want to remove that blue line . Because that is the default appearance for that platform (which I guess is started since Honeycomb).