How to display multiple items in ActionBar programmatically (TextView and ImageButton)?

Question

I have a TextView and ImageButton I want to display in my ActionBar. I am able to successfully render the TextView or the ImageButton, but not both. Either I'm running out room to fit both of them, I'm not understanding how LayoutParams work, or something else entirely.

Just the TextView:

Just the ImageButton:

How can I fit both of these in the ActionBar programmatically?

Declarations and inside of onCreate method in MapActivity.java:

private ActionBarDrawerToggle mToggle;
private DrawerLayout mDrawerLayout;
private ActionBar actionBar;
private TextView actionBarDistanceText;

 /*
 ACTION BAR STUFF onCREATE
 */
    if (getSupportActionBar() != null) {
        getSupportActionBar().setDisplayShowTitleEnabled(false);
    }
    mDrawerLayout = findViewById(R.id.nav_drawer);
    mToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.open, R.string.close);
    mDrawerLayout.addDrawerListener(mToggle);
    mToggle.syncState();
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    /*
    NAV STUFF onCREATE
     */
    mNavigationView = findViewById(R.id.navigation_view);
    if (mNavigationView != null) {
        mNavigationView.setNavigationItemSelectedListener(this);
    }

Here is the portion of code to render them in MapActivity.java:

 /*
  CODE FOR DISTANCE TEXT AND SHARE BUTTON
 */

actionBar = getSupportActionBar();
actionBarDistanceText = new TextView(MapActivity.this);
ConstraintLayout.LayoutParams layoutParams = new ConstraintLayout.LayoutParams(android.app.ActionBar.LayoutParams.MATCH_PARENT, android.app.ActionBar.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(150, 0, 0, 0);
actionBarDistanceText.setLayoutParams(layoutParams);
actionBarDistanceText.setTextSize(20);
actionBarDistanceText.setTextColor(Color.WHITE);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setCustomView(actionBarDistanceText);

ImageButton shareBtn = new ImageButton(actionBar.getThemedContext());
shareBtn.setScaleType(ImageButton.ScaleType.CENTER);
shareBtn.setImageResource(R.drawable.share_button_selector);
shareBtn.setBackgroundColor(Color.TRANSPARENT);
ActionBar.LayoutParams shareLayoutParams = new ActionBar.LayoutParams(
            ActionBar.LayoutParams.WRAP_CONTENT,
            ActionBar.LayoutParams.WRAP_CONTENT, Gravity.END | Gravity.CENTER_VERTICAL);
shareLayoutParams.rightMargin = 40;
shareBtn.setLayoutParams(shareLayoutParams);
actionBar.setCustomView(shareBtn);

Here is my share_button_selector.xml file:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Share Button -->
    <item android:state_pressed="true" android:drawable="@drawable/ic_share_green" android:background="@null"/>
    <item android:state_pressed="false" android:drawable="@drawable/ic_share_white" android:background="@null"/>
</selector>

nav_menu.xml

 <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:id="@+id/nav_group_2">
<item android:title="@string/nav_map_type">
    <menu>
        <item
            android:id="@+id/basic_map"
            android:icon="@drawable/basic_map_24x24"

            android:title="@string/nav_basic"/>
        <item
            android:id="@+id/terrain_map"
            android:icon="@drawable/ic_terrain_black_24dp"

            android:title="@string/nav_terrain"/>
        <item
            android:id="@+id/satellite_map"
            android:icon="@drawable/satellite_24x24"

            android:title="@string/nav_sat"/>
        <item
            android:id="@+id/hybrid_map"
            android:icon="@drawable/ic_satellite_black_24dp"

            android:title="@string/nav_hybrid"/>
    </menu>
</item>
        <!--
        SETTINGS GROUP
        -->
    </group>
    <group
        android:id="@+id/nav_group_3">
        <item android:title="@string/nav_settings">
            <menu>
                <item
                    android:id="@+id/standard_distance"
                    android:icon="@drawable/ic_settings_black_24dp"
                    android:title="@string/nav_standard_setting"/>
                <item
                    android:id="@+id/metric_distance"
                    android:icon="@drawable/ic_settings_black_24dp"
                    android:title="@string/nav_metric_setting"/>
            </menu>

        </item>
    </group>

</menu>

If I do not comment out the ImageButton code in MapActivity.java, the TextView disappears. Leaving just the TextView portion of the code allows it to be seen.

Instead of `actionbar` try to use `toolbar`. Toolbar is way more supportive than ActionBar. — Aditya, Jan 12 '18 at 10:48

ADM · Accepted Answer · 2018-01-12T11:23:53.610

1

Use ToolBar instead .

<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="wrap_content">

<android.support.design.widget.AppBarLayout
    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:gravity="center"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="start|center_vertical"
            android:text="App name" />

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

</android.support.design.widget.AppBarLayout>

Setting gravity of title TextView to android:layout_gravity="center" will make the title appear at center . And for ImageView use a OptionMenu.

edited Jan 12 '18 at 11:23

answered Jan 12 '18 at 11:00

ADM

20,406
11
52
83

I don't think this will work for me, but I do appreciate the new knowledge about the Toolbar. I have no xml for my actionbar, except for my Navigation Drawer, the Menu inside it, and the Navigation Header. The icon on the left of my images is the Navigation Drawer toggle. Everything is done programmatically. I should probably add those parts in my questions as well. – DevOpsSauce Jan 12 '18 at 11:25
ToolBar is just an extension of Actionbar with material design. So Its better if you try out the latest trend. Ans as much as i understood your question it should work. If it worth give it a try. Thx . – ADM Jan 12 '18 at 11:29
It looks like in order to do this, I will have to change so much code, I almost want to just put the button somewhere else on the UI. This was the last step before my application was finished. I guess I have some thinking to do. If I figure it out, I'll come back and accept your answer. – DevOpsSauce Jan 12 '18 at 19:06
I will accept your answer. After a lot of code editing and reading some documentation, I now have a Toolbar. Thank you for the suggestion. Both my textview and share button are showing up. :-) – DevOpsSauce Jan 13 '18 at 20:50

How to display multiple items in ActionBar programmatically (TextView and ImageButton)?

1 Answers1