I'm currently making an app with backwards support for toolbars, and thus I have this file
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
I then programatically add it in to the views by doing something like:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
However, I want to be able to add custom views into the Toolbar, such as EditText and TextView's without hard-coding them into the toolbar.xml above.
Is there any way to do this? It might be worth noting that I'm using the V7 support library.
Thanks,
Liam
Just give a try to the following
Step 1 : Add LinearLayout to the toolbar in xml file
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:id=#+id/toolbar_item_container
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" />
</android.support.v7.widget.Toolbar>
Step 2 : Get this LinearLayout in code
Toolbar mToolbar = (Toolbar)findViewById(R.id.toolbar_transaction);
LinearLayout layoutToolbar = (LinearLayout)
mToolbar.findViewById(R.id.toolbar_item_container);
Step3 : Add and Remove view to this LinearLayout using following code
layoutToolbar.addView();
layoutToolbar.removeView();
This can be done without LinearLayout also, by directly adding and removing elements from Toolbar. You can try both the ways.
Hope it'll help.
if you dont have toolbar in xml, can set custom view programmatically
actionBar.setCustomView(R.layout.custom_view);
View view = actionBar.getCustomView();
TextView locationTitle = view.findViewById(R.id.tv_custom_toolbar);
locationTitle.setText("some text");
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setDisplayHomeAsUpEnabled(true);
Related
Here is the code.
<?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"
android:id="#+id/main"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="100dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/mytoolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="#string/app_name"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/main_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_collapseMode="none"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!--<android.support.v4.widget.NestedScrollView-->
<!--android:id="#+id/nestedscroll"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent"-->
<!--android:fillViewport="true"-->
<!--android:scrollbars="horizontal"-->
<!--app:layout_behavior="#string/appbar_scrolling_view_behavior">-->
<android.support.v4.view.ViewPager
android:id="#+id/main_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<!--</android.support.v4.widget.NestedScrollView>-->
<android.support.design.widget.FloatingActionButton
android:id="#+id/main_fab"
android:layout_margin="16dp"
android:src="#android:drawable/ic_media_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/main_viewpager"
app:layout_anchorGravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout>
The problem:
1) Toolbar is not visible.
2) Collapsing toolbar doesn't collapse at all. [Solved]
3) Viewpager and FAB also not visible if put inside nestedScrollView. [Solved]
Extra detail:
Layout for fragments of Viewpager have Linearlayout as root and inside that have a recyclerview.
Everything seems to be alright as per the code. Unable to understand what is missing. A good explanation of how coordinator layout and collapsing toolbar work together would also indeed help.
1) Toolbar is not visible.
First of all you need define what Toolbar do you want to use in your activity class:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Change existing xml code:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:title="#string/app_name"
app:layout_collapseMode="parallax">
</android.support.v7.widget.Toolbar>
to:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" //set initial height
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" //this might be also useful
app:title="#string/app_name"
app:layout_collapseMode="parallax" />
2) Collapsing toolbar doesn't collapse at all.
Did your activity using correct theme. Set to your AppBarLayout:
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
as in this example: include_list_viewpager.xml
3) Viewpager and FAB also not visible if put inside nestedScrollView.
There's no reason to do that. Adding these lines:
android:layout_marginTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
to ViewPager should be enough.
Both of them should be direct children of CoordinatorLayout.
Follow this example: http://blog.nkdroidsolutions.com/collapsing-toolbar-with-tabs-android-example/
If you're new to Material Design or feel a bit lost with some its behaviours, I highly recommend to check Chris Banes Material Design project cheesequare: https://github.com/chrisbanes/cheesesquare/
Hope it will help
First of all you should tell your activity that what toolbar you are using, so in onCreate method you should have:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
your second and third problem should solve together. You should use NestedScrollView as the main layout for fragments inside ViewPager and then inside that, put your LinearLayout or anything else.
My intentions are to use a custom view ( TextView + ImageView ) and put it as a view into a Toolbar.How can i get the style of the toolbar's default TextView for title?I'd like my TextView in my custom view to have the exactly the same outfit.I tried styling it like:
setTypeface(Typeface.DEFAULT_BOLD);
setTextSize(18);
setTextColor(Color.BLACK);
But it still looks different,are those described somewhere because i really couldn't find them.Or can i re-use the style of the title somehow?I'm getting a bit confused when it comes to styling especially from code.
Thanks in advance.
Inside your coordinate layout, place this.
<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" >
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20dp"
android:text="Ezy Ride"
android:textColor="#ffffff" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Now your app bar layout is ready. Customise it as you require.
In your java
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TextView toolbarTitle = (TextView)toolbar.findViewById(R.id.title);
//here set all you want!!
This is my toolbar
I want change my title of toolbar like this:
I search about this but i cant find any result.
This is my toolbar code:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/AppTheme.Toolbar"
app:titleTextAppearance="#style/AppTheme.Toolbar.Title"
>
Try to add this to your action_bar.xml
android:layout_margin="10dp"
EDIT:
I would put them together inside a LinearLayout (horizontal) and then add the above command
I think android is treating it as a normal view
So add this java code so that it can change the look of toolbar
Add in java
setSupportActionBar(findViewById(R.id.your_toolbar_id));
I want to replace the title in my Toolbar by a logo like Twitter App.
I think we can replace this programmatically like that :
mToolbar = (Toolbar) findViewById(R.id.app_toolbar);
mToolbar.setLogo(R.drawable.ic_logo);
But I want to replace it directly in my XML toolBar declaration, but I can't see the property app:logo or android:logo.
<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/app_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/MyCustomToolBarTheme" />
Please help me, thank you.
If you check source code of Toolbar and Toolbar's custom attributes, there are only a few attributes you can use to customize Toolbar, but logo is not one of them:
titleTextAppearance
subtitleTextAppearance
navigationIcon
...
Toolbar.setLogo(resId) seems to be the only option at the moment.
A toolbar contains a ViewGroup that you can populate with whatever views you wish --- you can add an ImageView there if you want a logo. Example:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_logo"/>
</android.support.v7.widget.Toolbar>
If you manually attach it to AppCompatActivity or ActionBar activity, it "becomes" an ActionBar, and then has to be manipulated using those code functions.
I am trying to use Appcompat Toolbar based actionBar
Here is my 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:gravity="bottom"
android:paddingBottom="0dp"
android:background="?attr/colorPrimaryDark">
</android.support.v7.widget.Toolbar>
I am including this in my activity.xml file.
And then in my Activity's OnCreate method, I am setting a custom PagerStrip into ActionBar
ActionBar actionBar = getSupportActionBar();
actionBar.setCustomView(R.layout.pager_strip);
actionBar.setDisplayShowCustomEnabled(true);
tabs = (PagerSlidingTabStrip) actionBar.getCustomView().findViewById(R.id.tabs_strip);
tabs.setViewPager(mPager);
There is some padding below my PagerStrip in ActionBar. I want to remove this padding.
here is a picture showing the issue.
This was working fine with ActionBarSherlock
I had a similar problem: I have migrated to the Toolbar pattern:
<?xml version="1.0" encoding="utf-8"?>
<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_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<my.custom.widget.class
android:id="#+id/tab_bar"
android:layout_width="match_parent"
android:layout_height="match_parent">
</my.custom.widget.class>
</android.support.v7.widget.Toolbar>
but the AppCompat gave me a strange padding around my custom view:
My fix:
Add app:contentInsetStart="0dp" and app:contentInsetEnd="0dp" to the Toolbar attributes; and android:minHeight="?attr/actionBarSize" to the custom widget attributes.
Result:
Not sure that the solution follows the Material design guidelines, but hope it will help to someone.
Toolbar is widget replacement for Actionbar in some cases.
If you want to use Toolbar then you can try:
Toolbar=(Toolbar)findViewbyId(R.id.toolbar);
setSupportActionbar(toolbar);
I used Toolbar in DrawerLayout. My navigation drawer can always Top Toolbar.
P/S: use toolbar in ActionBarActivity