Develop Reference

How to set rounded corners for Spinner DropDown?

I need to customize spinner DropDown. It should be wits rounded corners.
Now it looks like this:
Closed
Open
This solution doesn't work.
Layout:
<androidx.appcompat.widget.AppCompatSpinner
android:id="#+id/messageSubject"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textAppearance="#style/Text.Default.Normal"
android:background="#color/transparent"
android:minHeight="#dimen/grid_6_25"
android:layout_marginTop="#dimen/grid_1_75"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/supportQuestion" />
Fragment:
class SupportFragment : Fragment(R.layout.fragment_support) {
private val viewBinding by viewBinding<FragmentSupportBinding>()
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
initView()
}
private fun initView() {
val adapter = ArrayAdapter.createFromResource(
requireContext(),
R.array.message_subject,
R.layout.spinner_selected
).also { adapter ->
adapter.setDropDownViewResource(R.layout.spinner_dropdown)
}
viewBinding.messageSubject.adapter = NothingSelectedSpinnerAdapter(requireContext(), adapter, R.layout.spinner_hint)
}
companion object {
fun newInstance() = SupportFragment()
}
}

Create a Round Background spinnerbg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#3B3B3B" />
<corners android:radius="#dimen/_4sdp" />
</shape>
Add it to Styles.
<style name="SpinnerTheme" parent="android:Widget.Material.Spinner.Underlined">
<item name="android:background">#drawable/spinnerbg
</item>
<item name="android:popupBackground">#drawable/spinnerbg
</item>
<item name="android:textAlignment">textStart</item>
</style>
Use the style
<androidx.appcompat.widget.AppCompatSpinner
android:id="#+id/spinner_season"
style="#style/SpinnerTheme"
android:layout_width="#dimen/_100sdp"
android:layout_height="#dimen/_30sdp"
android:layout_alignParentEnd="true"
android:layout_gravity="end"
android:layout_marginEnd="#dimen/_10sdp"
android:spinnerMode="dropdown" />
In the java file Add your custom layout if you need.
ArrayAdapter aa = new ArrayAdapter(context, R.layout.item_spinner, R.id.textview, season1);
aa.setDropDownViewResource(R.layout.item_spinner_dropdown);

Create a background.xml finl and set this to the spinner background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="30dp"/>
<solid
android:color="#color/colorWhite"/>
<stroke
android:color="#color/colorGray"
android:width="2dp"/>
</shape>
#color/colorWhite and #color/colorGray you can choose accordingly to your needs.
Then set it like this:
<androidx.appcompat.widget.AppCompatSpinner
android:id="#+id/messageSubject"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textAppearance="#style/Text.Default.Normal"
android:background="#drawable/background"
android:minHeight="#dimen/grid_6_25"
android:layout_marginTop="#dimen/grid_1_75"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/supportQuestion" />

Button with progress bar android

