trying to find out how to make a menu that is in a circular layout. I believe it is called a Pie Menu or Circular Menu. See screenshot from an app named Simple Habit on Android Studio. I have no idea how to get started.
I'm sure many other people also would like to know, help would be very much appreciated. Thanks!
I think you are looking for this
Dependency:
compile 'com.github.szugyi:Android-CircleMenu:2.0.0'
Add to Activity/Fragment XML:
<com.szugyi.circlemenu.view.CircleLayout
android:id="#+id/circle_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/selected_textView"
android:layout_gravity="center_horizontal" >
<include layout="#layout/menu_items" />
</com.szugyi.circlemenu.view.CircleLayout>
Add this to menu 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/menu_speed"
android:title="#string/speed"
app:showAsAction="never" />
<item
android:id="#+id/menu_radius"
android:title="#string/radius"
app:showAsAction="never" />
<item
android:id="#+id/menu_isRotating"
android:title="#string/is_rotating"
app:showAsAction="never" />
<item
android:id="#+id/menu_firstChildPosition"
android:title="#string/first_child_position"
app:showAsAction="never" />
</menu>
More details in Sample App.
If you are looking for a Lucky wheel, add this library as a module into your project.
Related
As you can see in the image above, I would like to put a custom image in place of the item.
I have tried several solutions to no avail.
The first problem is having the possibility to put a personalized menu.
To achieve this my menu has been constructed in the following way:
profile_image_layout.xml :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:animateLayoutChanges="true">
<androidx.cardview.widget.CardView
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:animateLayoutChanges="true"
app:cardBackgroundColor="#color/windowBackground"
app:cardCornerRadius="32dp"
app:cardElevation="0dp"
app:cardMaxElevation="0dp">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/picture_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="false"
android:animateLayoutChanges="true"
android:scaleType="fitCenter" />
</androidx.cardview.widget.CardView>
</FrameLayout>
bottom_navigation_menu_home.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/contacts"
android:icon="#drawable/contacts"
android:title="#string/contacts"
app:showAsAction="always|withText" />
<item
android:id="#id/calendar"
android:icon="#drawable/calendar"
android:title="#string/calendar"
app:showAsAction="always|withText" />
<item
android:id="#id/events"
android:icon="#drawable/events"
android:title="#string/events"
app:showAsAction="always|withText" />
<item
android:id="#id/groups"
android:icon="#drawable/groups"
android:title="#string/groups"
app:showAsAction="always|withText" />
<item
android:id="#id/profile"
android:icon="#drawable/profile"
android:title="#string/profile"
android:actionLayout="#layout/profile_image_layout"
app:actionViewClass="android.widget.FrameLayout"
app:showAsAction="always|withText" />
</menu>
After that, my goal was to put the image that interests me inside the "profile" item and in particular inside the profile_image_layout: "picture_profile" menu.
To recover the View I tried this way:
FrameLayout rootView = (FrameLayout) navigator.getMenu().findItem(R.id.profile).getActionView();
But from the rootView I can't access "picture_profile". Could anyone tell me if I'm doing well or what I'm doing wrong?
Thank you in advance
you can use local Repository (SingleTon design pattern) that you keep the logged in profiles information in there and read the profile pic and information from that
for using Repository pattern you need to have a singleton class with required fields
i leave some links below for you
singleton design pattern: https://refactoring.guru/design-patterns/singleton
here's a sample code from my old programmes (look at the repository pakage it's one of my first programmes and it's not very clean sorry for that):https://github.com/ErfanDP/TicTacToe_and_4_in_Row
There are two mistakes in your menu.xml:
<item
android:id="#id/profile"
android:icon="#drawable/profile"
android:title="#string/profile"
android:actionLayout="#layout/profile_image_layout"
app:actionViewClass="android.widget.FrameLayout"
app:showAsAction="always|withText" />
android:actionLayout="#layout/profile_image_layout". should be app:actionLayout="#layout/profile_image_layout"。
You should use only one of ‘actionLayout’ & ’actionViewClass‘, or 'actionViewClass' will be chosen. After 'app:actionViewClass' deleted, it works.
I'm assembling an app with a Botton navigation bar in Android with Android Studio. With two icons it looked fine, but when I added four, the icons look cropped. I can't find any other error like this. Any suggestions are welcomed.
Cropped icons bottom nav 4 options
Here is the code for the Bottom Navigation (bottom_navigation.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/action_lines"
android:enabled="true"
android:icon="#drawable/ic_lines_off"
android:title="Lines"
android:background="#android:color/transparent"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_contacts"
android:enabled="true"
android:icon="#drawable/ic_contacts_off"
android:title="Contacts"
android:background="#android:color/transparent"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_conversations"
android:enabled="true"
android:icon="#drawable/ic_conversations_off"
android:title="Conversations"
android:background="#android:color/transparent"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_settings"
android:enabled="true"
android:icon="#drawable/ic_settings_off"
android:title="Settings"
android:background="#android:color/transparent"
app:showAsAction="ifRoom" />
</menu>
In my activity.xml I call the bottom menu like this:
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:itemIconTint="#drawable/bnv_tab_item_foreground"
app:itemTextColor="#drawable/bnv_tab_item_foreground"
app:menu="#menu/bottom_navigation" />
Question Update:
I tried changing
app:showAsAction="ifRoom"
for
app:showAsAction="always"
And it doesn't solve the problem. There is no change to the issue. And it does not show the tag in every icon as it should. Only on the selected one.
One way of solving it is adding a Theme to the bottom navigation call in activity, like this:
android:theme="?attr/toolbarNavigationButtonStyle"
I have no clue why it works, but it solves the issue apparently in lots of devices exept in Samsung Galaxy Note 8
Here is "bnv_tab_item_foreground"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/colorAccent" />
<item android:color="#android:color/darker_gray" />
</selector>
Try changing a value for the property below:-
app:showAsAction="always"
and if still, your problem persists, please provide the file
"bnv_tab_item_foreground"
Use Support Library 28. Then, just add app:labelVisibilityMode="labeled" to your BottomNavigationView XML declaration.
Hope this helps
I believe this is being caused by your layout not fitting into the System window, and you can easily fix this by going to the Layout you have the Bottom Navigation and at the root layout add android:fitsSystemWindows="true" just like I did below
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="match_parent"
android:fitsSystemWindows="true">
<!--things come here -->
</RelativeLayout>
i am setting an actionLayout on a menu item and setting background color and image, but it's not respected. in my activity, i have:
getMenuInflater().inflate(R.menu.submit_action, menu);
my submit_action is:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_submit"
android:actionLayout="#layout/check"
app:showAsAction="always" />
</menu>
my check layout is
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="?android:attr/actionButtonStyle"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#e8e8e8"
android:clickable="true"
android:contentDescription="lol" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:scaleType="centerInside"
android:src="#drawable/ic_action_tick" />
</RelativeLayout>
but even with all of this setup, this is how the action bar appears, not showing my menuitem at all (but it's there, because it responds to the click, but doesn't appear):
Try app:actionLayout="#layout/check" instead of android:actionLayout="#layout/check".
If you're using ActionbarSherlock or AppCompat, the android: namespace will not work for MenuItems. This is because these libraries use custom attributes that mimic the Android APIs since they did not exist in earlier versions of the framework.
when using Appcompact ,menu item will be like
<item android:id="#+id/cart"
app:actionLayout="#layout/actionbar_cart"
android:title="#string/action_cart"
app:showAsAction="always"
/>
The answer from Ben Harris is absolutely correct. However, in some case like when using attributes like:
app:showAsAction="ifRoom|collapseActionView"
used in SearchView (in my case), the layout view isn't shown and that caused a lot of headache to me. It seems that collapseActionView is not supported with action view in appcombat. So consider this as well while doing your stuffs.
use app namespace instead of android and it will work fine.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_submit"
app:actionLayout="#layout/check"
app:showAsAction="always" />
</menu>
hi there I try set ifroom in my menu item. you can see in this code I try all possible senario (please see each showAsAction item
<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=".MainActivity">
<item
android:id="#+id/action_forward"
android:title="forward"
android:icon="#drawable/ic_action_arrow_forward"
android:showAsAction="ifRoom"
></item>
<item
android:id="#+id/action_zoom_in"
android:title="zoom in"
android:icon="#drawable/ic_action_zoom_in"
android:showAsAction="ifRoom|withText"
></item>
<item
android:id="#+id/action_home"
android:title="home"
android:icon="#drawable/ic_action_home"
app:showAsAction="ifRoom|withText"
></item>
<item
android:id="#+id/action_refresh"
android:title="refresh"
android:icon="#drawable/ic_action_refresh"
app:showAsAction="ifRoom"
></item>
<item
android:id="#+id/action_zoom_out"
android:title="zoom out"
android:icon="#drawable/ic_action_zoom_out"
showAsAction="ifRoom"
></item>
<item
android:id="#+id/action_back"
android:title="back"
android:icon="#drawable/ic_action_arrow_back"
app:showAsAction="always"
></item>
</menu>
but it just show action_back and action_home in main page.
I am noob in android studio but I think this error related to width of menu.
(It is not 100% width)
Please see my main_activity.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<include
android:id="#+id/tool_bar_bottom"
layout="#layout/tool_bar_bottom"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_gravity="center" />
</LinearLayout>
and
tool_bar_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/ColorPrimary"
android:elevation="2dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark"
xmlns:android="http://schemas.android.com/apk/res/android" />
I think the structure is true and values of all layout_width is match_parent so why ifroom do not work for me?
Android will show menu always if you set "showAsAction" attribute as "always". If you set "ifRoom", that will be displayed only if the actionbar has room to display you menu item, else it will display a overflow icon.
In your case, you are seeing "action_back" because it has "always". then "action_home" becuase there is room for one icon and that is the first item which has "app:showAsAction" attribute. others have "android:showAsAction" attribute. More explanation on this behaviour is below.
If your app is using the Support Library for compatibility on versions
as low as Android 2.1, the showAsAction attribute is not available
from the android: namespace. Instead this attribute is provided by the
Support Library and you must define your own XML namespace and use
that namespace as the attribute prefix. (A custom XML namespace should
be based on your app name, but it can be any name you want and is only
accessible within the scope of the file in which you declare it.)
i am setting an actionLayout on a menu item and setting background color and image, but it's not respected. in my activity, i have:
getMenuInflater().inflate(R.menu.submit_action, menu);
my submit_action is:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_submit"
android:actionLayout="#layout/check"
app:showAsAction="always" />
</menu>
my check layout is
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="?android:attr/actionButtonStyle"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#e8e8e8"
android:clickable="true"
android:contentDescription="lol" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:scaleType="centerInside"
android:src="#drawable/ic_action_tick" />
</RelativeLayout>
but even with all of this setup, this is how the action bar appears, not showing my menuitem at all (but it's there, because it responds to the click, but doesn't appear):
Try app:actionLayout="#layout/check" instead of android:actionLayout="#layout/check".
If you're using ActionbarSherlock or AppCompat, the android: namespace will not work for MenuItems. This is because these libraries use custom attributes that mimic the Android APIs since they did not exist in earlier versions of the framework.
when using Appcompact ,menu item will be like
<item android:id="#+id/cart"
app:actionLayout="#layout/actionbar_cart"
android:title="#string/action_cart"
app:showAsAction="always"
/>
The answer from Ben Harris is absolutely correct. However, in some case like when using attributes like:
app:showAsAction="ifRoom|collapseActionView"
used in SearchView (in my case), the layout view isn't shown and that caused a lot of headache to me. It seems that collapseActionView is not supported with action view in appcombat. So consider this as well while doing your stuffs.
use app namespace instead of android and it will work fine.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_submit"
app:actionLayout="#layout/check"
app:showAsAction="always" />
</menu>