I've set custom drawables to the RatingBar and seems that it's internal gravity became set to "top" (see screenshot, green is its background set to indicate its actual height)
Layout:
<LinearLayout
android:id="#+id/rate_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/reviews_tv"
android:layout_margin="#dimen/default_margin"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_rate"
android:textSize="14sp"
android:fontFamily="sans-serif" />
<RatingBar
android:id="#+id/rating_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0f0"
android:layout_marginLeft="#dimen/default_margin"
android:layout_marginStart="#dimen/default_margin"
android:stepSize="1"
android:progressDrawable="#drawable/rating_star" />
</LinearLayout>
rating_star.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background" android:drawable="#drawable/ic_star" />
<item android:id="#android:id/secondaryProgress" android:drawable="#drawable/ic_star" />
<item android:id="#android:id/progress" android:drawable="#drawable/ic_redstar" />
</layer-list>
Gravity is OK with default drawable.
How to fix it?
I had the same problem and i just changed android:minHeight attribute of RatingBar. I hope it helps
Related
I created a dialog and there is a button.
I want different style of button. So I made this file and applied to the background attribute of the button.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/my_pink_color">
<item
android:id="#android:id/background"
android:drawable="#drawable/btn_line_border_dialogue"></item>
</ripple>
I don't know why it has shadow around the button. It has two buttons. And the second button doesn't have any thing. When I remove the second button, the shadow seems gone.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:clickable="true"
android:background="#drawable/btn_ripple"
android:text="Close"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="17sp"
android:textStyle="bold" />
<Button
android:id="#+id/btn_close2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn_ripple"
android:clickable="true"
android:text="Don't show this in 24hours"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
When I just apply btn_line_border_dialogue.xml without the ripple. It is the same.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/my_yellow" />
<stroke
android:width="1dp"
android:color="#color/my_pink" />
</shape>
How can I remove this effect?
Use style="?android:attr/borderlessButtonStyle" inside your Button
refer : https://developer.android.com/guide/topics/ui/controls/button.html#Borderless
Or If you don't need Button particularly, use TextView instead
try to set elevation t0 0 dp or you can use TextView or Layout instead of button.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:clickable="true"
android:background="#drawable/btn_ripple"
android:text="Close"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="17sp"
android:textStyle="bold" />
<TextView
android:id="#+id/btn_close2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn_ripple"
android:clickable="true"
android:text="Don't show this in 24hours"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
This can be also fixed by setting android:stateListAnimator="#null" globally in Resources\values\styles.xml:
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/NoShadowButton</item>
</style>
<style name="NoShadowButton" parent="android:style/Widget.Button">
<item name="android:stateListAnimator">#null</item>
</style>
</resources>
set the stateListAnimator on the button as = "#null" in the xml. It will remove the shadow from the button.
I want to create a switch which looks like this
i have done that in this way
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Available"
android:textColor="#82BCB4"
android:textSize="20sp"
/>
<Switch
android:id="#+id/theSwitchId"
android:textOn=""
android:textOff=""
android:layout_width="wrap_content"
android:layout_height="20dp"
android:thumbTextPadding="5dp"
android:switchMinWidth="90dp"
android:layout_marginStart="40dp"
android:minHeight="60dp"
android:layout_gravity="center|center_vertical" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UnAvailable"
android:layout_marginStart="40dp"
android:textColor="#224e6d"
android:textSize="20sp"
/>
</LinearLayout>
i am not able to change the height of the switch and it doesnt look how its in this image. Please help me with this
all you need to do is just use a custom drawable as track of switch
this is the code for custom drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<corners
android:radius="#dimen/_40sdp" />
<solid
android:color="#android:color/darker_gray" />
<padding
android:bottom="#dimen/_5dp"
android:left="#dimen/_5dp"
android:right="#dimen/_5dp"
android:top="#dimen/_5dp" />
</shape>
</item>
Further make these modification to your existing layout
add android:thumbTint="#android:color/holo_blue_dark" or any color that meets your requirement
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Available"
android:textColor="#82BCB4"
android:textSize="20sp" />
<Switch
android:id="#+id/theSwitchId"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center|center_vertical"
android:layout_marginStart="40dp"
android:minHeight="60dp"
android:switchMinWidth="90dp"
android:textOff=""
android:textOn=""
android:thumbTextPadding="5dp"
android:thumbTint="#android:color/holo_blue_dark"
android:track="#drawable/track_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:text="UnAvailable"
android:textColor="#224e6d"
android:textSize="20sp" />
hope this helps
click here to view the resulting screenshot
screenshot
In style.xml
<style name="switchCompatStyle">
<item name="colorControlActivated">#color/colorPrimary</item>
</style>
And code for switch is like
<android.support.v7.widget.SwitchCompat
android:id="#+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/_10sdp"
app:theme="#style/switchCompatStyle" />
You create Thumb in drawable xml:
thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/ic_thumbselecter"/>
<item android:drawable="#drawable/ic_thumbselecter"/>
</selector>
And put into switch (in my case I was using that):
<Switch
app:kswThumbDrawable="#drawable/thumb"/>
Change the thumb (circle on the switch) color by using:
android:thumbTint="#color/thumbColor"
On your colors.xml:
<color name="thumbColor">#FFFFFF</color>
I am having problem styling rating bar
Here is the screenshot
I want to reduce the size of rating bar. I know I can use style small to make them smaller but that is too small. Can I make somewhat medium style?.
Here is my xml
<?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:background="#ffffff">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#F0EEEF">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="RATE OUR SERVICES"
android:gravity="center"
android:textColor="#color/textColor"
android:textStyle="bold"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By Quality"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"/>
<RatingBar
android:theme="#style/RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:numStars="5"
android:isIndicator="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By Services"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"/>
<RatingBar
android:theme="#style/RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:numStars="5"
android:isIndicator="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By Time"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"/>
<RatingBar
android:theme="#style/RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:numStars="5"
android:isIndicator="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Overall Rating"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"/>
<RatingBar
android:theme="#style/RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:numStars="5"
android:isIndicator="false" />
</LinearLayout>
You Can use a custom RatingBar. Following is the code
1. create a file in drawable as custom_ratingbar.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/star_empty" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/star_empty" />
<item android:id="#android:id/progress"
android:drawable="#drawable/star_full" />
</layer-list>
then use following in your RatingBar :-
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:progressDrawable="#drawable/custom_ratingbar"
android:numStars="5"
android:stepSize="0.2"
android:rating="3.0" />
You can create custom style for ratingbar to make it have suitable size:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="foodRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:minHeight">48dip</item> <!-- your desired size -->
<item name="android:maxHeight">48dip</item> <!-- your desired size -->
</style>
</resources>
then use this style to your rating bar.
There is more specific tutorial:http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/.
I made a custom ratingbar which might help you: SimpleRatingBar.
It features:
Fully working android:layout_width: it can be set to wrap_content, match_parent or abritary dp.
Arbitrary number of stars.
Arbitrary step size.
Size of stars can be controlled exactly or by setting a maximum size.
Customizable colors (border, fill and background of stars).
Customizable size separation between stars.
Customizable border width of stars.
Allows to set OnRatingBarChangeListener
Stars fill can be set to start from left to right or from right to left (RTL language support).
AnimationBuilder integrated in the view to set rating programatically with animation.
Here is a preview of it.
You can find it either in jcenter or in Maven Central. So in your build.gradle file just add to your dependencies:
compile 'com.iarcuschin:simpleratingbar:0.1.+'
I hope it's useful.
I've developed a custom drawable for Switch's thumb and track but the problem is that it's appearing stretched:
Does anyone have any idea what's causing this?
My XML's are below:
Layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toLeftOf="#+id/switch1"
android:padding="5dp" />
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:thumb="#drawable/switch_thumb_selector"
android:track="#drawable/switch_track_selector" />
<TextView
android:id="#+id/switchErrorView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_below="#id/switch1"
android:layout_centerHorizontal="true"
android:text=""
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#android:color/holo_red_light"
android:visibility="gone" />
</RelativeLayout>
switch_thumb_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/switch_thumb_inactive" android:state_pressed="true"/>
<item android:drawable="#drawable/switch_thumb_inactive" android:state_checked="true"/>
<item android:drawable="#drawable/switch_thumb_inactive"/>
</selector>
switch_track_selector.xml
<item android:drawable="#drawable/switch_track_green" android:state_checked="true"/>
<item android:drawable="#drawable/switch_track_white" android:state_checked="false"/>
<item android:drawable="#drawable/switch_track_white"/>
Green Track Drawable:
I think thats bad behavior has appeared because you didn't draw "content" area. Try this drawable, I've tested and it was working for me.
I have this relative layout:
<RelativeLayout
android:id="#+id/relativeLayout5"
android:layout_width="fill_parent"
android:layout_height="110dp"
android:layout_below="#+id/relativeLayout4"
android:background="#drawable/pigs_banner_selector"
android:clickable="true"
>
<ImageView
android:id="#+id/imageView9"
android:layout_width="220dp"
android:layout_height="60dp"
android:layout_marginTop="60dp"
android:layout_marginLeft="0dp"
android:layout_marginBottom="-10dp"
android:src="#drawable/banner_games_pighunt_hill" />
<TextView
android:id="#+id/textView3"
android:fontFamily="sans-serif-condensed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/gluecksschweinjagd"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white"
android:textSize="31sp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="6dp"
android:textStyle="bold" />
</RelativeLayout>
and the selector of the RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true" android:drawable="#color/white"/>
<item android:state_pressed="true" android:drawable="#color/highlight_pigs_banner" />
<item android:drawable="#color/pigs_banner"/>
</selector>
The behavior is this: The relativeLayout changes it´s color as intended. But I want the Child elements (the ImageView) to also get the color of the selector (#color/highlight_pigs_banner).
EDIT:
The color highlight_pigs_banner basically puts alpha value on the color. How can I achieve this also on the imageview (child element) by still clicking only the RelativeLayout
I tried adding android:clickable="true" to the child elements, which didnt work, and android:addStatesFromChildren="true" to the relativeLayout which gave me an stackoverflow exception. Anyone knows how to achieve this? Thanks.
You should use Selector for ImageView and TextView as well.
<TextView android:id="#+id/textView3"
android:fontFamily="sans-serif-condensed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#drawable/text_selector" />
text_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false"
android:state_pressed="false"
android:color="#color/normal"/>
<item android:state_pressed="true"
android:color="#drawable/highlight"/>
<item android:state_selected="true"
android:state_pressed="false"
android:color="#drawable/highlight"/>
</selector>
colors.xml
<drawable name="highlight">#ff590d</drawable>