Custom PopUp Menu - android

Hello i have to create a PopUp Menu and i know how to do that.
Here is my code to create default PopUp Menu ..
popup_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/item"
android:showAsAction="ifRoom|withText"
android:title="item1"
android:visible="true"/>
<item
android:id="#+id/item2"
android:showAsAction="ifRoom|withText"
android:title="item2"
android:visible="true"/>
<item
android:id="#+id/item3"
android:showAsAction="ifRoom|withText"
android:title="item3"
android:visible="true"/>
PopUpMenu_Activity.java
findViewById(R.id.btn_click).setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
PopupMenu popupMenu = new PopupMenu(PopMenuActivity.this, view);
popupMenu.setOnMenuItemClickListener(PopMenuActivity.this);
popupMenu.inflate(R.menu.popup_menu);
popupMenu.show();
}
});
and
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.item1:
Toast.makeText(this, "item1 clicked", Toast.LENGTH_SHORT).show();
return true;
case R.id.item2:
Toast.makeText(this, "item2 clicked", Toast.LENGTH_SHORT).show();
return true;
case R.id.item3:
Toast.makeText(this, "item3 clicked", Toast.LENGTH_SHORT).show();
return true;
default:
return false;
}
}
My Question is how can i customize it? I want to add custom fonts in PopUp menu with semi transparent background as shown in figure.
Please help...!!!

You can use ListPopupWindow. You can submit your custom Adapter to the ListPopupWindow's object, and customize its appearance into getView

You can use android:actionViewClass property in the menu xml to define you own custom class

Customize android:spinnerDropDownItemStyle for actionBarWidgetTheme changing it's text appearance.
Also don't forget that dropdown list is managed by the adapter you use. Then if you used the standard one (simple_dropdown_item_1line) there's no problem. But if you used a custom one like me (to be able to add an icon) don't forget to apply style="?attr/spinnerDropDownItemStyle" in your layout TextView.
final custom style is:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.myapp" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/myapp_DropDownNav</item>
<item name="android:actionBarWidgetTheme">#style/myapp.actionBarWidgetTheme</item>
</style>
<style name="myapp.actionBarWidgetTheme" parent="#style/Theme.">
<item name="android:spinnerDropDownItemStyle">#style/myapp.Widget.DropDownItem.Spinner</item>
</style>
<style name="myapp_DropDownNav" parent="#style/Widget.Spinner.DropDown.ActionBar">
<item name="background">#drawable/spinner_background_ab_myapp</item>
<item name="android:background">#drawable/spinner_background_ab_myapp</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_myapp</item>
<item name="android:dropDownSelector">#drawable/selectable_background_myapp</item>
</style>
<style name="myapp.Widget.DropDownItem.Spinner" parent="Widget.DropDownItem.Spinner">
<item name="android:textAppearance">#style/myapp.TextAppearance.Widget.DropDownItem</item>
</style>
<style name="myapp.TextAppearance.Widget.DropDownItem" parent="TextAppearance.Widget.DropDownItem">
<item name="android:textColor">#color/black</item>
</style>

Related

Change Popup Menu Items font size dynamatically Android

