Simple question that I don't find an answer for.
Is it possible to break line after the icon in a menu item making them not inline anymore? (The menu slides in from left by using NavigationView in Android support library)
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/cards"
android:checked="false"
android:icon="#drawable/card_icon"
android:title="Cards" />
...
...
...
</group>
This is how I want it to look like.
But instead they are aligned inline.
Update after answer:
Using a modified android.R.layout.activity_list_item (changed to vertical aligned left):
<?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:paddingTop="1dip"
android:paddingBottom="1dip"
android:paddingStart="8dip"
android:paddingEnd="8dip"
android:orientation="vertical">
<TextView android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center_horizontal"
android:paddingStart="?android:attr/listPreferredItemPaddingStart" />
<ImageView android:id="#+id/icon"
android:layout_width="24dip"
android:layout_height="24dip"
android:layout_gravity="left" />
</LinearLayout>
And I added an actionLayout to the menu items:
<item
android:id="#+id/cards"
android:checked="false"
android:icon="#drawable/cards_icon"
android:actionLayout="#layout/vertical_menu_item"
android:title="Cards" />
But nothing happens. They are still inline. I also tried using app:showAsAction="always" and app:actionLayout="#layout/vertical_menu_item".
I suggest you to create a custom view (eg: vertical layout with ImageView and TextView), and in onCreateOptionsMenu() you can use setActionView() method of the MenuItem to use this custom view as Item view.
Or from menu xml:
android:actionLayout="#[package:]layout/layout_resource_name"
Related
I have the following drawable: custom_yellow_button.xml in the drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="5dp"/>
<solid android:color="#color/yellow"/>
</shape>
</item>
</selector>
and I have these two different layouts which both identically use the button:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
tools:context=".LogInActivity">
<Button
android:id="#+id/login_button"
android:layout_width="275dp"
android:layout_height="35dp"
android:layout_marginTop="20dp"
android:background="#drawable/custom_yellow_button"
android:fontFamily="#font/courierprime_regular"
android:includeFontPadding="false"
android:text="Log In"
android:textColor="#000000"
android:textSize="21sp"
app:backgroundTintMode="add" />
</androidx.constraintlayout.widget.ConstraintLayout>
and
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".RegistrazioneActivity">
<Button
android:id="#+id/login_button"
android:layout_width="275dp"
android:layout_height="35dp"
android:background="#drawable/custom_yellow_button"
android:fontFamily="#font/courierprime_regular"
android:includeFontPadding="false"
android:text="Log In"
android:textColor="#000000"
android:textSize="21sp" />
</androidx.constraintlayout.widget.ConstraintLayout>
In the first layout, it looks like this, which is how I want it :
while in the second layout, it looks like this:
.
Can anyone tell me why? I can provide more info if needed.
I am not sure what theme are you using, but with MaterialThemes you can do this and it's easy. First check this: https://material.io/components/buttons
Then, change your app theme to extend one of the material themes, like this:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
Then add implementations:
implementation 'com.google.android.material:material:1.2.1'
After that you can simply use this as your button inside your XML:
<com.google.android.material.button.MaterialButton/>
Inside this View you have a lot of attributes for your button. Simply check above link and see. For yours I would go with something like this:
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="60dp"
android:textAlignment="center"
android:textAllCaps="true"
android:padding="15dp"
android:backgroundTint="#color/yellow" //add background color
app:rippleColor="#color/colorPrimary" //ripple color - when button is pressed
style="#style/Widget.MaterialComponents.Button.TextButton" //material component style, many options to choose from
android:textColor="#color/colorPrimaryDark"
app:cornerRadius="15dp" //corner radius, so you can adjust how much oval you want your corners to be/>
And you get something like this:
See AndroidManifest.xml and make sure you have the same theme assigned to both of them.
The XML editor's preview also can be switched to all available themes, including custom themes.
When you provide the layout's Context to the XML editor alike this:
xmlns:tools="http://schemas.android.com/tools"
tools:context=".activity.MainActivity"
The XML editor will pick up that theme for the preview - and there's no need to switch them.
I have a PopupMenu view in my code and I want an EditText view to be one of it's options so a user can create a new file from the same menu where they select existing files. According to this post : Android : Display an EditText in a menu
it is not possible to use an EditText view as a PopupMenu item.
My question is, is there a workaround to not being able to declare an EditText as a menu item? Perhaps, creating a ListView and declaring the Popupmenu and EditText views as children?
Below is code I tried but produced, as predicted, a Popupmenu with no visible EditText Field.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<item android:id="#+id/new_track"
android:title="+ create new track"/>
<EditText
android:id="#+id/search"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/search_hint"
android:inputType="textCapWords"
android:imeOptions="actionSend" />
</menu>
The code I'm suggesting would look something like this:
<?xml version="1.0" encoding="utf-8"?>
<ListView
<menu xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<item android:id="#+id/new_track"
android:title="+ create new track"/>
</menu>
<EditText
android:id="#+id/search"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/search_hint"
android:inputType="textCapWords"
android:imeOptions="actionSend" />
</ListView>
What would be the best way to accomplish this?
I think you need to create RelativeLayout and then set where each element need to go in queue.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<item android:id="#+id/new_track"
android:title="+ create new track"/>
<RelativeLayout>
<EditText
android:id="#+id/search"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/search_hint"
android:inputType="textCapWords"
android:imeOptions="actionSend"
android:layout_alignParentBottom="true"/> //this line put edittext at bottom
</RelativeLayout>
</menu>
EDIT: After many searches of this specific problem I can only say: no, you can't do that. You can only create a menu item which would call a specific fragment or it would change your toolbar to SearchView (like hide TextView, show EditText and Buttons).
For the first option take a look at: Search item on action bar android
For the second option: http://blog.rhesoft.com/2015/03/30/tutorial-android-actionbar-with-material-design-and-search-field/
I want to design a toolbar like:.
I have done most of it but having some problem.
I don't know how to make a divider between the toolbars items and also having no idea how to set a counter variable attached to the action button that increment as order takes place like given in the picture.
Any suggestions?
You can place your layout like below:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/..."
android:showAsAction="always."
android:icon="#drawable/..."
android:title="#string/..."
android:actionLayout="#layout/your_layout_here"/>
or
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/..."
android:showAsAction="always."
android:icon="#drawable/..."
android:title="#string/..."
android:actionViewClass="your_class"/>
where "your_class" - class which inflate and implement your view with separator
Try to create a custom toolbar. Add your views between the toolbar's opening and closing tags.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dip"
android:background="#ff0000">
<!-- the back button -->
<ImageView
android:id="#+id/backButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:clickable="true"
android:onClick="onBackButtonClick"
android:paddingLeft="16dip"
android:paddingRight="16dip"
android:src="#drawable/ic_back" />
...
<!-- the devider -->
<View
android:layout_width="1dip"
android:layout_height="match_parent"
android:background="#ffffff" />
<ImageView .../>
</android.support.v7.widget.Toolbar>
I'm using a menu item with actionLayout because I need to add a textView along with my icon for the item on the ActionBar. everything shows up correctly but I don't know (and couldn't find anywhere) how to add the animation that shows up when user taps on a menu item on Lollipop devices.
I would like to show number of comments on the side of comment icon in my toolbar.
Here is what I have:
<?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_like"
android:icon="#drawable/list_discuss_like"
android:title="Like"
app:showAsAction="always"/>
<item
android:id="#+id/menu_comment"
app:actionLayout="#layout/menu_item_comment"
android:title="Comment"
android:icon="#drawable/ic_comment_white_24dp"
app:showAsAction="always"/>
</menu>
and for my menu_item_comment.xml
<?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="match_parent"
android:clickable="true"
android:hapticFeedbackEnabled="true"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:src="#drawable/ic_comment_white_24dp"/>
<TextView
android:id="#+id/ab_comment_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="(12)"
android:textColor="#color/grayTextHint"/>
</LinearLayout>
The animation and feedback works on the like item but not on the comment one.
Any help is appreciated.
Set the clickable element's background to the theme's action bar item background.
<LinearLayout
...
android:clickable="true"
android:background="?android:attr/actionBarItemBackground">
...
</LinearLayout>
I'm trying to duplicate the Overflow Menu dropdown functionality for other ActionBar items. I'm working on a manual implementation of this functionality as I think it has been left out of the environment (likely to force standardisation of UI's). Does anybody know what style / style items are used for the drop down list when you click on the Overflow menu?
EDIT
The overflow button is actually a modified spinner. Here is the style information for it.
<style name="Widget.Holo.Spinner" parent="Widget.Spinner.DropDown">
<item name="android:background">#android:drawable/spinner_background_holo_dark</item>
<item name="android:dropDownSelector">#android:drawable/list_selector_holo_dark</item>
<item name="android:popupBackground">#android:drawable/menu_dropdown_panel_holo_dark</item>
<item name="android:dropDownVerticalOffset">0dip</item>
<item name="android:dropDownHorizontalOffset">0dip</item>
<item name="android:dropDownWidth">wrap_content</item>
<item name="android:popupPromptView">#android:layout/simple_dropdown_hint</item>
<item name="android:gravity">left|center_vertical</item>
</style>
Here is a roundup of what I've cobbled together:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dropdownContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/leftBuffer"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="150dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/actionbarDropdown"
style="#style/Widget.ActionBarDropDown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#android:color/transparent"
android:entries="#array/sortOptions" />
<LinearLayout
android:id="#+id/bottomBuffer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/rightBuffer"
android:layout_width="118px"
android:layout_height="match_parent" />
</LinearLayout>
Adding an onClick to an ActionBar item which: adds the above layout as a child to your Activities root ViewGroup gives you the illusion of a drop down.
Adding an onClick to each of the buffers which removes the view from the root ViewGroup allows the drop down to "exit" when you try and move focus.
The styling information for the drop down is:
<item name="android:background">#drawable/menu_dropdown_panel_holo_light</item>
<item name="android:dropDownSelector">#drawable/list_selector_background</item>
The layout for each list item is:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp"
android:textSize="17sp"
android:gravity="right|center_vertical"
style="?android:attr/dropDownItemStyle"
android:ellipsize="marquee"
android:id="#android:id/text1">
</TextView>
This doesn't give a perfect copy of the functionality of an overflow drop down but it's pretty darn close. I am very interested if anyone else knows a way to reproduce this functionality in a more integrated way!
I achive this by having a simple custom view that I put in the ActionBar:
<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/action_starred"
android:layout_width="wrap_content"
android:layout_height="match_parent"
style="?android:attr/actionButtonStyle"
android:src="#drawable/ic_action_star" />
I then attach a OnClickListener to it in onCreateOptionsMenu() which simply adds a Fragment which takes care of creating a ListPopupWindow and setting the anchor to be the action view. It finds the action view via getActivity().findViewById(R.id.action_starred).
That's simply it, you can set the popup to be modal to make it behave more like a menu. As list items you can use something like android.R.layout.simple_dropdown_item_1line.
This method should work equally well even if you don't put the view in the ActionBar as I do.