How to set actionbar transparent background - android

I use below code to show an actionbar on the activity. But the background of the action bar is not transparent. I have searched some articles about how to set the actionbar background transparent but it doesn't seem to work for me. I have attached all the layout and theme code as below. Please help to check what I am missing here.
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.scanner_activity);
Toolbar toolBar = (Toolbar)findViewById(R.id.scanner_toolbar);
toolBar.setTitle("Title");
setSupportActionBar(toolBar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
Below is the activity layout xml file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/scanner_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#android:color/transparent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:theme="#style/AppScannerToolBarTheme"
/>
<com.journeyapps.barcodescanner.DecoratedBarcodeView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/scanner_toolbar"
android:layout_alignParentBottom="true"
android:id="#+id/zxing_barcode_scanner"
app:zxing_use_texture_view="true"/>
</RelativeLayout>
Below is the AppScannerToolBarTheme for the toolbar:
<style name="AppScannerToolBarTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#android:color/transparent</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:backgroundStacked">#android:color/transparent</item>
<item name="android:background">#android:color/transparent</item>
</style>
EDIT:
I have added below code but it still doesn't work:
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
toolBar.setAlpha(0.5f);
toolBar.setBackground(new ColorDrawable(Color.TRANSPARENT));
Below image is what I want to achieve:

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#0000")));
OR
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
Hope this will work for you thanks .

Toolbar is a view, so you could use alpha method from view class.
toolbar.setAlpha(0.5f);

Related

How to create a toolbar in PreferenceScreen?

I'm trying to make a Settings activity in my current app that extends from AppCompatPreferenceActivity. I was able to achieve the desired screen but couldn't create a simple toolbar with back key on it. I've already tried using:
inflating custom toolbar
using getSupportActionBar().setDisplayHomeAsUpEnabled(true) of the AppCompatPreferenceActivity
Most of what I'm using came from this!.
I removed the fragment part of it due to the errors it was causing.
Also, I have NoActionBar theme.
So far, I have used this in one of my 'about' and 'help' preferences which work flawlessly:
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
if (getSupportActionBar() != null) {
getSupportActionBar().setTitle(getString(R.string.about));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
}
UPDATE:
Got answer here
Yes when you use getSupportActionBar().setDisplayHomeAsUpEnabled(true); for toolbar it should work fine, your implementation seems to be right, but unless your debug or provide the entire code not all could find what the scenario is, also try checking this style.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<!--<item name="android:windowContentOverlay">#null</item>-->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="drawerArrowStyle">#style/MaterialDrawer.DrawerArrowStyle</item>
</style>
<!--use item name="drawerArrowStyle" if you are using dark primaryColor in your app, else remove it-->
<style name="MaterialDrawer.DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">false</item>
<item name="color">#android:color/white</item>
</style>
</resources>
toolbar = (Toolbar) findViewById(R.id.toolbar2);
setSupportActionBar(toolbar);
setTitle(getIntent().getExtras().getString("channe_name"));
toolbar.setSubtitle(getIntent().getExtras().getString("channe_name"));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
and also make sure you have the same in xml as well declared
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
android:background="?colorPrimary"
android:elevation="8dp"
android:minHeight="?attr/actionBarSize"
tools:ignore="Overdraw"
tools:targetApi="lollipop">
How add AndroidX Toolbar to PreferenceScreen
settings.xml
any
PrefsFragment.java
public class PrefsFragment extends PreferenceFragmentCompat {
#Override
public void onCreatePreferences(Bundle savedInstanceState, String rootKey) {
setPreferencesFromResource(R.xml.settings, rootKey);
}
}
activity_settings.xml
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/settings_toolbar"
app:title="#string/header_settings"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/settings_content"
/>
</LinearLayout>
SettingsActivity.java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_settings);
Toolbar toolbar = findViewById(R.id.settings_toolbar);
setSupportActionBar(toolbar);
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.settings_content, new PrefsFragment())
.commit();
}

