Creating a button in Android Toolbar

Question

How can I create a button inside Android s Toolbar that looks like this iOS example

User · Answer

You can actually put anything inside a toolbar. See the below code.

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:background="@color/colorPrimary">

</android.support.v7.widget.Toolbar>

Between the above toolbar tag you can put almost anything. That is the benefit of using a Toolbar.

Source: Android Toolbar Example

User · Answer

You could use actionLayout from the support library    menu xml   lt  xml version  1 0  encoding  utf-8   gt   lt menu xmlns android  http   schemas android com apk res android  xmlns app  http   schemas android com apk res-auto  gt    lt item     android id    id button item      android title        app actionLayout   layout button layout      app showAsAction  always        gt   lt  menu gt    button layout xml   lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android  android layout width  fill parent  android layout height  match parent  android orientation  horizontal  gt    lt Button     android id    id button      android layout width  wrap content      android layout height  wrap content      android layout centerHorizontal  true      android layout centerVertical  true        gt    lt  RelativeLayout gt    Activity java   Override public boolean onCreateOptionsMenu Menu menu        getMenuInflater   inflate R menu menu  menu       MenuItem item   menu findItem R id button item       Button btn   item getActionView   findViewById R id button       btn setOnClickListener new View OnClickListener              Override         public void onClick View view                Toast makeText MainActivity this   Toolbar Button Clicked    Toast LENGTH SHORT  show                          return true

User · Answer

Another possibility is to set the app actionViewClass attribute in your menu    lt menu xmlns android  http   schemas android com apk res android        xmlns app  http   schemas android com apk res-auto  gt     lt item      android id    id get item       android orderInCategory  1       android text  Get       app showAsAction  always        app actionViewClass  android support v7 widget AppCompatButton   gt   lt  menu gt    In your code you can access this button after the menu was inflated   public boolean onCreateOptionsMenu Menu menu        MenuInflater menuInflater   getMenuInflater        menuInflater inflate R menu sample  menu        MenuItem getItem   menu findItem R id get item       if  getItem    null            AppCompatButton button    AppCompatButton  getItem getActionView              Set a ClickListener  the text             the background color or something like that            return super onCreateOptionsMenu menu

User · Answer

They are called menu items or action buttons in toolbar actionbar  Here you have Google tutorial how it works and how to add them  https   developer android com training basics actionbar adding-buttons html

User · Answer

Toolbar customization can done by following ways  write button and textViews code inside toolbar as shown below   lt android support v7 widget Toolbar     xmlns app  http   schemas android com apk res-auto      android id    id app bar      android layout width  match parent      android layout height  wrap content       gt        lt Button       android layout width  wrap content          android layout height   dimen btn height small          android text  Departure          android layout gravity  right            gt   lt  android support v7 widget Toolbar gt    Other way is to use item menu as shown below     Override public boolean onCreateOptionsMenu Menu menu           Inflate the menu  this adds items to the action bar if it is present      getMenuInflater   inflate R menu menu main  menu       return true

User · Answer

I have added text in ToolBar    menu skip xml   lt 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   MainActivity  gt        lt item         android id    id action settings          android title   string text skip          app showAsAction  never    gt   lt  menu gt    MainActivity java   Override boolean onCreateOptionsMenu Menu menu        inflater   getMenuInflater        inflater inflate R menu menu otp skip  menu       return true      Override public boolean onOptionsItemSelected MenuItem item        switch  item getItemId                 action with ID action refresh was selected         case R id menu item skip              Toast makeText this   Skip selected   Toast LENGTH SHORT                       show                break          default              break            return true

User · Answer

