I am trying to align android switchcompat on both side whether its checked or unchecked but without success.
<android.support.v7.widget.SwitchCompat
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:checked="true"
android:clickable="true"
android:layout_gravity="center_vertical"/>
and here is the result
Any ideas how to get it done?
The Switches (the view bounds of switches to be specific) in your image are aligned as expected. However, it appears as though they are not aligned because the thumb actually goes a little out of the switch track (still within the view bounds). If you want the thumb and track to be aligned on both sides, you can create a custom Switch.
An example would be:
Create background.xml as follows:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/drawable1" />
<item android:state_checked="false" android:drawable="#drawable/drawable2"/>
</selector>
Set this as background for Switch:
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background"/>
You will get something like:
I know this aint perfect in terms of design, but you get the idea!
This shows that the view bounds are actually aligned in both checked and unchecked states.
You can customize it further by setting the track, thumb and so on...
On tweaking the background a little and setting the track you can get something like:
Cheers!
Related
I'm trying to make a custom button style with a 3d look to it, but I'm having issue with the "pressed" state of the button. The button changes image properly, but the text stays still, which makes it look like the text is actually sliding upwards on press.
(Red lines added to show the cancel button's baseline)
XML for the button view (cmdNegative is the cancel button, layDialogControl is a layout directly above the buttons)
<Button
android:id="#+id/cmdPositive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_positive"
android:text="Accept"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toBottomOf="#+id/layDialogControl"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/cmdNegative"
app:layout_constraintBottom_toBottomOf="parent" />
XML for the button style (button_gray is the exact same as button_green just... well... gray)
<?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/button_gray" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/button_green_pressed" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#drawable/button_green_pressed" />
<item
android:state_enabled="true"
android:drawable="#drawable/button_green" />
</selector>
Unpressed 9 patch:
Pressed 9 patch:
As far as I'm understanding, setting the pixels on the right/bottom should have defined the "content area" and the text should stay in the content view, buuuuuuut that's not the case. Any ideas or pointers as to where I've messed up would be greatly appreciated.
I think you have misunderstood 9-patch images. The stretchable areas (top and left sides) that you define will stretch according to your layout definition. The content area, right and bottom parts defined will set the limits for your content similar to like specifying a rectangle/square of area where your content will be kept. Your image for the accept button(pressed) will not stretch when clicked, thus whatever your image looks like is showing.
Furthermore, if your image has the text in it then there is no point of having a content area. If your button image has text defined then you can solve your problem by re-defining your content area. In other words on the pressed-state you are just substituting an image which had the correct content area region so it looks like it has been stretched on click but it is actually just another image.
I have a set of Radio Buttons in a RadioGroup. I have created a StateList Drawable to indicate the state of each button. The buttons operate properly in that selecting any one will kick off the listeners, etc. However, the StateList Drawable isn't working. Here's the relevant stuff:
Layout XML with button:
<RadioButton
android:id="#+id/score4"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="5dp"
android:button="#drawable/score_button_selector" />
score_button_selector 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/score_bg_2c_on" />
<item android:state_checked="false"
android:drawable="#drawable/score_bg_2c_off"/>
</selector>
score_bg_2c_off is a blue button:
and score_bg_2c_on is a green button:
The blue button appears properly, but when selected (pressed/clicked), the green one should appear instead. As I said, the operation of the button is fine, I get it's value properly, etc. - just not the drawable change. I tried state_selected instead of state_checked with no better results.
Any ideas why this isn't working as I'd like?
Thanks.
Here's some more data... I took out the android:button= and put the drawable on the android:background=.
<RadioButton
android:id="#+id/score4"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="5dp"
android:background="#drawable/score_button_selector" />
This way the default radio button shows up. This button shows when it is selected (blue inside the button), but the background never changes. I know it's seeing the score_button_selector drawable because it's showing the button with the blue background that is only defined in the drawable.
Try this
<RadioButton
android:id="#+id/score4"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="5dp"
android:button="#android:color/transparent"
android:background="#drawable/score_button_selector" />
Nothing a good project clean can't fix! I think that perhaps a majority of the time doing a clean as a last resort b-4 posting a question is a good protocol. It cleared this problem up after chasing ghosts for 3 days.
I am getting crazy with switch buttons in Android 4.
First of all, I have set a selector as background with two different PNG files selected from drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/form_switch_no" android:state_checked="false"/>
<item android:drawable="#drawable/form_switch_ok" android:state_checked="true"/>
<item android:drawable="#drawable/form_switch_no"/>
</selector>
but I don't know why they are x-scaled. I want to manage this size, but I have tried to change layout_width/height/weight... without succes.
I have also a custom PNG file to be used as the thumb of the switch. I also need to manage the size of this thumb, because if I set textOn and textOff propieties as "", thumb gets a very small size. Moreover, I would like to change thumb padding in respect of the background, because It does not appears centered.
Here is my Switch XML definition:
<Switch
android:id="#+id/switchUsers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/user"
android:textOn=""
android:textOff=""
android:thumb="#drawable/form_switch_slider"
android:track="#drawable/switch_user_selector" />
I have tried to change image sizes and making them nine-patch ones, but I can't reach my target.
Any help will be appreciated. Thank you!
The solucion for the extremely small slider with no text was solved with a combination of:
android:thumbTextPadding="25dp"
android:textOn=""
android:textOff=""
Then, the problem of the small padding in the same slider was a 9-patch image problem. I had to extend bottom and right black lines one more pixel simetrically.
Hope this helps someone with the same problem.
It was hard to give a descriptive title for this question!
I have an app widget in which I have some clickable buttons (using RemoteViews and PendingIntents as needed for app widgets) that are difficult to tap at their current size. To work around this without having to resize the actual button, I have placed larger, invisible, clickable FrameLayouts over these buttons to increase the clickable area. This works well, except the buttons also have selectors connected to them so that the background color for the images change when tapped. This selector no longer works when the FrameLayout covers the buttons since it's now actually the FrameLayout that's being tapped, not the buttons.
My question is if there's a way to somehow make it "click through" the FrameLayout so that the selector for the button is still triggered, or any other clever workaround that achieves the same effect? Applying the selector on the FrameLayout itself will make the background change much too large.
Below is a simplified example of what I'm doing. The actual layout I'm using is more complex, so any solutions that requires changing the layout may be more difficult to do than it may seem here. Also, the reason the FrameLayout is placed in a RelativeLayout is so that I have more freedom with the placement.
EDIT
The FrameLayout is placed on top of two other layouts, which is why I can't simply place it under the button. It needs to cover a larger area. I'm hoping I won't have to redo the entire layout to fix this problem.
LAYOUT
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageButton
android:layout_width="#dimen/size_myButton_w"
android:layout_height="#dimen/size_myButton_h"
android:layout_alignParentRight="true"
android:background="#drawable/selector" //NOT TRIGGERED! Covered by FrameLayout below.
android:src="#drawable/myButton" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
<!-- More stuff here! -->
</RelativeLayout>
<!-- Even more stuff here! -->
</LinearLayout>
<FrameLayout
android:layout_width="120dp"
android:layout_height="35dp"
android:layout_alignParentRight="true">
</FrameLayout>
</RelativeLayout>
SELECTOR
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/navy" />
<item android:state_focused="true" android:drawable="#color/white" />
<item android:drawable="#color/white" />
</selector>
Perhaps you could place your FrameLayout below the button, rather than on top. That way if they hit the actual button, you get your selector triggered and if they miss the button and still hit the FrameLayout...well, your selector won't get triggered, but your FrameLayout click listener will still get called.
I have an Android application that uses a MapView with an ImageButton control (to move to the user's current location) I've added in the top right-hand corner. The problem I am having is that the ImageButton control's background is too transparent, but changing it with android:background="#BBFFFFFF" alters both the size of the background and removes the blue "flash" that you normally see when the button is pressed - two qualities I wish to retain.
I start with something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.google.android.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:apiKey="my api key"
/>
<ImageButton android:id="#+id/googlemaps_select_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginTop="13dp"
android:layout_marginRight="13dp"
android:src="#drawable/device_access_location_found"/>
</RelativeLayout>
Which achieves something that looks like this:
So then I add:
android:background="#BBFFFFFF"
And I get this:
Note that although this is basically the level of opacity I want, changing the background has affected the padding, and also doesn't display a blue "flash" when pressed (which obviously isn't illustrated in this question).
So my question is, how can I change just the background color/opacity in the non-pressed state, while retaining the other visual qualities of the button? I had a brief read about Android styles and themes, but can't even figure out where this button is getting its style/theme from and how I would go about just overriding the background color/opacity while retaining all of the other visual features.
Issue
When you are assigning a fixed color to the a view background, you are replacing the default background in the view by the fixed color you define.
In reality, the background of a button is not a simple fixed color. It's a state list of color or drawables, which means, depending on button status (focous, selected, pressed, etc.) a different background is used, resulting in the "flash" animation you see when button is pressed. If you replace this state list by a simple fixed color, not depending on buttons status, you get a fixed background (i.e. not changing when button is pressed).
Resolution
There is a xml parameter that can be used to change the image view's alfa (i.e. transparency) which is:
android:alpha="1"
where the value 1 above can be any float between 0 and 1, being 1 the maximum opacy.
However, I believe this is not solving your issue, because you want to change the alfa of background not the image alfa, if I correctly understood your issue. Anyway the default seems to be 1.
One possibility the should work for you is to define a selector to be used as background. The selector will choose the drawable based on his status.
Example
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#android:color/darker_gray" />
<item android:drawable="#android:color/white" />
</selector>
Save the xml file above in your drawable-xxxx folder with the name my_selector
In this example I'm using standard android colors, but you can define your own colors. You need to assigne a color for each different button status that you want to have a different color.
Then you need to define your ImageView backgroung to be the selector you defined above:
<ImageButton
android:id="#+id/googlemaps_select_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="13dp"
android:layout_marginTop="13dp"
android:background="#drawable/my_selector"
android:src="#drawable/device_access_location_found" />
With the above changes, the bacground color used by the button will change when the button is pressed and you can have the "flash" effect.
I ended up using a style to inherit the look of Widget.ImageButton with just a few minor tweaks for my purposes:
My /res/values/styles.xml file now looks like:
<resources>
<style name="AppTheme" parent="android:Theme.Light" />
<style name="my_loc_btn_style" parent="#android:style/Widget.ImageButton">
<item name="android:layout_marginTop">8dp</item>
<item name="android:layout_marginRight">8dp</item>
</style>
</resources>
And my layout file has:
<ImageButton android:id="#+id/googlemaps_select_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
style="#style/my_loc_btn_style"
android:src="#drawable/device_access_location_found"/>
This seems to have inherited a background from Widget.ImageButton that seems to be just slightly transparent, which is what I was after anyway, so I don't set the transparency at all now.