I've would like set to grey color(icons and text) but now is showing as white color.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="end">
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Titulo_ventana"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="end"
android:orientation="horizontal"
android:padding="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="#dimen/cardview_default_elevation">
<android.support.v7.widget.SearchView
android:id="#+id/mySearchview"
android:label="#string/app_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:theme="#style/Base.Widget.AppCompat.SearchView">
</android.support.v7.widget.SearchView>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
I'd would like to reach something like this searchview within the toolbar and gray textcolor:
The left and right menu icons are optional.
The searchview is foldable by default, I don't mind if this feature should be changed.
The search view, that you want to achieve in fact is not a SearchView. It's a custom component. Here's the view tree that can be obtained using Hierarchy Viewer tool:
Here's the OverlaySearchPlateContainer:
As you can see from package name, it is shipped with Play Services, thus source code is not available.
Nevertheless, we can compare that tree with the tree of SearchView. Here's tree that can be obtained when ordinary SearchView is used:
Thus, you can see, that OverlaySearchPlateContainer is not a descendant of a SearchView, hence the UI you want to achieve cannot be accomplished using solely styles/themes.
I would recommend to not reinvent a wheel and to utilize 3rd party libraries, for example SearchBar-SearchView, where SearchView widget looks like this:
I have one solution its working fine in my application. You may try this.
EditText txtSearch = (EditText) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
txtSearch.setHint(getResources().getString(R.string.search));
txtSearch.setHintTextColor(Color.GRAY);
txtSearch.setTextColor(Color.GRAY);
You can set the background of search view
<android.support.v7.widget.SearchView
android:id="#+id/searchViewContact"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
app:searchIcon="#mipmap/icon_search"
app:closeIcon="#mipmap/icon_close"
android:background="#drawable/search_view_background"
android:layout_margin="5dp">
</android.support.v7.widget.SearchView>
search_view_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#dcdee1"/>
<stroke
android:color="#d7d3d3"
android:width="1dp"/>
<corners
android:radius="5dp"/>
</shape>
To change the text color, put this in your styles.xml:
<style name="MySearchView" parent="Base.Widget.AppCompat.SearchView">
<item name="android:editTextColor">#color/text_color</item>
<item name="android:textColorHint">#color/hint_color</item>
</style>
Replace #color/text_color and #color/hint_color to suit your needs.
And then change the SearchView theme attribute in your XML layout:
<android.support.v7.widget.SearchView
android:id="#+id/mySearchview"
android:label="#string/app_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:theme="#style/MySearchView">
</android.support.v7.widget.SearchView>
Related
I have the following drawable: custom_yellow_button.xml in the drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="5dp"/>
<solid android:color="#color/yellow"/>
</shape>
</item>
</selector>
and I have these two different layouts which both identically use the button:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
tools:context=".LogInActivity">
<Button
android:id="#+id/login_button"
android:layout_width="275dp"
android:layout_height="35dp"
android:layout_marginTop="20dp"
android:background="#drawable/custom_yellow_button"
android:fontFamily="#font/courierprime_regular"
android:includeFontPadding="false"
android:text="Log In"
android:textColor="#000000"
android:textSize="21sp"
app:backgroundTintMode="add" />
</androidx.constraintlayout.widget.ConstraintLayout>
and
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".RegistrazioneActivity">
<Button
android:id="#+id/login_button"
android:layout_width="275dp"
android:layout_height="35dp"
android:background="#drawable/custom_yellow_button"
android:fontFamily="#font/courierprime_regular"
android:includeFontPadding="false"
android:text="Log In"
android:textColor="#000000"
android:textSize="21sp" />
</androidx.constraintlayout.widget.ConstraintLayout>
In the first layout, it looks like this, which is how I want it :
while in the second layout, it looks like this:
.
Can anyone tell me why? I can provide more info if needed.
I am not sure what theme are you using, but with MaterialThemes you can do this and it's easy. First check this: https://material.io/components/buttons
Then, change your app theme to extend one of the material themes, like this:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
Then add implementations:
implementation 'com.google.android.material:material:1.2.1'
After that you can simply use this as your button inside your XML:
<com.google.android.material.button.MaterialButton/>
Inside this View you have a lot of attributes for your button. Simply check above link and see. For yours I would go with something like this:
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="60dp"
android:textAlignment="center"
android:textAllCaps="true"
android:padding="15dp"
android:backgroundTint="#color/yellow" //add background color
app:rippleColor="#color/colorPrimary" //ripple color - when button is pressed
style="#style/Widget.MaterialComponents.Button.TextButton" //material component style, many options to choose from
android:textColor="#color/colorPrimaryDark"
app:cornerRadius="15dp" //corner radius, so you can adjust how much oval you want your corners to be/>
And you get something like this:
See AndroidManifest.xml and make sure you have the same theme assigned to both of them.
The XML editor's preview also can be switched to all available themes, including custom themes.
When you provide the layout's Context to the XML editor alike this:
xmlns:tools="http://schemas.android.com/tools"
tools:context=".activity.MainActivity"
The XML editor will pick up that theme for the preview - and there's no need to switch them.
I am using BottomNavigationBar from here. I followed every instruction carefully and it works fine until I got this problem where icons pop out of the screen with too much of gap between them.
Menu_items.xml
<menu xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/nav_Menu"
android:enabled="true"
android:icon="#drawable/menu"
android:title="#string/nav_menu"
android:visible="true"
app:showAsAction="withText"/>
<item
android:id="#+id/nav_Deals"
android:enabled="true"
android:icon="#drawable/fire_deals_icon"
android:title="#string/nav_deals"
android:visible="true"
app:showAsAction="withText"/>
.
.
.
</menu>
MainMenu.xml
<RelativeLayout 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"
android:id="#+id/main_menu_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/TextcolorforWhite"
tools:context=".MainMenu">
<com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
android:id="#+id/main_nav"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
app:menu="#menu/nav_items"/>
<View
android:id="#+id/myProfileDivider"
android:layout_width="match_parent"
android:layout_above="#+id/main_nav"
android:layout_height="0.5dp"
android:background="#color/SettingsColor"/>
<FrameLayout
android:id="#+id/main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:paddingBottom="57dp"
android:layout_above="#id/myProfileDivider">
</FrameLayout>
Is there any solution for this?
In MainMenu.xml (in case of using constraintLayout, as the main parent layout, which is better to use) change android:layout_width="match_parent" to android:layout_width="0" and add these:
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
Also you may have to omit: android:layout_alignParentBottom="true".
See this documentation
Don’t use more than five destinations. For those cases, try tabs or a navigation drawer.
Five destinations: Active destinations display an icon and text label. Inactive destinations use icons, and use text labels if space permits.
Did you check your icon size
The recommended width is 24dp
The recommended height is 24dp
First remove android:layout_alignParentBottom="true" from your FrameLayout Second in your com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx add below item:
android:layout_alignParentEnd = "true"
android:layout_alignParentStart = "true"
android:layout_width="match_parent"
I am using a Google Places Autocomplete fragment in an Android app. When I use the fragment directly in the top level of a LinearLayout, everything works:
<LinearLayout ...>
<fragment
android:id="#+id/findRidePlaceAutocompleteFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"/>
</LinearLayout>
This layout leads to this UI:
As you can see, there is no border around the widget, whereas the TextView below it has a black border. From what I read, one trick to get a border around a fragment is to embed that fragment within a CardView. This method is actually recommended by Google's official documentation. Consider the following modified layout:
<LinearLayout ...>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_gravity="left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main_border">
<fragment
android:id="#+id/findRidePlaceAutocompleteFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"/>
</android.support.v7.widget.CardView>
</LinearLayout>
The trick here is to give the CardView a background with the Google Places fragment above it, such that the former will appear as a border around the latter.
But this modified layout causes the app to crash. Does anyone know why this is crashing, or how I might place a border around a Google PlaceAutocompleteFragment ?
You can set a custom background for the enclosing LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/main_border">
<fragment
android:id="#+id/findRidePlaceAutocompleteFragment"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
I'm using the same android:background="#drawable/main_border" that you have defined for your CardView. In my case main_border.xml (which lives on the res/drawable folder) looks like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke android:width="1dip" android:color="#000000"/>
</shape>
I have an actionbar and tab bar. I removed shadow below actionbar with
<item name="android:windowContentOverlay">#null</item>
Though, I want to add shadow under tab bar. I'm using SlidingTabLayout. My tab TextView:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabText"
android:layout_width="wrap_content"
android:layout_height="#dimen/actionbar_height"
android:textColor="#color/tab_color"
android:gravity="center"
android:textAllCaps="true"
android:singleLine="true" />
How to do that?
jmols answer results in a different shadow than what Google apps (e.g. Play Newsstand) use. This is my method, which results in the shadow looking exactly the same as Play Newsstand:
Create a drawable called shadow.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#android:color/transparent"
android:endColor="#33000000"
android:angle="90">
</gradient>
</shape>
Then, set that shadow to your content layout, for example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Your views here -->
<View
android:layout_width="match_parent"
android:layout_height="8dp"
android:background="#drawable/shadow" />
</RelativeLayout>
Placed underneath your toolbar/action bar, this will look exactly the same as the implementation in Play Newsstand and Play Store.
Shadows are currently only supported on Api level 21 (as they are rendered in real time) and are not provided by the support library unfortunately.
Hence you will have to mimic the shadows yourself using a custom drawable on api levels < 21.
The easiest way to do this is:
take the shadow 9-patch from the Google IO app.
set that shadow to your main content layout, for example:
<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">
<Toolbar
android:id="#+id/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:title="#string/toolbar_title"
android:elevation="#dimen/toolbar_elevation"/>
<FrameLayout
android:id="#+id/fl_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tb_toolbar"
android:foreground="#drawable/bottom_shadow"/>
</RelativeLayout>
Note: the only notable exception to this is CardView, this one does cast its own shadow on older api levels.
Have a look at this post for more information.
If you are using Android Material Design, to add a shadow to a view you need to specify the android:elevation attribute in your layout or call myView.setElevation() method in your code. You can have more on defining shadows with material design in the android documentation
Just add elevation to your Tablayout (0dp - 25dp). Read the material design guidelines for more information about elevation.
android:elevation="10dp"
Below example:
<android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/splashGreenTop"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:elevation="10dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:elevation="10dp"/>
Same question: Link
be aware, if you have the following line in the manifest then shadows wont show:
android:hardwareAccelerated="false"
And another link to follow: Link
I have a view aligned to the bottom of a navigation drawer that is not in list.
activity_main.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/readscreen_bg">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/loading_layout"
android:visibility="invisible">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressBar"
android:layout_centerInParent="true" />
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:id="#+id/navigation_drawer_content"
android:layout_width="#dimen/navigation_width"
android:layout_height="match_parent"
android:background="#color/navdrw_bg"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_gravity="start" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/navigation_support_item_height"
android:id="#+id/support_project"
android:focusableInTouchMode="true"
android:clickable="true"
android:focusable="true"
android:background="#drawable/support_project_selector"
android:layout_alignParentBottom="true">
<ImageView
android:layout_width="#dimen/navigation_item_icon_size"
android:layout_height="#dimen/navigation_item_icon_size"
android:id="#+id/navigation_icon"
android:layout_marginLeft="#dimen/navigation_item_icon_left_margin"
android:layout_marginRight="#dimen/navigation_item_icon_right_margin"
android:layout_centerVertical="true"
android:src="#drawable/ic_menu_support"
android:layout_alignParentLeft="true"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/navdrw_bg"
android:text="#string/navigation_support_project"
android:textSize="#dimen/navigation_item_text_size"
android:id="#+id/navigation_name"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_toRightOf="#+id/navigation_icon"/>
</RelativeLayout>
<ListView android:id="#+id/left_drawer"
android:layout_width="#dimen/navigation_width"
android:layout_height="match_parent"
android:layout_above="#+id/support_project"
android:layout_gravity="left"
android:dividerHeight="0dp"
android:divider="#null"/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
It is, with id support_project. The problem is selector for this layout doesn't work.
support_project_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selected -->
<item
android:drawable="#color/navdrw_support_block_bg_pressed"
android:state_focused="true"
android:state_selected="true"/>
<!-- Pressed -->
<item
android:drawable="#color/navdrw_support_block_bg_pressed"
android:state_focused="false"
android:state_selected="true"/>
<!-- When not selected -->
<item
android:drawable="#color/navdrw_support_block_bg"/>
</selector>
I was trying many variants and nothing helped. Selector does install color when view is not clicked but when it is clicked it doesn't change it's color.
But layout is clickable, I do receive click event and can process it. The problem is only with click/activate color.
Colors in selector for active and normal state are 100% completely different.
There are multiple aspects you are handling not so good, here.
First, your selector possible states:
You should have an item tag per state you want to customize and one different android:state value per item tag. So, remove your android:state_focused attributes from both states (selected and pressed).
On your pressed state, you are using android:state_selected="true" when you should be using android:state_pressed="true". This will make your selector work when the item is actually pressed, not only when it is selected.
Second, in order to affect the selector to your RelativeLayout, you have to set it clickable by adding android:clickable=true attribute in your xml layout. RelativeLayout is not clickable by default, unlike a Button, for example.
For last, add android:duplicateParentState="true" to your RelativeLayout children Views, ImageView and TextView. This attribute allows the children to have the same state as the parent. When your RelativeLayout is selected or pressed, that state will be replicated by its children.
And you are done. Your selector is working.