these are how my spinner and edit text looks like :
these are spinner and edit text that I saw somewhere else and I liked them :
How can I change my edittext and spinners to looks the second image ?
I'm using app compact anyway
thanks
Set Background for Spinner and EditText will help you to figure it out.
<Spinner android:id="#+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/spinner_bg"/>
<EditText android:id="#+id/edittext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/edittext_bg"/>
</LinearLayout>
By now I can guide you for EditText section ..
Define your style drawable like this ..
res/drawable/edit_text_style.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape >
<solid android:color="#color/wine_red" />
</shape>
</item>
<!-- main color -->
<item android:bottom="1.5dp"
android:left="1.5dp"
android:right="1.5dp">
<shape >
<solid android:color="#color/white" />
</shape>
</item>
<!-- draw another block to cut-off the left and right bars -->
<item android:bottom="5.0dp">
<shape >
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
Now define same in your EditText like this ..
<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="com.example.vivektest.MainActivity" >
<TextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<EditText
android:background="#drawable/edit_text_style"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/et_main"
android:imeOptions="actionSearch"
android:singleLine="true"
/>
</RelativeLayout>
Hope it helps!
This is the best tool that you can use for all views and its FREE many thanks to #Jérôme Van Der Linden.
The Android Holo Colors Generator allows you to easily create Android components such as EdiText or spinner with your own colors for your Android application. It will generate all necessary nine patch assets plus associated XML drawable and styles which you can copy straight into your project.
http://android-holo-colors.com/
UPDATE 1
This domain seems expired but project is open source you can find here
https://github.com/jeromevdl/android-holo-colors
try it
this image put in background of EditText
android:background="#drawable/textfield_activated"
UPDATE 2
For API 21 or higher, you can use android:backgroundTint
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Underline color change"
android:backgroundTint="#android:color/holo_red_light" />
Update 3
Now We have with back support AppCompatEditText
Note: We need to use app:backgroundTint instead of android:backgroundTint
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Underline color change"
app:backgroundTint="#color/blue_gray_light" />
Solution for spinner style:
Create a custom adapter with a custom layout for your spinner.
Spinner spinner = (Spinner) findViewById(R.id.pioedittxt5);
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
R.array.travelreasons, R.layout.simple_spinner_item);
adapter.setDropDownViewResource(R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);
R.layout.simple_spinner_item
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="#style/spinnerItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee" />
R.layout.simple_spinner_dropdown_item
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="#style/spinnerDropDownItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="?android:attr/dropdownListPreferredItemHeight"
android:ellipsize="marquee" />
In styles add your custom dimensions and height as per your requirement.
<style name="spinnerItemStyle" parent="android:Widget.TextView.SpinnerItem">
</style>
<style name="spinnerDropDownItemStyle" parent="android:TextAppearance.Widget.TextView.SpinnerItem">
</style>
Taken from here
Related
When the user is click on the line in EditText in Huawei device he get another smell line (under the long line) - see image.
I try to do a lot of thing to fix it and I don't find what should I do.enter image description here
The is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/static_relative_layout"
android:background="#color/app_default_background"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="15dp"
android:layout_marginRight="50dp"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/email_text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorTextAppearance="#style/TextInputLayoutHintAppearanceError"
app:hintTextAppearance="#style/TextInputLayoutHintAppearanceValid">
<EditText
android:id="#+id/email_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_email"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"
android:maxLines="1"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:singleLine="true"
android:theme="#style/EditTextStyleRedLine"
android:textColor="#color/new_dark_grey"/>
</android.support.design.widget.TextInputLayout>
The style "EditTextStyleRedLine" is as follows:
<style name="EditTextStyleRedLine" parent="#style/Widget.AppCompat.EditText">
<item name="colorControlNormal">#color/grey</item>
<item name="colorControlActivated">#color/red</item>
</style>
Add a background to your edittext, this will solve your issue.
android: background="#null"
You can personalize the background by creating a new drawable resource file, res > right click drawable > new > drawable resource file. Add the following code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<!-- Inner Shape -->
<solid
android:color="#color/colorWhite"/>
<!-- OUTLINE -->
<stroke android:width="0dp"
android:color="#FFFFFF"/>
<!-- CORNERS -->
<corners
android:radius="5dp"/>
</shape>
</item>
</selector>
Then you can set
android:background="#drawable/YOUR_DRAWABLE"
I've seen this question asked some other times on the site, but no one couldn't get any answer.
Is there any way to customize the appearance of the divider in the dropdown showing when using an AutocompleteTextview in android?
It's pretty easy for a ListView, but using only an ArrayAdapter for the autocompletetextview, is there any way to customize the divider.
(Not the textview, I already know doing that)
Im not sure how you can do it for single AutoCompleteTextView but I know how to set it for the whole application. This should also help you :)
<style name="MyTheme" parent="AppTheme">
<item name="android:dropDownListViewStyle">#style/MyListViewStyle</item>
</style>
<style name="MyListViewStyle" parent="#android:style/Widget.ListView">
<item name="android:divider">#F00</item>
<item name="android:dividerHeight">1px</item>
</style>
I didnt find any divider properties so I did this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/textView129"
android:textColor="#000000"
android:background="#color/white"
android:layout_marginBottom="1dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"/>
</LinearLayout>
So wat im doing is I have a background color for the Linear layout and another background color for the text View (textView's background color overlaps the linear layout's background color) now using the margin property and setting the bottom margin of textview to 1dp u'll get a clean line between elements....
I had faced same problem and try many ways but not achieve result, at last i got a quick and easy way to set divider and divider lenght with AutocompleteTextview. Basically we can set a border from bottom side with TextView of ArrayAdapter Layout. Like as
step1. Make a layout for arrayadapetr like as
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/testt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_single_line"
android:textColor="#drawable/text_color"
android:textAppearance="?android:attr/textAppearanceMediumInverse"
style="?android:attr/dropDownItemStyle"
android:maxLines="1"
android:padding="3dp"
android:textSize="16sp" />
step2: in drawable folder create new layout its name background_single_line.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
</item>
Finally looks as divider .
The answer from Mark is normally the best solution. However different versions of the AppCompat library have different behavior, regarding how android:dropDownListViewStyle affects other menus, like the system overflow/options menu. For example, in AppCompat version 23.0.1, it will not affect this menu in the ActionBar/Toolbar; whereas version 23.2.1 it will affect it, as explained here.
If you want a style that is isolated to only affect the AutoCompleteTextView, it may not be possible. But an alternative way is to create the list divider image manually, as part of the layout of the dropdown list row:
res/layout/autocomplete_list_row.xml
<LinearLayout
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:orientation="vertical"
tools:layout_height="50dip">
<TextView
android:id="#+id/text"
style="?android:attr/dropDownItemStyle"
android:textSize="18sp"
android:layout_width="fill_parent"
tools:text="An auto-complete list item"
android:minHeight="48dip"
android:layout_height="wrap_content"
android:ellipsize="marquee"/>
<View
android:layout_width="match_parent"
android:layout_height="1dip"
android:background="#drawable/divider"/>
</LinearLayout>
res/drawable/divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="1dp" />
<solid android:color="#458c8c8c" />
</shape>
Then use this layout in your adapter for the AutoCompleteTextView:
ArrayAdapter<CharSequence> autoCompleteListAdapter =
new ArrayAdapter<>(context,
R.layout.autocomplete_list_row,
R.id.text, arrayList);
Similar approach using ConstraintLayout here.
I can't center my drawableLeft icon.
I can easily put icon on the left of text, but if I set gravity to center, then only text is centered, but no icon.
<Button
android:id="#+id/patient_list_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/patientList"
android:drawableLeft="#drawable/ic_icon_two_heads"
android:layout_marginBottom="15dp"
style="#style/darkBlueButtonWithImage"/>
This is what I want:
This is what I have:
<style name="darkBlueButtonWithImage">
<item name="android:drawablePadding">10dp</item>
<item name="android:textColor">#color/white</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:background">#drawable/radius_dark_blue_button</item>
<item name="android:gravity">center_vertical|left</item>
<item name="android:drawableTint">#color/white</item> <!-- has to be set in activity.java -->
</style>
How can I achieve this?
Finally, after all these years, we have possibility to achieve such behavior in simple and intuitive way.
All you have to do is use MaterialButton from Google Material library. Then use style with icon. After that you can use app:iconGravity property and set it to textStart
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.Icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text"
app:iconGravity="textStart"
app:icon="#drawable/some_icon" />
The easiest solution IMO:
yourButtonView.text = SpannableString(" ${getString(R.string.your_string)}").apply {
setSpan(
ImageSpan(requireContext(), R.drawable.your_icon),
0,
1,
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
}
Is a bit hacky? Maybe. Does it work with every button (MaterialButton, AppCompatButton, Button, etc)? It does.
I prefer this rather than going with all the hassle of creating a custom view or something like that.
After giving Google's approach a try over 9000 times, I almost always ended up using a ViewGroup to put both side by side, particularly a RelativeLayout or LinearLayout and then adding an ImageView and a TextView. It's lame, but drawableStart/End have so many missing features that you'll waste a lot of time before you realize "you can't do it".
Alignments, tinting, Vectors, etc. All those things are harder or impossible with the "built in" drawable.
Using Button attributes android:drawableLeft and android:drawablePadding you won't be able to get your expected result. You can create a custom button using RelativeLayout or LinearLayout, TextView and ImageView. Use <selector> to define your button state(normal/pressed) behavior.
Here is an working example. Try this:
<!--- Custom Button -->
<RelativeLayout
android:id="#+id/patient_list_button"
android:layout_width="match_parent"
android:layout_height="48dp"
android:clickable="true"
android:background="#drawable/custom_button_selector">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerInParent="true"
android:gravity="center_vertical">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#drawable/icon_refresh"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:textSize="16dp"
android:text="CUSTOM BUTTON"
android:textStyle="bold"
android:textColor="#FFFFFF"/>
</LinearLayout>
</RelativeLayout>
custom_button_selector.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_enabled="true"
android:drawable="#drawable/bg_custom_button_pressed" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#drawable/bg_custom_button_pressed" />
<item
android:state_enabled="true"
android:drawable="#drawable/bg_custom_button_normal" />
</selector>
bg_custom_button_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- view background color -->
<solid
android:color="#01A1DD" >
</solid>
<!-- Here is the corner radius -->
<corners android:radius="8dp" >
</corners>
</shape>
bg_custom_button_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- view background color -->
<solid
android:color="#303F9F">
</solid>
<!-- Here is the corner radius -->
<corners android:radius="8dp" >
</corners>
</shape>
OUTPUT:
Hope this will help~
a) Increase "paddingLeft" value and shrink or remove "drawablePadding" in your case, adjust the value to a proper one; for example:
android:paddingLeft="50dp"
android:gravity="center_vertical|left"
b) Use a custom view.
A bit hacky solution:
<TextView
android:id="#+id/tv_whatsapp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/tv_call"
app:layout_constraintTop_toBottomOf="#id/tv_completed_message_desc"
android:layout_width="0dp"
android:layout_height="40dp"
android:textStyle="normal"
android:layout_marginTop="#dimen/rs_dp_13"
android:layout_marginRight="#dimen/rs_dp_12"
android:background="#drawable/rs_dark_teal_rectangle_bg"
android:textSize="14sp"
android:textColor="#color/dark_teal"
**android:paddingHorizontal="38dp"**
android:includeFontPadding="false"
**android:drawableStart="#drawable/rs_user_journey_whatsapp_icon"**
**android:drawableLeft="#drawable/rs_user_journey_whatsapp_icon"**
android:visibility="visible"
android:letterSpacing="0.04"
app:layout_constraintHorizontal_chainStyle="packed"
**android:gravity="center_vertical|end"**
android:text="Whatsapp"/>
Setting horizontal padding along with gravity as center_vertical|end will achieve the required behaviour. You can increase/decrease the padding as per requirement.
I've seen this question asked some other times on the site, but no one couldn't get any answer.
Is there any way to customize the appearance of the divider in the dropdown showing when using an AutocompleteTextview in android?
It's pretty easy for a ListView, but using only an ArrayAdapter for the autocompletetextview, is there any way to customize the divider.
(Not the textview, I already know doing that)
Im not sure how you can do it for single AutoCompleteTextView but I know how to set it for the whole application. This should also help you :)
<style name="MyTheme" parent="AppTheme">
<item name="android:dropDownListViewStyle">#style/MyListViewStyle</item>
</style>
<style name="MyListViewStyle" parent="#android:style/Widget.ListView">
<item name="android:divider">#F00</item>
<item name="android:dividerHeight">1px</item>
</style>
I didnt find any divider properties so I did this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/textView129"
android:textColor="#000000"
android:background="#color/white"
android:layout_marginBottom="1dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"/>
</LinearLayout>
So wat im doing is I have a background color for the Linear layout and another background color for the text View (textView's background color overlaps the linear layout's background color) now using the margin property and setting the bottom margin of textview to 1dp u'll get a clean line between elements....
I had faced same problem and try many ways but not achieve result, at last i got a quick and easy way to set divider and divider lenght with AutocompleteTextview. Basically we can set a border from bottom side with TextView of ArrayAdapter Layout. Like as
step1. Make a layout for arrayadapetr like as
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/testt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_single_line"
android:textColor="#drawable/text_color"
android:textAppearance="?android:attr/textAppearanceMediumInverse"
style="?android:attr/dropDownItemStyle"
android:maxLines="1"
android:padding="3dp"
android:textSize="16sp" />
step2: in drawable folder create new layout its name background_single_line.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
</item>
Finally looks as divider .
The answer from Mark is normally the best solution. However different versions of the AppCompat library have different behavior, regarding how android:dropDownListViewStyle affects other menus, like the system overflow/options menu. For example, in AppCompat version 23.0.1, it will not affect this menu in the ActionBar/Toolbar; whereas version 23.2.1 it will affect it, as explained here.
If you want a style that is isolated to only affect the AutoCompleteTextView, it may not be possible. But an alternative way is to create the list divider image manually, as part of the layout of the dropdown list row:
res/layout/autocomplete_list_row.xml
<LinearLayout
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:orientation="vertical"
tools:layout_height="50dip">
<TextView
android:id="#+id/text"
style="?android:attr/dropDownItemStyle"
android:textSize="18sp"
android:layout_width="fill_parent"
tools:text="An auto-complete list item"
android:minHeight="48dip"
android:layout_height="wrap_content"
android:ellipsize="marquee"/>
<View
android:layout_width="match_parent"
android:layout_height="1dip"
android:background="#drawable/divider"/>
</LinearLayout>
res/drawable/divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="1dp" />
<solid android:color="#458c8c8c" />
</shape>
Then use this layout in your adapter for the AutoCompleteTextView:
ArrayAdapter<CharSequence> autoCompleteListAdapter =
new ArrayAdapter<>(context,
R.layout.autocomplete_list_row,
R.id.text, arrayList);
Similar approach using ConstraintLayout here.
I am trying to apply a transparent background to my row when it is pressed in my ListView. I create the file list_selector.xml like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/argb80804040" />
</selector>
and in my news_item.xml, I define the back ground as follow:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/list_selector">
<ImageView
android:id = "#+id/img"
android:layout_width="95dip"
android:layout_height="75dip"
android:layout_alignParentLeft = "true"
android:paddingTop="10dip"
android:layout_marginLeft="10dip"
android:paddingBottom="10dip"
android:src="#drawable/no_news_image_small" />
<TextView android:id="#+id/title"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_weight="1.0"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textStyle="bold"
android:paddingTop="5dip"
android:layout_marginLeft="110dip"
android:textColor="#21B6EF"
android:singleLine="true" />
<TextView android:layout_gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_weight="1.0"
android:layout_height="wrap_content"
android:layout_marginLeft="110dip"
android:textSize="10sp"
android:id="#+id/description"
android:layout_below="#id/title"
android:paddingBottom="10dip"
android:layout_marginBottom="5dip"
android:textColor="#fff"/>
</RelativeLayout>
However, it displays as solid color instead of ARGB color. My drawable is define as follow:
<resources>
<item type="drawable" name="transparent_orange">#64ff7b00</item>
<item type="drawable" name="argb80804040">#80804040</item>
<item type="drawable" name="argb40000000">#40000000</item>
<item type="drawable" name="argb80408040">#80408040</item>
</resources>
Do I need to do something else to get aplha color working? I am trying on my own device (motorola defy), and i am also using another application that uses the same alpha color and the color appears ok in this application, but in mine, it doesnt.
Many thanks for any response
T
I don't really understand what do you want to achieve but my proposal will be
Define your colors in res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="transparent_orange">#64ff7b00</color>
...
</resources>
Then you can define a drawable to be used as a background like this in res/drawable/test.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/transparent_orange" />
</shape>
Finally, you can use the resulting drawable as an attribute of the target container with
android:background="#drawable/blue_linear_gradient"