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
Related
I get a layout with an androidx.appcompat.widget.Toolbar
<?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="#fff"
tools:context=".Activity.Home">
<androidx.appcompat.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="?attr/actionBarTheme"
app:layout_constraintTop_toTopOf="parent"
android:backgroundTint="#4862ed"
app:titleTextColor="#ffff"/>
</androidx.constraintlayout.widget.ConstraintLayout>
So I want to change the color of the three-dots menu icon set in the Toolbar, but I didn't find any solution which works correctly.
I tried to defined a new style, set from the activity or change it inside the xml declaration but nothing works.
Someone could help me?
With a Material Components Theme you can use:
<androidx.appcompat.widget.Toolbar
android:theme="#style/ThemeOverlay.App.Toolbar"
...>
<style name="ThemeOverlay.App.Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<!-- color used by navigation icon and overflow icon -->
<item name="colorOnPrimary">#color/myColor</item>
</style>
With an AppCompat Theme:
<androidx.appcompat.widget.Toolbar
app:theme="#style/ThemeOverlay.App.Toolbar" />
<style name="ThemeOverlay.App.Toolbar" parent="Theme.AppCompat.Light">
<!-- navigation icon color -->
<item name="colorControlNormal">#color/my_color</item>
<!-- color of the menu overflow icon -->
<item name="android:textColorSecondary">#color/my_color</item>
</style>
If you use MaterialToolBar you can use this code in the Activity:
MaterialToolBarId.menu.findItem(R.id.yourItemId).icon.setTint(resources.getColor(R.color.yourColor))
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>
I am creating my own action bar with menu items and therefore using Theme.AppCompat.Light.NoActionBar.
I want to have the action bar purple and the title color white, but at the moment it is black.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
my action bar xml is:
<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:id="#+id/app_bar"
>
As explained in this Google+ pro-tip, you can use a ThemeOverlay to customize only certain things. This is useful for when you need to make text light on a dark background, which can be achieved by adding android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" to your Toolbar:
<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:id="#+id/app_bar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
This technique was further discussed in the Theming with AppCompat blog+video.
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.
I'm new to android development and I'm working on an app with ActionBar and Tabs. Recently I switched to the new support library Toolbar but the title of the toolbar (ActionBar) isn't vertically centred, while the action buttons are correctly placed.
Title image
The same problem occurs with the first MenuItem in the bar (it's moved up a little bit). Menu image
My activity extends the AppCompatActivty and the layout looks like this:
<?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:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/action_bar_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ActionBarTheme"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="fixed"/>
<com.myApp.app.views.widgets.ViewPager
android:id="#+id/fragmentPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
and the style:
<style name="ActionBarTheme" parent="Widget.AppCompat.Toolbar">
<item name="android:textColorPrimary">#color/colorPrimaryDark</item>
<item name="colorControlNormal">#color/colorPrimaryDark</item>
<item name="android:background">#color/colorPrimary</item>
</style>
Could someone help me fix this issue? I've searched for a solution but found nothing.
P.S. They were correctly placed as I was using the default action bar
You should use android:theme rather than app:theme here:
android:theme="#style/ActionBarTheme"
Your style should derive from the action bar overlay:
<style name="ActionBarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
...
</style>
Consider just using the ActionBar theme directly to start to isolate the problem.