I need the EditText to look like so:
I have a color for the bottom line.
I did not work with UI for a long time and I don't remember how to do it.
Does anybody know?
Thanks!
You can use below drawable resource as background for EditText:
<?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/transparent" /> <!--background color of box-->
</shape>
</item>
<item
android:top="-2dp"
android:right="-2dp"
android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#color/bg_color" /> <!-- color of stroke -->
</shape>
</item>
</layer-list>
In design support library a new element called TextInputLayout was introduced to display the floating label on EditText.
TextInputLayout takes the value of android:hint assigned to EditText and displays it as floating label.
To display it like you want, try this way :
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/yourThemeWithYourColor">
<EditText
android:id="#+id/input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email" />
</android.support.design.widget.TextInputLayout>
Following method works for me ( I found this method by looking at Telegram source code ) :
1-Create selector like following :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_focused="true" android:drawable="#drawable/search_dark_activated" />
<item android:state_focused="true" android:drawable="#drawable/search_dark_activated" />
<item android:drawable="#drawable/search_dark" />
</selector>
And here is nine patch drawables :
Related
I am trying to have two text views inside a Linear Layout with a horizontal orientation. Now I want to have the following things for each text view:
An icon at left - implemented using android:drawableLeft="#drawable/ic_lightbulb_outline_blue_24dp"
A round border around the text view - implemented using android:background="#drawable/round_border"
Also, need that ripple effect on touching a touch item
The 3rd point is implemented in other text views using the att.
android:background="?selectableItemBackground"
android:clickable="true"
But there is already a background att. for the round border. Now my question is how to achieve that ripple effect? Is using following att. only way:
android:foreground="?selectableItemBackground"
Android shows this att. is not supported in lower api versions so worried.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/vision_mission"
android:gravity="center"
android:layout_margin="8dp"
android:padding="8dp"
android:textSize="16sp"
android:onClick="openVisionMission"
android:drawableLeft="#drawable/ic_lightbulb_outline_blue_24dp"
android:background="#drawable/round_border"
android:clickable="true"
android:focusable="true"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/team"
android:textSize="16sp"
android:drawableLeft="#drawable/ic_people_blue_24dp"
android:background="#drawable/round_border"
android:clickable="true"
android:focusable="true"
android:padding="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:gravity="center"/>
</LinearLayout>
You can achieve ripple effect and text view rounded background at the same time using the following code.
Custom ripple drawable, it require API level 21+
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/grey">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<stroke
android:width="1dp"
android:color="#android:color/holo_blue_dark" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<stroke
android:width="1dp"
android:color="#android:color/holo_blue_dark" />
</shape>
</item>
</ripple>
After that set background of your text view
android:background="#drawable/custom_ripple"
For pre lollypop ie. below API level 21
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<solid android:color="#color/colorDarkGray"/>
</shape>
</item>
<item android:state_pressed="false">
<shape android:shape="rectangle">
<solid android:color="#color/colorButtonGreen"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/colorButtonGreenFocused"/>
</shape>
</item>
</selector>
It is not exactly what you are looking for.
You can achieve easily something similar with a MaterialButton with a OutlinedButton style.
Something like:
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
app:icon="#drawable/ic_add_24px"
android:text="...."
.../>
You can customize the padding between the icon and the text, the textColor, the strokeWidth, the strokeColor and also the color selector used for the app:rippleColor
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
app:icon="#drawable/ic_add_24px"
app:strokeColor="#color/primaryDarkColor"
app:strokeWidth="2dp"
app:iconPadding="16dp"
.../>
you can change your background drawable with selector tag
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="#drawable/button_focused" /> <!-- hovered -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
I create custom radio button use this code:
layout.xml
<RadioButton
android:id="#+id/radio0"
android:layout_width="24dp"
android:layout_height="24dp"
android:background="#drawable/control_radio_button"
android:button="#android:color/transparent"
android:checked="false" />
#drawable/control_radio_button
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/control_radio_bg_false" android:state_checked="true" android:state_pressed="true" />
<item android:drawable="#drawable/control_radio_bg_true" android:state_pressed="true" />
<item android:drawable="#drawable/control_radio_bg_true" android:state_checked="true" />
<item android:drawable="#drawable/control_radio_bg_false" />
</selector>
#drawable/control_radio_bg_true
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="999dp" />
<stroke
android:width="2dip"
android:color="#E0E0E0" />
<solid android:color="#f44336" />
</shape>
#drawable/control_radio_bg_true
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="999dp" />
<stroke
android:width="6dp"
android:color="#bfbfbf" />
<solid android:color="#f44336" />
</shape>
can i change background of #drawable/control_radio_bg_false and #drawable/control_radio_bg_true programmatically.
I want create list of my custom radio button with different color with an adapter(in recyclerview).
how can i do that ?
You could try something like the following:
(radio0.background as? ShapeDrawable)?.apply {
paint.color = ContextCompat.getColor(context, R.color.new_color)
}
You would need to handle states by yourself, but this should cover you.
I did a lot of research for kotlin code and found this. Adding this here so that if someone else comes looking specifically for kotlin.
After adding your drawable shape as your view's background add the following code in respective activity.
YourViewID.background.setColorFilter(Color.parseColor("#00000"),PorterDuff.Mode.SRC_OVER)
I'm developing an app for RTL language and want to change the position of arrow to the left of Spinner !
Is there anyway to do this without creating a custom spinner ?
You must write a custom spinner.
Sample code is below. You can edit as you wish.
<Spinner
style="#style/spinner_style"
android:layout_width="match_parent"
android:layout_height="wrap content"
/>
#style/spinner_style:
<style name="spinner_style">
<item name="android:background">#drawable/background_spinner</item>
</style>
#drawable/background_spinner
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<solid android:color="#android:color/white" />
<corners android:radius="4dp" />
<padding android:left="8dp"/>
</shape></item>
<item><bitmap android:gravity="left"
android:src="#drawable/ic_arrow_drop_down_grey600_36dp"/>
</item>
</layer-list></item>
</selector>
An easy and simple way to set arrow in left side is,You must create .xml file in drawable folder for that as written below:
<?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="#color/colorWhite" />
</shape>
</item>
<item
android:drawable="#drawable/ic_arrow_drop_down_black_24dp"
android:right="320dp"/>
</layer-list>
You can adjust above code as your need.
And set this file as background of a spinner widget as below:
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/layout_spinner"
android:background="#drawable/arrow_left"
android:elevation="5dp"/>
This worked in my case. I have English and Arabic languages in my app
<Spinner
android:textDirection="locale"
android:id="#+id/spnGender"
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/array_gender"/>
This attribute is important.
android:textDirection="locale"
NOTE : I have used the default spinner without any customizations.
Create a .xml in drawable folder : #drawable/spinner_arrow.xml
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90" android:endColor="#ffffff" android:startColor="#ffffff" android:type="linear" />
<stroke android:width="1dp" android:color="#ECF0F1" />
<corners android:radius="5dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item android:width="24dp" android:height="24dp" android:gravity="end|center_vertical" android:drawable="#drawable/ic_keyboard_arrow_down_black_24dp" />
</layer-list>
</item>
- Then add it to the styles.xml
<style name="spinner_style">
<item name="android:background">#drawable/spinner_arrow</item>
</style>
then add it to the spinner
style="#style/spinner_style"
dummy.xml (drawable should be of very low size-24dp)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list android:opacity="transparent">
<item android:width="100dp" android:end="300dp">
<bitmap android:src="#drawable/down_button_dummy_dummy" android:gravity="center"/>
</item>
</layer-list>
</item>
</selector>
layout file snippet
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
app:cardElevation="5dp"
>
<Spinner
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/dummy">
</Spinner>
</android.support.v7.widget.CardView>
Click here for rendered layout
What about this ?
First of all make sure that you enabled rtl support in AndroidManifest.xml
<application
...
android:supportsRtl="true"
...>
after that use this in your Spinner definition :
android:layoutDirection="rtl"
android:textDirection="rtl"
The easiest way: set in Spinner 'layoutDirection'= 'rtl'
I have 3 TextViews stacked vertically in a LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:textSize="#dimen/text_size_large"
android:text="Item1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:textSize="#dimen/text_size_large"
android:text="Item2"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:textSize="#dimen/text_size_large"
android:text="Item3"/>
</LinearLayout>
I could apply a drawable to the background attribute to render a Border
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#color/pale_grey" />
<padding android:left="24dp" android:right="24dp"
android:top="12dp" android:bottom="12dp" />
</shape>
</item>
</layer-list>
I could also apply a selector, via a drawable, to the background property so that the TextView changed color depending on states such as Pressed. However there is only one background attribute.
I do not believe i can apply the <shape> xml and the <selector> xml within the same drawable. Therefore do I need to wrap a single layout element around each TextView just so can apply another background?
It looks like google solves this by encompassing border, padding and background colour into one drawable patch-9 image. I was hoping I didn't need to do that
Thanks
In the selector set the state pressed and unpressed with your XML's that render the border
Example:
<selector xlmns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/border_unpressed" android:state_pressed="false"/>
<item android:drawable="#drawable/border_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/border_unpressed" />
</selector>
Note:
Make sure to set the TextView attribute android:clickable="true"
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="4dp">
</corners>
<stroke android:width="1dp" android:color="#ffffff"/>
<gradient
android:startColor="#187cb6"
android:endColor="#187cb6"
android:angle="270"/>
</shape>
</item>
<item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/gradient" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/gradient" />
</selector>
</item>
</layer-list>
I have two questions:
1) how do I change the color of the seek bar (path) from yellow (the default color) to white. What I mean to say is, while I slide the thumb , it turns the line traversed from grey to yellow. I want track/line to either remain grey or white..Basically I want just the thumb to move with no color change in the seek bar.
2)
How to change the thumb of seekbar from rectangle to circle/sphere/round shape.
any pointers will be appreciated.
I want to complete the answer from above for the people who are new to the system,
the missing xmls ( background_fill , progress_fill and progress could look like that for a gradient red
progress.xml
<?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/background_fill" />
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/progress_fill" />
</item>
</layer-list>
background_fill.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#FF555555"
android:centerColor="#FF555555"
android:endColor="#FF555555"
android:angle="90" />
<corners android:radius="5px" />
<stroke
android:width="2dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
progress_fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#FF470000"
android:centerColor="#FFB80000"
android:endColor="#FFFF4400"
android:angle="180" />
<corners android:radius="5px" />
<stroke
android:width="2dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
i did not complete the implementing for android:thumb, so the thumb will be still the original one
Therefore we just have to delete this line again from our layout xml where we define the seekbar
android:thumb="#drawable/thumb"
You should set SeekBar XML properties:
<SeekBar
....
android:progressDrawable="#drawable/progress"
android:thumb="#drawable/thumb"
....
/>
Where progress is something like this:
<?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/background_fill" />
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/progress_fill" />
</item>
</layer-list>
and thumb is
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/thumb_fill" />
</selector>
Since SeekBar uses colorAccent by default, you can create a new style with your custom color as colorAccent then use theme attribute to apply it to the SeekBar.
<SeekBar>
.
.
android:theme="#style/MySeekBarTheme"
.
</SeekBar>
in the #style:
<style name="MySeekBarTheme" parent="Widget.AppCompat.SeekBar" >
<item name="colorAccent">#ffff00</item>
</style>
seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
You can just add tint from API level 21.
Add these properties to seekbar element:
android:progressTint="#android:color/white"
android:thumbTint="#android:color/white"
Final result:
<SeekBar
android:id="#+id/is"
android:layout_width="match_parent"
android:max="100"
android:progressTint="#android:color/white"
android:thumbTint="#android:color/white"/>
1. Create a drawable XML:
Name it : progress_drawable
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="1dp" android:color="#fff"/>
</shape>
2. Assign it to Seekbar
<SeekBar
android:id="#+id/slider_1"
android:progressDrawable="#drawable/progress_drawable"
android:layout_width="180dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:rotation="270" />
Just change the accent color of your style
<style name="TickMarkSeekBar" parent="Theme.KefTheme">
<item name="tickMark">#drawable/tickmark</item>
<item name="thumbTint">#android:color/white</item>
<item name="colorAccent">#android:color/white</item>
</style>