I'm trying to set a selector to a button which included in a toolbar. The selector is working when it sets to a button outside to the toolbar. Any help?
Toolbar
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/light_red"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp">
<ImageButton
android:id="#+id/btnSync"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/sync"
android:layout_centerVertical="true"
android:layout_margin="10dp"
android:layout_alignParentRight="true"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/sinchronize_q" android:state_focused="true" />
<item android:drawable="#drawable/sinchronize" />
</selector>
The problem is in your drawable in particular this part
android:state_focused="true"
your ImageButton not getting focus because it is taken by its parent or some EditText view. In general state_focused used not quite often in drawables,
change it to state_pressed and it will work so here is what you need
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/sinchronize_q"
android:state_pressed="true"/>
<item android:drawable="#android:drawable/sinchronize"/>
if you want to make sure that your item was not getting focus you can add android:focusableInTouchMode="true" to your ImageButton
Related
I need to highlight widgets as per the following design, In below design all three widgets are highlighted in red when the cursor reaches the position
I have written the following code to achieve above:
left_strip_color_selector.xml
<?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/focus_color"/>
<item android:state_focused="true" android:drawable="#color/focus_color" />
<item android:drawable="#color/menu_list_bg" />
</selector>
leftmenu_text_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#color/focus_color"/> <!-- pressed -->
<item android:state_focused="true" android:color="#color/focus_color"/> <!-- focused -->
<item android:color="#color/white"/> <!-- default -->
</selector>
leftmenu_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.leanback.widget.NonOverlappingLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/background"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
android:gravity="center_vertical">
<View
android:layout_width="4dp"
android:layout_height="17dp"
android:layout_marginEnd="22dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:background="#drawable/left_strip_color_selector"></View>
<ImageView
android:id="#+id/left_menu_icon"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginEnd="15dp"/>
<com.zeenews.tv.base.BaseTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:id="#+id/left_menu_text"
android:lines="1"
android:textSize="14sp"
android:textColor="#color/leftmenu_text_selector"
android:textAllCaps="true"/>
</androidx.leanback.widget.NonOverlappingLinearLayout>
Note: For now, I have implemented the above code for red strip and menu text only
With the above code, I am getting below effects when I move the cursor from one menu option to another (only strip is getting colored and text is not getting colored.)
My Question: Am I doing something wrong? Can two widgets receive focus at the same time? Can I achieve these effects using any other standard coding practice?
I am using PagerSlidingTabStrip and I am trying to make some custom view for it. How can I achieve the rounded selected state background like below in the screenshot?
First of all, create a selector xml(custom_background.xml) file as below:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/some_ripple" android:state_pressed="true" />
<item android:drawable="#drawable/some_ripple" android:state_focused="true" />
<item android:drawable="#android:color/transparent" />
</selector>
The same then can be applied to your PagerSlidingTabStrip view in your layout xml file
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/channel_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:background="#color/theme_color"
android:textColor="#color/text_color_near_black"
app:pstsDividerColor="#00000000"
app:pstsIndicatorColor="#color/highlight_color"
app:pstsIndicatorHeight="4dp"
app:pstsShouldExpand="true"
app:pstsTabBackground="#drawable/custom_background" />
Hope this solved your problem. If you face any issues, do ask again.
In our previous holo designed app (targetSdkVersion 21, with theme Theme.Sherlock.Light.DarkActionBar), we are using system style attribute attr/actionButtonStyle to define our custom action bar button style.
actionbar_custom_view_done_discard.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<include layout="#layout/actionbar_discard_button" />
<View
android:layout_width="1px"
android:layout_height="match_parent"
android:layout_marginTop="12dp"
android:layout_marginBottom="12dp"
android:background="?attr/actionBarCustomViewDividerColor" />
<include layout="#layout/actionbar_done_button" />
</LinearLayout>
actionbar_done_button.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="?attr/actionButtonStyle"
android:id="#+id/actionbar_done"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView style="?attr/actionBarTabTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingRight="20dp"
android:drawableLeft="?attr/actionBarDoneIcon"
android:drawablePadding="8dp"
android:gravity="center_vertical"
android:text="#string/save" />
</FrameLayout>
StockAlertFragmentActivity.java
public class StockAlertFragmentActivity extends SherlockFragmentActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Inflate a "Done/Discard" custom action bar view.
LayoutInflater inflater = (LayoutInflater) this.getSupportActionBar().getThemedContext()
.getSystemService(LAYOUT_INFLATER_SERVICE);
final View customActionBarView = inflater.inflate(
R.layout.actionbar_custom_view_done_discard, null);
The outcome is as following, when we tap on the SAVE button.
However, after migrating our app to material designed app (targetSdkVersion 23, theme Theme.AppCompat.Light.NoActionBar), system attribute attr/actionButtonStyle no longer work well with rectangle button.
Instead, it draws a round overlay on the top of rectangle button.
toolbar_with_save_discard.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" >
<!-- android:elevation="4dp" is used due to http://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android- -->
<LinearLayout
android:id="#+id/buttons_linear_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:orientation="horizontal">
<include layout="#layout/toolbar_discard_button" />
<View
android:layout_width="1px"
android:layout_height="match_parent"
android:layout_marginTop="12dp"
android:layout_marginBottom="12dp"
android:background="?attr/toolbarCustomViewDividerColor" />
<include layout="#layout/toolbar_save_button" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
toolbar_save_button.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="?attr/actionButtonStyle"
android:id="#+id/toolbar_save"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView style="?attr/actionBarTabTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingRight="20dp"
android:drawableLeft="?attr/toolbarDoneIcon"
android:drawablePadding="8dp"
android:gravity="center_vertical"
android:text="#string/save" />
</FrameLayout>
I like to have the overlay drawn on the entire rectangle SAVE button.
I think most probably I can solve this, by avoiding from using style="?attr/actionButtonStyle", and supplying my very own defined selector.
However, I prefer not to do so. I prefer to use system provided style, for less maintenance headache.
How can I make style="?attr/actionButtonStyle" workable for rectangle toolbar button?
Or, Is there any other system style attribute, which will work well with rectangle toolbar button? At the same time, having ripple effect.
Attribute at play here is: actionButtonStyle which you set on your wrapping FrameLayout. On v23, it points to:
<style name="Widget.Material.ActionButton">
<item name="background">?attr/actionBarItemBackground</item>
<item name="paddingStart">12dp</item>
<item name="paddingEnd">12dp</item>
<item name="minWidth">#dimen/action_button_min_width_material</item>
<item name="minHeight">#dimen/action_button_min_height_material</item>
<item name="gravity">center</item>
<item name="scaleType">center</item>
<item name="maxLines">2</item>
</style>
The background is set to actionBarItemBackground which in turn points to this RippleDrawable:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight"
android:radius="20dp" />
The radius value is what you don't want.
To fix this, override actionBarItemBackground under your app's theme:
<style name="AppTheme" parent="....">
....
<item name="actionBarItemBackground">#drawable/custom_action_bar_item_bg</item>
<item name="android:actionBarItemBackground">#drawable/custom_action_bar_item_bg</item>
</style>
The drawable custom_action_bar_item_bg would be defined as:
res/drawable/custom_action_bar_item_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<color android:color="#...."/>
</item>
<item>
<color android:color="#android:color/transparent"/>
</item>
</selector>
res/drawable-v21/custom_action_bar_item_bg.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:id="#id/mask">
<color android:color="#android:color/white" />
</item>
</ripple>
The mask is what will give you the rectangle in case of API version > 21.
The downside: all items that use actionBarItemBackground will be affected (unless if that's okay). To fix this, you can create a separate theme to set on your FrameLayout wrapper. For example, this is your app's main theme:
<style name="AppTheme" parent="....">
....
....
</style>
Create another theme that inherits from AppTheme:
<style name="SelectiveActionBarButtonTheme" parent="AppTheme">
<item name="actionBarItemBackground">#drawable/custom_action_bar_item_bg</item>
<item name="android:actionBarItemBackground">#drawable/custom_action_bar_item_bg</item>
</style>
To use this, override android:theme on your wrapper FrameLayout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="?attr/actionButtonStyle"
android:id="#+id/toolbar_save"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:theme="#style/SelectiveActionBarButtonTheme">
....
....
</FrameLayout>
And of course, the simplest approach would be to set FrameLayout's android:background to ?attr/selectableItemBackground, and be done with it.
i have a ListView in my Navigation Drawer and want it looks like the Playstore App or Youtube App.
Means onClick changing FontColor for Example to red and when i just hold it the background should turn grey.
Do i have to use 2 onitemclicklistener?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp">
<ImageView
android:id="#+id/icon"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:contentDescription="#string/DrawerListIcon"
android:src="#drawable/ic_home"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#id/icon"
android:textSize="14sp"
android:textStyle="bold"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:textColor="#color/DrawerListFontColor"
android:gravity="center_vertical"
android:paddingRight="40dp"
android:paddingLeft="0dp"/>
</RelativeLayout>
Tried with Item and Selector. First thing Font Color don't change when i pressed the Button. Second the background of the Relative Layout turns blue insead of Grey.
drawer_list_font.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:color="#color/DrawerListFontColorPressed"
/>
<item android:color="#color/DrawerListFontColor"/></selector>
drawer_list_background.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:color="#color/DrawerListBackgroundFocused"
/>
<item
android:color="#color/DrawerBackground"
/></selector>
I had to use android:drawable instead of background on the relative Layout. On the Textview Android Stuio accepted android:color.
This is changed by changing view from ur java file at every click event u can change the view. U have to make multiple view ie xml files for that. Which are dynamically changed or u can also send parameters to a function and create an xml at runtime but that will be too deep for u
No need for listeners at all.
A better approach here is to create drawable XML's with definitions for every state ("pressed", "focused", etc).
Check out Color State List resources
For example:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false"android:color="#80000" />
<item android:state_focused="true" android:state_pressed="true" android:color="#ff0000" />
<item android:state_focused="false" android:state_pressed="true" android:color="#ff0000" />
<item android:color="#color/DrawerListFontColor" />
</selector>
i want to make image button, so when it pressed i will replase the not-pressed image to pressed image of the button, and then go to other activity. i have two different images in drawable.
i have two xml files:
first one- load the main activity: background and image button
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/black"
android:orientation="vertical" >
<ImageButton
android:id="#+id/b1_l"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/s1"
android:scaleType="centerCrop"
android:background="#color/trans"
android:src="#drawable/b1_l" />
</RelativeLayout>
second one:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
android:drawable="#drawable/image_not_pressed" />
<item android:state_pressed="true"
android:drawable="#drawable/image_pressed"" />
</selector>
what is the code that i need to write in addition to my xml?
or can i pass the xml and write it only as code...?
thanks!
you need to usually have drawable for pressed and default(unpressed) state. You can have the xml file like this(below) for that. You need to put this xml file in the drawable folder and then use as src for ImageButton or background source in case of Button.
Lets name it is mybutton.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true"
android:drawable="#drawable/your image name" />
<item android:state_focused="false" android:state_pressed="true"
android:drawable="#drawable/your image name" />
<item android:drawable="#drawable/your image name" />
</selector>
You layout file for main activity:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/black"
android:orientation="vertical" >
<ImageButton
android:id="#+id/b1_l"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/s1"
android:scaleType="centerCrop"
android:background="#color/trans"
android:src="#drawable/mybutton" />
</RelativeLayout>
You migth want do check out android developer guide on this
http://developer.android.com/guide/topics/ui/controls/button.html