I am trying to set up the action bars and the status bar within my app, however I have run into an issue. I did have it working, but it wasn't a clean way of doing things, so I decided to start over.
On the launch activity I want the status bar to be visible, with the pink background that I'm using throughout the app (no action bar). On the next view I want both the action bar and the status bar.
This is what I have within my launch 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="8dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="8dp"
tools:context="com.andrewnwalker.mousetimes_california.ParkSelectActivity">
<LinearLayout
...>
<TextView
.../>
<TextView
.../>
<Button
.../>
<Button
.../>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
And this is what I have in the second 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.andrewnwalker.mousetimes_california.MainActivity">
<android.support.v7.widget.ActionBarContainer
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<include layout="#layout/content_main"/>
</android.support.design.widget.CoordinatorLayout>
And in content main:
<?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"
tools:context="com.andrewnwalker.mousetimes_california.MainActivity"
tools:showIn="#layout/activity_main">
<android.support.v4.widget.SwipeRefreshLayout
...>
<android.support.v7.widget.RecyclerView
..../>
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
And finally in styles:
<resources>
<!-- 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>
<item name="android:typeface">serif</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
It's probably a bit of a mess, but I'm pretty confused by the settings for styles and action bars. Can anyone suggest the changes I can make to do what I'm looking for?
At the moment the first activity has shows the status bar text, but no background colour, and the second activity shows the status bar and action bar, but it also contains a menu item, which I don't want.
Thanks!
The status bar color conforming to material design is driven by the app's theme. You can read the official docs about this, as there's not enough information here to know for sure what's going on. You might be overriding the app theme on the first activity in the manifest or changing it somehow in the activity. The first activity does have a peculiar layout. There's no need to use CoordinatorLayout here if you don't have an action bar. If you just need to scroll the inner LinearLayout, just use a ScrollView instead.
To remove the action bar menu, make sure that you're not returning a menu in onCreateOptionsMenu or modifying anything in onPrepareOptionsMenu. Remove those methods if they're not needed.
Related
I'm trying to create the following layout:
In my layout main_act I have:
<!-- Tool bar -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primaryColor"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</LinearLayout>
<!-- Menu -->
And in Manifest file I have:
<activity
android:name=".MainAct"
android:label="MainAct"
android:theme="#style/MainAct" />
where the "#style/MainAct" is:
<style name="MainAct" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
I want to have no bar in order to use the toolbar so I used parent="Theme.AppCompat.Light.NoActionBar" but it displays the bar anyways with the string MainAct. How can I display the menu icon on the background without the action bar?
Remove the <androidx.appcompat.widget.Toolbar> tag and add an ImageButton on top left corner with menu icon
In my v27\style.xml I have the following code to set a white navbar:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:navigationBarColor">#android:color/white</item>
<item name="android:windowLightNavigationBar">true</item>
</style>
It works, but the white navbar "joins" with the white background. I would to add an horizontal line on the navbar, in each activity. How can I do?
This is what I would (from Youtube), I highlighted it with red rectangle:
I think for cases like these you may need to have a custom toolbar layout so that you can optimise the layout whichever way you like.
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.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_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvToolBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="18sp"
android:text="Toobar"
android:fontFamily="#font/filson_pro_book"
android:textColor="#color/white"
android:visibility="visible"/>
<FrameLayout
android:layout_gravity="center_horizontal"
android:background="#color/white"
android:layout_width="100dp"
android:layout_height="1dp"/>
</LinearLayout>
You would probably want to add an horizontal line each time you open the nav drawer:
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#FF0000FF"
android:layout_gravity = "bottom/>
If you want the line to be on half of the screen (only on the nav)- add it inside the nav.
If you want the line to be on the whole screen (as you marked in the picture)- add it after adding the nav.
Since API 27 there is an attribute in the style called navigationBarDividerColor that allows to do that. You can complement it with the navigationBarColor to make it look like the one in your screenshot.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
...
<item name="android:navigationBarColor">#android:color/white</item>
<item name="android:navigationBarDividerColor">#DBDBDB</item>
</style>
</resources>
is it possible to customize the background (and title) of my action bar in a specific activity? What I have done and it's not working:
<style name="AppTheme.BenchTheme"> <!-- style of my activity -->
<item name="android:windowBackground">#android:color/holo_blue_light</item>
<item name="android:actionBarStyle">#style/BenchActionBar</item>
</style>
and
<style name="BenchActionBar">
<item name="android:background">#color/colorBench</item>
</style>
I want to do it in my style.xml. Is it possible? I know I can do it via code (using something like getSupportActionBar().setBackgroundDrawable(myColor);)...
Thanks
First make your Theme extend from Theme.AppCompat.Light.NoActionBar:
<style name="AppTheme.BenchTheme" parent="Theme.AppCompat.Light.NoActionBar">
Then in your layout you can already add the toolbar as you want for example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/kelly_green"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
style="#style/MyToolbarElevation"
>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/txt_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/_2sdp"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="#dimen/_13sdp"
/>
</android.support.v7.widget.Toolbar>
This is my current layout in action:
The xml file producing this looks like:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/toolbarTheme"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</LinearLayout>
<include layout="#layout/drawer"/>
</android.support.v4.widget.DrawerLayout>
The style that the theme uses:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<item name="android:colorAccent">#color/accent</item>
<item name="android:statusBarColor">#color/primary_dark</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
The expected result was that the status bar would be colored in the primary_dark color, yet the drawer should be on top of it (like in Google apps), yet I get this result. How do I fix this?
You need to make sure your activity has android:fitsSystemWindows="true" and maybe android:clipToPadding="true"but bare in mind this is for later version of android only
I am trying to follow this tutorial to create material design tool bar. I am at step 7 where my activity should have a color tool bar but my app looks like
for reference, here are my style.xml, color.xml, tool_bar.xml files
style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">#color/ColorPrimary</item>
<item name="android:colorPrimaryDark">#color/ColorPrimaryDark</item>
<!-- Customize your theme here. -->
</style>
</resources>
There was another style.xml in the same folder which has (21) next to it. I didn't make any changes to it though.
color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ColorPrimary">#FF5722</color>
<color name="ColorPrimaryDark">#E64A19</color>
</resources>
tool_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:elevation="4dp">
</android.support.v7.widget.Toolbar>
activity_main.xml
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
</RelativeLayout>
UPDATE
If i make changes in stylev21.xml file, I can see my app looks like whats in the tutorial. But if leave style-v21.xml unchanged and make changes in style.xml I don't see those changes. What style*.xml file shall i edit ?
Purpose of having different styles.xml is that you can add changes specific to the Android version. But then you need to maintain same changes in both the files.
If you are testing your application on device having Android version 5.0 lollipop then style defined in v21/styles.xml will reflect in your application. Otherwise common styles.xml
If you want the same output as displayed in tutorial then I would suggest few changes.
Edit your activity_main.xml
<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"
tools:context=".MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
</RelativeLayout>
P.S. I have just removed margin from RelativeLayout.
Edit both styles.xml and define style which contain no Action bar. E.g. "Theme.AppCompat.Light.NoActionBar"
After doing these changes your app will work perfectly on all devices.
I hope it help.
Change your theme to Theme.AppCompat.Light.DarkActionBar instead of NoActionBar.
Then you don't need to add add it in your layout XML file
Also change android:colorPrimary to colorPrimary (take off android:) and android:colorPrimaryDark to colorPrimaryDark.
Your image has the three dots for the context menu , its still showing the action bar . You must have the following line for tool bar to take effect
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.tool_bar); // Attaching the layout to the toolbar object
setSupportActionBar(toolbar); // Setting toolbar as the ActionBar with setSupportActionBar() call
}
Make your style.xml like this-
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
<!-- Customize your theme here. -->
</style>
</resources>
Reason - AppCompat search for text without "android:"