In my app, I want to get survey answers from the user. So, I've decided put smiley images to act as a radio buttons. Is it possible on android?
For example, I will show smiley images when user touches the image and it will be activated like a radio button. At a time, they will be allowed to only choose one. If anyone could guide me, I would appreciate it.
Example :
Thanks in advance!
This question has been answered before Below is from #Benito-Bertoli
RadioButton - how to use a custom drawable?
Give your radiobutton a custom style:
<style name="MyRadioButtonStyle" parent="#android:style/Widget.CompoundButton.RadioButton">
<item name="android:button">#drawable/custom_btn_radio</item>
</style>
custom_btn_radio.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:state_window_focused="false"
android:drawable="#drawable/btn_radio_on" />
<item android:state_checked="false" android:state_window_focused="false"
android:drawable="#drawable/btn_radio_off" />
<item android:state_checked="true" android:state_pressed="true"
android:drawable="#drawable/btn_radio_on_pressed" />
<item android:state_checked="false" android:state_pressed="true"
android:drawable="#drawable/btn_radio_off_pressed" />
<item android:state_checked="true" android:state_focused="true"
android:drawable="#drawable/btn_radio_on_selected" />
<item android:state_checked="false" android:state_focused="true"
android:drawable="#drawable/btn_radio_off_selected" />
<item android:state_checked="false" android:drawable="#drawable/btn_radio_off" />
<item android:state_checked="true" android:drawable="#drawable/btn_radio_on" />
</selector>
Replace the drawables with your own.
Try like this
<RadioGroup
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_height="wrap_content">
<RadioButton
android:button="#null"
android:background="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RadioButton
android:button="#null"
android:background="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RadioButton
android:button="#null"
android:background="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RadioGroup>
output:(margin and pading by yourself)
I might be a bit late. Use android:button"#btmImage link"
<RadioButton
android:id="#+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:button="#drawable/ic_launcher"
android:text="male"
android:textColor="#90999d" />
I think these 3rd party libraries will help you achieve this functionality.
SimpleRatingBar
SmileBar
They are pretty easy to use also.
Actually you just need to handle these two states, and it will work already.
<RadioButton
android:id="#+id/paragraphRadioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/btn_paragraph"
android:padding="14dp" />
btn_paragraph.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_paragraph_selected" android:state_checked="true" />
<item android:drawable="#drawable/ic_paragraph" android:state_checked="false" />
</selector>
Related
I have published an application and I see that some users keep getting errors when they are in the sign-up activity.
The error I'm getting is:
Fatal Exception: java.lang.RuntimeException
Unable to start activity ComponentInfo{com.xxx.yyy/com.xxx.yyy.SignUpActivity}: android.view.InflateException: Binary XML file line #137 in com.xxx.yyy:layout/activity_sign_up: Binary XML file line #137 in com.xxx.yyy:layout/activity_sign_up: Error inflating class CheckBox
When I go to layout/activity_sign_up to line 137 I got this:
<CheckBox
android:id="#+id/cb_showPass"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#drawable/cb_visible_styles"
android:button="#null"
android:scaleX="0.6"
android:scaleY="0.6"
app:layout_constraintBottom_toBottomOf="#+id/et_SignUpPassword"
app:layout_constraintEnd_toEndOf="#+id/et_SignUpPassword"
app:layout_constraintTop_toTopOf="#+id/et_SignUpPassword" />
Which is used to show the eye in the EditText:
The drawable/cb_visible_styles is:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/cb_show" android:state_checked="false" />
<item android:drawable="#drawable/cb_hide" android:state_checked="true" />
<item android:drawable="#drawable/cb_show" />
</selector>
Where cb_show/cb_hide are png files:
I can't figure out what causes the error.
Some places say it is because of Scaling, some say it is because of Density, Can't figure out why for many users it is fine but for a specific few it doesn't.
One time it appeared on Samsung S21, the other at Nexus 5X. One time on Android 10 and the other on Android 8.1.
Thank you
I think you do a lot of hassle google provides an easy way to apply show hide password check XML below
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/passwordLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="#string/password"
android:textColorHint="#color/white"
app:endIconTint="#color/edit_text_icon_gray"
app:errorEnabled="true"
app:errorTextColor="#color/error_color"
app:hintTextColor="#color/white"
app:startIconDrawable="#drawable/ic_baseline_lock_24"
app:startIconTint="#color/edit_text_icon_gray"
fancy:endIconMode="password_toggle">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:fontFamily="#font/regular_font"
android:inputType="textPassword"
android:padding="20dp"
android:textColor="#color/white"
android:textSize="13sp"
android:theme="#style/MyEditTextStyle2" />
</com.google.android.material.textfield.TextInputLayout>
Remove Third Item tag from drawable/cb_visible_styles. and try to run.
Before:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/cb_show" android:state_checked="false" />
<item android:drawable="#drawable/cb_hide" android:state_checked="true" />
<item android:drawable="#drawable/cb_show" />
</selector>
After:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/cb_show" android:state_checked="false" />
<item android:drawable="#drawable/cb_hide" android:state_checked="true" />
</selector>
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 make BottomNavigationView Menu in UpperCase, How can i do that without using 3rd party library?
Here is my xml code:
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:foreground="?attr/selectableItemBackground"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color"
app:menu="#menu/navigation" />
And navigation.xml as follows:
<?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/home_icon"
android:title="#string/title_home"
/>
<item
android:id="#+id/navigation_deals"
android:icon="#drawable/ic_deals"
android:title="#string/deals" />
<item
android:id="#+id/navigation_myBookings"
android:icon="#drawable/ic_my_bookings"
android:title="#string/title_my_bookings" />
<item
android:id="#+id/navigation_more"
android:icon="#drawable/ic_more"
android:title="#string/title_more" />
</menu>
Try this
Create a style like this BottomNavigationViewStyle
<style name="BottomNavigationViewStyle">
<item name="android:textAllCaps">true</item>
<item name="android:textSize">15sp</item>
</style>
Than use like this
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:foreground="?attr/selectableItemBackground"
app:menu="#menu/navigation"
app:theme="#style/BottomNavigationViewStyle" />
OUTPUT
Apply this theme to your bottom navigation
<style name="AppTheme2" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textAllCaps">true</item>
</style>
I've to style Switch in android and found a good resource here at SO, I've
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/switch_off_2" />
<item android:state_focused="true" android:drawable="#drawable/switch_off_2" />
<item android:state_checked="true" android:drawable="#drawable/switch_on_2" />
</selector>
and finally the Switch widget as
<Switch
android:background="#drawable/btn_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/switch1"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
but result is
I want to know how can I hide the purple colored switch from this.
What I assume is
android:background="#drawable/btn_bg"
will be
android:thumb="#drawable/btn_bg"
Hope it will solve your problem.
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