I am trying to create a custom button with progress bar inside of it in Android.
The button should have 2 states:
Normal and Loading.
In Normal state it should show a text while in Loading state it should show a centerred circular progress indicator instead of the text!
When the button state returns to "Normal" state it should show the text again.
To achieve this, I've thought about create a custom view which build from a RelativeLayout
and inside of it there is a TextView and a Circular progress indicator and change their visibility in code according to the state.
This idea and logic works pretty good.
Please refer to images of my buttons with the progress indicators:
However, the problem comes when I want to apply a selector to this view,
I've created a style and a selector for each button but it just not setting the right background to the view when its disabled.
A RelativeLayout doesn't has an enabled attribute available in its xml so I had to add a styleable attr and change its state in code with isEnabled = false or something like that.
This makes it disabled in did, but the background stays as it is enabled (The selector not working).
This is my "Button" source code:
class ProgressButton #JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : RelativeLayout(context, attrs, defStyleAttr) {
private val progressBar: LottieAnimationView
private val buttonTextView: TextView
init {
val root = LayoutInflater.from(context).inflate(R.layout.progress_button, this, true)
buttonTextView = root.findViewById(R.id.button_text)
progressBar = root.findViewById(R.id.progress_indicator)
loadAttr(attrs, defStyleAttr)
}
private fun loadAttr(attrs: AttributeSet?, defStyleAttr: Int) {
val arr = context.obtainStyledAttributes(
attrs,
R.styleable.ProgressButton,
defStyleAttr,
0
)
val buttonText = arr.getString(R.styleable.ProgressButton_text)
val loading = arr.getBoolean(R.styleable.ProgressButton_loading, false)
val enabled = arr.getBoolean(R.styleable.ProgressButton_enabled, true)
isEnabled = enabled
arr.recycle()
buttonTextView.text = buttonText
setLoading(loading)
}
fun setLoading(loading: Boolean){
if(loading){
buttonTextView.visibility = View.GONE
progressBar.visibility = View.VISIBLE
} else {
buttonTextView.visibility = View.VISIBLE
progressBar.visibility = View.GONE
}
}
}
This its layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:id="#+id/button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textAppearance="?android:attr/textAppearanceButton"
android:text="OK" />
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/progress_indicator"
android:layout_width="#dimen/progressbar_width"
android:layout_height="#dimen/progressbar_width"
android:layout_centerInParent="true"
android:visibility="gone"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_rawRes="#raw/lottile_button_loader" />
</RelativeLayout>
This a the background with selector for it:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="#dimen/components_corner_radius" />
<solid android:color="#color/button_black_bg_selector" />
</shape>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/black" android:state_enabled="true" />
<item android:color="#color/buttons_black_pressed" android:state_pressed="true" />
<item android:color="#color/buttons_black_disabled" android:state_enabled="false" />
<item android:color="#color/black" />
This is the styling and theme:
<style name="Theme.Widget.ProgressButton" parent="">
<item name="android:textAppearanceButton">#style/TextAppearance.Body.White</item>
</style>
<style name="Widget.ProgressButton.Black" parent="#style/Theme.Widget.ProgressButton">
<item name="android:colorControlHighlight">#color/buttons_black_pressed</item>
<item name="android:background">#drawable/progress_button_black</item>
</style>
And finally, this how i use it in a fragment layout xml:
<com.example.widgets.ProgressButton
android:id="#+id/button_black_loading"
android:theme="#style/Widget.ProgressButton.Black". //This is where it gets its style and theme
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginHorizontal="24dp"
android:layout_marginTop="16dp"
app:loading="true"/>
Any help will be appreciated.

Finally I've came to a pattern that seems to work with a single style line in the custom view usage xml (e.g. Fragment or Activity layout).
For each button I've defined similar styling blocks that looks like this:
<style name="Theme.Widget.Button.Black" parent="">
<item name="android:textAppearanceButton">#style/TextAppearance.BlackButton</item> //This will set the theme for the button internal TextView
<item name="android:colorControlHighlight">#color/buttons_black_pressed</item> //This will set the highlight color for ripple effect
</style>
<style name="Widget.Button.Black" parent="">
**<item name="android:theme">#style/Theme.Widget.Button.Black</item>** //Note this theme attribute which takes that above styling and applying it as a theme!!
<item name="android:background">#drawable/button_black</item> //A shape with selector drawable
</style>
The background drawable:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight"> //This comes from the theme for the ripple effect
<item android:drawable="#drawable/button_black_shape"/> //The selector
</ripple>
The background shape drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="#dimen/components_corner_radius" />
<solid android:color="#color/button_black_bg_selector" />
</shape>
The selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/black" android:state_enabled="true" />
<item android:color="#color/buttons_black_pressed" android:state_pressed="true" />
<item android:color="#color/buttons_black_disabled" android:state_enabled="false" />
<item android:color="#color/black" />
</selector>
And finally using the button in fragment XML like this:
<com.sample.widgets.ProgressButton
android:id="#+id/button_black_enabled"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginHorizontal="24dp"
android:layout_marginTop="16dp"
app:enabled="true"
app:text="OK"
style="#style/Widget.Button.Black"/> //The style brings a theme also!

After adding the selector you need to change the state of ProgressButtonI am adding essential code below which should work.
Selector should be like :-
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/black" android:state_enabled="true" />
<item android:drawable="#color/buttons_black_pressed" android:state_pressed="true" />
<item android:drawable="#color/buttons_black_disabled" android:state_enabled="false" />
and ProgressButton.kt
class ProgressButton #JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : RelativeLayout(context, attrs, defStyleAttr) {
private val progressBar: LottieAnimationView
private val buttonTextView: TextView
init {
val root = LayoutInflater.from(context).inflate(R.layout.progress_button, this, true)
buttonTextView = root.findViewById(R.id.button_text)
progressBar = root.findViewById(R.id.progress_indicator)
loadAttr(attrs, defStyleAttr)
}
private fun loadAttr(attrs: AttributeSet?, defStyleAttr: Int) {
// this line can be removed if you are setting selector in xml
setBackgroundResource(R.drawable.button_selector)
setLoading(true)
}
fun setLoading(loading: Boolean) {
if (loading) {
buttonTextView.visibility = View.GONE
progressBar.visibility = View.VISIBLE
} else {
buttonTextView.visibility = View.VISIBLE
progressBar.visibility = View.GONE
}
isEnabled = !loading
}
}

