I'm trying to style my EditTexts (and AutoCompleteTextViews) a certain way so that the line is a color that I specify. Normally, this work's just fine by following this answer: How to change the color of the line in ICS styled EditText.
However, it appears as though the style I define for my EditTexts is not observed when the EditText is part of an ActionView in the ActionBar menu.
I.e., I have an action view item in my menu.xml file:
<item
android:title="Search"
android:icon="#drawable/search_icon"
android:showAsAction="always|collapseActionView"
android:actionLayout="#layout/search_layout"
/>
I specify the layout to be used when this is expanded with the actionLayout property, and then I have a search_layout.xml file that looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText
android:inputType="text"
android:hint="Enter Search Term"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
This EditText doesn't take on the styling that I've defined in my styles.xml (and the same thing happens if it's an AutoCompleteTextView instead). How can I customize the style of an EditText/AutoCompleteTextView when it's a part of an ActionView?
As William said in the first comment on my question, the solution is to explicitly set the style on the EditText by adding style="#style/YourStyle" to the EditText in search_layout.xml.
Related
How do I make a basic icon button without text or background? For example, just a simple vector image from #drawables that, when clicked, shows that circular response thing around it. I don't want the icon to have any background color to it. Just an icon that can be clicked, that's literally it.
I can only figure out how to do it by creating a menu and setting the icon as an item with app:showAsAction="always". It seems like there must be a better way to do this.
Edit: Here's an example of what I want to achieve. It's very basic. Just a clickable icon with responsive feedback when touched. https://material-ui.com/components/buttons/#icon-buttons
It's exactly the same as creating the following. I just thought there was likely an easier way to do this without having to create and load a menu just for one single icon:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.mycompany.myapp.MainActivity">
<item
android:id="#+id/action_contacts"
android:icon="#drawable/ic_contacts_24"
android:title="#string/action_contacts"
app:iconTint="#android:color/white"
app:showAsAction="always" />
</menu>
First create a vector drawable and then add to the ImageView like
this:
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
app:srcCompat="#drawable/ic_delete" />
You can use a MaterialButton, ImageButton and even an ImageView for this. Here's an example of how you'd do it with an ImageView...
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:background="?attr/selectableItemBackground"
android:src="#drawable/your_icon" />
All you need to do is set the selectableItemBackground, this will use your theme's primary color (or maybe the secondary color, I can't remember).
Now if you want a different color for ripple effect, for example a grey ripple, then you can create the drawable yourself...
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#dddddd">
<item android:id="#android:id/mask">
<color android:color="#dddddd" />
</item>
</ripple>
and set the view background below..
android:background="?attr/selectableItemBackground"
it'll work with any view provided the view is clickable
Yes, you can use ImageView if you like, but if you want to generate the complete image (including frame/borders) yourself you don't have to go that far. You could practically use plain View (except that you'd have to supply android:layout_width/height explicitly). Just use Button and have the android:background specify a selector which will select between images.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/clear1" android:state_pressed="true"/>
<item android:drawable="#drawable/clear0"/>
</selector>
I'm having an issue with Togglebuttons when not specifying a theme.
If I use any theme they look fine but if I remove the android:theme="#style/AppTheme" tag from AndroidManifest.xml Togglebuttons add an unwanted icon.
Sample image here:
I made a sample project with just a togglebutton with following xml layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
and this is how it looks.
I think I need to define a new theme inheriting from device default theme to override the togglebutton icon but I've had no success so far.
I've been experimenting with simplifying some navigation drawer code by making use of the new NavigationView class in the Android design support library. It works great if you just want icons on the left, and text on the right like in the example in the documentation, but what if I want to add a single custom view to the layout which has an android.support.v7.widget.SwitchCompat like in the Google Play Movies app (see screenshot below)?
I've tried using the actionLayout attribute to specify a custom layout file like in the example code below, however that attribute appeared to be ignored as it didn't work.
res/menu/navigation_drawer.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="#+id/group1"
android:checkableBehavior="single">
<item
android:id="#+id/nav_screen1"
android:icon="#drawable/ic_list_black_24dp"
android:title="Screen 1" />
<item
android:id="#+id/nav_screen2"
android:icon="#drawable/ic_search_black_24dp"
android:title="Screen2"/>
</group>
<group android:id="#+id/group2">
<item
android:id="#+id/nav_custom"
android:icon="#drawable/custom_icon_24dp"
app:actionLayout="#layout/nav_drawer_switch"
android:title="Custom item with switch"/>
<item
android:id="#+id/nav_settings"
android:icon="#drawable/ic_settings_black_24dp"
android:title="Settings"/>
</group>
</menu>
res/layout/nav_drawer_switch.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.SwitchCompat
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:text="Custom item with switch"/>
</LinearLayout>
How can I get this to work? Ideally I'd like to add the custom view while still making use of my Menu layout, but if that's not possible without using a crude hack (like tapping into an existing layout generated by the support library) then I'd like to know the solution with the least amount of code, and which still makes it worth transitioning to NavigationView.
The actionLayout attribute is now supported in Android Support Library 23.1:
NavigationView provides a convenient way to build a navigation drawer, including the ability to creating menu items using a menu XML file. We’ve expanded the functionality possible with the ability to set custom views for items via app:actionLayout or using MenuItemCompat.setActionView().
So the code in the question should just work now.
NavigationView is a subclass of FrameLayout, which can have multiple children:
You can, however, add multiple children to a FrameLayout and control
their position within the FrameLayout by assigning gravity to each
child, using the android:layout_gravity attribute.
That means you can add a custom view to your NavigationView:
<android.support.design.widget.NavigationView
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/side_menu">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="bottom">
<android.support.v7.widget.SwitchCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="night_mode"/>
</LinearLayout>
</android.support.design.widget.NavigationView>
I had the same problem and found that NavigationView behaves differently depending on:
Whether you set the android:title and android:icon attributes on item or not
What kind of view your action layout contains (e.g. TextView or others)
Not setting the attributes worked for completely customizing the item:
<?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"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<item
android:id="#+id/nav_custom"
android:title="#null"
app:actionLayout="#layout/nav_drawer_switch" />
</menu>
(Note that you can also just not set android:title, but that results in a warning in Android Studio.)
The result:
(This is with version 27.1.1 of com.android.support:design, not sure about other versions.)
create a layout with switchcompat and mention it in menu item as
<item android:id="#+id/notification"
android:title="Notification"
app:actionLayout="#layout/notify" />`
then notify layout add this
<android.support.v7.widget.SwitchCompat
android:id="#+id/switch_compat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:checked="false"
android:onClick="notify"/>
onclick is the keyPoint,implement handler in your Activity,then it will work.
You might want to take a look at this library: https://github.com/mikepenz/MaterialDrawer. It makes it easy to use Navigation Drawer and it supports custom views.
I made a DialogFragment with a RadioButton ontop and a ListView below containing more RadioButtons. And now I'm just wondering what style the ListView uses that the RadioButtons don't look the same as the "stand-alone" one.
Here is a snippet of my dialog.xml
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/buttonGroup"
android:layout_alignParentTop="true"
android:orientation="vertical">
<RadioButton
android:id="#+id/none"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/none" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/white" />
<ListView
android:id="#+id/conferences"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
And my list_item.xml that I inflate as the rows in getView of my ArrayAdapter:
<?xml version="1.0" encoding="utf-8"?>
<RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/conference"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
My AppTheme is based on "Theme.AppCompat". I didn't change any style of a specific item in my View.
The "stand-alone" RadioButton has a white circle with a blue dot when selected and even has a different style while you press it down. The RadioButtons in the ListView are all black with a black dot and don't have a "press-down" style. It would be cool if I wouldn't need to programatically set styles for not checked/"press-down"/checked. I already tried to set 2 base Android themes that had "RadioButton" in their names on the ListView but nothing changed. Maybe there is a way to get the style of the "stand-alone" RadioButton and set it in the xml files for the other RadioButtons?
I would post an image but I'm new here so not already allowed to do this.
Update
I changed my AppTheme to this:
<style name="AppTheme" parent="Theme.AppCompat">
<item name="android:textViewStyle">#style/TextAppearance.AppCompat.Large</item>
<item name="android:radioButtonStyle">#style/RadioButtonStyle</item>
</style>
<style name="RadioButtonStyle">
<item name="android:textAppearance">#style/TextAppearance.AppCompat.Large</item>
</style>
And the RadioButtons in the ListView changed but not the "stand-alone" one. When I add the style to the RadioButton:
<RadioButton
android:id="#+id/none"
style="#style/RadioButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/none" />
the text changes but the RadioButton-circle is still there. For the RadioButtons in the ListView the circles are gone...
Make sure that LayoutInflater in your Adapter uses Activity context and not the application context.
Update:
Please remove android prefix from your style:
<item name="radioButtonStyle">#style/RadioButtonStyle</item>
And update RadioButtonStyle as follows:
<style name="RadioButtonStyle" parent="#style/Widget.AppCompat.CompoundButton.RadioButton" />
I have a issue with my listview, I basicly want the text in the fields (in the listview) to become black instead of white as default. I've followed a simple guide how manage this but it is not working for me. This is the guide: http://www.hascode.com/2011/12/writing-styles-and-themes-on-android/ .
This is my style.xml file were I try to enter a dark color to the text:
<style name="CustomTextView" parent="#android:style/Widget.TextView">
<item name="android:typeface">monospace</item>
<item name="android:textColor">#000000</item>
</style>
This is my bookmarks.xml were I try to load the style in the listview with following code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/CustomTextView">
</ListView>
</LinearLayout>
I've also tried to change the parent name in the style.xml to TextAppearance.Medium instead, but nothing works. Am I missing smomething, why can´t I just change the damn color? Please help! Thanx!
you should set the style="#style/CustomTextView" to the UI element that represent your listview's row (the TextView where you will put the text, eg)
ListView is a kind of container... Inside list view you add the views.. in your case you are adding TextViews... so you should set the style of that TextView which you are adding to this ListView...