I've the following layout for an Activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator_charts_activity"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- App bar -->
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- Toolbar -->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/App.Theme.Overlay"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<!-- Tab layout -->
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/white_80" />
</android.support.design.widget.AppBarLayout>
<!-- View pager -->
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
With App.Theme.Overlay:
<style name="App.Theme.Overlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlActivated">#android:color/white</item>
<item name="searchViewStyle">#style/App.Theme.SearchView</item>
</style>
And App.Theme.SearchView:
<style name="App.Theme.SearchView" parent="Widget.AppCompat.Light.SearchView">
<item name="searchHintIcon">#null</item>
<item name="queryBackground">?attr/colorPrimary</item>
<item name="submitBackground">?attr/colorPrimary</item>
</style>
The menu actions for the Activity consists in a SearchView:
<?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/action_search"
android:icon="#mipmap/search"
android:title="#string/search_a_product"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="collapseActionView|ifRoom" />
</menu>
When i click the search icon and type some text, I assume it has the same color of the background, because i cannot see it, but the I've search results. This is not happening if the SearchView is not inside the app bar (but I need it). Could you please provide some help with this? Many thanks.
Related
I am new in android development and I do not know that what it is actually called(Above space of Toolbar which is shown in the image below or where time and battery sign is showing.) and I want to fill custom color on it so please tell me how to fill the color on it.
thank you...
Below is my XML file
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eee">
<android.support.v4.widget.DrawerLayout
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/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.devbhoomimedia.maangal.ProfilesActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:titleTextColor="#ffffff"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="40dp"
app:tabTextColor="#ffffff"
app:tabMode="scrollable"
app:tabGravity="fill"
android:background="#2f6b00"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="4dp"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:menu="#menu/menu_nevigation"
app:itemTextAppearance="?android:attr/textAppearance"/>
View above the Toolbar is officially know as status bar in android and to change color of status bar check out the answer of this question How to change the status bar color in android
Try below :
Go to app -> res -> value -> colors.xml - change colorPrimaryDark color
<color name="colorPrimaryDark">#030239</color>
or,
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/color_primary</item>
<item name="colorPrimaryDark">#color/color_secondary</item>
<item name="colorAccent">#color/color_accent</item>
<!---Below is the code for status bar color------>
<item name="android:statusBarColor">#color/color_secondary</item>
</style>
or,
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.RED);
}
You can use this for API Level 21 and above:
Place this is your values-v21/styles.xml
-> The space on the top of toolbar is called StatusBar.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/color_primary</item>
<item name="colorPrimaryDark">#color/color_secondary</item>
<item name="colorAccent">#color/color_accent</item>
<item name="android:statusBarColor">#color/color_primary</item>
</style>
</resources>
Check popular answer At Here.
Happy Coding...
I am trying to make the toolbar background color transparent however, the colorPrimary theme seems to be showing instead. When I set the background of the toolbar to a standard color, it overrides colorPrimary and work as intended, but is there a way for me to get rid of it completely as to make the toolbar background transparent? The reason that I still want colorPrimary is because of the recent apps tab color, I just want it to not show in the toolbar. Thank you.
Toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent" />
Style
<style name="AppTheme1" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#android:color/transparent</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="android:windowLightStatusBar">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:elevation">0dp</item>
<item name="elevation">0dp</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:textColorSecondary">#color/colorPrimary</item>
</style>
use the code instead of only toolbar
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:background="#android:color/transparent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
use this
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/background_toolbar_translucent" />
background_toolbar_translucent.xml
<?xml version="1.0" encoding="utf-8"?>
<gradient
android:angle="270"
android:endColor="#android:color/transparent"
android:startColor="#color/black_alpha_40"/>
colors.xml
<color name="black_alpha_40">#66000000</color>
make toolbar.xml inside layout folder. Use below code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
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="#android:color/transparent"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
And use this toolbar in your activity's xml. This way you will have a transparent toolbar.
I just want bring my navigation drawer under status bar every thing works fine but problem is my status bar is shadow .
How can i change it to transparent , like play store app .
Here is my app theme
<item name="colorPrimary">#color/colorPrimaryDark</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#android:color/white</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">?attr/colorControlHighlight</item>
and main activity xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This LinearLayout represents the contents of the screen -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The ActionBar displayed at the top -->
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:elevation="0dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tab_layout"/>
<!-- The main content view where fragments are loaded -->
<FrameLayout
android:id="#+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:headerLayout="#layout/nav_header"
android:fitsSystemWindows="false"
android:layout_gravity="start"
app:menu="#menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
You can simply change Android status bar color as transparent.
this will help you.
Window window = activity.getWindow();
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
/*----set color----*/
window.setStatusBarColor(activity.getResources().getColor(R.color.my_statusbar_color));
ok i fix it my self if you have similar problem remove all these lines from your theme
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
and just add
android:fitsSystemWindows="true"
to your main liniear layout
I have a Navigation Drawer that opens from right to left, everything is working fine and the hamburger icon is working fine and it's in the right corner but menu icons are at the left of menu items.
How to move them to the right of menu items?
Please see the screen shot
This is my menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="none">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_navigation_home"
android:title="#string/nav_menu_home" />
<item
android:id="#+id/nav_profile"
android:icon="#drawable/ic_menu_profile"
android:title="#string/nav_profile" />
<item
android:id="#+id/nav_help"
android:icon="#drawable/ic_navigation_help"
android:title="#string/nav_help" />
<item
android:id="#+id/nav_manage"
android:icon="#drawable/ic_menu_manage"
android:title="#string/nav_manage" />
<item
android:id="#+id/nav_logout"
android:icon="#drawable/ic_logout"
android:title="#string/nav_logout" />
</group>
<item android:title="#string/nav_communicate">
<menu>
<item
android:id="#+id/nav_facebook"
android:icon="#drawable/ic_facebookx"
android:title="#string/nav_face_page" />
<item
android:id="#+id/nav_send"
android:icon="#drawable/ic_menu_send"
android:title="#string/nav_contact" />
</menu>
</item>
</menu>
and this is my layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
I searched a lot but didn't find anything related to this issue.
Thanks in advance.
If you want to use NavigationView for handling DrawerLayout, make your NavigationView right to left by following code:
#TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1) //call this before super.onCreate
private void forceRtlIfSupported() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
getWindow().getDecorView().setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
}
}
and set RTL flag in AndroidManifiest.xml
android:supportsRtl="true"
unfortunately above code only supported for API 16 and later. In order to handle lower API, you can also implement DrawerLayout with ListView and do whatever you want. You can find a tutorial about this approach here.
Something is making my app crash. I am not sure why I need to run a drawing app
my styles.xml file:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
this is my styles.xml v21 file
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">true</item>
**<item name="windowNoTitle">true</item>**
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
If I set the above to false, my drawing app will crash.
My drawingcontent.xml
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/drawing_main"
tools:context=".DrawingActivity">
android:id="#+id/custom_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/toolbar_bottom" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_bottom"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:visibility="gone"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</RelativeLayout>
The other is my drawing_main.xml file
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".DrawingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<com.example.kahheng.smartchat.CustomView
android:id="#+id/custom_view"
android:layout_below="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/toolbar_bottom" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_bottom"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</RelativeLayout>
Please tell me what wrong with my code and why I must remove the statusbar?
anyone got a idea?
I got code from here
http://www.valokafor.com/android-drawing-app-tutorial-pt-2/
You are using a Toolbar in your XML, and I presume you are using that Toolbar as your ActionBar. Therefore, you can't have another action bar from the theme (there can be only 1 action bar in one activity). So to use the Toolbar as action bar, you have to either use "window no title" or inherit from one of the .NoActionBar themes.