How to set MenuItem text instead of icon in toolbar












1















I am trying to set text at the end of menu as menuItem but I ve tried app:showAsAction="always|withText" in for menu item but the text is not displaying to its full length infact its getting congested.
This is what I am getting



Desired Result



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
app:itemIconTint="@color/white"
android:id="@+id/next_btn"
android:title="@string/next"
app:showAsAction="always|withText"
/>
</menu>


Toolbar:



<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_centerInParent="true"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<TextView
android:textSize="18sp"
android:layout_gravity="center_horizontal"
android:textColor="@color/white"
android:text="@string/recomended"
android:id="@+id/title_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_gravity="center_horizontal"

android:textColor="@color/white"
android:textSize="9sp"
android:text="@string/choose_your_friends"
android:id="@+id/title_secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>


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


toolbar.inflateMenu(R.menu.next_menu);
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.next_menu, menu);
return true;
}









share|improve this question

























  • if you have only one item, I would suggest to add button to Toolbar and use it to handle user events.

    – Karan Mer
    Nov 5 '18 at 5:57











  • ive tried it but adding a button disturbs the layout as it should be at end it have make a relative layout which disturbs the title in center

    – mr debug
    Nov 5 '18 at 5:58











  • Check this

    – Rajen Raiyarela
    Nov 5 '18 at 6:02











  • @RajenRaiyarela this is not the solution of my problem I am inflating the menu and its clickable events are called as well but the issue is I am unable to stretch he text of menu item

    – mr debug
    Nov 5 '18 at 6:08








  • 2





    I found the solution it was my theme I was having a restricted size for menu item

    – mr debug
    Nov 5 '18 at 6:24
















1















I am trying to set text at the end of menu as menuItem but I ve tried app:showAsAction="always|withText" in for menu item but the text is not displaying to its full length infact its getting congested.
This is what I am getting



Desired Result



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
app:itemIconTint="@color/white"
android:id="@+id/next_btn"
android:title="@string/next"
app:showAsAction="always|withText"
/>
</menu>


Toolbar:



<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_centerInParent="true"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<TextView
android:textSize="18sp"
android:layout_gravity="center_horizontal"
android:textColor="@color/white"
android:text="@string/recomended"
android:id="@+id/title_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_gravity="center_horizontal"

android:textColor="@color/white"
android:textSize="9sp"
android:text="@string/choose_your_friends"
android:id="@+id/title_secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>


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


toolbar.inflateMenu(R.menu.next_menu);
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.next_menu, menu);
return true;
}









share|improve this question

























  • if you have only one item, I would suggest to add button to Toolbar and use it to handle user events.

    – Karan Mer
    Nov 5 '18 at 5:57











  • ive tried it but adding a button disturbs the layout as it should be at end it have make a relative layout which disturbs the title in center

    – mr debug
    Nov 5 '18 at 5:58











  • Check this

    – Rajen Raiyarela
    Nov 5 '18 at 6:02











  • @RajenRaiyarela this is not the solution of my problem I am inflating the menu and its clickable events are called as well but the issue is I am unable to stretch he text of menu item

    – mr debug
    Nov 5 '18 at 6:08








  • 2





    I found the solution it was my theme I was having a restricted size for menu item

    – mr debug
    Nov 5 '18 at 6:24














1












1








1








I am trying to set text at the end of menu as menuItem but I ve tried app:showAsAction="always|withText" in for menu item but the text is not displaying to its full length infact its getting congested.
This is what I am getting



Desired Result



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
app:itemIconTint="@color/white"
android:id="@+id/next_btn"
android:title="@string/next"
app:showAsAction="always|withText"
/>
</menu>


Toolbar:



<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_centerInParent="true"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<TextView
android:textSize="18sp"
android:layout_gravity="center_horizontal"
android:textColor="@color/white"
android:text="@string/recomended"
android:id="@+id/title_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_gravity="center_horizontal"

android:textColor="@color/white"
android:textSize="9sp"
android:text="@string/choose_your_friends"
android:id="@+id/title_secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>


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


toolbar.inflateMenu(R.menu.next_menu);
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.next_menu, menu);
return true;
}









share|improve this question
















I am trying to set text at the end of menu as menuItem but I ve tried app:showAsAction="always|withText" in for menu item but the text is not displaying to its full length infact its getting congested.
This is what I am getting



