Develop Reference

(Android) White piano key overlap black key when clicked

I made piano keyboard with ConstraintLayout and it looks good until i press white key. It overlap black key and turn back if press black key. The onClick works as expected, the keys play their own sounds. How to solve the problem? Tried android:translationZ, android:elevation - no effect. Maybe i need to change ui button reaction on click? But i don't know how to. And one more newbie question: Can i do buttons with no <Button> tag, maybe <View> etc.?
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient"
tools:context=".PianoKeyboard">
<!-- Guidelines -->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/activity_piano_leftKeysguideline"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.15" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/activity_piano_blackKeysguideline"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.42" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/activity_piano_topKeysguideline"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/activity_piano_botKeysguideline"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8" />
<!-- Piano white keys -->
<Button
android:id="#+id/activity_piano_c2_button"
android:onClick="onClickC2"
style="#style/white_keys"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/activity_piano_d2_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/activity_piano_leftKeysguideline"
app:layout_constraintTop_toTopOf="#id/activity_piano_topKeysguideline"
app:layout_constraintVertical_chainStyle="packed" />
<Button
android:id="#+id/activity_piano_d2_button"
android:onClick="onClickD2"
style="#style/white_keys"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/activity_piano_e2_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/activity_piano_leftKeysguideline"
app:layout_constraintTop_toBottomOf="#id/activity_piano_c2_button" />
<Button
android:id="#+id/activity_piano_e2_button"
android:onClick="onClickE2"
style="#style/white_keys"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/activity_piano_botKeysguideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/activity_piano_leftKeysguideline"
app:layout_constraintTop_toBottomOf="#id/activity_piano_d2_button" />
<!-- Piano black keys -->
<Button
android:id="#+id/activity_piano_c2d_button"
style="#style/black_keys"
android:layout_width="0dp"
android:layout_height="0dp"
android:onClick="onClickC2D"
android:soundEffectsEnabled="false"
app:layout_constraintBottom_toTopOf="#id/activity_piano_d2_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/activity_piano_blackKeysguideline"
app:layout_constraintTop_toBottomOf="#id/activity_piano_c2_button"
app:layout_constraintVertical_chainStyle="packed" />
<Button
android:id="#+id/activity_piano_d2d_button"
android:onClick="onClickD2D"
style="#style/black_keys"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/activity_piano_e2_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/activity_piano_blackKeysguideline"
app:layout_constraintTop_toBottomOf="#id/activity_piano_d2_button" />
</androidx.constraintlayout.widget.ConstraintLayout>
<style name="white_keys" parent="">
<item name="android:insetBottom">2dp</item>
<item name="android:insetTop">2dp</item>
<item name="backgroundTint">#color/white_keys</item>
</style>
<style name="black_keys" parent="">
<item name="android:insetBottom">2dp</item>
<item name="android:insetTop">2dp</item>
<item name="backgroundTint">#color/black_keys</item>
<item name="layout_constraintHeight_percent">0.06</item>
</style>

Weird behaviour of elevation and translucent color

Here's my view:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_rounded"
android:backgroundTint="#color/view_primary_color"
android:elevation="4dp"
android:foregroundTint="#android:color/white">
<com.google.android.material.textview.MaterialTextView
android:id="#+id/tvTitle"
style="#style/Header4.Semibold16.White"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:gravity="center"
android:text="Add to cart"
android:textAllCaps="false"
app:tint="#android:color/white"
tools:ignore="ContentDescription" />
<ProgressBar
android:id="#+id/pbLoading"
style="?android:attr/progressBarStyleSmall"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
And here's #color/view_primary_color
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorPrimary" android:state_enabled="true" />
<item android:color="#color/colorPrimaryDisabled" android:state_enabled="false" />
</selector>
When view's state is enabled it's color is colorPrimary.
When state is disabled view's color is colorPrimaryDisabled which is almost the same as colorPrimary but only with 20% of alpha.
Here's how my view looks like is idle (enabled) state.
But when I click on the view it became like this.
View supposed to just change it's color to slightly translucent, but for some reason there's some shadow inside it.
If I use non-translucent color everything is ok. Or if I remove elevation from the view everything is ok as well.
Feels like this is some kind of bug. Do you have any idea what is this?
Thanks!

