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?
Related
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)
I'm trying to make an ActionBar that has:
Home button as up enabled with title (to the left)
TextView (centered)
Overflow Menu items (to the right)
I was following this answer to an almost identical question. The difference is that I would like to show a title. I tried actionBar.setTitle("Title"), but it gets cut off by the LinearLayout and isn't visible.
How can I create a custom View in the center of my ActionBar with the above elements?
Is it possible to do without overriding the entire ActionBar?
Edit:
I set up the ActionBar here:
final ActionBar actionBar = getSupportActionBar();
actionBar.setHomeButtonEnabled(true);
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setTitle("Title");
actionBar.setCustomView(R.layout.some_layout);
Here is the some_layout.xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some Text" />
</LinearLayout>
Here is the resulting ActionBar I get from this (I set the LinearLayout background to green and text color to white):
Here is what I'm trying to get (without the green background):
Try this:
ActionBar ab = getSupportActionBar();
ab.setCustomView(R.layout.registration_actionbar);
ab.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM
| ActionBar.DISPLAY_SHOW_HOME | ActionBar.DISPLAY_SHOW_TITLE);
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 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
Question:
How can I have the title back?
Here's the screenshot (Missing title):
Actionbar setting:
ActionBar actionBar = getSupportActionBar();
actionBar.setTitle("My Title");
actionBar.setIcon(drawable.dropdown_user);
View mLogoView = LayoutInflater.from(this).inflate(R.layout.mLogoView, null);
actionBar.setCustomView(mLogoView);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setDisplayHomeAsUpEnabled(true);
mLogoView.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/img_merchant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/infoflex">
</ImageView>
</RelativeLayout >
The first thing which I can think a way to fix that is try to set
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right" >
to your RelativeLayout. Because as default in Android every View is added from left to right (if you doesn't specify something else in your code).
And if that doesn't work, I would add android:layout_width="90dip" or some other value depending on the image and your tests. The second option is more like a workaround, but I think it will work on all devices.
Edit:
As I found there is a little problem using RelativeLayout and Custom Views in ActionBar, so the better option is to use LinearLayout and set LayoutParams via code. Change your xml to look like this :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/asus" />
</LinearLayout >
and in your MainActivity.class use this :
import com.actionbarsherlock.app.ActionBar.LayoutParams;
....
ActionBar actionBar = getSupportActionBar();
actionBar.setTitle("OMG");
LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, Gravity.RIGHT | Gravity.CENTER_VERTICAL);
View customNav = LayoutInflater.from(this).inflate(R.layout.img, null); // layout which contains your button.
actionBar.setCustomView(customNav, lp);
actionBar.setDisplayShowCustomEnabled(true);