Desired Result



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
app:itemIconTint="@color/white"
android:id="@+id/next_btn"
android:title="@string/next"
app:showAsAction="always|withText"
/>
</menu>


Toolbar:



<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_centerInParent="true"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<TextView
android:textSize="18sp"
android:layout_gravity="center_horizontal"
android:textColor="@color/white"
android:text="@string/recomended"
android:id="@+id/title_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_gravity="center_horizontal"

android:textColor="@color/white"
android:textSize="9sp"
android:text="@string/choose_your_friends"
android:id="@+id/title_secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>


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


toolbar.inflateMenu(R.menu.next_menu);
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.next_menu, menu);
return true;
}






android toolbar






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 5 '18 at 6:05









Karan Mer

5,67632966




5,67632966










asked Nov 5 '18 at 5:55









mr debugmr debug

489




489













  • if you have only one item, I would suggest to add button to Toolbar and use it to handle user events.

    – Karan Mer
    Nov 5 '18 at 5:57











  • ive tried it but adding a button disturbs the layout as it should be at end it have make a relative layout which disturbs the title in center

    – mr debug
    Nov 5 '18 at 5:58











  • Check this

    – Rajen Raiyarela
    Nov 5 '18 at 6:02











  • @RajenRaiyarela this is not the solution of my problem I am inflating the menu and its clickable events are called as well but the issue is I am unable to stretch he text of menu item

    – mr debug
    Nov 5 '18 at 6:08








  • 2





    I found the solution it was my theme I was having a restricted size for menu item

    – mr debug
    Nov 5 '18 at 6:24



















  • if you have only one item, I would suggest to add button to Toolbar and use it to handle user events.

    – Karan Mer
    Nov 5 '18 at 5:57











  • ive tried it but adding a button disturbs the layout as it should be at end it have make a relative layout which disturbs the title in center

    – mr debug
    Nov 5 '18 at 5:58











  • Check this

    – Rajen Raiyarela
    Nov 5 '18 at 6:02











  • @RajenRaiyarela this is not the solution of my problem I am inflating the menu and its clickable events are called as well but the issue is I am unable to stretch he text of menu item

    – mr debug
    Nov 5 '18 at 6:08








  • 2





    I found the solution it was my theme I was having a restricted size for menu item

    – mr debug
    Nov 5 '18 at 6:24

















if you have only one item, I would suggest to add button to Toolbar and use it to handle user events.

– Karan Mer
Nov 5 '18 at 5:57





if you have only one item, I would suggest to add button to Toolbar and use it to handle user events.

– Karan Mer
Nov 5 '18 at 5:57













ive tried it but adding a button disturbs the layout as it should be at end it have make a relative layout which disturbs the title in center

– mr debug
Nov 5 '18 at 5:58





ive tried it but adding a button disturbs the layout as it should be at end it have make a relative layout which disturbs the title in center

– mr debug
Nov 5 '18 at 5:58













Check this

– Rajen Raiyarela
Nov 5 '18 at 6:02





Check this

– Rajen Raiyarela
Nov 5 '18 at 6:02













@RajenRaiyarela this is not the solution of my problem I am inflating the menu and its clickable events are called as well but the issue is I am unable to stretch he text of menu item

– mr debug
Nov 5 '18 at 6:08







@RajenRaiyarela this is not the solution of my problem I am inflating the menu and its clickable events are called as well but the issue is I am unable to stretch he text of menu item

– mr debug
Nov 5 '18 at 6:08






2




2





I found the solution it was my theme I was having a restricted size for menu item

– mr debug
Nov 5 '18 at 6:24





I found the solution it was my theme I was having a restricted size for menu item

– mr debug
Nov 5 '18 at 6:24












2 Answers
2






active

oldest

votes


















0














It works for me, in my ToolBar I see action button only text "today", without icon:



<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_иет"
android:orderInCategory="200"
android:title="today"
app:showAsAction="ifRoom" />
</menu>


try without withText, only ifRoom:



app:showAsAction="ifRoom"





share|improve this answer































    0














    Remove an icon from menu item and set app:showAsAction="always" to show text:



    <?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_edit"
    android:title="@string/edit"
    app:showAsAction="always"
    />
    </menu>


    If nothing appeared, you can override text color to not show white text on white background (see Android Toolbar menu text color). Add these lines in your AppTheme style:



    <item name="actionMenuTextColor">@color/gray</item>
    <item name="android:actionMenuTextColor">@color/gray</item>


    If this won't help, see variants in How to display both icon and title of action inside ActionBar?.






    share|improve this answer
























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53149052%2fhow-to-set-menuitem-text-instead-of-icon-in-toolbar%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      0














      It works for me, in my ToolBar I see action button only text "today", without icon:



      <menu
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
      <item
      android:id="@+id/action_иет"
      android:orderInCategory="200"
      android:title="today"
      app:showAsAction="ifRoom" />
      </menu>


      try without withText, only ifRoom:



      app:showAsAction="ifRoom"





      share|improve this answer




























        0














        It works for me, in my ToolBar I see action button only text "today", without icon:



        <menu
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
        android:id="@+id/action_иет"
        android:orderInCategory="200"
        android:title="today"
        app:showAsAction="ifRoom" />
        </menu>


        try without withText, only ifRoom:



        app:showAsAction="ifRoom"





        share|improve this answer


























          0












          0








          0







          It works for me, in my ToolBar I see action button only text "today", without icon:



          <menu
          xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto">
          <item
          android:id="@+id/action_иет"
          android:orderInCategory="200"
          android:title="today"
          app:showAsAction="ifRoom" />
          </menu>


          try without withText, only ifRoom:



          app:showAsAction="ifRoom"





          share|improve this answer













          It works for me, in my ToolBar I see action button only text "today", without icon:



          <menu
          xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto">
          <item
          android:id="@+id/action_иет"
          android:orderInCategory="200"
          android:title="today"
          app:showAsAction="ifRoom" />
          </menu>


          try without withText, only ifRoom:



          app:showAsAction="ifRoom"






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 5 '18 at 9:03









          Yury MatatovYury Matatov

          7616




          7616

























              0














              Remove an icon from menu item and set app:showAsAction="always" to show text:



              <?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_edit"
              android:title="@string/edit"
              app:showAsAction="always"
              />
              </menu>


              If nothing appeared, you can override text color to not show white text on white background (see Android Toolbar menu text color). Add these lines in your AppTheme style:



              <item name="actionMenuTextColor">@color/gray</item>
              <item name="android:actionMenuTextColor">@color/gray</item>


              If this won't help, see variants in How to display both icon and title of action inside ActionBar?.






              share|improve this answer




























                0














                Remove an icon from menu item and set app:showAsAction="always" to show text:



                <?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_edit"
                android:title="@string/edit"
                app:showAsAction="always"
                />
                </menu>


                If nothing appeared, you can override text color to not show white text on white background (see Android Toolbar menu text color). Add these lines in your AppTheme style:



                <item name="actionMenuTextColor">@color/gray</item>
                <item name="android:actionMenuTextColor">@color/gray</item>


                If this won't help, see variants in How to display both icon and title of action inside ActionBar?.






                share|improve this answer


























                  0












                  0








                  0







                  Remove an icon from menu item and set app:showAsAction="always" to show text:



                  <?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_edit"
                  android:title="@string/edit"
                  app:showAsAction="always"
                  />
                  </menu>


                  If nothing appeared, you can override text color to not show white text on white background (see Android Toolbar menu text color). Add these lines in your AppTheme style:



                  <item name="actionMenuTextColor">@color/gray</item>
                  <item name="android:actionMenuTextColor">@color/gray</item>


                  If this won't help, see variants in How to display both icon and title of action inside ActionBar?.






                  share|improve this answer













                  Remove an icon from menu item and set app:showAsAction="always" to show text:



                  <?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_edit"
                  android:title="@string/edit"
                  app:showAsAction="always"
                  />
                  </menu>


                  If nothing appeared, you can override text color to not show white text on white background (see Android Toolbar menu text color). Add these lines in your AppTheme style:



                  <item name="actionMenuTextColor">@color/gray</item>
                  <item name="android:actionMenuTextColor">@color/gray</item>


                  If this won't help, see variants in How to display both icon and title of action inside ActionBar?.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 23 '18 at 12:26









                  CoolMindCoolMind

                  4,47314177




                  4,47314177






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53149052%2fhow-to-set-menuitem-text-instead-of-icon-in-toolbar%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      這個網誌中的熱門文章

                      Xamarin.form Move up view when keyboard appear

                      Post-Redirect-Get with Spring WebFlux and Thymeleaf

                      Anylogic : not able to use stopDelay()