using MaterialButton instead of textView like this
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_add_to_card"
android:layout_width="120dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:layout_marginTop="24dp"
android:layout_marginBottom="16dp"
android:elevation="0dp"
android:enabled="false"
android:fontFamily="#font/sans_normal"
android:gravity="center"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
android:minWidth="0dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:stateListAnimator="#null"
android:text="#string/addToCard"
android:textColor="#color/white"
android:textSize="16sp"
android:translationZ="0dp"
app:backgroundTint="#color/btn_primary_state"
app:cornerRadius="24dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/scrollview_edittext" />
background tint:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:color="#color/green_button" />
<item
android:state_enabled="false"
android:color="#color/gray_button"
/>
</selector>

CardView corners show white pixels?

I'm trying to create a custom "Warning" dialog, which I want to have rounded corners in it. So I've put my whole layout into a CardView and I'm setting my dialog's layout as this layout.
However, on dark backgrounds, such as the default Android dialog background, I seem to be getting white pixels at the corners of my dialog.
I've already tried what is proposed here, setting app:cardBackgroundColor="#color/transparent", but it didn't make a difference.
The layout of my dialog is the following (its a different one form the screenshots but the buttons, bakcground and the CardView are the same):
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/error_cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/error_dialog_margin"
android:layout_marginEnd="#dimen/error_dialog_margin"
app:cardCornerRadius="#dimen/error_dialog_corner_radius"
app:cardElevation="#dimen/error_dialog_elevation"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/error_icon"
style="#style/ErrorViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_outer_margin"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/error_icon"
android:tint="#color/redColor" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/error_title"
style="#style/ErrorViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_outer_margin"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginEnd="#dimen/default_outer_margin"
android:ellipsize="end"
android:gravity="center_horizontal"
android:maxLines="2"
android:text="#string/something_went_wrong" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/error_message"
style="#style/ErrorViewMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_outer_margin"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginEnd="#dimen/default_outer_margin"
android:gravity="center"
android:minHeight="55dp"
tools:text="#string/try_again_later" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_margin"
android:background="#color/blueColor">
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/error_ok_button"
style="#style/PrimaryButton"
android:layout_width="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:text="#string/ok_button" />
</FrameLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
Please check the screenshots of the issue:
Any idea why this happens and how to fix it? It seems to be related to the cardview's background, since setting all backgrounds to transparent fixes the issue, But I need the dialog background to be white.

For me setting
app:cardBackgroundColor="#color/transparent"
in the CardView fixed it

Instead of using a CardView for rounding the dialog corners declare a new style in your styles.xml.
This style should have ThemeOverlay.MaterialComponents.Dialog.Alert as a parent.
The property you need to set is shapeAppearanceMediumComponent:
<style name="style_dialog" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
<item name="shapeAppearanceMediumComponent">#style/style_dialog_background</item>
</style>
<style name="style_dialog_background" parent="ShapeAppearance.MaterialComponents.MediumComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">#dimen/error_dialog_corner_radius</item>
</style>
Edit your dialog layout and remove the CardView parent:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/error_icon"
style="#style/ErrorViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_outer_margin"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/error_icon"
android:tint="#color/redColor" />
...
</LinearLayout>
Finally, create your dialog like this:
MaterialAlertDialogBuilder(activity, R.style.style_dialog)
.setView(<your-dialog-layout>)
...
.create().apply {
show()
}

Try using material card layout
com.google.android.material:material:1.2.1
<com.google.android.material.card.MaterialCardView
android:layout_width="180dp"
android:layout_margin="4dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:foreground="?attr/selectableItemBackground"
android:padding="8dp"
app:cardCornerRadius="6dp"
app:cardElevation="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/border"
>

Android how to set background color on a Button

I am trying to change the background color of a Button. I'm in Kotlin on SDK 21 on emulator.
A View and a Button are declared in the layout XML file
<View
android:id="#+id/myview"
android:layout_width="64dp"
android:layout_height="32dp"
/>
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12dp"
android:text="test"
/>
The API to set the color doesn't seem to work:
showButton.setBackgroundColor(0xff60a0e0.toInt()) <-- doesnt work
What works is:
myview.setBackgroundColor(0xff60a0e0.toInt()) <-- works, exact background color
showButton.setTextColor(0xff000050.toInt()) <-- works, exact text color
After trying further it seems that I can only set the alpha channel of the button, not the color:
setBackgroundColor( 0xff000000.toInt()) <-- works, opaque
setBackgroundColor( 0x00000000.toInt()) <-- works, transparent
Also same thing with:
showButton.setBackgroundColor(Color.GREEN) <-- doesnt work, button is opaque but not green
showButton.setBackgroundColor(Color.TRANSPARENT) <-- works, button is transparent
Any idea? Did I miss something in the other answers or the documentation?
Here is complete layout, it used to inflate a fragment, if that matters:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:id="#+id/myview"
android:layout_width="64dp"
android:layout_height="32dp"
/>
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12dp"
android:text="test"
/>
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/dictionaryEntryRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layoutManager="LinearLayoutManager"
/>
</LinearLayout>