Custom AppCompatButton getting wrong colors on Android 5 (Api 21)

So I've implemented a custom button for our app, the implementation works perfect on Android 6 and up but I run into an issue on Android 5, where the background color doesn't get applied until I press the button once. Then it looks as it should.
Buttons not correct
Buttons correct
The implementation looks like this:
class MpButton #JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = R.style.ButtonStyle) : AppCompatButton(context, attrs, defStyleAttr) {
private val toScale = 0.9f
private val fromScale = 1f
init {
var style = 0
var allCaps = false
attrs?.let {
val a = context.obtainStyledAttributes(it, R.styleable.MpButton)
style = a.getInt(R.styleable.MpButton_MpButtonColor, 0)
allCaps = a.getBoolean(R.styleable.MpButton_MpButtonAllcaps, false)
a.recycle()
}
when (style) {
WHITE -> {
this.setBackgroundResource(R.drawable.mp_button_white)
this.setTextColor(ContextCompat.getColor(context, R.color.white))
}
RED -> {
this.setBackgroundResource(R.drawable.mp_button_red)
this.setTextColor(ContextCompat.getColor(context, R.color.white))
}
BLACK -> {
this.setBackgroundResource(R.drawable.mp_button_black)
this.setTextColor(ContextCompat.getColor(context, R.color.mp_black))
}
BLUE -> {
this.setBackgroundResource(R.drawable.mp_button_blue)
this.setTextColor(ContextCompat.getColor(context, R.color.white))
}
YELLOW -> {
this.setBackgroundResource(R.drawable.mp_button_yellow)
this.setTextColor(ContextCompat.getColor(context, R.color.white))
}
else -> {
this.setBackgroundResource(R.drawable.mp_button_green)
this.setTextColor(ContextCompat.getColor(context, R.color.white))
}
}
this.gravity = Gravity.CENTER
val padding = Utils.convertDpToPixel(context, 5)
this.setPadding(padding, padding, padding, padding)
this.isAllCaps = allCaps
}
override fun dispatchTouchEvent(event: MotionEvent): Boolean {
when(event.action) {
MotionEvent.ACTION_DOWN -> {
this.animate().scaleX(toScale).scaleY(toScale).setDuration(100).start()
}
MotionEvent.ACTION_UP -> {
this.animate().scaleX(fromScale).scaleY(fromScale).setDuration(100).start()
}
}
return super.dispatchTouchEvent(event)
}
companion object {
const val WHITE = 1
const val RED = 2
const val BLACK = 3
const val BLUE = 4
const val YELLOW = 5
}
}
For info Ill also add the XML for one of the colors:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/mp_black">
<item>
<selector
android:exitFadeDuration="#android:integer/config_mediumAnimTime"
android:enterFadeDuration="#android:integer/config_shortAnimTime">
<item android:state_enabled="true" android:state_pressed="false">
<shape android:shape="rectangle">
<corners android:radius="30dp"/>
<solid android:color="#color/jungle_green" />
</shape>
</item>
<item android:state_enabled="true" android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="30dp"/>
<solid android:color="#color/forest" />
</shape>
</item>
<item android:state_enabled="false">
<shape android:shape="rectangle">
<corners android:radius="30dp"/>
<solid android:color="#color/mp_gray_5" />
</shape>
</item>
</selector>
</item>
</ripple>
As a last ill copy the part of the XML of the view aswell to give as much info as possible:
<se.motesplatsen.app.ui.controls.MpButton
android:id="#+id/btnStartLogin"
android:layout_width="220dp"
android:layout_height="44dp"
android:text="#string/DEFAULT_LOGIN"
android:layout_marginBottom="10dp"
android:layout_marginTop="20dp"
app:MpButtonAllcaps="true"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/btnStartBecomeMember"/>
<se.motesplatsen.app.ui.controls.MpButton
android:id="#+id/btnStartBecomeMember"
android:layout_width="220dp"
android:layout_height="44dp"
android:layout_marginTop="25dp"
android:text="#string/BECOME_MEMBER_BUTTON"
app:MpButtonColor="1"
app:MpButtonAllcaps="true"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintTop_toBottomOf="#id/tvStartDesc"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#id/btnStartLogin"/>
UPDATE & SOLUTION!:
Finally got this to work! Solution was to remove
android:exitFadeDuration="#android:integer/config_mediumAnimTime"
android:enterFadeDuration="#android:integer/config_shortAnimTime"
Im guessing it somehow interferes with the ripple animation on certain Android versions. So for anyone else that have my issue, check so you dont have Ripple togheter with fadeduration in the selector :)!

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape >
<solid android:color="#android:color/white"/>
<size android:height="1dp"/>
</shape>
</item>
<item android:bottom="2dip" android:top="2dip" android:left="2dip" android:right="2dip">
<shape>
<solid android:color="#android:color/Transparent"/>
</shape>
</item>
this is exactly look like your correct button

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="5dp"
/>
<solid
android:color="#color/Transparent"
/>
just use this as background you are using on pressed state in your file

