I am working in Neumorphism based designs in my project. I am using this library https://github.com/fornewid/neumorphism for Neumorphism effect. My issue is I can't able to change the background of the button or any other views.
This is my layout file
activity_neumorphism.xml
<?xml version="1.0" encoding="utf-8"?>
<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/screen_background_gradient"
tools:context=".NeumorphismActivity">
<soup.neumorphism.NeumorphButton
android:id="#+id/button"
style="#style/Widget.Neumorph.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="36dp"
android:drawablePadding="8dp"
android:background="#drawable/res_transparent_yellow_roundedfilled_corner"
android:text="Button"
android:textColor="#FFFFFF"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/normal_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
android:layout_marginTop="50dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/res_transparent_yellow_roundedfilled_corner"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/normal_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="THIS IS NORMAL BUTTON"
android:textColor="#FFFFFF"
android:layout_marginTop="30dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="THIS IS Neumorphism effect BUTTON"
android:textColor="#FFFFFF"
android:layout_marginTop="30dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I have two buttons in this xml. One is normal button and another is neumorphism. I have set background for both but it's only applies for normal button.
Below given is drawable file for background
res_transparent_yellow_roundedfilled_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shape="rectangle">
<corners
android:radius="10dp"
/>
<gradient
android:startColor="#C8A800"
android:endColor="#FFD80A"/>
</shape>
Below given is styles.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Widget.Neumorph.Button" parent="Widget.AppCompat.Button">
<item name="android:textAppearance">?android:attr/textAppearanceButton</item>
<item name="android:minHeight">72dip</item>
<item name="android:minWidth">112dip</item>
<item name="android:background">#drawable/res_transparent_yellow_roundedfilled_corner</item>
<item name="android:paddingLeft">#dimen/design_btn_padding_left</item>
<item name="android:paddingRight">#dimen/design_btn_padding_right</item>
<item name="android:paddingTop">#dimen/design_btn_padding_top</item>
<item name="android:paddingBottom">#dimen/design_btn_padding_bottom</item>
<item name="android:stateListAnimator">#animator/button_state_list_anim_neumorph</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
<item name="neumorph_inset">#dimen/design_default_inset</item>
<item name="neumorph_shadowElevation">6dp</item>
<item name="neumorph_shadowColorLight">#FFFFFF</item>
<item name="neumorph_shadowColorDark">#000000</item>
<item name="neumorph_shapeType">flat</item>
<item name="neumorph_shapeAppearance">#style/ShapeAppearance.Neumorph.Button</item>
</style>
<style name="ShapeAppearance.Neumorph.Button" parent="">
<item name="background"> #drawable/res_transparent_yellow_roundedfilled_corner</item>
</style>
</resources>
use this property to change background app:neumorph_backgroundColor="#color/background_color" in your xml
if not working, there is one method inside NeumorphButton is setBackgroundDrawable. you can set drawable programmatically
Edit
you can't set the custom background in this lib because it says
Setting a custom background is not supported.
Related
I'm trying to create a button that looks like that:
So I have created this style:
<style name="button_main" parent="#android:style/Widget.Button">
<item name="android:gravity">center_vertical|center_horizontal</item>
<item name="android:textColor">#FFFFFFFF</item>
<item name="android:shadowColor">#FF000000</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">-1</item>
<item name="android:shadowRadius">0.2</item>
<item name="android:textSize">16dip</item>
<item name="android:textStyle">bold</item>
<item name="android:background">#drawable/button_main</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
</style>
and applied this to the button:
<Button
android:id="#+id/btnConnect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CONNECT"
style="#style/button_main"
android:drawableTop="#drawable/ic_connect"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text_home" />
but this is my result:
any idea how I can add the green background to the text as well? and how can I add the white tint to the icon?
how can I add the white tint to the icon?
app:drawableTint="#color/white"
Edit:
Create separate TextView inside root layout below to button
Try This:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#color/green">
<Button
android:id="#+id/btnConnect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/button_main"
android:drawableTop="#drawable/ic_wifi_24"
app:drawableTint="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_margin="#dimen/margin_12dp"
app:layout_constraintTop_toBottomOf="#+id/text_home" />
<TextView
android:id="#+id/tvConnect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
app:layout_constraintTop_toBottomOf="#id/btnConnect"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="Connect"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Above code will give expected result might be you have to adjust padding n margin lil bit .
I use material. I'm going to use a color for TextInputLayout for the backdrop, but something like the one below! hint background not change.i used style and wanted to make changes but it didn't work. In the layout itself I tried to apply the changes again! How to fix this problem?
NOTE
background of label username in picture that not transparent and it covers some of the TextInputEditText
in build.gradle
implementation 'com.google.android.material:material:1.1.0'
in style
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.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="textAppearanceSubtitle1">#style/TextAppearance.App.Subtitle1</item>
<item name="textAppearanceCaption">#style/TextAppearance.App.Caption</item>
<item name="shapeAppearanceSmallComponent">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar"/>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light"/>
<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
<item name="colorControlActivated">#color/white</item>
<item name="android:colorControlActivated">#color/white</item>
</style>
<style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
<item name="android:textColorTertiary">#color/white</item>
<item name="android:textColorTertiaryInverse">#color/white</item>
<item name="colorControlActivated">#color/white</item>
<item name="android:colorControlActivated">#color/white</item>
</style>
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">16dp</item>
<item name="colorControlActivated">#color/white</item>
<item name="android:colorControlActivated">#color/white</item>
</style>
in layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:background="#color/gray"
android:gravity="center"
android:orientation="vertical"
android:padding="32dp">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/linUsername"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:hint="#string/label_username"
android:textColorHint="#AEB0C6"
app:boxBackgroundColor="#33385E"
app:boxStrokeColor="#color/red"
app:endIconDrawable="#drawable/ic_clear_white_24dp"
app:endIconMode="password_toggle"
app:endIconTint="#AEB0C6"
app:hintTextColor="#AEB0C6"
app:startIconDrawable="#drawable/ic_info_outline_white_24dp"
app:startIconTint="#AEB0C6">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:textColor="#color/white"
android:textColorHint="#color/white"
app:hintTextColor="#AEB0C6" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnSelectText"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:fontFamily="#font/iran_sans_mobile"
android:text="login"
android:visibility="visible"
app:cornerRadius="#dimen/radiusButton" />
</LinearLayout>
You may use custom edit text with border, so you can easily set your desired background. For example try this code:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="32dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="15dp"
android:background="#drawable/boarder"
android:paddingLeft="5dp"
android:text="input"
app:endIconMode="password_toggle"
app:endIconTint="#EF0707" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="7dp"
android:background="#fff"
android:text="Label" />
</RelativeLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnSelectText"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="login"
android:visibility="visible"
app:cornerRadius="10dp" />
</LinearLayout>
boarder.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="2dp"
android:color="#03A6F0" />
<corners android:radius="12dp" />
</shape>
Also see here: Custom edit text with borders
If you don't like to use custom edit text, you can modify your code this way:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="32dp">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/linUsername"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="username"
android:textColorHint="#ED0A0A"
app:boxBackgroundColor="#1A33385E"
app:endIconMode="password_toggle"
app:endIconTint="#AEB0C6">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtUsername"
android:background="#drawable/boarder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:textColor="#fff"
android:text="User"
android:textColorHint="#fff"
app:hintTextColor="#AEB0C6" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnSelectText"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="login"
android:visibility="visible"
app:cornerRadius="10dp" />
</LinearLayout>
And in boarder.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#8033385E"/>
<corners android:radius="12dp" />
</shape>
Output will be:
This question already has an answer here:
TextInputLayout styling
(1 answer)
Closed 2 years ago.
I'm using com.google.android.material:material:1.1.0 on Android 9.0.
I want to set the underline color of TextInputLayout when it's not focused but nothing works.
My style:
<style name="EditTextTheme" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="colorAccent">#00BFFF</item>
<item name="colorControlNormal">#FFFF00</item>
<item name="colorControlActivated">#FF00FF</item>
<item name="colorControlHighlight">#FFFF00</item>
<item name="boxStrokeColor">#color/text_input_box_stroke</item>
</style>
My selector(text_input_box_stroke):
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#00BFFF" android:state_focused="true"/>
<item android:color="#FFFF00" android:state_hovered="true"/>
<item android:color="#00FF00" android:state_enabled="false"/>
</selector>
And my TextInputLayout:
<com.google.android.material.textfield.TextInputLayout
style="#style/EditTextTheme"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:hint="Email">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textWebEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>
right-click res -> new -> Android Resource Directory -> Resource type -> color
name your file for example text_input_box_stroke.xml and put it in color folder
text_input_box_stroke.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:color="#00BFFF" />
<item
android:state_pressed="true"
android:color="#FFFF00" />
<item
android:state_focused="true"
android:color="#00C853" />
<item
android:color="#ff00ff" />
</selector>
to prevent TextInputLayout view from gaining focus when activity or fragment which contains it start put this attributes to the parent layout which contains TextInputLayout
android:fadeScrollbars="false"
android:fillViewport="true"
layout file
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:id="#+id/content">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/layout_data"
style="#style/TextInputLayoutStyleFilledBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Hint"
android:textColorHint="#color/black"
app:boxBackgroundColor="#android:color/transparent"
app:boxStrokeWidth="2dp"
app:hintTextColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/input_value"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="123456789" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
styles.xml
<style name="TextInputLayoutStyleFilledBox"
parent="#style/Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="colorAccent">#00BFFF</item>
<item name="colorControlNormal">#FFFF00</item>
<item name="colorControlActivated">#FF00FF</item>
<item name="colorControlHighlight">#FFFF00</item>
<item name="boxStrokeColor">#color/text_input_box_stroke</item>
</style>
I've searched here and it doesn't seem like anyone has had this problem.
I'm following the Android Studio tutorials from here.
Basically what is happening is that my buttons look fine when I implement my XML code, but when I transfer over some of the XML code to my styles.xml and import it into my activity_main.xml file, my button changes its dimensions.
Here's my activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:padding="16sp"
tools:context=".MainActivity"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/decreaseTeam1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_minus"
android:contentDescription="#string/minus_button"
android:background="#drawable/button_background"
android:onClick="decreaseScore" />
<ImageButton
android:id="#+id/increaseTeam1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_plus"
android:contentDescription="#string/plus_button"
android:layout_alignParentEnd="true"
android:onClick="increaseScore"
android:background="#drawable/button_background"/>
<TextView
android:id="#+id/score_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="#string/initial_score"/>
<TextView
android:id="#+id/team1_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/team_1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/decreaseTeam2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_minus"
android:background="#drawable/button_background"
android:contentDescription="#string/minus_button"
android:onClick="decreaseScore"
/>
<ImageButton
android:id="#+id/increaseTeam2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_plus"
android:contentDescription="#string/plus_button"
android:onClick="increaseScore"
android:background="#drawable/button_background"/>
<TextView
android:id="#+id/score_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="#string/initial_score"/>
<TextView
android:id="#+id/team2_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/team_2"/>
</RelativeLayout>
</LinearLayout>
My strings.xml file.
<resources>
<string name="app_name">Scorekeeper</string>
<string name="team_2">Team 2</string>
<string name="initial_score">0</string>
<string name="plus_button">Plus Button</string>
<string name="minus_button">Minus Button</string>
<string name="team_1">Team 1</string>
</resources>
drawable.ic_minus:
<vector android:height="40dp" android:viewportHeight="24.0"
android:viewportWidth="24.0" android:width="40dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M19,13H5v-2h14v2z"/>
</vector>
drawable.ic_plus:
<vector android:height="40dp" android:viewportHeight="24.0"
android:viewportWidth="24.0" android:width="40dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>
drawable.button_background:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="2dp"
android:color="#color/colorPrimary"/>
</shape>
I hope I have not missed anything out. If you copy paste my code inside an empty activity activity_main.xml file, you should see something like this.
Now the problem:
I want to implement some styles for my buttons. I have updated my styles.xml as such. In this case I have a parent ScoreButton which only takes the background, whereas the child elements are the plus and minus, which takes the picture and description.
<resources>
<!-- Base application theme. -->
<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>
</style>
<style name="ScoreButtons" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_background</item>
</style>
<style name="PlusButtons" parent="ScoreButtons">
<item name="android:src">#drawable/ic_plus</item>
<item name="android:contentDescription">#string/plus_button</item>
</style>
<style name="MinusButtons" parent="ScoreButtons">
<item name="android:src">#drawable/ic_minus</item>
<item name="android:contentDescription">#string/minus_button</item>
</style>
</resources>
And if I update one of my button's code as such, for instance, replacing #+id/decreaseTeam1 with the code below:
<ImageButton
android:id="#+id/decreaseTeam1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
style="#style/PlusButtons"
android:onClick="decreaseScore" />
The minus button suddenly becomes inflated.
I read that child views override parent views, but I don't see how that can be a problem, since there is no change to the image size, nor have I compressed it.
The problem is that in the style definition, your ScoreButtons has Widget.AppCompat.Button as parent. This style defines a minHeight and minWidth, as follows:
<style name="Base.Widget.AppCompat.Button" parent="android:Widget">
<item name="android:background">#drawable/abc_btn_default_mtrl_shape</item>
<item name="android:textAppearance">?android:attr/textAppearanceButton</item>
<item name="android:minHeight">48dip</item>
<item name="android:minWidth">88dip</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
</style>
So, in order to solve your problem, you just have to remove the parent from ScoreButtons style:
<style name="ScoreButtons">
<item name="android:background">#drawable/button_background</item>
</style>
You have an error in your style. You are using an ImageButton not a Button
So, you should write
<style name="ScoreButtons" parent="Widget.AppCompat.ImageButton"> // ImageButton
<item name="android:background">#drawable/button_background</item>
</style>
you are making a mistake while assigning a style. you need to use ImageButton instead of using Button.
Use this:
<style name="ScoreButtons" parent="Widget.AppCompat.ImageButton">
<item name="android:background">#drawable/button_background</item>
<item name="android:contentDescription">#string/minus_button</item>
</style>
Instead of this:
<style name="ScoreButtons" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_background</item>
<item name="android:contentDescription">#string/minus_button</item>
</style>
My android app already set popupbackground as drawable xml. However, the popup dialog still cannot show the color I set. How to settle this issue?
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:orientation="vertical"
tools:context=".CountrySelectorActivity">
<Spinner
android:id="#+id/search_spinner1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/black"
android:popupBackground="#drawable/spinner_background"
android:spinnerMode="dialog"
/>
<Spinner
android:id="#+id/search_spinner2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:background="#color/black"
android:popupBackground="#drawable/spinner_background"
android:spinnerMode="dialog"/>
</LinearLayout>
#drawable/spinner_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/green"/>
</shape>
</item>
</selector>
Spinner activity code
https://stackoverflow.com/questions/51495271/android-kotlin-spinner-working-for-api-23-but-not-working-for-api-21
Make a style using your custom spinner background drawable. Then add the style as an attribute to your spinner. Lastly, programmatically change the spinner popup background color in your activity or fragment. The following way worked for me:
<style name="SpinnerTheme" parent="android:Widget.DeviceDefault.Spinner">
<item name="android:background">#drawable/spinner_background</item>
<item name="android:padding">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:textSize">18sp</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:paddingRight">15dp</item>
</style>
Put this in your xml for each spinner (REMOVE android:popupBackground="#drawable/spinner_background" &
android:spinnerMode="dialog"):
<Spinner
android:id="#+id/search_spinner2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:background="#color/black"
style="#style/SpinnerTheme"/>
Then in your activity or fragment, programmatically set the popup background color:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
spinner.setPopupBackgroundResource(R.color.yourColor);
}
Here is a link to example: https://www.oodlestechnologies.com/blogs/Custom-Spinner-In-Android
With AndroidX and using AppCompatSpinner you can do this:
File: styles.xml
<style name="MyPopUpTheme">
<item name="android:background">#color/background_spinner</item>
<item name="android:padding">5dp</item>
<item name="android:textColor">#color/colorAccent</item>
<item name="android:textStyle">bold</item>
</style>
File: Your fragment or Activity
<androidx.appcompat.widget.AppCompatSpinner
android:id="#+id/spinner_years"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="50dp"
android:background="#drawable/spinner_bg"
android:padding="15dp"
android:theme="#style/MyPopUpTheme" />
Result: