Заголовок элемента меню панели инструментов "Стилизация"

Я пытаюсь добиться дизайна элемента меню, как показано на экране приложения YouTube ниже. Меня интересует пункт меню действий. В этом случае (G)

В настоящее время мое приложение выглядит следующим образом:

Мой стиль и фоновый xml следующие:

<resources>

    // The themes are structured as follows :

    // Theme 1 (One)   : Application Theme
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/color_accent</item>
        <item name="otpViewStyle">@style/OtpWidget.OtpView</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="actionMenuTextColor">@color/white</item>
        <item name="android:actionMenuTextColor">@color/white</item>
        <item name="actionMenuTextAppearance">@style/home_menu_style</item>
        <item name="android:actionMenuTextAppearance" >@style/home_menu_style</item>

    </style>

    // Theme 2 (two)   : Splash Screen Theme
    <style name="SplashScreenTheme" parent="AppTheme.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>

    </style>

    // Theme 3 (three) : No ActionBar Theme
    <style name="AppTheme.NoActionbar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    // Theme 4 (four)  : AppBarOverlay and PopupOverlay
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Light" />
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light" />


    // Menu Style
    <style name="home_menu_style" parent="AppTheme">
        <item name="android:textSize">22sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:background">@drawable/menu_drawable</item>
        <item name="android:backgroundTint">@drawable/menu_drawable</item>
        <item name="backgroundTint">@drawable/menu_drawable</item>
    </style>

</resources>

Menu_drawable выглядит следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
  <solid
      android:color="#48b3ff">
  </solid>
</shape>

Пункт меню home_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/menu_name"
        android:actionLayout="@layout/custom_layout"
        android:title=""
        app:showAsAction="always"  />


    <item
        android:id="@+id/action_search"
        android:icon="@drawable/sharp_search_white_24"
        android:title="Search"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        app:showAsAction="collapseActionView|always" />

</menu>

Код для надувания меню:

   override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater)
    {
        super.onCreateOptionsMenu(menu, inflater)
        menu.clear()
        this.menu = menu
        inflater.inflate(R.menu.home_menu, menu)

    }

Мой код для изменения заголовка пункта меню выглядит следующим образом:

var menu: Menu
  menu.findItem(R.id.menu_name).setTitle(name)

Предварительный просмотр меню выглядит следующим образом:

George 11.09.2019 источник

Ответы (1)

arrow_upward
0
arrow_downward

Во-первых, вам нужно создать custom_menu.xml вот так:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/profile"   
        <!-- this is the magic !!! -->
        android:actionLayout="@layout/custom_layout"
        android:icon="@drawable/ic_action_profile"
        android:title="@string/profile_update"
        app:showAsAction="always" />
</menu>

После этого вы создаете файл макета custom_layout.xml следующим образом:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginEnd="@dimen/margin_extra_small"
        android:background="@drawable/drawable_circle_solid_accent"
        android:gravity="center"
        android:padding="@dimen/padding_small"
        android:text="G"
        android:textColor="@color/colorWhite"
        android:textSize="@dimen/text_size_normal"
        android:textStyle="bold" />
</LinearLayout>

и установите этот custom_menu.xml в свой activity.

Вывод:

Добавьте это в свой activity:

  override fun onPrepareOptionsMenu(menu: Menu?): Boolean {
        // getting action layout menu item
        val menuItemName = menu?.findItem(R.id.menu_name)

        // getting Linear Layout from custom layout
        val linearLayout = menuItemName?.actionView as LinearLayout

        // getting TextView from Linear Layout, i.e., parent of custom layout
        val yourTextView = linearLayout.findViewById<TextView>(R.id.your_text_view_id)

        // setting the first char of the String name
        yourTextView.text = name.substring(0, 1)

        return super.onPrepareOptionsMenu(menu)
    }

MojoJojo 11.09.2019

comment

Я немного запутался, я создал макет с текстовым представлением. Этот пункт меню отображается, когда меню находится в предварительном просмотре дизайна. Однако, когда я пытаюсь назначить или изменить имя, оно возвращается к исходному тексту. - George; 11.09.2019

comment

Можете ли вы поделиться блоком кода или чем-то вроде скриншота? - MojoJojo; 11.09.2019

comment

пожалуйста, проверьте мой отредактированный ответ, добавьте onPrepareOptionsMenu в свой activity. - MojoJojo; 11.09.2019

comment

Я внес изменения в ваш код в custom_menu. Это должно быть: app: actionLayout = @ layout / custom_layout - George; 11.09.2019

Заголовок элемента меню панели инструментов "Стилизация"

Ответы (1)

Похожие вопросы