So I have the following configuration:
A MenuItem with a selector drawable attached which I want to change based on user click.
However for some reason I cannot make it work because I cannot find a way to compare the icons(drawables).
My configuration is attached below:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_grid_id"
android:icon="#drawable/grid_option"
android:title="#string/layout_type"
app:showAsAction="ifRoom" />
</menu>
Selector is attached bellow:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_grid_on_32"
android:state_pressed="true" />
<item android:drawable="#drawable/ic_grid_off_32" /> <!-- default -->
</selector>
Also the onOptionsItemSelected:
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_grid_id: {
//I tried to use getContentState but does not seem to be reliable.
}
default:
return true;
}
}
I end up answering my own question. Maybe it will help others that have the same problem.
The idea is relatively simple(if you know it), and it is to use a switch or a toggle button.
Options menu looks like below:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_grid_id"
android:title="#string/layout_type"
// that was the difference
app:actionLayout="#layout/grid_option_layout"
app:showAsAction="ifRoom" />
</menu>
Now, one can use ToggleButton or Switch. I ended up using ToggleButton. Below one can se the configuration:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ToggleButton
android:id="#+id/switch_grid"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_centerVertical="true"
android:background="#drawable/grid_option"
android:focusable="false"
android:focusableInTouchMode="false"
android:textOff=""
android:textOn="" />
</RelativeLayout>
Now, the drawable selector looks like below(grid_option):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_grid_on_32" android:state_checked="true" />
<item android:drawable="#drawable/ic_grid_off_32" /> <!-- default -->
</selector>
Of course, ic_grid_on and off are some images.
Related
In my bottom navigation bar, I have 3 options.
In bottom navigation bar default shown, one option is selected color another two is in another color. I want all the 3 option same color. What can I do?
xml code:
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
app:menu="#menu/my_navigation_items"/>
Menu xml(my_navigation_items):
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/action_share"
android:title="#string/menu_share"
android:icon="#drawable/ic_share" />
<item android:id="#+id/action_fav"
android:title="#string/menu_fav"
android:icon="#drawable/ic_unfav" />
<item
android:id="#+id/action_delete"
android:icon="#drawable/ic_delete"
android:title="#string/menu_delete" />
</menu>
java code:
bottomNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.action_share:
case R.id.action_fav:
case R.id.action_delete:
}
return true;
}
});
One trick might help for you.
app:itemIconTint is property in BottomNavigationView.
Add bottom_navigation_color_selector.xml in your BottomNavigationView
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#android:color/white"
app:elevation="8dp"
app:itemIconTint="#drawable/bottom_navigation_color_selector"
app:itemTextColor="#drawable/bottom_navigation_color_selector"
app:menu="#menu/bottom_sheet_menu" />
bottom_navigation_color_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:color="#android:color/darker_gray" />
<item android:color="#android:color/darker_gray" />
</selector>
Look the material design documentation of bottom navigation bar component
https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-specs
Try using android:state_enabled for the selector item attributes.
I have a couple of ToggleButtons inside a HorizontalScrollView, I want each of these ToggleButtons to have a different on and off drawable
ToggleButton:
<ToggleButton
android:id="#+id/toggle_[nameOfToggle]"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/toggle_selector"
android:paddingLeft="5dp"
android:paddingRight="5dp" />
I have a selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- currently pressed turning the toggle on -->
<item android:state_checked="true" android:state_pressed="true"
android:drawable="#drawable/toggle_state_on"/>
<!-- currently pressed turning the toggle off-->
<item android:state_pressed="true"
android:drawable="#drawable/toggle_state_off"/>
<!-- not pressed default checked state -->
<item android:state_checked="true" />
<!-- Default non-pressed non-checked -->
<item />
</selector>
toggle_state_on.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/icon_on_[nameOfToggle]"/>
</layer-list>
What is the best way to programmatically achieve this, is there a way to check what toggle button it is and change the drawables of the on/off state based on that?
I have created custom floating button and use all library but not created custom floating button i have very tried to make to this button if you any idea how to make custom floating button.
Plz help me
My button look like this:
My code
<Button
android:id="#+id/btn_build_now"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="0"
android:background="#color/Background_Main"
android:drawableBottom="#drawable/button_bg"
android:paddingBottom="10dp" />
You could simply use Android support library to create a Floating Action Button.
For example here is a floating action button example with custom background color, pressed and focused states.
XML
<android.support.design.widget.FloatingActionButton xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fb"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/fb_icon_play"
app:backgroundTint="#drawable/fb_play_bg" />
fb_icon_play.xml in Drawable Folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/floating_button_blue_play_icon_pressed" />
<item android:state_focused="true" android:drawable="#drawable/floating_button_yellow_play_icon_pressed" />
<item android:drawable="#drawable/floating_button_yellow_play_icon_pressed" />
</selector>
fb_play_bg.xml in Drawable Folder
<?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="false" android:color="#3389b3"/>
<item android:state_focused="true" android:state_pressed="true" android:color="#3389b3" />
<item android:state_focused="false" android:state_pressed="true" android:color="#d1930f" />
<item android:color="#3389b3" />
</selector>
Here is another tutorial for creating a custom FloatingActionButton.
You can use the new version of FAB, Extended FAB in XML
The old one
<com.google.android.material.floatingactionbutton.FloatingActionButton/>
The newest:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton/>
then you can define Icon, Text and Shape:
android:text="Hi"
app:icon="#android:drawable/ic_media_play"
app:shapeAppearance="#style/ShapeAppearanceOverlay.Material3.FloatingActionButton"
app:shapeAppearanceOverlay="null"
I set up a color statelist like so:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/white_25percent_opacity" android:state_selected="true"/>
<item android:color="#color/white_25percent_opacity" android:state_pressed="true"/>
<item android:color="#color/white_25percent_opacity" android:state_focused="true"/>
<item android:color="#android:color/white"/>
</selector>
Then I tried to set it in the xml for a recyclerview item like so:
<TextView
android:id="#+id/myTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_centerHorizontal="true"
android:textSize="18sp"
android:paddingLeft="10dp"
android:paddingStart="10dp"
android:paddingRight="10dp"
android:paddingEnd="10dp"
android:textColor="#color/mySelector"
/>
but it doesnt work - the color doesnt change when pressed. So I tried to set it programmatically in onBindViewHolder like this:
viewHolder.myTextView.setTextColor(ContextCompat.getColorStateList(context, R.color.mySelector));
and I also tried like this:
viewHolder.myTextView.setTextColor(ContextCompat.getColor(context, R.color.mySelector));
which also don't work. Where is the mistake here and why doesn't this work for recyclerviews? To clarify - the text is shown in the initial color (white) but doesn't change to the pressed color.
Edit: also tried to solve it by making the selector a drawable - but it didn't work:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/white_25percent_opacity" android:state_selected="true"/>
<item android:drawable="#color/white_25percent_opacity" android:state_pressed="true"/>
<item android:drawable="#color/white_25percent_opacity" android:state_focused="true"/>
<item android:drawable="#android:color/white"/>
</selector>
If I set an ontouchlistener and switch the colors manually then it works properly - but I want to do this with a statelist.
Hi Implement your XML like the below code , Hope it would be helpful may be the issue is you have given both state_pressed and state_selected = true.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Color when the row is selected -->
<item android:drawable="#android:color/darker_gray" android:state_pressed="false" android:state_selected="true" />
<!-- Standard background color -->
<item android:drawable="#android:color/white" android:state_selected="false" />
</selector>
Turns out I needed to set this on the textview to make it work:
android:clickable="true"
On an Android View, I want to have a some clickable text that works similar to a webpage hyperlink.
It looks just like normal text (no button border), but when touched, I want the text color to change and I may also want its background to turn a reverse color.
Is it better to use a Button with a transparent background or a TextView. When should I choose one over the other?
Thanks much
you can use Button and make selector for background and text both.
textselector.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="#0000ff"/> <!-- pressed -->
<item android:state_focused="true" android:color="#android:color/white"/> <!-- focused -->
<item android:color="#android:color/white"/> <!-- default -->
</selector>
buttonselector.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="#android:color/white"/> <!-- pressed -->
<item android:state_focused="true" android:color="#0000ff"/> <!-- focused -->
<item android:color="#0000ff"/> <!-- default -->
</selector>
In your layout xml
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/buttonselector"
android:text="some text"
android:textColor="#drawable/textselector" />
hotveryspicy gave a great answer and really pointed me in the right direction. Thank you, but I had a few issues with the response.
What I want is a button that has Black text and a Gray background in its normal state and a Red background with White text in its selected state. Like this:
Using hotveryspicy's suggestions I had the following issues:
I get an error when trying to assign a drawable to textColor. Funny but I see other references to doing this sort of thing. Maybe the XML validation is stricter now?
I also got an error if I didn't define a android:drawable in the buttonselector.xml. It seems you can set the color of a drawable in a selector eiter, you need to actually create a drawable.
Anyhow this is what I did:
I created a Color State Resource that looks like this:
File: res/colors/link_button.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="#ffffff"/>
<item android:color="#000000"/>
</selector>
Then the following 3 drawables:
My button background in its normal state using a Shape Drawable:
File: res/drawable/link_button.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#cccccc"/>
</shape>
My button background in its selected state, also a Shape Drawable:
File: res/drawable/link_button_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ff0000"/>
</shape>
Then I created a Drawable Selector that chooses between the 2 shapes.
File: res/drawable/link_button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/link_button_selected"
android:state_pressed="true" />
<item
android:drawable="#drawable/link_button" />
</selector>
Then in my layout my button looks like this:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Button"
android:textColor="#color/link_button"
android:background="#drawable/link_button_selector"
/>
Thanks for the help everyone!
Add String like
<string name="link">'Google'</string>
In your layout
<TextView
android:id="#+id/link"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="all"
android:linksClickable="true"
android:text="#string/link" />
You can linkify your text using the linkify class.
Have a look at this and this with few examples
For Google's sake:
Rather than make a button look like a link why not make a TextView clickable? This was effectively what I wanted and worked for my use. I wanted text to be clickable to spawn an intent.
TextView.setOnClickListener(new View.OnClickListener()