I am creating an android app which has a popup menu and it is opened when a button is clicked and I want to increase the text size of menu items in that popup menu dynamically(based on the users input).
Can anyone help on how do that programatically?
In my class:
menuButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//Creating the instance of PopupMenu
PopupMenu popup = new PopupMenu(getActivity(), menuButton);
//Inflating the Popup using xml file
popup.getMenuInflater().inflate(R.menu.popup_menu, popup.getMenu());
//registering popup with OnMenuItemClickListener
popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.one:
// Some Stuffs
break;
case R.id.two:
// Some Stuffs
break;
default:
break;
}
return true;
}
});
And my xml file is ::
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fav_menu">
<group android:id="#+id/first_section" android:checkableBehavior="none" >
<item
android:id="#+id/one"
android:title="#string/sort"
android:visible="true"
/>
</group>
<group android:id="#+id/first_two" android:checkableBehavior="none">
<item
android:id="#+id/two"
android:title="#string/sort"
android:visible="true"
/>
</group>
</menu>
This is very easy with SpannableString:
//### format text of popup-items ###
for(int i=0;i<popup.getMenu().size();i++){
MenuItem tmpItem = popup.getMenu().getItem(i);
String tmpText = tmpItem.getTitle().toString();
SpannableString s = new SpannableString(tmpText);
s.setSpan(new RelativeSizeSpan(1.4f), 0, s.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
s.setSpan(new ForegroundColorSpan(Color.BLUE), 0, s.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
tmpItem.setTitle(s);
}
//##################################
In my style file:
<style name="menuStyle">
<item name="android:layoutDirection">rtl</item>
<item name="android:textColor">#color/onyx</item>
<item name="android:textSize">15sp</item>
<item name="android:fontFamily">#font/ge_ss_two_light</item>
</style>
In my java file:
Context myContext = new ContextThemeWrapper(context, R.style.menuStyle);
MenuBuilder menuBuilder = new MenuBuilder(context);
MenuInflater inflater = new MenuInflater(context);
inflater.inflate(R.menu.options_menu, menuBuilder);
You can change the text size by adding this code to styles.xml and use it in manifest file.
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<item name="android:textAppearanceLargePopupMenu">#style/myPopupMenuTextAppearanceLarge</item>
<item name="android:textAppearanceSmallPopupMenu">#style/myPopupMenuTextAppearanceSmall</item>
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
<style name="PopupMenu" parent="#android:style/Widget.PopupMenu">
<item name="android:popupBackground">#android:color/white</item>
<item name="android:textSize">12sp</item>
</style>
<style name="myPopupMenuTextAppearanceSmall" parent="#android:style/TextAppearance.DeviceDefault.Widget.PopupMenu.Small">
<item name="android:textSize">15sp</item>
</style>
<style name="myPopupMenuTextAppearanceLarge" parent="#android:style/TextAppearance.DeviceDefault.Widget.PopupMenu.Large">
<item name="android:textSize">25sp</item>
</style>

Change CheckBox Style inside AlertDialog in Android

I am having troubles changing the chexbox theme of a Alert Dialog. I am not able to change selected checkbox color to my AccentColor.
this is my style code
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:checkboxStyle">#style/CustomCheckBox</item>
</style>
<style name="CustomCheckBox" parent="android:style/Widget.CompoundButton.CheckBox">
<item name="android:button">#drawable/activated_checkbox</item>
</style>
Selector : activated_checkbox
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- checked -->
<item android:state_checked="true" android:drawable="#color/AccentColor">
</item>
<item android:state_checked="false" android:drawable="#color/White">
</item>
</selector>
and method that shows the AlertDialog.
private void showDialog() {
final CharSequence[] items = getResources().getStringArray(R.array.tipoDescargas);
final boolean[] states = {false, false, false};
AlertDialog.Builder builder = new AlertDialog.Builder(this,R.style.AlertDialogCustom);
builder.setTitle(getResources().getString(R.string.preguntaDescargas));
builder.setMultiChoiceItems(items, states, new DialogInterface.OnMultiChoiceClickListener() {
public void onClick(DialogInterface dialogInterface, int item, boolean state) {
}
});
builder.setPositiveButton("Descargar", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
SparseBooleanArray CheCked = ((AlertDialog) dialog).getListView().getCheckedItemPositions();
if (CheCked.get(0) && CheCked.get(1) && CheCked.get(2))
Toast.makeText(getApplication(), "TODOS", Toast.LENGTH_SHORT).show();
if (CheCked.get(0)) {
Toast.makeText(getApplication(), "Item 1", Toast.LENGTH_SHORT).show();
}
if (CheCked.get(1)) {
Toast.makeText(getApplication(), "Item 2", Toast.LENGTH_SHORT).show();
}
if (CheCked.get(2)) {
Toast.makeText(getApplication(), "Item 3", Toast.LENGTH_SHORT).show();
}
}
});
builder.setNegativeButton("Cancelar", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
dialog.cancel();
}
});builder.create().show();
}
Can anyone help me? Thank you
UPDATE 1
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:checkedTextViewStyle">#style/CustomCheckBox</item>
</style>
<style name="CustomCheckBox" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:checkMark">#drawable/activated_checkbox</item>
</style>
SOLUTION
I found the solution that display correctly the color.
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:listChoiceIndicatorMultiple">#drawable/activated_checkbox</item>
</style>
and Selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/checkedcheckbox24" android:state_checked="true"></item>
<item android:drawable="#drawable/uncheckedcheckbox24" android:state_checked="false"></item>
</selector>
With this code, icons displays correctly
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:listChoiceIndicatorMultiple">#drawable/activated_checkbox</item>
</style>
and the selector code
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/checkedcheckbox24" android:state_checked="true"></item>
<item android:drawable="#drawable/uncheckedcheckbox24" android:state_checked="false"></item>
</selector>
You can make use custom selector for customizing your check box.
<CheckBox
android:text="Custom CheckBox"
android:button="#drawable/checkbox_selector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Your Selector class , put it in drawable folder :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/checkedimage" />
<item android:state_checked="false" android:drawable="#drawable/uncheckedimage" />
</selector>
The default multi choice layout that AlertDialog uses for presenting each option is in fact a CheckedTextView. Since this class doesn't extend CheckBox in any way, the android:checkboxStyle reference in your theme will have no effect.
API level 17 added the attribute android:checkedTextViewStyle, which can be used to style CheckedTextView specifically. If your minimum sdk version is set to this, or any higher version, then you could use this approach.
An alternative that, also available on older platforms, is android:listChoiceIndicatorMultiple (there is also an equivalent for single choice items, or perhaps better said: items that visually look like radio buttons, but again, are CheckedTextView in reality). Use this to supply your own drawable that is to be displayed as checkmark (or radio button circle).

