I am currently implement toolbar into my code and having some issues with it. It does not display or change the colour of the status and bar background. Here is the code I wrote:
toolbar.xml
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize" />
styles.xml
<resources>
<!-- Application theme. -->
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light">
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/blue</item>
<item name="colorPrimaryDark">#color/blue</item>
</style>
<color name="blue">#3F51B5 </color>
</resources>
java file
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_warfarin_info);
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
}
}
Result
May I know what did I do wrong? Thanks..
Firstly, in the toolbar layout XML file, you havent linked the style to the View. Try adding this line:
style="#style/AppTheme.NoActionBar"
ie:
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_awesome_toolbar"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:minHeight="?attr/actionBarSize"
style="#style/AppTheme.NoActionBar"
>
And the styles XML file:
<resources>
<!-- Application theme. -->
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light">
<item name="windowActionBar">false</item>
<item name="android:background">#color/blue</item>
</style>
<color name="blue">#3F51B5 </color>
</resources>
Related
There are questions answered on this, however, they don't seem to work with the new AndroidX
My Main Activity is saying "Home" in the toolbar, when I want it to say something else. I'm only using the default navigation drawer activity from Android Studio
Here's my Main Activity.java
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Let's say I want to set the text of the toolbar as something, how do I do it?
Here's the styles.xml too for reference
<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>
</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" />
Depending on your requirements, you could statically change it by using:
getSupportActionBar().setTitle("Some Title Here");
There are couple of ways to do that, as i am using Material Design Dependency i change my AppTheme from resources to this
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar>
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
Specifically this is the tag i am talking about
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar>
EDIT: In case if you want Material Design Dependency , here it is:
// New Material Design
implementation 'com.google.android.material:material:1.0.0'
Then go to your particular activity's XML and add custom toolbar, like so:
<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"
tools:context=".MainActivity"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"/>
</LinearLayout>
Notice, here i have used Linear Layout just not to mess with constraints..
Then into your activity, do this:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(toolbar)// this is your toolbar ID
setTitle("Hello World") // your toolbar title
}
ThankYou!
<?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_height="wrap_content"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"android.support.v7.widget.Toolbar
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary"
android:text="<your text>">
</androidx.appcompat.widget.Toolbar>
I am new to Android and working on my first android app. For my app I need a transparent Action Bar with a Navigation Drawer button. Everything is working fine except the color of the Action Bar. It is having blue color instead of transparent. I have tried various ways to make it transparent but its still blue. Can someone please help me out with my code:
custom_navigation_bar.xml:
<?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">
<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"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
styles.xml:
<resources>
<!-- Themes for Navigation Drawer -->
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay"
parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#00000000</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#00000000</item>
</style>
</resources>
Java Code Snippet:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//Setting Transparent Color for Action Bar
ActionBar actionBar = getSupportActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#00000000")));
You can just set the toolbar background to transparent :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#00000000"/>
you have one item in base theme windowActionBarOverlay set it to true and set action bar color to transparent.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:textColorPrimary">#color/text_color</item>
<item name="colorPrimary">#android:color/transparent</item>
<item name="windowActionBarOverlay">true</item>
</style>
</resources>
I accidentally deleted my color.xml file and as I've rebuilt it, I'm unable to fix this one problem. The color of the text in the options for toolbar buttons is white on white. It wasn't like that before(It was black text before) but I'm not sure how to fix it.
Here's an image of what I mean: https://imgur.com/VhDFkUu
And here's my styles.xml file:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/accent_color</item>
<item name="android:textColorPrimary">#color/abc_primary_text_material_dark</item>
<item name="android:textColorSecondary">#color/abc_primary_text_material_dark</item>
</style>
<style name="FabStyle">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_margin">16dp</item>
<item name="borderWidth">0dp</item>
<item name="elevation">6dp</item>
<item name="pressedTranslationZ">12dp</item>
<item name="rippleColor">#android:color/white</item>
</style>
<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#color/accent_color</item>
</style>
</resources>
And for good measure my colors.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<!--<color name="accent_color">#69F0AE</color>-->
<color name="dialog_color">#4db6ac</color>
<color name="accent_color">#FF4081</color>
<color name="background_light">#fafafa</color>
<color name="background">#ffffff</color>
<color name="text_color">#000000</color>
<color name="score_color">#9e9e9e</color>
</resources>
Here is the toolbar initialized in the MainActivity:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Here is the toolbar in my activty xml file:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/AppTheme"
android:elevation="6dp"
app:popupTheme="#style/AppTheme"
/>
You can try this, change your toolbar theme:
<android.support.v7.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"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:fitsSystemWindows="true"
android:clipToPadding="false"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize">
Add the popupTheme to your toolbar.
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
I'm trying to modify the text size of my ActionBar and I tried styling it but it doesn't change anything... That's my styles page.
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/AppTheme.Styled.ActionBar.TitleTextStyle</item>
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.ActionBar">
<item name="android:titleTextStyle">#style/AppTheme.Styled.ActionBar.TitleTextStyle</item>
</style>
<style name="AppTheme.Styled.ActionBar.TitleTextStyle" parent="#android:style/Widget.TextView">
<item name="android:textSize">19sp</item>
</style>
Also I had this on my styles.xml but doesn't work either
<style name="Theme.FixedSize" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="actionBarSize">4dip</item>
<item name="android:actionBarSize">4dip</item>
<item name="android:textSize">3sp</item>
</style>
I also have tried with a nasty way but it doesn't work only works with the color.
mActionBar.setTitle(Html.fromHtml("<font size=\"3\" color=\"white\">" + getString(R.string.app_name_device)));
After you say to me... I know now it's used Toolbar BUT I have to do it now with ActionBar.
EDIT
I hided the ActionBar like this :
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<!-- Customize your theme here. -->
</style>
Then I added a ToolBar like this :
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:id="#+id/toolbar"
app:titleTextAppearance="#style/Toolbar.TitleText" />
But the Layout messed up, it goes up and now the ToolBar is collapsed with the first TextView
You can do it programmatically like this
Html.fromHtml("<big><font color=\"white\">" + getString(R.string.app_name_device)+"</big>")
for small text you can change tag <big> with <small>
and if you want to provide specific size of Title Text then you should use Toolbar and use below theme/style
Create one layout toolbar.xml and put below code
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:id="#+id/toolbar"
app:titleTextAppearance="#style/Toolbar.TitleText" />
and change size in
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">18sp</item>
</style>
and you can inculde above layout in your each Activity layout files like below
<include
layout="#layout/toolbar"
/>
Toolbar in your Activity
ToolBar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setTitle(Html.fromHtml("<big><font color=\"white\">" + getString(R.string.app_name_device)+"</big>"));
I do it so:
import android.support.v7.app.ActionBar;
public void title_change(String text) {
TextView tv = new TextView(this);
tv.setText(text);
tv.setTextSize(15);
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(tv);
}
I have a question about the android toolbar. Normally, the toolbar fills the whole space from left to right and has no margin to the top.
Mine looks like a tile and has margins everywhere. Android Studio renders it just fine, but when I run it on a Galaxy Tab 4, it looks like a tile.
Screenshot
Activity:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_newsreader);
// create the toolbar
toolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
app_bar.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbarxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
app:popupTheme="#style/CustomToolbarPopup"
app:theme="#style/CustomToolbarTheme"
app:navigationIcon="#drawable/ic_home_white_16dp">
</android.support.v7.widget.Toolbar>
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/primary</item>
<item name="android:textColorPrimary">#color/primary_text</item>
<item name="android:textColorSecondary">#color/secondary_text</item>
<item name="windowActionModeOverlay">true</item>
<item name="actionModeBackground">#android:color/black</item>
</style>
<!-- -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
<!---->
<style name="CustomToolbarTheme" parent="Base.ThemeOverlay.AppCompat.Dark">
<item name="android:textColorPrimary">#color/toolbar_text</item>
<item name="windowActionModeOverlay">true</item>
</style>
<style name="CustomToolbarPopup" parent="Base.ThemeOverlay.AppCompat.Light">
</style>
Ok, the error is in activity xml, where a padding for the LinearLayout was set to 5dp
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:orientation="vertical"
android:padding="5dp">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</include>