Android ToolBar can change back button color but not title color

I want to change my Toolbar title color to blue. It stays white. I was able to set the back button but not the title color - am I missing something?
I've tried to change it at 3 different places:
Activity
Toolbar toolbar = (Toolbar) findViewById(R.id.detail_toolbar);
toolbar.setTitleTextColor(0xff00ff99);
setSupportActionBar(toolbar);
activity.xml
<android.support.v7.widget.Toolbar
android:id="#+id/detail_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolBarStyle"
android:background="#color/colorPrimaryDark"
android:titleTextColor="#android:color/holo_red_dark"
app:subtitleTextColor="#color/colorPrimaryDark"
app:layout_collapseMode="pin"
app:popupTheme="#style/ToolBarStyle" />
v21 styles.xml
<!-- ToolBar -->
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="titleTextColor">#color/colorPrimaryDark</item>
<item name="android:titleTextColor">#color/colorPrimaryDark</item>
<item name="android:textColorPrimary">#color/colorPrimaryDark</item>
<item name="android:textColorSecondary">#color/colorPrimaryDark</item>
<item name="actionMenuTextColor">#color/colorPrimaryDark</item>
<item name="android:textColor">#color/colorPrimaryDark</item>
</style>
styles.xml
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="titleTextColor">#color/colorPrimaryDark</item>
<item name="android:titleTextColor">#color/colorPrimaryDark</item>
<item name="android:textColorPrimary">#color/colorPrimaryDark</item>
<item name="android:textColorSecondary">#color/colorPrimaryDark</item>
<item name="actionMenuTextColor">#color/colorPrimaryDark</item>
<item name="android:textColor">#color/colorPrimaryDark</item>
</style>
What am I missing?
It stays white no matter what. I've even went through the 150 references to #ffffff in the whole project and nowhere is the toolbar referenced there.
targetSdk 26, running on Android 7.1.1
Create custom Toolbar like this:
toolbar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout 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="wrap_content"
android:fitsSystemWindows="false"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#android:color/backgroundColor"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Base.Theme.AppCompat.Light.DarkActionBar">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/blue"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Include it in you layout:
<include layout="#layout/toolbar_layout"/>
Use it in your activity's onCreate method:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_new_card);
Toolbar toolbar = findViewById(R.id.toolbar);
TextView toolbarTitle = findViewById(R.id.toolbar_title);
setSupportActionBar(toolbar);
if (getSupportActionBar() != null)
getSupportActionBar().setDisplayShowTitleEnabled(false);
toolbarTitle.setText("Your title");
...
}
Hope it will help.
Try to change this:
android:titleTextColor="#android:color/holo_red_dark"
to:
app:titleTextColor="#android:color/holo_red_dark"
in your activity.xml android.support.v7.widget.Toolbar section.
Ok so I have found the answer by literally stack tracing my code.
I have a PagerAdapter returning different fragments. I thought that each Activity was responsible to the Tabbar (it's a Master/Detail pattern for different tabs each) as I've had to set stuff like setSupportActionBar() which I've done in the subsequent Activities.
Stacktracing my code I've realized that there is a CollapsingToolbarLayout being find by view ID. This is where I set the bar's title. From there, I didn't find any title property but I've let auto complete lead me to setCollapsedTitleTextColor and setExpandedTitleColor.
So although the getColor() part is deprecated it's
bar.setCollapsedTitleTextColor(getResources().getColor(R.color.colorPrimaryDark));
bar.setExpandedTitleColor(getResources().getColor(R.color.colorPrimaryDark));
Still no idea why all the other places I've set it at didn't do the trick but very happy it's working now.
In Layout file use the Toolbar as Child layout of AppBarLayout
<LinearLayout 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="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.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</LinearLayout>
Style.xml
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
Inside MainActivity
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}

Why is the Toolbar in the middle of the screen?

