I want to have a menu icon on the toolbar, when click on this menu icon and change to checkbox icon.
Like the search icon in the toolbar. When click on search menu button, show the searchView.
This is how the searchView is added in the menu.
<item android:id="#+id/action_search"
android:title="#string/action_menu_search"
android:icon="#drawable/ic_action_search"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="android.support.v7.widget.SearchView"/>
So i did the same for the checkbox
app:actionViewClass="android.widget.CheckBox"
But the actionview is shown, it is left align to the home up button. May be it is because checkbox is wrap_content.
But i want it to be right align to the end of the parent view.
So after checking this https://developer.android.com/training/appbar/action-views.html
I think i can use the actionLayout.
So i change as below:
<item android:id="#+id/action_delete"
android:title="delete"
android:icon="#drawable/ic_action_delete"
app:showAsAction="always|collapseActionView"
app:actionLayout="#layout/toolbar_checkbox_layout" />
toolbar_check_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Text"
android:gravity="center"
android:textColor="#color/colorAccent"/>
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="#color/colorAccent"
android:layout_gravity="end|center"
android:layout_marginEnd="15dp"
android:layout_marginRight="15dp" />
</LinearLayout>
The result is like that. It still cannot be right alignment. I want checkbox to be right side of the toolbar. Any suggestion? please. Thanks a lot
MainActivity.xml
<?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="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="#ffffff"
tools:context="com.example.raj.jazzflurry.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/faqfoods_bar"
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" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_gravity="end"
android:layout_height="?attr/actionBarSize">
<include
layout="#layout/btn_share"
android:id="#+id/btn_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
btn_share.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizantal" android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:layout_gravity="center"
android:textColor="#color/colorAccent"/>
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="#color/colorAccent"
android:layout_gravity="center" />
</LinearLayout>
Java file (inside of on create)
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Hai");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setBackgroundDrawable(ContextCompat.getDrawable(this, R.color.colorprimary1));
Manifest.xml
<activity
android:name=".MainActivity"
android:screenOrientation="portrait"
android:theme="#style/Theme.AppCompat.NoActionBar">
Related
Is there any tutorial easy to understand to create a toolbar with the home button aligned to the left and the log out button aligned to the right?
I am using menu type .xml files to do it, but I am not able to align the buttons as I want.
My .xml is:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/etxera"
android:icon="#drawable/etxera_fondo"
android:title="Hasierara"
app:showAsAction="always" />
<item android:id="#+id/saioa_itxi"
android:icon="#drawable/saioaitxi"
android:title="saioa itxi"
app:showAsAction="ifRoom" />
</menu>
Thanks for support!
Make a custom toolbar
Create a xml file
toolbar.xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:titleTextColor="#FFFFFF">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/left_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left" />
<Button
android:id="#+id/right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
Include the toolbar into your main_activity.xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</RelativeLayout>
Don't forget to set the NoActionBar theme
I am trying to make a toolbar with menu icon like amazon app. But the toolbar menu icon have not set properly. Actually All menu icon has set Left to right. i have need back icon and navigation icon has set on right side, App logo set on center and other icon has set on left side.
menu code...
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<item
android:id="#+id/action_bookmark"
android:icon="#drawable/ic_bookmark_white_24dp"
android:orderInCategory="100"
android:title="#string/action_bookmark"
app:showAsAction="always" />
<item
android:id="#+id/action_back"
android:icon="#drawable/ic_keyboard_arrow_left_white_24dp"
android:orderInCategory="101"
android:title="#string/action_back"
app:showAsAction="always" />
<item
android:id="#+id/texttite"
android:icon="#mipmap/ic_launcher"
android:orderInCategory="102"
android:title="#string/action_forward"
android:titleCondensed="hello........"
app:showAsAction="always" />
<item
android:id="#+id/action_forward"
android:icon="#drawable/ic_keyboard_arrow_right_white_24dp"
android:orderInCategory="103"
android:title="#string/action_forward"
app:showAsAction="always" />
<item
android:id="#+id/action_bookmark1"
android:icon="#drawable/ic_bookmark_white_24dp"
android:orderInCategory="104"
android:title="#string/action_bookmark"
app:showAsAction="always" />
</menu>
I have need this type of toolbar. I try this, but not success. Please Help me...
You can customize the toolbar layout just like any other layouts according to your requirement. Please find below a sample layout just using buttons.
<?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.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBlack">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="<" />
<Button
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="=" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom"
android:textColor="#color/backgroundColorGenericWhite"
android:textSize="22sp" />
</LinearLayout>
<Button
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="=" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</LinearLayout>
this is custom toolbar code
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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:padding="0px"
android:layout_margin="0px"
app:popupTheme="#style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
I'm trying to add a border that would look like this:
https://imgur.com/a/r8rHGQl
My toolbar.xml:
<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_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
app:theme="#style/AppTheme"
app:titleTextAppearance="#style/TitleText"
app:titleTextColor="#color/colorPrimaryText"
>
</android.support.v7.widget.Toolbar>
In my java code I do :
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
and inflating the menu.
If I try to nest the toolbar in relative/linear/constrains layout and add a View at the bottom I get the "android.widget.LinearLayout cannot be cast to android.support.v7.widget.Toolbar" error
Also tried to <include a layout with a View inside of it, but then the line appears in the middle of my toolbar and my title disappears.
Also including my menu.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/item1"
android:icon="#drawable/main_btn_info"
android:title="Item 1"
app:showAsAction="always"/>
</menu>
Create toolbar inside Linear Layout with a view
<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="wrap_content"
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
app:theme="#style/AppTheme"
app:titleTextAppearance="#style/TitleText"
app:titleTextColor="#color/colorPrimaryText"/>
<View
android:background="your border color"
android:layout_width="match_parent"
android:layout_height="2dp" />
</LinearLayout>
Include this in all your layouts.
Then find toolbar in activity using toolbar id instead of xml name
toolbar = findViewById(R.id.toolbar_main);
setSupportActionBar(toolbar);
I used this method:
<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">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Setting"
app:titleTextColor="#color/colorPrimary" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
android:background="#DDD" />
</LinearLayout>
Made another layout with the border and included it in every activity, I know it's not the best way to do it, but result is the same for now.
Try using the elevation parameter
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
app:title="Log In"
android:elevation="5dp"
app:titleTextColor="#000000" />
android:elevation="5dp"
This gives you out an basic elevation border bottom shadow for Toolbar
I am facing strange problem with SearchView in toolbar.
I want to use CoordinatorLayout for my layout, so recently I have changed my root layout from LinearLayout to CoordinatorLayout. Everything is fine except the behavior of SearchView I am using is in Toolbar is strange after clicking search icon.
With LinearLayout
With CoordinatorLayout
XML 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/coordinatorlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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_for_home_activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/appcolor">
<ProgressBar
android:id="#+id/toolbar_progress_bar"
style="#style/AppTheme"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="right"
android:indeterminateTint="#color/white"
android:indeterminateTintMode="src_in"
android:visibility="gone" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout_for_home_ativity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/appcolor"
app:tabBackground="?attr/selectableItemBackground"
app:tabGravity="fill"
app:tabIndicatorColor="#color/white"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/lightblue" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager_for_home_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingbutton_for_home_fragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/activity_horizontal_margin"
android:src="#drawable/ic_person_add_white_24dp"
app:backgroundTint="#color/appcolor"
app:fabSize="normal"
app:layout_behavior="com.ficean.android.ficean.ScrollingFABBehavior" />
</android.support.design.widget.CoordinatorLayout>
In the above code if I change Coordinator layout to LinearLayout SearchView is showing up fine. If I use Coordinator layout searchicon and edittext are disappearing. But keypad is getting opened and I can still search. Problem is search icon and edit text is not showing up.
Menu Code:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:title="Search"
android:id="#+id/search_on_activity_toolbar"
android:orderInCategory="100"
android:icon="#drawable/ic_search_white_24dp"
app:showAsAction="collapseActionView|always"
app:actionViewClass="android.support.v7.widget.SearchView"
/>
</menu>
I have created two toolbars one top and one bottom.
And the result is like this:
My question is, how can i make my bottom toolbar's items centered and their widths span vertically to fit the toolbar?
Here is what i've done:
<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"
tools:context="app.shinobi.org.ssmis.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/main_toolbar" />
</LinearLayout>
<app.shinobi.org.util.tab.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="#color/primaryColor"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<include
android:id="#+id/stats_toolbar"
layout="#layout/stats_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
/>
</LinearLayout>
These are my two menus:
for the top toolbar:
<menu 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"
tools:context="app.shinobi.org.ssmis.MainActivity">
<item android:id="#+id/search" android:title="#string/search"
android:icon="#drawable/ic_search" android:orderInCategory="1" app:showAsAction="always"/>
<item android:id="#+id/refresh" android:title="#string/action_refressh"
android:icon="#drawable/ic_refresh" android:orderInCategory="2" app:showAsAction="always" />
for the bottom toolbar:
<menu 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"
tools:context="app.shinobi.org.ssmis.MainActivity">
<item android:id="#+id/monthly" android:title="#string/action_monthly"
android:icon="#drawable/ic_refresh" android:orderInCategory="3" app:showAsAction="always" />
<item android:id="#+id/yearly" android:title="#string/action_yearly"
android:icon="#drawable/ic_refresh" android:orderInCategory="4" app:showAsAction="always" />
<item android:id="#+id/drugs" android:title="#string/action_drugs"
android:icon="#drawable/ic_refresh" android:orderInCategory="5" app:showAsAction="always" />
Thanks!
Creating a menu will always put your button to the end of the toolbar.
If you want to center these buttons, you will have to use toolbar.addView(view) where your view can inflate from a xml file like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3"
>
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
Then you just have to:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setContentInsetsRelative(0, 0);
toolbar.addView(
LayoutInflater.from(this).inflate(R.layout.toolbar, null, false),
new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
);
Actually you can use a ActionMenuView to replace your bottom Toolbar
Or you can try this SplitToolbar implementation
https://gist.github.com/dodgex/7bc81fd2cbb70a8d5117
I can suggest one not very good solution but it works. If i right understand in include layout you have a toolbar view. Its a container so you can use it like relative or linear layout. And put buttons or other views inside it. And write properties like gravity in center. That is all.
Another way - do smth with items in menu layout may be. But i don't know how(
PS: a short example
<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/primary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="previousActivity"
android:src="#drawable/ic_navigate_before_white_24dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contact us"
android:textColor="#color/white"
android:textSize="20sp"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>