mButton.setBackgroundColor(ContextCompat.getColor(mContext, R.color.xxx));

Since you are using a Theme.MaterialComponents.Light.DarkActionBar theme, check the doc and just use the MaterialButton with app:backgroundTint attribute:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/color_selector"
android:textColor="#FFF"
android:text="BUTTON"
/>
where color_selector can be a color or a selector. Something like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/..." android:state_enabled="true"/>
<item android:alpha="0.12" android:color="#color/..."/>
</selector>

You can change the colour two ways; through XML or through coding. I would recommend XML since it's easier to follow for beginners.
xml
add this attribute to set background color android:background="#000"
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fgkdjgdjsf"
android:background="#000"
/>
Coding:
showButton.setBackgroundColor(resources.getColor(R.color.colorPrimary))
showButton.setBackgroundColor(Color.BLACK)

In your layout, you are using
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12dp"
android:text="test"
/>
if you want to set textSize in Button, you should use
android:textSize="12dp"
and for background set in button your layout should be like :-
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp"
android:text="test"
android:background="#ff60a0e0"/>
OR You can also set color in colors.xml as :-
<color name="button_background">#ff60a0e0</color>
and then your button tag in your layout will be as
<Button
android:id="#+id/showButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12dp"
android:text="test"
android:background="#color/button_background"/>
Dynamic you can set color as
showButton.setBackgroundColor(ContextCompat.getColor(context!!, R.color.button_background))

now in kotlin(androidx) you can use this,
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/buttonExploreAll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAllCaps="false"
android:background="#drawable/select_yellow"
android:text="button"
android:textColor="#color/white"
/>
and select_yellow is your style xml.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:color="#color/colorYellow"
android:width="#dimen/_1sdp"/>
<corners
android:radius="#dimen/_200sdp" />
<solid android:color="#color/colorYellow" />
</shape>

I used the "backgroundTint" to change the color, which did not allow the color to change after clicking. The problem was solved when I changed the color by "background" the button.

Custom dialog becomes the size of the first control in android

I have the following layout for my custom log in dialog
<?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:padding="#dimen/padding_large">
<ImageButton android:src="#drawable/ic_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/dialog.login.settings"
android:padding="#dimen/margin_medium" />
<TextView android:text="#string/dialog.login.text.user_name"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText android:id="#+id/dialog.login.user_name"
android:layout_width="match_parent"
android:gravity="center"
android:ems="20"
android:layout_height="wrap_content"
android:inputType="text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView android:text="#string/dialog.login.text.password"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText android:id="#+id/dialog.login.password"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:textAppearance="?android:attr/textAppearanceMedium" />
<CheckBox android:id="#+id/dialog.login.show_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/dialog.login.check.show_password"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_margin="#dimen/margin_medium"
android:checked="false" />
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button android:id="#+id/dialog.login.cancel"
android:drawableStart="#drawable/ic_exit_black"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_medium"
android:text="#string/dialog.login.button.cancel" />
<Button android:id="#+id/dialog.login.connect"
android:text="#string/dialog.login.button.connect"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_marginStart="#dimen/margin_medium"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
when I create the dialog and setcontentview the width of the dialog becomes equal to that of the image button on the first row
if I remove that , it becomes the size of the EditText (dialog.login.user_name) whose ems is 20
when I make the dialog's constructor call the base dialog constructor with a theme of R.style.Theme.Material.Dialog it does get the correct (about 3/4 of the screen) but the problem is that it ignores my primary and accent colours (which is normal)
Is there a way to have the dialog have the Theme.Material.Dialog size but still keep my own primary/accent colours?
thanks in advance for any help you can provide

After a lot of searching it seems that the solution is to actually replace the dialogTheme attribute of my main theme, so the solution was:
<style name="app.theme"
parent="android:Theme.Material.Light.NoActionBar.Fullscreen">
<item name="android:dialogTheme">#style/app.dialog</item>
......
</style>
<style name="app.dialog"
parent="android:Theme.Material.Light.Dialog">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary.dark</item>
<item name="android:colorAccent">#color/accent</item>
</style>