I'm trying to create a toolbar that uses a background I made in a png file.
Now, when I use the background in the xml, the layout editor in the android studio shows exactly the expected result. The problem comes when I run the app in the virtual device. The background doesn't adjust to the toolbar and as a result only a part of it gets shown.
Moreover, the title and the items are acting strange. The title is not shown at all and the only item that is displayed in the toolbar suddenly jumps to the left.
XML Code of the Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app_bar_styled"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:elevation="15dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_styled"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="15dp"
android:theme="#style/AppTheme.AppBarOverlay.Styled">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/action_bar_background"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
XML Code for the style of the toolbar:
<style name="AppTheme.AppBarOverlay.Styled" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#drawable/action_bar_background</item>
<item name="android:titleTextStyle">#style/ToolBarTitleStyle</item>
</style>
<style name="ToolBarTitleStyle" parent="Base.TextAppearance.AppCompat">
<item name="android:textColor">#android:color/white</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">16dp</item>
</style>
And this is the MainActivity code which concerns the toolbar:
toolbar = (Toolbar) findViewById(R.id.toolbar_styled);
toolbar.setTitle(R.string.app_name);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(true);
Here is the images of the layout editor preview and the virtual device:
Layout Editor : https://i.gyazo.com/2b01f5ef9c87ecb35a605aa150aa6ad5.png
Virtual Device: https://i.gyazo.com/5bbd9bf5a2df1727278ba9e78efd622b.png
You need to nest it like this:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cor_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="256dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_styled"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="15dp"
android:theme="#style/AppTheme.AppBarOverlay.Styled">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/action_bar_background"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
then set them up like this:
toolbar= (Toolbar) findViewById(R.id.toolbar);
collapse=(CollapsingToolbarLayout) findViewById(R.id.collapseToolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
collapse.setTitle("Title");
collapse.setCollapsedTitleTextColor(Color.parseColor("#FFFFFF"));
collapse.setExpandedTitleColor(Color.parseColor("#FFFFFF"));
collapse.setStatusBarScrimColor(Color.parseColor("#FFFFFF"));
1) create one tool_bar.xml file in your res folder and paste the following code.
2) Include this tool_bar.xml file when ever you required.
3) Instantiate tool_bar object in .java file and do further process.
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/action_bar_background"/>
</android.support.v7.widget.Toolbar>
<include id="#+id/tool_bar"
layout="#layout/tool_bar"/>
Toolbar toolbar = (Toolbar)findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
Related
How can I remove the margin between the navigation icon and toolbar logo.
My 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="?attr/actionBarSize"
android:background="#drawable/paper9patch"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/toolbarTheme"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp">
</android.support.v7.widget.Toolbar>
I am inserting logo like this
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setContentInsetStartWithNavigation(0);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setLogo(R.drawable.sample);
my toolbar is looking like this
the logo is almost showing in the middle I want it beside the drawer icon
I searched on stackover flow and all answers tell to use
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
but its not working . I can say there is no padding for the image it is cropped exactly to edges. If i use tile there is no gap in middle ,the gap appears only when inserted logo.
Is this intended behavior ? Is there any thing else I can do to remove the gap?
Edit : styles i am using
<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/colorAccent</item>
</style>
<style name="toolbarTheme" parent="AppTheme">
<item name="android:textColorPrimary">#color/themeColor</item>
<item name="android:textColorSecondary">#color/themeColor</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
Try 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:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/paper9patch"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/toolbarTheme"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#mipmap/ic_launcher_round" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
Try this although it not much different from your layout but its works well i have tested it .
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
android:gravity="center"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Set up toobar as.
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("New");
getSupportActionBar().setLogo(R.mipmap.ic_launcher);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
The Problem was with the image , It did not had any extra space or padding at side but the image resolution was higher .
Solution is :
Just decrease the image resolution of logo and every thing should work normally.
I am trying to make collapsing toolbar with TabLayout as follows
https://i.stack.imgur.com/76m5h.gif
but my result is like this
as you can see the toolbar is not showing at all.
in java I am setting toolbar as actionbar using
setSupportActionBar(toolbar);
I tried many so answers and other sites but not able to solve my problem.
below is the xml I am using.
<?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:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/bg_main"
android:orientation="vertical">
<com.gigamole.navigationtabstrip.NavigationTabStrip
android:id="#+id/nts_strip"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_gravity="top"
android:background="#color/colorPrimary"
app:layout_collapseMode="parallax"
app:nts_active_color="#color/white"
app:nts_animation_duration="300"
app:nts_color="#color/white"
app:nts_corners_radius="1.5dp"
app:nts_inactive_color="#color/white_transparent"
app:nts_titles="#array/nts_titles" />
<android.support.v4.view.ViewPager
android:id="#+id/pager_photos"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white_transparent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
here is the styles.xml
<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/colorAccent</item>
</style>
</resources>
Please let me know if you need anything else.
CoordinatorLayout is a FrameLayout, thus the last view in order overlaps the first ones.
Add app:layout_behavior="#string/appbar_scrolling_view_behavior" to LinearLayout to anchor it to the bottom of AppBarLayout.
you can do this with default android tabbed activity from gallery. For this right clickon package where you want to create->click on new navigate to gallery->choose Tabbed activity -> in the window choose Navigation style as Action bar tabs(with viewpager)
I am developing an app in which I have window default action bar but I want to remove that and want to add toolbar instead. How can I add that
Code for removing action bar:
<activity
android:name=".CMainActivity"
android:screenOrientation="portrait"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
/>
I am extending AppCompatActivity
// navigation bar code
m_Drawer = (DrawerLayout) findViewById(R.id.drawer_layout);//finding id of drawerlayout
s_drawerToggle = new ActionBarDrawerToggle(
this, m_Drawer, m_Toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
m_Drawer.setDrawerListener(s_drawerToggle);
m_Drawer.setScrimColor(getResources().getColor(android.R.color.transparent));
s_drawerToggle.syncState();
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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:openDrawer="start">
<LinearLayout
android:id="#+id/container_toolbar"
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:background="?attr/colorPrimary"
android:titleTextColor="#FFFF"
app:layout_scrollFlags="scroll|enterAlways"
tools:ignore="UnusedAttribute">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:minHeight="?attr/actionBarSize"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="2dp"
app:tabTextAppearance="?android:textAppearanceMedium"
tools:ignore="UnusedAttribute"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
<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:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"
tools:ignore="PrivateResource"/>
In your styles.xml set AppTheme to NoActionBar like below -
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
Then in your activity
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
and add this toolbar in your layout.xml file like below -
<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="?attr/actionBarSize"
android:background="#color/primaryColor" />
Add this code to your xml layout to add a toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
Then in your Java class:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("title");
To remove default action bar, in your manifest file add
<android:theme="#android:style/Theme.NoTitleBar">
or in your styles.xml add:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
place this code in activity xml file:
<?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.ideabiz.riderapplication.ui.KmsActivity">
<android.support.design.widget.AppBarLayout android:layout_width="match_parent"
android:layout_height="wrap_content" android:theme="#style/AppTheme.AppBarOverlay">
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_kms" />
</android.support.design.widget.CoordinatorLayout>
place this code in content xml file:
<?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" 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="com.ideabiz.riderapplication.ui.KmsActivity"
tools:showIn="#layout/activity_kms">
place this in java file:
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
You might have 3 folders inside "res" folder
values
values-v11
values-v14
You need to change style.xml file from all this folders to
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
in case you have included values-v21 same for that.
now extend your MainActivity with AppCompatActivity(Which you are doing) and assign your ToolBar as ActionBar.
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);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}
I hope this will help you. if not tell me what error getting after doing that.
Update :
Add this another style to your styles.xml
<style name="NoActionBarStyle" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
</style>
and in manifest.xml file.
<activity
android:name=".CMainActivity"
android:screenOrientation="portrait"
android:theme="#style/NoActionBarStyle" />
Happy Coding.
I am developing a tabbed application and for some tabs I want to hide the toolbar. I am setting the visibility as gone to accomplish that. Below is my XML file,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:id="#+id/main_content"
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:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:visibility="gone"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_gravity="bottom"
android:background="#color/offwhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
But I am seeing some item still on the top section of the screen. please check the screen shot. Am i doing it correctly? Is there any better way to hide Toolbar.
Thanks.
You can hide the toolbar programmatically using the following code
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setVisibility(View.GONE);`
And if that doesn't fix the problem, try removing from your AppBarLayout,
android:paddingTop="#dimen/appbar_padding_top"
and change your toolbar to this
app:layout_scrollFlags="scroll"
This would fix your problems
To hide the toolbar in your App, just add two lines in your style.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Why am I unable to find my Toolbar in my layout?
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
}
After that, toolbar is still null.
activity_man.xml:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
tools.context=".PlayerActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<ImageView
android:id="#+id/background_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"/>
: (goes on)
EDIT:
toolbar.xml:
<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"/>
Thanks!
Your code is working fine you may not have disable default actionbar:
Change the following in styles.xml to remove action bar
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
</style>
Bring toolbar to front using toolbar.bringToFront();