Can't see a button over the Toolbar

Question

I've placed a basic Button after the Toolbar element, within a RelativeLayout, but can't see it over it (should be a "shuffle" white icon):

Here's the XML:

<Button
    android:id="@+id/btnRandom"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_alignParentEnd="true"
    android:layout_centerVertical="true"
    android:layout_marginEnd="10dp"
    android:background="@drawable/ic_shuffle">
</Button>

What am I missing? It does works with a FloatingActionButton, for example.

Here's the full XML:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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"
    android:background="@drawable/mxhbg"
    android:id="@+id/drawer_layout"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
    tools:openDrawer="start">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/mxhbg"
        android:orientation="vertical"
        android:weightSum="10">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:orientation="horizontal">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="@color/colorPrimary"
                    android:elevation="4dp"
                    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"></androidx.appcompat.widget.Toolbar>

                <Button
                    android:id="@+id/btnRandom"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="10dp"
                    android:background="@drawable/ic_shuffle">

                </Button>

            </RelativeLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="9">

            <ListView
                android:id="@+id/listviewsongs"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:divider="@android:color/transparent"
                android:dividerHeight="10.0sp"
                android:padding="8dp">

            </ListView>

        </LinearLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

            <Button
                android:id="@+id/hbtnpause"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginEnd="10dp"
                android:layout_toLeftOf="@+id/hbtnnext"
                android:background="@drawable/ic_play_circle">

            </Button>

            <Button
                android:id="@+id/hbtnnext"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_marginEnd="10dp"
                android:background="@drawable/ic_next">

            </Button>

            <Button
                android:id="@+id/hbtnprev"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerVertical="true"
                android:layout_marginEnd="10dp"
                android:layout_toLeftOf="@+id/hbtnpause"
                android:background="@drawable/ic_prev">

            </Button>

            <TextView
                android:id="@+id/txtnp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_toLeftOf="@+id/hbtnprev"
                android:ellipsize="marquee"
                android:marqueeRepeatLimit="marquee_forever"
                android:padding="10dp"
                android:scrollHorizontally="true"
                android:singleLine="true"
                android:textColor="#fff"
                android:textSize="18sp"
                android:textStyle="bold">

            </TextView>

        </RelativeLayout>
    </LinearLayout>
    <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:id="@+id/nav_view"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_menu">

    </com.google.android.material.navigation.NavigationView>

</androidx.drawerlayout.widget.DrawerLayout>

Can you post your full xml code please? – Skizo-ozᴉʞS ツ Feb 22 '23 at 10:44 — Skizo-ozᴉʞS ツ, Feb 22 '23 at 10:44

score 1 · Accepted Answer · answered Feb 22 '23 at 10:51

What you are trying to do is possible, and if you post the full code of your *.xml file will find a way to show the button, but following the documentation you should add this Button as an icon. Here's an example how to do it.

Create a menu.xml file

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

    <item
        android:id="@+id/action_shuffle"
        android:icon="@drawable/ic_shuffle"
        android:title="@string/action_shuffle"
        app:showAsAction="always"/>

</menu>

In your Activity you should override the onOptionsItemSelected and chose the functionality of that shuffle button as follows

override fun onCreate() {
  ...
  setSupportActionBar(yourToolbar);
}

override fun onCreateOptionsMenu(menu: Menu) {
   menuInflater.inflate(R.menu.menu.xml)
   return true
}


override fun onOptionsItemSelected(item: MenuItem) = when (item.itemId) {
    R.id.action_shuffle -> {
        //Your code goes here
        true
    }

    else -> {
        super.onOptionsItemSelected(item)
    }
}

To do it the way you were doing you should add the Button inside of the Toolbar as follows

<androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="@color/colorPrimary"
                    android:elevation="4dp"
                    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
                <Button
                    android:id="@+id/btnRandom"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_gravity="end"
                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="10dp"
                    android:background="@drawable/ic_shuffle"/>
</androidx.appcompat.widget.Toolbar>

It plays the Button left, not right of the toolbar. Can I move it to the right? — markzzz, Feb 22 '23 at 10:57

Can't see a button over the Toolbar

1 Answers1