How to add an customized button on the actionbar?

I want to make an action bar with a button on the right with a margin_right. like this
And I use the action button to do it. But the button was on the right without margin_right.
android:layout_marginRight doesn't work here.
here is my styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarSize">50dp</item>
<item name="android:actionBarStyle">#style/my_actionbar_style</item>
<item name="android:actionButtonStyle">#style/my_action_button</item>
</style>
<style name="my_actionbar_style" parent="android:Widget.ActionBar">
<item name="android:background">#color/actionbar_backgroud</item>
<item name="android:titleTextStyle">#style/myTitleStyle</item>
<item name="android:displayOptions">showTitle</item>
</style>
<style name="myTitleStyle">
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">20sp</item>
</style>
<style name="my_action_button">
<item name="android:background">#drawable/button_selector</item>
<item name="android:width">70dp</item>
<item name="android:textSize">13sp</item>
<item name="android:layout_marginTop">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:layout_marginRight">10dp</item>
</style>
and this is my menu.xml:
<menu xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:ignore="AppCompatResource">
<item
android:id="#+id/action_search"
android:title="submit"
android:showAsAction="always" /></menu>
Another quick and clean way to go about this is specifying your own layout for that menu button. something like this
<menu 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"
tools:context="com.example.MainActivity">
<item
android:id="#+id/action_custom_button"
android:title="Custom Button"
android:icon="#drawable/ic_custom_button"
app:actionLayout="#layout/layout_to_custom_button"
app:showAsAction="always" />
</menu>
there should be
layout_to_custom_button.xml
layout file which contains the padding and style you wanted.
and also do this in your activity for the click event
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_product_detail, menu);
final Menu mMenu = menu;
final MenuItem item = menu.findItem(R.id.action_custom_button);
item.getActionView().setOnClickListener(new View.OnClickListener(){
#Override
public void onClick(View v) {
mMenu.performIdentifierAction(item.getItemId(), 0);
}
});
return true;
}
I found the easiest way to do this was to just create your own action bar in a layout file. You can then use it by having your activities inherit from a common activity that overrides setContentView, where you just stick the view you're given into a parent view containing that and your action bar. You can mimick the overflowing menu behavior by using ActionMenuView (5.0+).
For example, assume you have an action_bar.xml with an ActionMenuView in it named menuView:
class BaseActivity extends Activity {
...
ActionMenuView mMenuView;
...
#Override
protected void setContentView(int resId) {
LayoutInflater inflater = getLayoutInflater();
View actionBar = inflater.inflate(R.layout.action_bar, null);
View contentView = inflater.inflate(resId);
mMenuView = (ActionMenuView)actionBar.findViewById(R.id.menuView);
RelativeLayout parentLayout = new RelativeLayout(this);
LayoutParams actionBarLayout = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
actionBar.setLayoutParams(actionBarLayout);
parentLayout.addView(actionBar);
actionBar.setId(R.id.actionBar);
LayoutParams contentLayout = new LayoutParams(LayoutParams.MATCH_PARENT, 0);
contentLayout.addRule(RelativeLayout.BELOW, actionBar.getId());
contentLayout.addRule(RelativeLayout.ALIGN_WITH_PARENT_BOTTOM);
contentView.setLayoutParams(contentLayout);
parentLayout.addView(contentView);
setContentView(parentLayout);
}
}