I am trying to use the toolbar using the Android Developers Guide for enabling material theming on pre-lollipop devices.
My app theme extends Theme.AppCompat.Light.NoActionBar as so:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
and windowActionBar is set to false as so:
<style name="AppTheme" parent="AppBaseTheme">
<item name="colorPrimary">#EEEEEE</item>
<item name="windowActionBar">false</item>
</style>
My MainActivity looks like this:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
but the toolbar appears in the middle of the screen rather than on top. What am I doing wrong?
activity_main.xml:
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/swipe_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="40dp"
android:background="#EEEEEE" />
</android.support.v4.widget.SwipeRefreshLayout>
Your toolbar has nothing to do in the SwipeRefreshLayout
you have to use a LinearLayout (vertical) surrounding the Toolbar and SwipeRefreshLayout.
<LinearLayout orientation="vertical">
<Toolbar />
<SwipeRefreshLayout>
</SwipeRefreshLayout>
</LinearLayout>

Android custom action bar

I have a problem that is I add the custom action bar in app, but the action bar view has a gap(the red circle position, in the link's picture).
MainActivity code:
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_layout);
getSupportActionBar().setCustomView(R.layout.actionbar_layout);
getSupportActionBar().setDisplayShowCustomEnabled(true);
}
}
actionbar_layout code:
<?xml version="1.0" encoding="utf-8"?>
<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:background="#0146A3">
<TextView
android:id="#+id/abr_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:singleLine="true"
android:textColor="#FFFFFF"
android:textSize="26sp"
android:text="Title"
tools:text="Title"/>
</RelativeLayout>
But not use android support library, this problem does not occur.("MainActivity extands ActionBarActivity" change to "MainActivity extands Activity", and "getSupportActionBar() change to getActionBar()")
set Actionbar background using style.xml
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:actionBarItemBackground">#drawable/bg_actionbar_selected</item>
</style>
<style name="action_bar" parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/yourBackgound or color</item>
</style>
Let me suggest another way to do that:
Step 1:
Hide your actionbar.
Use this theme for the activity.
android:theme="#android:style/Theme.NoTitleBar"
step2:
Use a custom relative layout as actionbar
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="#009ACD">
</RelativeLayout>

Overlay toolbar on top of activity content

I'm using the AppCompat v21 library to create a Lollipop-like interface in my android app. So far it's working great.
Now I want to have to toolbar appear on top of my content in one of my activities.
However, I cannot get it to work. This is what I have so far:
Layout of activity:
<LinearLayout
android:id="#+id/main_parent_view"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:theme="#style/myAppTheme">
<include layout="#layout/toolbar_setlist_top"/>
<ImageView
android:id="#+id/image"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</LinearLayout>
Layout of toolbar:
<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"
app:theme="#style/MyActionBar"
app:popupTheme="#style/MyActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:layout_marginTop="0dp" />
Theme:
<resources>
<style name="myAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:activatedBackgroundIndicator">#drawable/list_selector</item>
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#color/primaryColor2</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="background">#color/primaryColor2</item>
<item name="windowActionBarOverlay">true</item>
</style>
</resources>
Code:
#Override
protected void onCreate(Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_setlist);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
If you want to place the toolbar on top of your content you can use a FrameLayout like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/main_parent_view"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/image"
android:layout_height="100dp"
android:layout_width="40dp"
android:background="#000"/>
</LinearLayout>
<include layout="#layout/toolbar_setlist_top"/>
</FrameLayout>
It doesn't appear that you're acquiring a reference to the toolbar view in your layout anywhere. You need to find the view first, then pass that reference to the setSupportActionBar method:
setContentView(R.layout.activity_setlist);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Assuming that when you say "Now I want to have to toolbar appear on top of my content in one of my activities" you are trying to use the Toolbar as your activity's ActionBar (instead of the old/original ActionBar) you must make your theme's parent theme "Theme.AppCompat.NoActionBar" instead of your current setting *.Light.DarkActionBar. Hope this helps.

Categories

Resources