androidandroid-layoutandroid-actionbaraction-menu
Android: actions showing on the right edge when setting action view instead of icon
I am adding action menu items to the action bar dynamically and because I want a "badge" effect, I am setting views to the items instead of just drawable icons. My problem is that when I have items which have their views set, they are also aligned to the right edge of the action bar. I want to have some sort of inset, but nothing seems to achieve that. I tried setting margins on the action view layouts, setting insets in the XML and programmatically, but nothing is changing. Does anyone know how I can make it so that the actions don't appear right at the edge?
This is what I see now:
And I want to have some sort of padding/margin between the icon and the right edge of the action bar, like on the left side between the left edge and the title.
Here is some code:
View of the action menu items (res/layout/navbar_action.xml):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="53dp"
android:layout_height="53dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="12dp">
<ImageView
android:id="@+id/navbar_icon"
android:layout_width="44dp"
android:layout_height="44dp"
android:layout_gravity="bottom|left"/>
<TextView
android:id="@+id/navbar_badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:background="@drawable/navbar_badge_circle"
android:gravity="center"
android:textSize="@dimen/textsize_caption"
android:visibility="gone"
/>
</FrameLayout>
Setting up the action bar and the action menu in the base activity:
public abstract class BaseActivity extends AppCompatActivity {
public static final int MENU_PRIMARY = 0;
public static final int MENU_SECONDARY = 1;
protected ActionBar actionBar;
boolean hasPrimaryAction = false;
String primaryActionTitle;
MenuItem.OnMenuItemClickListener primaryActionListener;
View primaryActionView;
boolean hasSecondaryAction = false;
String secondaryActionTitle;
MenuItem.OnMenuItemClickListener secondaryActionListener;
View secondaryActionView;
...
protected boolean initToolbar() {
if (getSupportActionBar() != null) {
actionBar = getSupportActionBar();
return true;
}
Toolbar toolbar = (Toolbar) findViewById(R.id.action_bar);
if (toolbar != null) {
toolbar.setVisibility(View.VISIBLE);
setSupportActionBar(toolbar);
actionBar = getSupportActionBar();
return true;
}
return false;
}
...
public void setAction(String title, Drawable icon, int actionNumber) {
if (actionNumber == MENU_PRIMARY) {
hasPrimaryAction = true;
primaryActionTitle = title;
primaryActionView = LayoutInflater.from(this).inflate(R.layout.navbar_action, null);
ImageView iconView = (ImageView) primaryActionView.findViewById(R.id.navbar_icon);
iconView.setImageDrawable(icon);
primaryIcon = icon;
} else if (actionNumber == MENU_SECONDARY) {
hasSecondaryAction = true;
secondaryActionTitle = title;
secondaryActionIcon = icon;
secondaryActionView = LayoutInflater.from(this).inflate(R.layout.navbar_action, null);
ImageView iconView = (ImageView) secondaryActionView.findViewById(R.id.navbar_icon);
iconView.setImageDrawable(icon);
}
supportInvalidateOptionsMenu();
}
public void setActionBadge(int actionNumber, int badgeCount) {
if (actionNumber == MENU_PRIMARY) {
if (primaryActionView != null) {
TextView badgeView = (TextView) primaryActionView.findViewById(R.id.navbar_badge);
if (badgeCount > 0){
badgeView.setVisibility(View.VISIBLE);
badgeView.setText(String.valueOf(badgeCount));
} else {
badgeView.setVisibility(View.INVISIBLE);
}
}
} else if (actionNumber == MENU_SECONDARY) {
if (secondaryActionView != null) {
TextView badgeView = (TextView) secondaryActionView.findViewById(R.id.navbar_badge);
if (badgeCount > 0) {
badgeView.setVisibility(View.VISIBLE);
badgeView.setText(String.valueOf(badgeCount));
} else {
badgeView.setVisibility(View.INVISIBLE);
}
}
}
supportInvalidateOptionsMenu();
}
public void removeAction(int actionNumber) {
if (actionNumber == MENU_PRIMARY) {
hasPrimaryAction = false;
} else if (actionNumber == MENU_SECONDARY) {
hasSecondaryAction = false;
}
supportInvalidateOptionsMenu();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
if (hasPrimaryAction) {
menu.add(Menu.NONE, 0, Menu.NONE, primaryActionTitle).setActionView(primaryActionView).setOnMenuItemClickListener(primaryActionListener).setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
}
if (hasSecondaryAction) {
menu.add(Menu.NONE, 1, Menu.NONE, secondaryActionTitle).setActionView(secondaryActionView).setOnMenuItemClickListener(secondaryActionListener).setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
}
return true;
}
}
Layout of the action bar:
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/actionBarBg"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="4dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/actionBarBg"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/action_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:elevation="4dp"
app:layout_collapseMode="pin"
android:visibility="gone">
<TextView
android:id="@+id/action_bar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"
android:layout_gravity="left"
android:visibility="gone"/>
<ImageView
android:id="@+id/search_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_marginLeft="@dimen/navigation_icons_margin_left"
android:layout_marginRight="@dimen/navigation_icons_margin_right"
android:background="@drawable/search_icon_dark_bg"
android:visibility="gone" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Solution
Try this :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/parent_cart"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:paddingRight="5dp"
android:layout_gravity="right">
<ImageView
android:id="@+id/navbar_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/home"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:layout_marginTop="20dp"
android:paddingTop="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp" />
<TextView
android:id="@+id/nom_product"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="@drawable/red_circle"
android:gravity="center"
android:layout_margin="10dp"
android:text="0"
android:textColor="@color/white"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Red Circle :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="@color/colorPrimaryDark" />
<size
android:height="20dp"
android:width="20dp" />
</shape>