I tried this . But the problem I am facing is with <item name="android:windowActionBarOverlay">true</item>
the sliding tab goes behind the Actionbar.
(see the logo and title above tabs)
When i set
android:layout_marginTop="?attr/actionBarSize"
then sliding tab doesn't remain transparent.
What is the correct way to make actionbar transparent without sliding tabs going behind the actionbar?
EDIT:
activity_main.xml
<?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:orientation="vertical"
android:background="#drawable/newbg">
<!-- The sliding tab -->
<com.github.amitt001.musicapp.stab.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- The pager that allows us to swipe between fragments -->
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="#android:color/transparent"/><!--#A6000000" -->
</LinearLayout>
Styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="android:actionOverflowButtonStyle">#style/ActionButtonOverflow</item>
<!-- Support library compatibility -->
<item name="actionOverflowButtonStyle">#style/ActionButtonOverflow</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="windowActionBarOverlay">true</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#android:color/transparent</item>
<item name="background">#android:color/transparent</item>
</style>
<style name="ActionButtonOverflow" parent="#style/Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">#drawable/ic_drawer</item>
</style>
</resources>
Make an xml with a Toolbar and tabs
tool_bar_tabs.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"
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="wrap_content"
android:layout_alignParentTop="true"
android:minHeight="?attr/actionBarSize"
android:background="#color/ColorPrimary"
android:elevation="4dp"
app:theme="#style/ToolbarColors">
</android.support.v7.widget.Toolbar>
<com.github.amitt001.musicapp.stab.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
</style>
your activity_main.xml
<?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:orientation="vertical"
android:background="#drawable/newbg">
<include
android:id="#+id/tb_tabs"
layout="#layout/tool_bar_tabs"></include>
<!-- The pager that allows us to swipe between fragments -->
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="#android:color/transparent"/><!--#A6000000" -->
</LinearLayout>
Init. toolbar and make it an actionbar in
MainActivity
public class Main extends AppCompatActivity{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar tb = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(tb);
}
Related
My title bar looks like this:
I'm trying to make it transparent to get only the navigation icon & map full screen into the map view, but every time I am trying the transparent code to make the bar transparent it's ended up showing the white color.
I also try ed NoAction bar but its still ended up showing a white title bar.
Home_activity.xml
<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:background="#android:color/transparent"
android:scrollbars="horizontal">
<RelativeLayout
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:popupTheme="#style/Theme.AppCompat.NoActionBar">
</android.support.v7.widget.Toolbar>
<!-- The first child in the layout is for the main Activity UI-->
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignTop="#+id/drawer_layout"
android:scrollbars="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</FrameLayout>
</LinearLayout>
<!-- Side navigation drawer UI -->
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_header"
app:itemBackground="#drawable/naviagtionview_statecolor"
app:itemIconTint="#color/black"
app:itemTextColor="#color/black"
app:menu="#menu/my_navigation_items">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
style.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/hint</item>
<item name="drawerArrowStyle">#style/MyDrawerArrowToggle</item>
<item name="colorPrimaryDark">#color/hint</item>
<item name="colorAccent">#color/black</item>
<item name="actionBarStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="MyTheme.ActionBar" parent="android:Widget.Holo.ActionBar">
<item name="android:background">#android:color/transparent</item>
<item name="android:backgroundStacked">#android:color/transparent</item>
<item name="android:displayOptions">showTitle</item>
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="drawerArrowStyle">#style/MyDrawerArrowToggle</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/black</item>
</style>
<style name="MyDrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/black</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="EditText.Login" parent="Widget.AppCompat.EditText">
<item name="android:textColor">#android:color/black</item>
<item name="android:textColorHint">#android:color/darker_gray</item>
<item name="colorAccent">#color/yellow</item>
<item name="colorControlNormal">#color/black</item>
<item name="colorControlActivated">#color/yellow</item>
</style>
But it's showing like this:
I had a similar issue,
I used different ways to implement it,
you may try this to make toolbar transperent.
I want to let the action bar bottom line disappear , i try to use toolbar.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
Obviously it's not working.
Is it possible to let the bottom line disappear ? any help would be grateful ,thanks.
my MainActivity xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.user.taiwandigestionsociety_v11.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<include layout="#layout/toolbar"/>
<FrameLayout
android:id="#+id/mainFrame"
android:layout_gravity="end"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.design.widget.AppBarLayout>
<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:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
my toolbar 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"
android:orientation="vertical"
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="wrap_content"
app:theme="#style/ToolBarStyle"
app:titleTextAppearance="#style/ToolBarStyle"
android:background="#29395e">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
According some responding i set the MainActivity about action bar like this:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setTitle("");
getSupportActionBar().setElevation(0);//it dosen't work, i use the app theme too.
my style:
<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">#29395e</item>
<item name="android:scrollbarThumbVertical">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<!-- ToolBar-->
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:textSize">18sp</item>
<item name="android:textStyle">bold</item>
<item name="android:windowContentOverlay">#null</item>
<style name="Theme.MyApplication" parent="Theme.AppCompat.Light">
<item name="actionBarStyle">#style/Theme.MyApplication.ActionBar</item>
</style>
<style name="Theme.MyApplication.ActionBar" parent="style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<!-- <item name="android:elevation">0dp</item> -->
<!-- if you are using support library thn elevation should be without android namespace like below else the above one uncomment-->
<item name="elevation">0dp</item>
</style>
To handle below 5.0
<item name="android:windowContentOverlay">#null</item>
Or
below things not applicable for the pre lollipop
If support action bar
getSupportActionBar().setElevation(0);
If not support actionbar
getActionBar().setElevation(0);
Please let me know if anything.
From Android 5.0 onward you can use setElevation() to adjust the elevation,ie what you mentioned as bottom_line .
To do so :
getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
if(getSupportActionBar()!=null)
getSupportActionBar().setElevation(0);
setContentView(R.layout.activity_main);
For pre-lollipop devices - Add this line into your App theme:
<item name="android:windowContentOverlay">#null</item>
However this doesn't work on version 5.0 and higher. So you have to call setElevation(0) on your action bar. Note that if you're using the support library you must call it to that like so:
getSupportActionBar().setElevation(0);
I want to make my toolbar transparent but don't know how?
`
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:theme="#style/TransparentToolbar"
android:background="#android:color/transparent">
</android.support.v7.widget.Toolbar>
All you need to is to define theme which hide action bar, define action bar style with transparent background and set this style to the toolbar widget. Please note that toolbar should be drawen as last view (over all view tree)
<style name="Theme.Custom" parent="#android:style/Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
<style name="CustomActionBar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
</style>
Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Toolbar should be above content-->
<include layout="#layout/toolbar" />
</RelativeLayout>
Toolbar layout:
<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"
android:layout_height="wrap_content"
app:theme="#style/CustomActionBar"/>
I have an ActionBar which is shown in some activities.
Unfortunately, in one of them, I use a FrameLayout and the FrameLayout creates another ActionBar. How can I remove this second ActionBar ?
Bellow, the layout :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<include layout="#layout/toolbar"/>
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:id="#+id/browser_drawer_layout"
android:layout_height="match_parent">
<!-- activity view -->
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content_frame">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/buttonFindSelected"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/selection" />
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</FrameLayout>
<!-- navigation drawer -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="?attr/colorPrimaryDark">
<ListView
android:id="#+id/browser_left_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
The code of the Toolbar for the DrawerLayout :
<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="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
My theme :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base"/>
<style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
My theme (For api 21+)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
</style>
Thank you for your help.
Problem solved...
I was using a FragmentManager in a wrong way. The result was a duplication of some of my elements.
More informations here (on the second answer) : http://www.codedisqus.com/0zmgWXjjXj/android-fragment-duplicate-objects-in-layout.html
I'm trying to implement a Material style ActionBar using toolbar. So far I made a working Material style ActionBar but can't change its icon and text color. I've already set a
Theme.AppCompat.Light.NoActionBar
in style.xml and
android:theme="#style/ThemeOverlay.AppCompat.Dark"
as the toolbar theme.
Is there any way to change the text color and the black icons into the white ones?
Sources are given below,
Toolbar:
<?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="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark" >
</android.support.v7.widget.Toolbar>
AppTheme:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
</style>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context="com.example.materialactionabar.MainActivity" >
<include layout="#layout/toolbar" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<fragment
android:id="#+id/navigation_drawer"
android:name="com.example.materialactionabar.NavigationDrawerFragment"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start" />
</android.support.v4.widget.DrawerLayout>
In your styles just add as below:
<item name="spinBars">true</item>
<item name="color">#color/white</item>
Complete code as below:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#color/white</item>
</style>