Android Anko seekbar skinning

I have a SeekBar in my anko dsl (i use 0.10.4) layout like this
seekBar {
max = 2
progress = 1
progressDrawable = drawable(R.drawable.seek_bar_progress)
thumb = drawable(R.drawable.seek_bar_thumb)
onSeekBarChangeListener {
onProgressChanged { _, progress, _ ->
// Something
}
}
}.lparams(matchParent) {
setMargins(dip(16), dip(8), dip(16), dip(8))
}
seek_bar_progress.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#D9D9D9"/>
</shape>
</item>
<item android:id="#android:id/progress">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorRed"/>
</shape>
</item>
seek_bar_thumb.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="oval">
<solid android:color="#color/colorRed"/>
<size android:height="26dp" android:width="26dp"/>
</shape>
</item>
and i have ugly view with this settings on any android devices
see picture.
But when i use "include" tag i have a correct seekbar implementation see picture
include<SeekBar>(R.layout.seek_lay) {
progress = 1
onSeekBarChangeListener {
onProgressChanged { _, progress, _ ->
// Something
}
}
}.lparams(matchParent) {
setMargins(dip(16), dip(8), dip(16), dip(8))
}
seek_lay.xml
<SeekBar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:max="2"
android:maxHeight="2dp"
android:minHeight="2dp"
android:progress="1"
android:progressDrawable="#drawable/seek_bar_progress"
android:thumb="#drawable/seek_bar_thumb"
/>
does anybody faces with the same problem? And how i can resolve this if it's possible?
Thanks

I face the same problem today.. And I search for hours to solve this problem too, but I could not find any 'normally' solution at all.
Finally I change the field mMaxHeight with java reflection to achieve the result.
Just notice that mMaxHeight belong to ProgressBar.class, so you need to use ProgressBar.class to find it.
val field = ProgressBar::class.java.getDeclaredField("mMaxHeight")
val accessible = field.isAccessible
field.isAccessible = true
field.setInt(seekBar, [value])
field.isAccessible = accessible
Result
I dont know it is a good or bad way, it just can work for me.

I lost the ProgressBar moving my layout to a custom component

I have a "complex" layout that I want to "move" to a custom component to be able to re-utilize easily but when I do that ProgressBar disappears. I think that the cause could be that the ProgressBar has a custom progressDrawable.
During code execution, progress bar is accessible and visible (well I can't see it, but I check that the visibility property is not the problem...) and there are no errors.
My Custom Layout
...
</LinearLayout>
</LinearLayout>
<!-- Progressbar -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="match_parent"
>
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="5dp"
android:id="#+id/progressBar"
android:progressDrawable="#drawable/customprogressbar"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>
</LinearLayout>
My Custom Layout class
public class CustomLayout extends LinearLayout {
public CustomLayout(Context context) {
super(context);
}
public CustomLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.custom_layout, this, true);
}
}
My progressDrawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape>
<gradient
android:startColor="#000001"
android:centerColor="#0b131e"
android:centerY="1.0"
android:endColor="#0d1522"
android:angle="270"
/>
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#007A00"
android:centerColor="#007A00"
android:centerY="1.0"
android:endColor="#06101d"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
My Container Layout Main Activity
<?xml version="1.0" encoding="utf-8"?>
<my.custom.namespace xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent">
</my.custom.namespace>
My Main Activity
...
setContentView(R.layout.main_activity);
...
mProgressBar = (ProgressBar) findViewById(R.id.progressBar);
// Progress bar is get fine, and I checked that visibility is VISIBLE
// I didn't change a line of code of this after moving the layout to a custom control
String showProgressbar = sharedPrefs.getString("settings_progressbar_value", Constants.PROGRESSBAR_VISIBLE_BY_DEFAULT);
if (showProgressbar.equals(Constants.PROGRESSBAR_VISIBLE_BY_DEFAULT)) {
mProgressBar.setVisibility(View.VISIBLE);
} else {
mProgressBar.setVisibility(View.GONE);
}