How to change android top toolbar menu item icon size

How can I change the size of a menu item in the android toolbar? Currently the menus have a very small size and I want to increase the size. If anyone knows please help me to find a solution.
app_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"
android:paddingTop="#dimen/app_bar_top_padding"
android:theme="#style/ToolBarStyle"/>
Styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="AppTheme.Base"> </style>
<!-- Application theme. -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorAccent">#color/accentColor</item>
<item name="colorControlHighlight">#color/primary_high_light</item>
<!-- <item name="textColorPrimary">#color/ColorPrimaryText</item> -->
</style>
<style name="ToolBarStyle" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:textColorPrimary">#ffffff</item>
</style>
<style name="option" parent="Theme.AppCompat.Light">
</style>
<style name="Dialog" parent="Base.Theme.AppCompat.Light.Dialog">
</style>
menu_option.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/homes"
android:title="homes"
android:icon="#drawable/ic_action_home1"
app:showAsAction="always"/>
<item android:id="#+id/profilepreview"
android:title="ProfilePreview"
android:icon="#drawable/profile"
app:showAsAction="always"/>
<item android:id="#+id/findPeople"
android:title="findPeople"
android:icon="#drawable/ic_action_search1"
app:showAsAction="always"/>
<item android:id="#+id/log"
android:title="log"
android:icon="#drawable/ic_action_logout1"
app:showAsAction="always"/>
</menu>
MainActivity.java
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_option, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.profilepreview:
startActivity(new Intent(this, ProfilePreview.class));
return true;
case R.id.homes:
mFragment = new HomeFragment();
break;
case R.id.findPeople:
mFragment = new FindFriendsFragment();
break;
case R.id.log:
M.logOut(this);
mIntent = new Intent(this, LoginActivity.class);
finish();
}
if (mFragment != null && mIntent == null) {
mFragmentManager = getFragmentManager();
mFragmentManager.beginTransaction()
.replace(R.id.frameContainer, mFragment).commit();
} else {
startActivity(mIntent);
mIntent = null;
}return super.onOptionsItemSelected(item);
}
You may design a custom layout and add it as your actionlayout. ALso make sure you do not add any icon in menu.xml file.
<item android:id="#+id/homes"
android:title="homes"
app:actionLayout="#layout/your_custom_layout"
app:showAsAction="always"/>
Then give min_height in your custom layout.
I ran into this problem too and the only workaround I was able to have was to use smaller images. A size of 24dp from the icons here (https://design.google.com/icons) fits nicely into my toolbar.
I suggest you to read this blog for custom toolbar.
https://stablekernel.com/using-custom-views-as-menu-items/
instead of adding drawable_icon to your menu-xml file, you can use "app:actionLayout" in that menu-xml file to specify the other xml-file(where you are going to create custom toolbar icon).
Just increase the size of the vector image(in the right) from the default 24x24 to a different size but after a certain size it won't scale up. The size might seem odd if it is put beside a view inflated(with orange background in the left) in the custom toolbar as shown in the image, only way to fix this is to inflate another view in the toolbar with the vector as the background.

android: PopUp Menu does not apply style

i have an Activity with an Action Bar. The Action Bar PopUp Menu (that appears after clicking the overflow button) applies my defined style.
But there is a EditText View inside my Activity, that should open a popup Menu by clicking on it.
This PopUp does not apply the style.
I hope someone can help me out..
Thx!!
Theme:
<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- ActionBar -->
<item name="android:actionBarStyle">#style/ActionBar</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle</item>
<item name="android:popupMenuStyle">#style/ActionBarPopupMenu</item>
<item name="android:dropDownListViewStyle">#style/ActionBarDropDownListView</item>
<item name="android:actionBarWidgetTheme">#style/ActionBar.Theme.actionbar.widget</item>
<item name="actionMenuTextColor">#color/mytheme_white_color</item>
<item name="android:actionMenuTextColor">#color/mytheme_white_color</item>
<item name="android:actionDropDownStyle">#style/ActionBarDropDownNav</item>
<item name="android:spinnerDropDownItemStyle">#style/ActionBarDropDownItem</item>
<item name="android:titleTextStyle">#style/ActionBarTextStyle</item>
<item
name="actionBarItemBackground">#drawable/ns_actionbar_selectable_background_selector</item>
<item name="android:actionBarItemBackground">#drawable/ns_actionbar_selectable_background_selector</item>
<!-- Custom Items: -->
<item name="android:editTextStyle">#style/EditTextStyle_singleLine</item>
<item name="android:buttonStyle">#style/ButtonStyle_Default</item>
<item name="android:checkboxStyle">#style/ns_CheckBoxStyle</item>
</style>
Styles:
<style name="ActionBarPopupMenu" parent="#android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_actionbar</item>
<item name="android:divider">#drawable/ns_linearlayout_list_divider</item>
</style>
<style name="ActionBarDropDownListView" parent="#android:style/Widget.Holo.Light.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_actionbar</item>
<item name="android:divider">#drawable/ns_linearlayout_list_divider</item>
</style>
<style name="ActionBar.Theme.actionbar.widget" parent="#android:style/Theme.Holo">
<item name="android:popupMenuStyle">#style/ActionBarPopupMenu</item>
<item name="android:dropDownListViewStyle">#style/ActionBarDropDownListView</item>
<item name="android:textColor">#color/mytheme_darkblue_color</item>
<item name="android:textAllCaps">true</item>
<item name="android:textSize">#dimen/text_spinner_item</item>
</style>
Code for non workin PopUp::
public class LoginActivity extends Activity {
......
userName = (EditText) this.findViewById(R.id.txtUname);
userName.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
showPopupMenu(userName);
}
});
private void showPopupMenu(View v) {
PopupMenu popupMenu = new PopupMenu(LoginActivity.this, v);
popupMenu.getMenuInflater().inflate(R.menu.test, popupMenu.getMenu());
popupMenu
.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
Toast.makeText(LoginActivity.this, item.toString(),
Toast.LENGTH_LONG).show();
return true;
}
});
popupMenu.show();
}
Results:

Categories

Resources