ToolBar with Button Tutorial  1 - Add library compatibility inside build gradle  dependencies       compile fileTree dir   libs   include      jar        compile  com android support appcompat-v7 21 0 3      2 - Create a file name color xml to define the Toolbar colors   lt  xml version  1 0  encoding  utf-8   gt   lt resources gt       lt color name  ColorPrimary  gt  FF5722 lt  color gt       lt color name  ColorPrimaryDark  gt  E64A19 lt  color gt   lt  resources gt    3 - Modify your style xml file   lt resources gt            lt  -- Base application theme  -- gt       lt style name  AppTheme  parent  Theme AppCompat Light NoActionBar  gt            lt item name  colorPrimary  gt  color ColorPrimary lt  item gt           lt item name  colorPrimaryDark  gt  color ColorPrimaryDark lt  item gt           lt  -- Customize your theme here  -- gt       lt  style gt        lt  resources gt    4 - Create a xml file like tool bar xml   lt  xml version  1 0  encoding  utf-8   gt   lt android support v7 widget Toolbar  xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  wrap content      android background   color colorPrimary      android elevation  4dp    gt    5 - Include the Toolbar into your main activity xml   lt 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   MainActivity  gt        lt include         android id    id tool bar          layout   layout tool bar    gt        lt TextView         android layout below    id tool bar          android layout width  wrap content          android layout height  wrap content          android layout marginTop   dimen TextDimTop          android text   string hello world    gt    lt  RelativeLayout gt    6 - Then  put it inside your MainActivity class  package com example hp1 materialtoolbar   import android support v4 widget DrawerLayout  import android support v7 app ActionBarActivity  import android os Bundle  import android support v7 app ActionBarDrawerToggle  import android support v7 widget LinearLayoutManager  import android support v7 widget RecyclerView  import android support v7 widget Toolbar  import android view Menu  import android view MenuItem  import android view MotionEvent  import android view View  import android widget Toast      When using AppCompat support library                                                                  you need to extend Main Activity to                                                                ActionBarActivity     ActionBarActivity has deprecated  use AppCompatActivity     public class MainActivity extends ActionBarActivity           Declaring the Toolbar Object     private Toolbar toolbar        Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout main activity               Attaching the layout to the toolbar object         toolbar    Toolbar  findViewById R id tool bar              Setting toolbar as the ActionBar with setSupportActionBar   call         setSupportActionBar toolbar               Override     public boolean onCreateOptionsMenu Menu menu               Inflate the menu  this adds items to the action bar if it is present          getMenuInflater   inflate R menu menu main  menu           return true              Override     public boolean onOptionsItemSelected MenuItem item               Handle action bar item clicks here  The action bar will            automatically handle clicks on the Home Up button  so long            as you specify a parent activity in AndroidManifest xml          int id   item getItemId               noinspection SimplifiableIfStatement         if  id    R id action settings                return true                     return super onOptionsItemSelected item             7 - And finally  add your  Button Items  to the menu main xml inside of  res menu  directory   lt  xml version  1 0  encoding  utf-8   gt      lt 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   MainActivity  gt           lt item             android id    id action settings              android orderInCategory  100              android title   string action settings              app showAsAction  never    gt           lt item             android id    id action search              android orderInCategory  200              android title  Search              android icon   drawable ic search              app showAsAction  ifRoom   gt                           lt item             android id    id action user              android orderInCategory  300              android title  User              android icon   drawable ic user              app showAsAction  ifRoom    gt               lt  menu gt

User · Answer

I was able to achieve that by wrapping Button with ConstraintLayout    lt androidx coordinatorlayout 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  gt        lt com google android material appbar AppBarLayout         android layout width  match parent          android layout height  wrap content          app elevation  0dp  gt            lt androidx appcompat widget Toolbar             android id    id top toolbar              android layout width  match parent              android layout height   attr actionBarSize              android background   color white color  gt                lt androidx constraintlayout widget ConstraintLayout                 android layout width  match parent                  android layout marginTop  10dp                  android layout height  wrap content  gt                    lt TextView                     android id    id cancel                      android layout width  wrap content                      android layout height  wrap content                      android text   string cancel                      android layout marginStart  5dp                      app layout constraintBottom toBottomOf  parent                      app layout constraintLeft toLeftOf  parent                      app layout constraintTop toTopOf  parent    gt                    lt Button                     android id    id btn publish                      android layout width  wrap content                      android layout height  wrap content                      android text   string publish                      android background   drawable button publish rounded                      app layout constraintTop toTopOf  parent                      app layout constraintBottom toBottomOf  parent                      app layout constraintEnd toEndOf  parent                      android layout marginEnd  10dp                      app layout constraintLeft toRightOf   id cancel                      tools layout editor absoluteY  0dp    gt                lt  androidx constraintlayout widget ConstraintLayout gt            lt  androidx appcompat widget Toolbar gt        lt  com google android material appbar AppBarLayout gt    lt  androidx coordinatorlayout widget CoordinatorLayout gt    You may create a drawable resourcebutton publish rounded  define the button properties and assign this file to button s android background property    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt       lt solid android color   color green    gt       lt corners android radius  100dp    gt   lt  shape gt

[android] Creating a button in Android Toolbar

Examples related to android

[android] Creating a button in Android Toolbar

Examples related to android

Examples related to android-toolbar