I have the following button defined in an activity layout:
<Button
android:id="#+id/button_Collect"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginBottom="16dp"
android:layout_gravity="center_horizontal"
android:background="#drawable/selector_CollectButton" />
With it I have this selector applied to the button:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<!-- PRESSED STATE (Opacity change to 75) -->
<!-- ==================================== -->
<layer-list>
<!-- Shape for the outer circle -->
<item opacity="75">
<shape android:shape="oval">
<solid android:color="#FFBDC3C7" />
</shape>
</item>
<!-- Shape for the circle -->
<item android:top="18dp" android:left="18dp" android:right="18dp" android:bottom="18dp">
<shape android:shape="oval">
<!--<solid android:color="#FF3498DB" />-->
<solid android:color="#FF22DD44" />
</shape>
</item>
</layer-list>
</item>
<item>
<!-- NORMAL STATE -->
<!-- ============ -->
<layer-list>
<!-- Shape for the outer circle -->
<item>
<shape android:shape="oval">
<solid android:color="#FFBDC3C7" />
</shape>
</item>
<!-- Shape for the circle -->
<item android:top="18dp" android:left="18dp" android:right="18dp" android:bottom="18dp">
<shape android:shape="oval">
<solid android:color="#FF3498DB" />
</shape>
</item>
</layer-list>
</item>
</selector>
Why is it that the pressed state never tiggers whenever I touch the button in my app?
I also tried splitting my "states" into separate xml drawable files, but the problem still remained.
As for the event, I have the following in my activity:
Button btnCollect = FindViewById<Button>(Resource.Id.button_Collect);
btnCollect.Touch += btnCollect_Touch;
This is C# code since I'm working with Xamarin. This code executes without a problem, so I know the touch event is executing.
UPDATE:
I figured something out, it works ONLY if I remove the above event handler:
I have the following code:
private void btnCollect_Touch(object sender, View.TouchEventArgs e)
{
if (e.Event.Action == MotionEventActions.Up)
ScoreManager.Instance.CalculatePoints();
}
If I don't add a handler to this method the selector works fine, anyone know why ???
Fixed!!
I changed the event from Touch to Click for the button and everything works fine now.
Also to note, many people have said (in other posts) that a Selector with Layer-Lists should be split into separate files. This crowds the project with a lot of xml files. IT IS NOT NECESSARY, you can have the states within the same selector file and it works perfectly fine.
Try this tutorial, this work for me
http://www.stealthcopter.com/blog/2010/08/making-prettier-buttons-in-android-xml-rolloverselection-focus-effects-9patch-images-and-transparency/
Related
I would like to create a shape to use as a background for an element, since the app has red and orange as main colors I would like to make a cool border, however I have only managed to find how to put a single color and don't really know how to do a sort of a design.
I would like to do something like this (I made this quickly in paint just a demonstration of my idea):
Shape with cool alternated border
Ok I worked on it a bit and came to a solution that isn't exactly what I was trying to do but it will be good enough I guess. This is the code to put in the xml file in the drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
<stroke
android:width="10dp"
android:color="#color/colorAccent"/>
</shape>
</item>
<item>
<shape
android:shape="rectangle"
android:padding="10dp">
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
<stroke
android:width="8dp"
android:color="#color/colorPrimary"
android:dashGap="10dp"
android:dashWidth="8dp" />
</shape>
</item>
</layer-list>
this code will produce this result:
shape with bicolor border
Hope this helps anybody
I would like to create Toolbar with sub menu items. It can be done in Xamarin.Android naively but I want to implement such a kind of feature in IOS and UWP too. I am not mentioning expandable list items. It should be similar to sub menu.
enter image description here
I have created this in Xamarin.Android using the below code
<?xml version="1.0" encoding="UTF-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:AMCSMobile="http://schemas.android.com/apk/res-auto">
<!-- Route View - Action Bar Menu -->
<item
android:id="#+id/RouteView_ActionButton_Messages"
android:icon="#drawable/ic_action_read_light"
AMCSMobile:showAsAction="always|withText"
android:title="#string/ScheduleView_ActionButton_Messages" />
<item
android:id="#+id/RouteView_ActionButton_Tracking"
android:icon="#drawable/ic_action_location_found_light"
AMCSMobile:showAsAction="ifRoom"
android:title="#string/RouteView_Button_TrackingOn" />
<item
android:id="#+id/RouteView_ActionButton_StartBreak"
android:icon="#drawable/ic_action_pause_light"
AMCSMobile:showAsAction="ifRoom"
android:title="#string/RouteView_Button_StartBreak" />
<item
android:id="#+id/RouteView_ActionButton_Complete"
android:icon="#drawable/ic_action_accept_light"
AMCSMobile:showAsAction="ifRoom"
android:title="#string/RouteView_Button_Complete" />
<item
android:id="#+id/RouteView_ActionButton_EventSelection"
android:icon="#drawable/ic_action_new_event_light"
AMCSMobile:showAsAction="always"
android:title="#string/ScheduleView_ActionButton_Event"
>
<menu>
<item
android:id="#+id/RouteView_ActionButton_Event_RecordRefuelEvent"
android:icon="#drawable/ic_action_refresh_light"
android:title="#string/ScheduleView_ActionButton_Event_RecordRefuelEvent" />
<item
android:id="#+id/RouteView_ActionButton_Event_RecordDisposalEvent"
android:icon="#drawable/ic_action_discard_light"
android:title="#string/ScheduleView_ActionButton_Event_RecordDisposalEvent" />
<item
android:id="#+id/RouteView_ActionButton_Event_RecordMiscEvent"
android:icon="#drawable/ic_action_help_light"
android:title="#string/ScheduleView_ActionButton_Event_RecordMiscEvent" />
<item
android:id="#+id/RouteView_ActionButton_Event_RecordBlockageEvent"
android:icon="#drawable/ic_action_warning_light"
android:title="#string/ScheduleView_ActionButton_Event_RecordBlockageEvent" />
</menu>
</item>
<item
android:id="#+id/RouteView_ActionButton_Commute"
android:icon="#drawable/ic_action_split_light"
AMCSMobile:showAsAction="never"
android:title="#string/RouteView_Button_ShowCommute" />
<item
android:id="#+id/RouteView_ActionButton_Logout"
android:icon="#drawable/ic_action_back_light"
AMCSMobile:showAsAction="never"
android:title="#string/RouteView_Button_Logout" />
</menu>
I want to know whether it is possible to do it in other platforms (IOS and UWP) or not. Kindly let me know your suggestion please.
I want to set BackgroundColor of the selected TAB by code in ViewPager.
For far what I have done is:-
tabs.setSelectedTabIndicatorColor(Color.parseColor("#92278F"));
tabs.setSelectedTabIndicatorHeight(50);
tabs.setTabTextColors(Color.parseColor("#FFFFFF"), Color.parseColor("#FFFFFF"));
But I cannot achieve it.
If the selected Color is RED then the TAB should reflect as RED in COLOR for the selected TAB and white as selected TEXT COLOR.
I can do it by XML code but I am not getting any idea how to achieve it by CODE(dynamically)
Please help me.
This is how it will look like-
Image1
Image2
Here is the code:
Make 3 drawable files for background, selected and unselected states-
tab_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/tab_background_selected" android:state_selected="true" />
<item android:drawable="#drawable/tab_background_unselected" android:state_selected="false" android:state_focused="false" android:state_pressed="false" />
</selector>
tab_background_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#87CEFA" />
</shape>
tab_background_unselected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#3F51B5" />
</shape>
Then finally add tablayout styles in styles.xml
<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
<item name="tabBackground">#drawable/tab_background</item>
<item name="tabIndicatorColor">#ff00ff</item>
<item name="tabIndicatorHeight">2dp</item>
</style>
I am using edittext and it's showing a line where I can enter text but I have seen examples of the line having upturned edges (see below). Can't figure out how to do it.
Edit text looks like this:
_____________.
but I want it to look more like this:
|__________________|
Thanks for help.
you need to use layer-list and add custom background to your edit text.
here's a sample.
create a xml file in your drawable folder-> custombg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Border -->
<item>
<shape>
<solid android:color="#f000"></solid>
</shape>
</item>
<!-- Body -->
<item android:left="2dip"
android:bottom="2dp"
android:right="2dp">
<shape>
<solid android:color="#ffafafaf"></solid>
</shape>
</item>
</layer-list>
in you're edit text do this.
<EditText
android:id="#+id/edit_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/border_line_withradius"
/>
I'm trying to create a custom EditText that has both rounded corners and an inner shadow.
I made a layer list that creates the inner shadow,
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<solid android:color="#6C6C6C" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/ashes" />
</shape>
</item>
<!-- White Top color -->
<item android:top="3px" android:left="3px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
The output looks like this,
How can I also add a rounded shape?
Add a corners tag inside your shape tags:
<corners
android:radius="5dp" />