I'm trying to style the action bar by adding a custom back button on the left and an icon in the center. The rendering in Android Studio is exactly as I want it, but when I test the layout on my phone, it just shows both back button and icon on the left, with the icon on top of the back button. This is my layout file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/action_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton android:id="#+id/back_button"
android:contentDescription="Image"
android:src="#drawable/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#color/action_bar_bg_color"
android:layout_alignParentLeft="true"/>
<ImageView android:id="#+id/cow_icon"
android:contentDescription="Image"
android:src="#drawable/cowhead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
And this is what I do to style the action bar:
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowTitleEnabled(false);
View mActionBar = getLayoutInflater().inflate(R.layout.action_bar_layout, null);
actionBar.setCustomView(mActionBar);
actionBar.setDisplayShowCustomEnabled(true);
Anyone see what could be causing the flawed styling of the action bar?
You could try using the new Toolbar : https://developer.android.com/reference/android/widget/Toolbar.html
which is great for making custom actionBar.
Otherwise, you don't have to make your back button custom, actionbar supports it with : https://developer.android.com/reference/android/app/ActionBar.html#setDisplayHomeAsUpEnabled(boolean)
Related
I am trying to have a Simple actionbar with a custom view, but I get the following result:
For demonstration I created a simple xml with a yellow background color which is supposed to take the whole width.
Here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/yellow"
android:orientation="vertical" >
<TextView
android:visibility="gone"
android:id="#+id/action_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/action_save"
android:gravity="center"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:textStyle="bold"
android:layout_marginLeft="10dp"
android:textColor="#android:color/white"
android:text="#string/save" />
<ImageView
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/ic_actionbar_logo" />
</RelativeLayout>
And I use the following theme for my Application:
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light"></style>
This is the actionbar initialization code:
actionBar = getSupportActionBar();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(R.layout.actionbar);
The solution is adding :
actionBar.setDisplayShowTitleEnabled(false);
The code should look something like:
actionBar = getSupportActionBar();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setCustomView(R.layout.actionbar);//set the custom view
#NemesisDoom: Please make sure that you use ActionBar from the support.v7 library rather that one from the Android API (this second one will not work certainly). If still doesn't work, add the further changes:
styles.xml (your action bar style section):
<item name="android:homeAsUpIndicator">#drawable/_pixel</item>
<item name="homeAsUpIndicator">#drawable/_pixel</item>
_pixel is 1x1.png image, transparent.
your activity:
actionBar.setDisplayHomeAsUpEnabled(true);
I'm trying to change the layout of the actionBar in my app. I managed to display the layout, but there's a problem - the layout doesn't stretch to entire width of the bar and I don't see the title and the icon. Here's how I see it right now:
This is the XML of my custom layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/app_bg"
android:layout_gravity="fill_horizontal" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
</RelativeLayout>
And this is how I tried to display it in my main FragmentActivity, along with the title:
final ActionBar actionBar = getActionBar();
actionBar.setCustomView(R.layout.action_bar);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setDisplayUseLogoEnabled(true);
actionBar.setSubtitle("welcome to my app");
actionBar.setTitle("My App");
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
I want the layout to stretch to entire width of the bar. Also, I'd like to have the options button on the right of the menu later (to the left of the button).
What am I doing wrong and how do I fix it?
I am trying to create a popup on the actionbar item (like the one in G+ app).
To do this, I need to have the actionbar item view but this is available only setting a custom view with setActionView().
The problem is that I cannot reach the same menu item style of actionbar items.
I am using this:
<Button xmlns:android="http://schemas.android.com/apk/res/android"
style="?android:attr/actionButtonStyle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:background="#drawable/ic_refresh">
but the result is not good.
Where could I find a layout/style to mimic the action bar item one?
The solution is to use this layout:
<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#android:style/Widget.Holo.ActionButton"
android:src="#drawable/ic_refresh">
</ImageButton>
with the style #android:style/Widget.Holo.ActionButton
I just modified my action bar on my application to use the Split ActionBar functionality described here:
http://developer.android.com/guide/topics/ui/actionbar.html#SplitBar
I created a draft custom view in order to see the result on my device, here is the XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<ImageButton
android:id="#+id/action1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/actionButtonStyle"
android:src="#android:drawable/ic_menu_compass" />
<ImageButton
android:id="#+id/action2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/actionButtonStyle"
android:src="#android:drawable/ic_menu_compass" />
</LinearLayout>
In my Activity, I just modified my code to add the two required lines to set this custom XML and the way it should be displayed:
ActionBar actionBar = getActionBar();
actionBar.setCustomView(R.layout.action_bar_bottom); //load bottom menu
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME|ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.show();
The split is working well, my problem is that the action bar I was using previously is now at the bottom of the screen and the new one defined in the XML above is now displayed at the top of the screen, along with the Home button.
I looked at the function setDisplayOptions in the developer guide but it is not really clear for me how to use it.
Is there an easy way to invert the 2 action bars in order to let my main action bar at the top?
Thank you!
I have an ActionBar with a 3 menu items. The last one of these is a refresh button.
The refresh button sets the...
setProgressBarIndeterminateVisibility(true);
setProgressBarVisibility(true);
... to true, which shows the spinning progress icon on the ActionBar. Great!
But the trouble is it shows it in front of all the other icons. I want it to the right of all the icons, so I can hide the refresh button so it looks like it replaces the refresh button when the spinner is visible.
How I can accomplish this?
You'll need to make a custom ActionBar layout and position a Progress Bar (set to Indeterminate mode) wherever you want it. Then, instead of calling setProgressBarVisibility(true), just call ProgressBar.setVisibility() based on whether you need to show the spinner or not.
Here's an example of my app's custom ActionBar layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/app_name"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"/>
<ProgressBar
android:id="#+id/action_bar_progress_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:indeterminate="true"
android:layout_toStartOf="#id/search_view"
android:visibility="gone" />
<SearchView
android:id="#+id/search_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:title="#string/menu_search"
android:icon="#drawable/ic_search"
android:showAsAction="always"
android:actionViewClass="android.widget.SearchView"
android:layout_alignParentLeft="false"
android:queryHint="#string/menu_search_hint"
android:iconifiedByDefault="false"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Just tweak the position of the ProgressBar until it's where you want it. Then, in your Activity's onCreate() set the layout:
ActionBar actionBar = getActionBar();
actionBar.setCustomView(R.layout.activity_start_screen_actionbar);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);