It there any ways to customize the RatingBar to look like the image below? Default RatingBar is just stars. For now i managed to change the star and color to rectangle but failed to put number inside the RatingBar.
You'll have to customize your RatingBar. In XML
<RatingBar
android:id="#+id/rating"
android:layout_width="wrap_content"
android:layout_height="#dimen/rating_bar_height"
android:layout_gravity="center"
android:clickable="false"
android:focusable="false"
android:isIndicator="true"
android:numStars="5"
android:progressDrawable="#drawable/custom_star_rating" />
Use images of filled numbers and blank numbers in drawable as:
<?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/notfill_star" />
<item android:id="#android:id/secondaryProgress" android:drawable="#drawable/notfill_star" />
<item android:id="#android:id/progress" android:drawable="#drawable/fill_star" />
You can try this library too
Related
<Button
android:id="#+id/sort_time"
android:layout_width="0dp"
android:layout_height="52dp"
android:layout_marginTop="54dp"
android:background="#drawable/roundless_button"
android:backgroundTint="#2A56C6"
android:text="#string/order_by_time"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/sort_status"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#color/IndBlue"
>
<shape android:shape="rectangle">
</shape>
<solid android:color="#color/IndBlue" />
</item>
</selector>
I tried to edit the buttons colors, but for some reason it won't change. Solid android:color / android:drawable doesn't work even though I placed it everywhere.
when you use selector as button background it inherits the color from theme. you can try changing the theme primary color and that will affect the button color.
I want to make color like example image. but I found a problem when changing icons and text using the color gradient because the attributes in the bottom navigation only accept color.
Please Help me god bless you.
https://imgur.com/aGKHhwW
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:theme="#style/Widget.BottomNavigationView"
android:background="#drawable/bg_bottom_nav"
app:itemIconTint="#drawable/bottom_nav_icon_color_selector"
app:itemTextColor="#drawable/bottom_nav_icon_color_selector"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:itemIconSize="22dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
After many hours of trying to make the text gradient, I was finally able to achieve this effect. The point is to reach the MaterialTextView inside BottomNavigationItemView. This is the code I use in onCreate() method of the activity (Kotlin):
for (bottomNavigationItem in binding.bottomNavigation[0] as BottomNavigationMenuView) {
(((bottomNavigationItem as BottomNavigationItemView)
.getChildAt(1) as BaselineLayout)
.getChildAt(1) as MaterialTextView)
.setGradientText()
}
setGradientText() method simply decorates text. In your case you need to add third color and setup angle:
fun MaterialTextView.setGradientText() {
paint.shader = LinearGradient(
0f,
0f,
paint.measureText(text.toString()),
textSize,
intArrayOf(
ContextCompat.getColor(context, R.color.main_gradient_start),
ContextCompat.getColor(context, R.color.main_gradient_end)
),
null, Shader.TileMode.CLAMP
)
}
This code will decorate every element in bottom navigation and they only will be gradient when the element is selected. I'm not sure if it is possible to make gradient work on active and inactive elements at the same time.
Also, if you need code of my BottomNavigationView:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black"
app:itemTextColor="#drawable/bottom_menu_selector"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_menu" />
In conclusion, this is the best result I've reached now:
Gradient text
About icons: you need to create selectors for your icons and add them to your menu file like this:
Sample selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Icon active gradient -->
<item android:drawable="#drawable/ic_home_color" android:state_pressed="true"/>
<item android:drawable="#drawable/ic_home_color" android:state_checked="true"/>
<!-- Icon default -->
<item android:drawable="#drawable/ic_home"/>
</selector>
Menu file
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/home"
android:icon="#drawable/home_selector"
android:title="#string/home" />
<item
android:id="#+id/catalogue"
android:icon="#drawable/catalogue_selector"
android:title="#string/catalogue" />
<item
android:id="#+id/collections"
android:icon="#drawable/collections_selector"
android:title="#string/collections" />
<item
android:id="#+id/profile"
android:icon="#drawable/profile_selector"
android:title="#string/profile" />
</menu>
I am also doing this, for the gradient icon, I use 2 images. As for the text gradient, I'm still looking for a way.
Icon Gradient:
drawable/ic_home.xml: icon
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Icon active gradient -->
<item android:drawable="#drawable/icon_home_active" android:state_pressed="true"/>
<item android:drawable="#drawable/icon_home_active" android:state_checked="true"/>
<!-- Icon default -->
<item android:drawable="#drawable/icon_home"/>
</selector>
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_home"
android:title="#string/title_home" />
....
</menu>
And in Activity, add the following code:
bottomNavView.setItemIconTintList(null);
I am trying to set a selectable background on a linear layout with a background color. I know the usual way is android:background="?android:attr/selectableItemBackground" but i already have another code in background. Here is the snippet of the code.
<LinearLayout
android:id="#+id/number"
android:layout_width="150dp"
android:layout_height="130dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="5dp"
android:layout_marginTop="0dp"
android:background="#color/category_colors"
android:gravity="center"
android:orientation="vertical"
android:weightSum="1">
The question is how do i set selectable background, there?
Try this code snipped on for size:
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
the android foreground attribute is relatively newly added XML attribute, but it does not work for API 22 and below! If this is the case then looks like we are going to have to stack attributes in a custom XML file,but don't worry, it is easier than it sounds!
1)In your project view go to res/drawable folder
2)right click the Drawable folder itself and select new>>>drawable resource file
3)Enter a file name my_custom_button.xml(the root doesn't really matter because you will replace it with the below code)
4)Click on the XML text tab (as opposed to the design view) if you aren't already there
5)Select all text and basically replace with the following:
(creating a custom color border is basically the same steps).
Feel free to change and play with the colors or to replace the gradient (mixture of colors) to a custom color of your own!
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/category_colors">
<item android:id="#android:id/ripple">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimaryDark" />
<corners android:radius="#dimen/button_radius_large" />
</shape>
</item>
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#color/colorPrimaryLight"
android:startColor="#color/colorPrimary"
android:type="linear" />
<corners android:radius="#dimen/button_radius_large" />
</shape>
</item>
</ripple>
HOPE THIS HELPS!!!
You should background selector XML file like below code and apply your initial colour along with press and pressed colour.
Then you would have to create the res/drawable/bg_selector.xml file like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#color/color_056DAE" /> <!-- pressed -->
<item android:state_focused="true"
android:color="#color/color_056DAE" /> <!-- focused -->
<item android:color="#color/color_333333" /> <!-- default -->
</selector>
then you have to apply this file to the background of your layout in XML.
android:background="#drawable/bg_selector"
I want to change e.g. the btn_star_big_off to btn_star_big_on
Everytime someone clicks on the button the state of that should change. Toogle would be perfect, but I don't know how to combine that. And I don't know how to change state of the button. I found out that I could do that with the drawable XML File but there I only have access to the images I imported, but not the the system resource ones?
The Button:
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#android:drawable/btn_star_big_off" />
And here is the trial from my drawable XML:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="#drawable/button"/>
<!-- default -->
</selector>
You need to use ToggleButton
1) In your layout, implement ToggleButton
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1">
<ToggleButton
android:layout_width=0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:background="#drawable/my_button"
android:text=""
android:textOff=""
android:textOn=""/>
</TableRow>
2) Creation xml layout in drawable directory ( here my_button.xml )
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:drawable/btn_star_big_on" android:state_pressed="true"/><!-- pressed -->
<item android:drawable="#android:drawable/btn_star_big_on" android:state_focused="true"/><!-- focused -->
<item android:drawable="#android:drawable/btn_star_big_on" android:state_checked="true"/>
<item android:drawable="#android:drawable/btn_star_big_off" android:state_checked="false"/>
<item android:drawable="#android:drawable/btn_star_big_off"/> <!-- default -->
</selector>
here i add an another state, if you want to have an focused img
I'm developing Android app for 4.0 version, and all checkboxes have got a black background for tick, but I need white. If I use "background" xml attribute as "white" then all checkbox (with text) is white; I need only white place for tick.
The most simple way - emulate CheckBox using ImageView with 3 background states (stateSelected=true, stateSelected=false, statePressed = true). Just create appropriate xml file with 3 backgrounds and set it to ImageView background. Then in code, when click on ImageView just switch ImageView.setSelected = !ImageView.isSelected. Hope its help
I dont know if i am extremely late or what, but here is the solution
Code snippet:
say this selector is name "checkbox_selector"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/cbchk_blue"
android:state_focused="false">
</item>
<item android:state_checked="true"
android:drawable="#drawable/cbchk_blue"
android:state_focused="true">
</item>
<item android:state_checked="false"
android:drawable="#drawable/cbunchk_blue"
android:state_focused="false">
</item>
<item android:state_checked="false"
android:drawable="#drawable/cbunchk_blue"
android:state_focused="true">
</item>
in order to set it just for the checkbox and not the entire text also, you could have it as:
<CheckBox
android:layout_width="45dip"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:button="#drawable/checkbox_selector"
android:text="#string/text_here" />
Maybe my solution is not very elegant, but it works for me:
I simplily create another layout with the dimensions of the checkbox rectangle (15x15) and with white background. Then I add this layout to a RelativeLayout, where I also put the checkbox. With a margin of 9dp, I put the white layout-rectangle below the checkbox, so it seems that the checkbox bacground color is white.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/login_large_margin"
android:layout_marginTop="#dimen/login_medium_margin" >
<RelativeLayout
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_margin="9dp"
android:background="#color/white" >
</RelativeLayout>
<CheckBox
android:id="#+id/login_check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:text="#string/login_check"
android:textColor="#color/white" >
</CheckBox>
</RelativeLayout>