I want to create a control panel at the bottom of my screen that looks something like this.
Here is the image
And I want to simulate button press by having the clicked on item be blacked, and everything that isn't clicked be greyed out. As shown in the image, the picture icon had been clicked on.
At the moment, my solution is to overlay two rows of identical ImageViews. One layer consist of all black icons, and one layer consist of all grey icons. When I click on an image, I run a code that looks like this:
private void galleryClicked() {
mGalleryImageView_unclicked.setVisibility(View.INVISIBLE);
mPersonalImageView_unclicked.setVisibility(View.VISIBLE);
mExploreImageView_unclicked.setVisibility(View.VISIBLE);
mMenuImageView_unclicked.setVisibility(View.VISIBLE);
mGalleryImageView_clicked.setVisibility(View.VISIBLE);
mPersonalImageView_clicked.setVisibility(View.INVISIBLE);
mExploreImageView_clicked.setVisibility(View.INVISIBLE);
mMenuImageView_clicked.setVisibility(View.INVISIBLE);
}
I'm just wondering if there's a more efficient or better way of doing this. When I run this on my phone, and can feel some lag in the response. Thank you!
I have better solution, that is using selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/clicked" android:state_enabled="true" />
<item android:drawable="#drawable/unclicked" android:state_enabled="false" />
</selector>
so now you just set mGalleryImageView.setEnabled(true); or mGalleryImageView.setEnabled(false)
You can use Radiobuttons with RadioGroup, and each RadioButton has its own selector Drawable. Then the RadioGroup will take care of the selection for you (check one will uncheck all others).
Example code:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RadioGroup
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<RadioButton
android:id="#+id/item_one"
style="#style/TabItem"
android:checked="true"
android:drawableTop="#drawable/selector_tab_item_one" />
<RadioButton
android:id="#+id/item_two"
style="#style/TabItem"
android:drawableTop="#drawable/selector_tab_item_two" />
<RadioButton
android:id="#+id/item_three"
style="#style/TabItem"
android:drawableTop="#drawable/selector_tab_item_three" />
<RadioButton
android:id="#+id/item_four"
style="#style/TabItem"
android:drawableTop="#drawable/selector_tab_item_four"/>
</RadioGroup>
</RelativeLayout>
Declare #style/TabItem in res/values/styles.xml:
<style name="TabItem" parent="android:style/Widget.Holo.Light.TextView">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item>
<item name="android:paddingTop">15dp</item>
<item name="android:drawablePadding">1dp</item>
<item name="android:button">#null</item>
<item name="android:background">#null</item>
<item name="android:gravity">bottom|center_horizontal</item>
</style>
The selector Drawable is like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/item_one_highlighted" android:state_checked="true"/>
<item android:drawable="#drawable/item_one_highlighted" android:state_pressed="true"/>
<item android:drawable="#drawable/item_one_default" />
</selector>
Results:
Related
I have many buttons for my view. Each button has different image resource. I want to change the click and hover effect for each button like this:
Button 1
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn1_selector"
android:text="name"
/>
btn1_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/hover_btn" android:state_pressed="true"></item>
<item android:drawable="#drawable/hover_btn" android:state_focused="true">/item>
<item android:drawable="#drawable/btn1"></item>
</selector>
Button 2
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn2_selector"
android:text="name"
/>
btn2_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/hover_btn" android:state_pressed="true"></item>
<item android:drawable="#drawable/hover_btn" android:state_focused="true">/item>
<item android:drawable="#drawable/btn2"></item>
</selector>
// etc...
The problem is that I have to create many selectors for all buttons. But I just need to change the hover state for all of them with 1 image hover_btn.png. Is there any way to have a hover state by default without creating all selectors for all buttons?
I am trying to customize a Button UI in Android.
I tried the following things:
btn.setBackgroundColor
btn.setBackgroundResource
btn.setBackgroundColor
But all of these are increasing the size of the Button, and because of that the Buttons near by can not be segregated (??).
Please suggest something.
If you want to apply a Hover effect then you have to do this in your XML where button layout is like
Button
android:id="#+id/xyz"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="15dp"
android:background="#drawable/general_btn_hover_effect"
android:onClick="somefunction"
android:text="#string/search_number"
android:textColor="#ffffff"
android:textSize="20sp"
/>
Notice android:background="#drawable/general_btn_hover_effect" there and then in #drawable folder make a general_btn_hover_effect.xml and write this into it
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/blank_normal_bg" android:state_focused="true" android:state_pressed="false"/>
<item android:drawable="#drawable/blank_hover_bg" android:state_focused="true" android:state_pressed="true"/>
<item android:drawable="#drawable/blank_hover_bg" android:state_focused="false" android:state_pressed="true"/>
<item android:drawable="#drawable/blank_normal_bg"/>
</selector>
Changing background color can not change size of button. Maybe you changed size in xml layout. Check again
I my app i have many buttons,what i want is that when user selects particular button,its background should change so that user knows which button is selected.So for this i have used selectors.But when ever i run my app the event on button click works fine but the button image doesnt change
Selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/people_1" android:state_selected="true"></item>
<item android:drawable="#drawable/people_1" android:state_active="true"></item>
<item android:drawable="#drawable/places_1" android:state_focused="true"></item>
<item android:drawable="#drawable/hotel_icon"></item>
</selector>
Xml where i used the selector
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/hotel"
android:layout_weight="1"
android:id="#+id/home" />
I solved it,the only thing missing was
<item android:drawable="#drawable/selected" android:state_pressed="true" />
I'm developing an Android application and I use this to customize RadioButtons:
<!-- Radio button style -->
<style name="RadioButton" parent="#android:style/Widget.CompoundButton.RadioButton">
<item name="android:button">#drawable/checkbox_unchecked</item>
</style>
But the image #drawable/checkbox_unchecked is very big.
Do you know how can I make it smaller?
I know you can achieve what you want by reducing the size of your image. But I would recommend using the following code. This will help you set images for both the unselected and selected modes.
This is how you can achieve it, in a few steps:
-Create Image Drawables for their two states (checked/unchecked).
-Create selector for this two drawables. The sample content should be something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/unchecked" />
<item android:state_checked="false" android:drawable="#drawable/checked" />
</selector>
-Add this selector as a android:button attribute to RadioButton
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/background">
<RadioButton
android:id="#+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/checkbox_selector"
android:text="Custom RadioButton" />
</LinearLayout>
Recently my ToggleButtons on an application I'm working on lost it's green light indicator. I started with the various tutorials and got together a set of 9 patch indicators to make them work correctly again. The only problem is the text now sits on top of the indicator, like so:
I would like the text on top like the old toggle buttons...is there any way to do this?
btn_toggle_bg.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="#android:drawable/btn_default" />
<item android:id="#+android:id/toggle" android:drawable="#drawable/btn_toggle" />
</layer-list>
my btn_toggle.xml:
<?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/btn_toggle_on" />
<item android:state_checked="false" android:drawable="#drawable/btn_toggle_off" />
</selector>
and the togglebutton tag in my activity:
<ToggleButton
android:background="#drawable/btn_toggle_bg"
style="#style/OurThemeName"
android:textOff="#string/fertilizer"
android:textOn="#string/fertilizer"
android:id="#+id/toggleFertilizer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="false">
</ToggleButton>
<ToggleButton
android:background="#drawable/btn_toggle_bg"
style="#style/OurThemeName"
android:textOff="#string/irrigation"
android:textOn="#string/irrigation"
android:id="#+id/toggleIrrigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="false">
</ToggleButton>
almost forgot the themes.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Overwrite the ToggleButton style -->
<style name="Widget.Button.Toggle" parent="android:Widget">
<item name="android:background">#drawable/btn_toggle_bg</item>
<item name="android:textOn">On</item>
<item name="android:textOff">Off</item>
<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
</style>
<style name="OurThemeName" parent="#android:Theme.Light">
<item name="android:buttonStyleToggle">#style/Widget.Button.Toggle</item>
<item name="android:textOn"></item>
<item name="android:textOff"></item>
</style>
</resources>
You need to set the Fill Area in your 9-Patch. You can add this areas including them in the right and bottom of your images using the Draw 9-patch tool. With this you are defining the area for your text label.
Check this tutorial explaining how 9-Patch works.