I am using a background 9 patch image name button_normal.9.png. The image is not showing as a background image of button. Got stuck for 5 hours still couldn't find it. Please help. Here are the respective files.
This is button:
<Button
android:id="#+id/s_id"
android:text="#string/s_id_string"
android:layout_marginTop="20dp"
style="#style/MainScreen"/>
Style MainScreen:
<style name="MainScreen">
<item name="android:layout_width">200dp</item>
<item name="android:layout_marginTop">10dp</item>
<item name="android:textSize">15dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textStyle">bold</item>
<item name="android:background">#drawable/button_shape</item>
<item name="android:textColor">#drawable/button_text_color</item>
</style>
button_shape file:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/button_shape_normal"
android:background="#drawable/button_normal"
android:state_pressed="false"/>
<item
android:drawable="#drawable/button_shape_pressed"
android:state_pressed="true"
android:background="#ed2020"
/>
button_text_color file:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:color="#ed2020"/>
<item android:state_pressed="true" android:color="#ffffff"/>
button_shape_pressed & button_shape_normal file is same:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="30dp" />
try this button_shape file:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/button_shape_pressed"
android:state_pressed="true"
android:background="#ed2020" />
<item
android:drawable="#drawable/button_shape_normal"
android:background="#drawable/button_normal" />
</selector>
Related
Hello I have a rating bar with custom drawable but it only displays full stars only and not showing half
here is my code, how can I solve this?
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#android:id/background"
android:drawable="#drawable/empty_star" />
<item
android:id="#+id/secondaryProgress"
android:drawable="#drawable/empty_star" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/filled_star" />
<style name="doctor_rating" parent="#style/Widget.AppCompat.RatingBar">
<item name="android:minHeight">13dp</item>
<item name="android:minWidth">65dp</item>
<item name="android:numStars">5</item>
<item name="android:progressDrawable">#drawable/custom_rating_stars</item>
<item name="android:stepSize">.1</item>
</style>
<RatingBar
android:id="#+id/doctor_rating_bar"
style="#style/doctor_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_gravity="end"
android:rating="3.5"
/>
See below code this will help you.
custom_rating_stars.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/ratingbar_empty" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/ratingbar_filled" />
</layer-list>
ratingbar_empty.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/star_grey_small" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/star_grey_small" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/star_grey_small" />
<item android:drawable="#drawable/star_grey_small" />
</selector>
ratingbar_filled.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/star_yellow" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/star_yellow" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/star_yellow" />
<item android:drawable="#drawable/star_yellow" />
</selector>
Try this:
<style name="doctor_rating" parent="android.widget.RatingBar">
<item name="android:minHeight">13dp</item>
<item name="android:minWidth">65dp</item>
<item name="android:numStars">5</item>
<item name="android:progressDrawable">#drawable/custom_rating_stars</item>
<item name="android:stepSize">0.1</item>
I am trying to implement a spinner with a custom layout (not the spinner item layout), the outer layout. I want it to look like this:
http://imgur.com/a/U6RzU
I searched stackoverflow and google, but couldn't figure out how to come up with this (beside putting the whole picture as a background)
Thanks a lot in advance
Edit
This is what I tried:
styles.xml
<style name="spinner">
<item name="android:layout_marginTop">6dp</item>
<item name="android:layout_marginBottom">6dp</item>
<item name="android:layout_marginLeft">0dp</item>
<item name="android:layout_marginRight">0dp</item>
<item name="android:padding">10dp</item>
<item name="android:background">#drawable/spinner_bg</item>
<item name="android:popupBackground">#color/red</item>
<item name="android:textSize">15sp</item>
</style>
spinner_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90" android:endColor="#ff0000"
android:startColor="#ff0000" android:type="linear" />
<stroke android:width="0.33dp" android:color="#0fb1fa" />
<corners android:radius="0dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item android:right="5dp">
<bitmap android:gravity="center_vertical|right" android:src="#drawable/arrow_white_down" />
</item>
</layer-list>
</item>
</selector>
where arrow_white_down is a png of a tiny white arrow (like the one in the link)
I solved it by using a RelativeLayout with the spinner and an image (arrow) beside it, it doesn't look really good in spinnerMode="dropdown" but this is the best I could do
layout
<RelativeLayout
android:id="#+id/spinner_container"
style="#style/spinner_container">
<Spinner
android:id="#+id/spinner"
style="#style/spinner"
android:layout_toLeftOf="#+id/spinner_image"
android:layout_toStartOf="#+id/spinner_image" />
<ImageView
android:id="#+id/spinner_image"
style="#style/spinner_image" />
</RelativeLayout>
styles.xml
<style name="spinner_container">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">35dp</item>
<item name="android:orientation">horizontal</item>
<item name="android:layout_marginTop">6dp</item>
<item name="android:layout_marginBottom">6dp</item>
<item name="android:layout_marginLeft">0dp</item>
<item name="android:layout_marginRight">0dp</item>
<item name="android:background">#color/red</item>
</style>
<style name="spinner">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_margin">0dp</item>
<item name="android:layout_alignParentLeft">true</item>
<item name="android:layout_alignParentStart">true</item>
<item name="android:padding">5dp</item>
<item name="android:textColor">#color/white</item>
<item name="android:background">#color/red</item>
<item name="android:popupBackground">#color/red</item>
<item name="android:textSize">15sp</item>
</style>
<style name="spinner_image">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_margin">5dp</item>
<item name="android:padding">0dp</item>
<item name="android:layout_alignParentRight">true</item>
<item name="android:layout_alignParentEnd">true</item>
<item name="android:adjustViewBounds">true</item>
<item name="android:src">#drawable/bc_spinner_arrow</item>
</style>
where bc_spinner_arrow is a transparent pic of a white arrow and a vertical line (like the one in the question)
Is there a way to change the color of a disabled button in android through styles or some other form ?
I currently have the following,
drawable/button_default.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_default_shape"/>
</selector>
drawable/button_default_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/button_default_background"/>
<corners android:radius="3dp"/>
</shape>
values/styles.xml
<style name="AppTheme.Button">
<item name="android:background">#drawable/button_default</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textAllCaps">false</item>
<item name="android:paddingTop">10dp</item>
<item name="android:paddingBottom">10dp</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:gravity">center</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">17sp</item>
<item name="android:textAppearance">#style/CustomFontAppearance</item>
</style>
You'll have to use a selector for different drawables in those states.
You can create a selector like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/your_enabled_drawable" android:state_enabled="true" />
<item android:drawable="#drawable/your_disabled_drawable" android:state_enabled="false" />
<!-- default state-->
<item android:drawable="#drawable/your_enabled_drawable" />
</selector>
Specify the color in selector for android:state_enabled="false" as drawable
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape>
<solid android:color="#32ff09" />
</shape>
</item>
</selector>
And apply this drawable resource to background of button
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/drawble_name"
android:enabled="false"
android:text="Selector Applied Button" />
Try this -
drawable/bg_button.xml :-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_button_focused" android:state_selected="true"/>
<item android:drawable="#drawable/bg_button_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/bg_button_disabled" android:state_enabled="false" />
<item android:drawable="#drawable/bg_button_normal"/>
</selector>
After this just set background on your button like this -
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_button"
android:text="Button"/>
UPDATE: For Android MaterialButton
For Android MaterialButton there are two solutions, one for SDK >= v21 and another for SDK < v21.
Here I am also giving how to change the text color of the button depending whether it is enabled or disabled.
First create two color selector .xml file in your color folder. One for button color and another for button text color. For example button_state_colors.xml for button color and button_text_state_colors.xml for text color.
Here are those two color files:
button_state_colors.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="#303F9F" />
<item android:state_enabled="false" android:color="#BBBBBB" />
</selector>
button_text_state_colors.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="#FFFFFF" />
<item android:state_enabled="false" android:color="#555555" />
</selector>
Now for all versions of Android SDK you can change the color of button and it's text using style like:
in style.xml:
<style name="Widget.AppTheme.MaterialButton" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">#color/button_state_colors</item>
<item name="android:textColor">#color/button_text_state_colors</item>
</style>
in layout.xml:
<com.google.android.material.button.MaterialButton
android:id="#+id/button"
style="#style/Widget.AppTheme.MaterialButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Only for SDK >= 21 you can direct change button color without using style like:
<com.google.android.material.button.MaterialButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/button_state_colors"/>
Another way to achieve this is to create a color selector.
Create a file
res/color/your_color.xml
which looks like
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorDisabledBackground" android:state_enabled="false" />
<item android:color="#color/colorEnabledBackground" />
</selector>
Then you may use it as a regular color
in a style:
<style name="YourStyle">
<item name="android:background">#color/your_color</item>
<item name="android:textColor">#android:color/black</item>
</style>
As well is in layouts, shapes or in code as etc.
Here is my code which works properly with button enable and disable state.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:drawable="#drawable/ic_button_gradient"/>
<item android:state_enabled="false" android:drawable="#color/gray"/>
</selector>
I have the following Button style:
<style name="ButtonmyTimeRed" parent="android:Widget.Button">
<item name="android:minHeight">48dip</item>
<item name="android:minWidth">64dip</item>
<item name="android:textColor">#ffffff</item>
<item name="android:background">#drawable/button_selector_red</item>
</style>
<style name="ImageButtonmyTimeRed" parent="android:Widget.ImageButton">
<item name="android:background">#drawable/button_selector_red</item>
</style>
with the following selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--<item android:state_window_focused="false" android:state_enabled="true" android:drawable="#drawable/button_shape_red" />-->
<!--<item android:state_window_focused="false" android:state_enabled="false" android:drawable="#drawable/button_shape_disabled" />-->
<!--<item android:state_focused="true" android:state_enabled="true" android:drawable="#drawable/button_shape_red" />-->
<item android:drawable="#drawable/button_shape_red_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/button_shape_red" android:state_focused="true"/>
<item android:drawable="#drawable/button_shape_disabled" android:state_enabled="false" />
<!--<item android:drawable="#drawable/button_shape_red" android:state_enabled="true" />-->
<item android:drawable="#drawable/button_shape_red"/>
</selector>
My shape looks like:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#color/red" />
</shape>
Everything works fine on Api level 14 and above. I don't have custom values-xx folders, so I'm wondering why my button has no background on the API 10 device.
My base theme is:
Theme.AppCompat.Light
and I'm using:
compile 'com.android.support:appcompat-v7:22.0.0'
The strange thing is that my ImageButton has the correct background.
UPDATE:
Seems "solid" does not work on onlder devices. When I put:
<stroke
android:width="3dp"
android:color="#color/red" />
<solid android:color="#color/red" />
I get a red border but no background
I was able to style button to my liking with pure XML (no image). Here is how it looks:
shape_button_normal_blue.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="7dip"/>
<gradient android:startColor="#color/blue_start" android:endColor="#color/blue_end" android:angle="270" />
<stroke android:width="1dip" android:color="#80036990" />
<padding android:left="5dip" android:right="5dip" android:top="7dip" android:bottom="7dip"/>
</shape>
Similar to that I described other shapes for pressed/disabled/etc
Here is my selector_button_blue:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/shape_button_normal_blue" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/shape_button_disabled" />
<item android:state_pressed="true"
android:drawable="#drawable/shape_button_selected" />
<item android:state_focused="true" android:state_enabled="true"
android:drawable="#drawable/shape_button_focused_blue" />
<item android:state_enabled="true"
android:drawable="#drawable/shape_button_normal_blue" />
<item android:state_focused="true"
android:drawable="#drawable/shape_button_normal_blue" />
<item android:drawable="#drawable/shape_button_disabled" />
</selector>
And finally my style:
<style name="MyBlueButton" parent="#android:style/Widget.Button">
<item name="android:background">#drawable/selector_button_blue</item>
<item name="android:layout_marginLeft">1dp</item>
<item name="android:layout_marginRight">1dp</item>
<item name="android:layout_marginTop">5dp</item>
<item name="android:layout_marginBottom">5dp</item>
<item name="android:textColor">#color/white</item>
<item name="android:textSize">18dp</item>
<item name="android:textStyle">bold</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">fill_parent</item>
</style>
I'm using those buttons just fine with text. Happy and proud :)
Now I need to put icon on them. I see there is drawingTop/Bottom/Left/Right but it doesn't do what I need. What do I miss here? How do I make it nice and centered?
<Button style="#style/MyBlueButton" android:layout_marginTop="0dp" android:text="" android:layout_width="0dp" android:layout_weight="0.15"
android:drawableTop="#drawable/ic_accept"/>
use imagebutton, something like Edited
>
<ImageButton
android:id="#+id/call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_accept"
android:background="#drawable/selector_button_blue"
/>