I am creating custom rating bar.The problem is that drawables are not overlaying properly,because there are two different images with same hight and width.It should be like this when the progress will be updated the default image should be replaced by the image2. Any idea?
<RatingBar
android:layout_weight="1"
android:numStars="5"
android:stepSize="1"
android:progressDrawable="#drawable/customselector"
android:layout_width="wrap_content"
android:layout_height="0dp"/>
Here is my custom selector
<?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/image1" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/image1" />
<item android:id="#android:id/progress"
android:drawable="#drawable/image2" />
</layer-list>
The way I set the selector to the RatingBar is a bit different, but I don't know if it will help:
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ratingBar"
android:rating="3"
android:numStars="5"
android:stepSize="1"
android:isIndicator="false"
style="#style/mileageRatingBar"/>
In your values/styles.xml file put this:
<style name="mileageRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/rating_stars</item>
<item name="android:minHeight">32dip</item>
<item name="android:maxHeight">32dip</item>
</style>
You can of course change the size. And as you can see here is the reference to the custom drawable.
Remove
android:progressDrawable="#drawable/customselector"
and add style in your values/styles.xml
to be like this
<RatingBar
android:layout_weight="1"
android:numStars="5"
android:stepSize="1"
android:layout_width="wrap_content"
android:layout_height="0dp"
style="#style/customRatingBar"/>
your style from styles.xml
<style name="customRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/customselector</item>
<item name="android:minHeight">32dip</item>
<item name="android:maxHeight">32dip</item>
</style>
the customselector.xml file must place in drawable folder
<?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/image1" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/image1" />
<item android:id="#android:id/progress"
android:drawable="#drawable/image2" />
</layer-list>
make sure item id is written correctly , then you have two option to assign drawable as image or put your selector into your drawable folder selector.xml with your custom setting
instead of image1 put 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/image1" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/image1" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/image1" />
<item android:drawable="#drawable/image1" />
</selector>
the same to progress but change selector to image2
Related
I am trying to create an oval shape around my bottom navigation icon when selected as seen in the screenshot
bottom_nav_layout.xml
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNav_view"
android:layout_width="match_parent"
android:layout_height="56dp"
android:elevation="0dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:theme="#style/Widget.BottomNavigationView"
app:itemIconSize="20dp"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="#menu/bottom_nav_menu" />
bottom_nav_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#3375BB" />
<item android:state_checked="false" android:color="#68788D"/>
</selector>
bottom_nav_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_trustwallet"
android:title="Wallet" />
<item
android:id="#+id/navigation_discover"
android:icon="#drawable/ic_discover"
android:title="Discover" />
<item
android:id="#+id/navigation_browser"
android:icon="#drawable/ic_browser"
android:title="Browser" />
<item
android:id="#+id/navigation_settings"
android:icon="#drawable/ic_paper_settings"
android:title="Settings" />
</menu>
Use a M3 theme in your app:
<style name="AppTheme" parent="Theme.Material3.DayNight">
Then in your layout:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.App.BottomNavigationView"
with:
<style name="ThemeOverlay.App.BottomNavigationView" parent="">
<item name="colorSurface">#d1e4ff</item>
<item name="colorSecondaryContainer">#0061a3</item>
</style>
I use bottomNavigation.
I wanna fill the icon with the color "not the outside of the icon" when selected.
How can I do that?
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:paddingTop="2dp"
android:background="#FFFFFF"
android:theme="#style/BottomNavigationTextStyle"
app:labelVisibilityMode="labeled"
app:itemIconSize="24dp"
android:layout_alignParentBottom="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:menu="#menu/buttom_navigation_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
Use the itemIconTint attribute:
<com.google.android.material.bottomnavigation.BottomNavigationView
app:itemIconTint="#color/my_selector"
..>
and define a selector like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="1.0" android:color="..." android:state_checked="true"/>
<item android:alpha="0.6" android:color="..."/>
</selector>
Use custom made images as per your requirement. You would need to add 2 images one for the active state and for deactive state.
Create a selector home_icon_selector.xml for your icon
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/your_active_icon_here" android:state_selected="true" />
<item android:drawable="#drawable/your_active_icon_here" android:state_pressed="true" />
<item android:drawable="#drawable/your_active_icon_here" android:state_checked="true" />
<item android:drawable="#drawable/your_deactive_icon_here" />
</selector>
Update your menu buttom_navigation_menu to use the selector above
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_home"
android:enabled="true"
android:icon="#drawable/home_icon_selector"
android:title="#string/tab_title_home"/>
</menu>
I want to put all of these argument for this checkedtextview into a drawable file so that if I make more checkedtextviews I can use the same arguments the drawable file.
<CheckedTextView
android:id="#+id/DrinkWater"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_marginBottom="2dp"
android:background="#drawable/startscreenbuttons"
android:checked="true"
android:drawableLeft="#drawable/checkbox"
android:fontFamily="casual"
android:onClick="do_drink_water"
android:paddingLeft="3dp"
android:paddingTop="3dp"
android:text="#string/action_drink_water"
android:textColor="#FFFF"
android:textSize="20sp" />
Basically, how do I make CheckedTextView empty (except to call the drawable) and put it's arguments into this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
</selector>
Use a style, e.g.
<style name="MyCheckedTextView" parent="#android:style/Widget.Material.CheckedTextView">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">35dp</item>
<item name="android:layout_marginBottom">2dp</item>
<item name="android:background">#drawable/startscreenbuttons</item>
<item name="android:checked">true</item>
<item name="android:drawableLeft">#drawable/checkbox</item>
<item name="android:fontFamily">casual</item>
<item name="android:paddingLeft">3dp</item>
<item name="android:paddingTop">3dp</item>
<item name="android:textColor">#FFFF</item>
<item name="android:textSize">20sp</item>
</style>
and apply it to your view
<CheckedTextView
android:id="#+id/DrinkWater"
style="#style/MyCheckedTextView"
//...
Also put your values in dimens.xml and colors.xml. It allows better layout management later in the project.
dimens.xml
<resources>
<dimen name="dimen_name">5dp</dimen>
</resources>
colors.xml
<resources>
<color name="color_name">#AABBCCDD</color>
</resources>
I have put an edit text which has a tint color as white. But it looks black in android above 4.0 devices till lollipop.
I searched for this and got solutions as apply background color as white.
But I have another layout from which the edit text belongs which has dark blue color, so if I apply background color as white whole edit text looks white on that dark blue layout.
What can I do for this now?
Layout :
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/purple_bg"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="true"
android:id="#+id/linearLayout"
android:weightSum="1">
<EditText
android:layout_width="match_parent"
android:layout_height="42dp"
android:id="#+id/editTextOrderItem"
android:layout_gravity="center_vertical"
android:backgroundTint="#ffffff"
android:drawableTint="#ffffff"
android:hint="Type here..."
android:textColorHint="#ffffff"
android:paddingLeft="15dp"
android:imeOptions="actionDone"
android:textSize="12sp"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_centerVertical="true"
android:textColor="#ffffff"
android:layout_toLeftOf="#+id/imageViewSearch"
android:layout_toStartOf="#+id/imageViewSearch"
android:singleLine="true" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/imageViewSearch"
android:backgroundTint="#android:color/white"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_gravity="center"
android:src="#drawable/btn_search"
android:layout_centerVertical="true"
android:padding="10dp"
android:layout_marginRight="06dp" />
</RelativeLayout>
color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#ffffff</color>
<color name="colorPrimaryDark">#eeeeee</color>
<color name="colorAccent">#3e3e3e</color>
<color name="black">#747474</color>
<color name="drawerBacground">#e6f7fd</color>
<color name="themetextcolor">#009688</color>
<color name="darktextcolor">#000000</color>
<color name="lighttextcolor">#ACABAC</color>
<color name="activity_bg_color">#D9E7E4</color>
<color name="activity_footer_color">#37b0a0</color>
<color name="btn_text">#b3ffffff</color>
<color name="seperator">#dedede</color>
<color name="accent">#00B0FF</color>
</resources>
Please help, thank you..
EDIT:
I tried to add new theme and put it in activity in manifest, but did not help.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/black</item>
<item name="colorAccent">#color/accent</item>
<item name="android:typeface">monospace</item>
<item name="android:textSize">17sp</item>
</style>
<style name="AppTheme2" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:typeface">monospace</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimary</item>
</style>
<style name="AppTheme1" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:typeface">monospace</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/accent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
Manifest :
<activity android:name=".Activities.MainActivity"
android:theme="#style/AppTheme2"
/>
Create a drawable resource xml file (your requirement is only to have a bottom stroke)
Set givendrawable as the background of the editText then you can add the background color you need + bottom line you need with a color
Explain:
This is a resource drawable
dashGap & dashWidth is for doted/broken lines (remove them if you do not need dashes)
android:top -> you can give minus sizes to the views that you don't need to display.(here your requirement is to show only bottom line so top,right & left lines of the item has given -2dp )
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#FFF" /> <-- background color here
</shape>
</item>
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:dashGap="10px"
android:dashWidth="10px"
android:width="1dp"
android:color="#ababb2" <-- bottom line color here />
</shape>
</item>
</layer-list>
you can set different different color accent at activity in your manifest file.
<color name="colorAccent">#FFFFFF</color>
I have the following ImageButton:
<ImageButton
android:id="#+id/nopeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/nope_button_states" />
Here is nope_button_states:
<?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/nope_button" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/nope_button_selected" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#drawable/nope_button_selected" />
<item
android:state_enabled="true"
android:drawable="#drawable/nope_button" />
</selector>
Now I want to change the tint color of the drawable. When I use with:
android:src="#drawable/nope_button"
then I can do: nopeButton.setColorFilter() but this does not work anymore when using in background.
How do I change the tint color from the ImageButton drawings when used with background property?
Try using:
nopeButton.getBackground().setColorFilter();