custom android navigation drawer - android

I want to create an Android app using the navigation drawer, something like Google Maps, Gmail ecc. I know how to realize that, but I want something different. I would that the navigation bar is not completely hidden but it has to shows the icon always.
Is possible to realize this? Thank you

This would be realizable using a SlidingPaneLayout (https://developer.android.com/reference/android/support/v4/widget/SlidingPaneLayout.html) instead of the NavigationDrawer.
Here is an example of a SlidingPaneLayout:
http://blog.sqisland.com/2015/01/partial-slidingpanelayout.html

If you want to create a Navigation Drawer, the Android Design Library has a new component called NavigationView. [Refer Link]
A sweet tutorial of the Android Design Library by Chris Banes is available at this page. GitHub - Cheesesquare
You might want to refer to the Google I/O app if you want a custom feel to your Nav Drawer. github.com/google/iosched
EDIT: Considering you use the NavigationView and want to make the text transparent on being selected, add a new file in /res/color/. Let's name it nav_item_text.xml
Use the following content in it:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Text color when checked -->
<item android:color="#00000000" android:state_checked="true" />
<!-- Text color when not checked. Modify value to color of primary text. -->
<item android:color="#212121" />
</selector>
And then add this to your NavigationView layout:
app:itemTextColor="#color/nav_item_text"
It will now look like:
<android.support.design.widget.NavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/navView"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:itemTextColor="#color/nav_item_text"
app:headerLayout="#layout/nav_header"
app:menu="#menu/nav"/>
If you want to make the text gone always:
app:itemTextColor="#00000000"

Related

Why is the android.widget.SearchView not expanding on single click and instead moves the icon to left side?

I am using android.widget.SearchView inside MaterialToolbar and have also set the correct attributes inside the menu reource file. But when I click the search icon, it doesn't expand. Instead, the search icon moves to the left side. On clicking it again, it expands but the search icon still appears inside the EditText.
Layout file
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:title="#string/app_name" />
</com.google.android.material.appbar.AppBarLayout>
Menu file
<?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_search"
android:title="#string/action_search"
android:icon="#drawable/ic_search"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="android.widget.SearchView" />
</menu>
Before clicking
After clicking
SearchView hint
Though the documentation suggests using the framework SearchView, I've always found that the support/androidx SearchView plays nicer with the library components – e.g., AppCompatActivity, MaterialToolbar, etc. – though I'm not sure exactly what causes these little glitches. Indeed, using androidx.appcompat.widget.SearchView here in lieu of android.widget.SearchView for the actionViewClass got rid of that misplaced search icon upon expanding.
However, the AutoCompleteTextView inside the SearchView still has a similar search icon as a hint because it's not ending up with the right style. I initially expected that setting the Toolbar as the support ActionBar would've integrated that with the other relevant styles for the children, but it seems SearchView's style, for some reason, is normally set with a ThemeOverlay.*.ActionBar on the <*Toolbar> acting as the ActionBar.
Though most sources seem to indicate that the various ThemeOverlay.*.ActionBar styles only adjust the colorControlNormal attribute, they actually set the searchViewStyle to the appropriate Widget.*.SearchView.ActionBar value, too, so it's doubly important that we add a proper overlay. For example, in keeping with changing to the androidx version:
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
... />
This could also work by setting that as the actionBarTheme in your Activity's theme instead, but be warned that it can be overridden by attributes on the <*Toolbar> itself, like it would be in the given setup by style="#style/Widget.MaterialComponents.Toolbar.Primary".
If you're not using Material Components, ThemeOverlay.AppCompat styles are available as well. And if you're using only platform classes, similar styles are available in the system namespace; e.g., #android:style/ThemeOverlay.Material.Dark.ActionBar.
The initial revision of this answer removed that hint icon manually, as at the time I was unaware of how exactly the given setup was failing. It shouldn't be necessary to do that now, but if you'd like to customize this further, that example simply replaced the menu <item>'s app:actionViewClass attribute with an app:actionLayout pointing to this layout:
<androidx.appcompat.widget.SearchView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:searchHintIcon="#null" />
The searchHintIcon setting is all that was needed for the example here, but you can set whatever applicable SearchView attributes you'd like.
If you're going this route, it might be preferable to set style="#style/Widget.AppCompat.SearchView.ActionBar", which includes the searchHintIcon setting, and ensures the correct overall style for the SearchView, as suggested by Artem Mostyaev in comments below.
the above method does not work for me. I don't know why but a tried this and succeed.
Refer to the search hint icon through SearchView and set it's visibility to GONE:
ImageView icon = (ImageView) mSearchView.findViewById(androidx.appcompat.R.id.search_mag_icon);
icon.setVisibility(View.GONE);
And then add this line:
mSearchView.setIconified(false);

Android 4.x - NavigationView ignores android:theme parameter

My navigation view ignores partly the android:theme parameter of it's view in a certain screen of my app. The certain screen is a search window which includes an edit text view inside the toolbar. This issue only exists for the 4.x devices. It seems like the navigation view only ignores the parameter android:textSize.
Link to the two images. The image including the smaller font is the described navigation view which ignores the android:theme parameter partly.
That's the navigation view which I'm using globally:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.NavigationView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/nav_background"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.Drawer"
app:itemBackground="#drawable/nav_item_selector_background"
app:itemTextColor="#color/nav_default_text_color"
app:menu="#menu/navigation_drawer" />
That's the style which is connected to the android:theme:
<style name="AppTheme.Drawer">
<item name="android:textSize">25sp</item> <!-- menu item text size-->
<item name="android:listPreferredItemHeightSmall">70dp</item><!-- menu item height-->
</style>
Does anyone has any ideas why this behavior could happen? Additionally my navigation view is sometimes quite laggy without reasons. I don't do any calculation while opening or closing this drawer.
I found my problem. I was using super.onCreate(savedInstanceState); after I used the methods to set the content view and toolbar. It seems like that Android 5.0+ has no problems with that but older devices do.

Customize Android Menu Navigation Drawer

i am using the Support Library Navigation Drawer and I want to customize it.
My Current Menu looks like this:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="?android:attr/activatedBackgroundIndicator">
<group
android:id="#+id/DrawerMainGroup"
android:checkableBehavior="single"
android:background="?android:attr/activatedBackgroundIndicator"
>
<item
android:id="#+id/drawer_home"
android:checked="true"
android:icon="#drawable/ic_home"
android:title="#string/home"
/>...
I want to have another icon on this. Do you think it is possible?
I searched the Web and could not fin anything useful for me.
Both images will be dynamically loaded. For example:
I have a app where i can get videos,pictures etc. That is the first Icon. Next to this, there should be a icon if this site is on homescreen or not.
Like: (IconType)(IconOnHome) Text
I don't know if this is even possible. I found app:actionlayout already, but i am not sure if I could load different images in to the xml.

How can I use icons in navigation view's menu using icon font in android

I am trying to migrate my android application which is using the png assets to icon fonts. I could successfully use it in navigation drawer using a list view. But I couldn't use it in navigation view by specifying it in the xml file of the menu.
This is what I got when I tried with Navigation Drawer
I don't know how will I use icon fonts in navigation view to get those marked icons.
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_apple"
android:icon="#drawable/ic_menu_apple"
android:title="Apple" />
<item
android:id="#+id/nav_chrome"
android:icon="#drawable/ic_menu_chrome"
android:title="Orange" />
<item
android:id="#+id/nav_left"
android:icon="#drawable/ic_menu_left"
android:title="Grapes" />
</group>
How can I set those icons using icon font in this menu?
You need to set textView.setTypeface where textView is item in your Navigation drawer. Also you need to have custom font with icons, put in to assets and then use it in code:
Typeface t = Typeface.createFromAsset(c.getAssets(), assetPath);
textView.setTypeface(t);
Im not sure but You can use Textview instance of item and set typeface in java to it.
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:background="#drawable/bg_all"
app:itemIconTint="#android:color/white"
app:itemTextColor="#android:color/white"
app:theme="#style/list_item_appearance"
app:menu="#menu/drawer_menu" >

Android Menu Bar

I have created a sample android application that just displays some text and i can see that the menu bar at the top of the activity contains name of the application but not the icon of the application. The menu is also very thin just containing application name with a small font. Going through various tutorial i found that we have to select a particular menu style while creating the application to have a menu that contains both application name and icon, but my application just contains application name and the menu is very thin. Is it possible to increase the menu height now and add application icon to it dynamically or by making some changes in menu xml file?
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/app_name" android:icon="#drawable/ic_launcher"
android:title="My App" />
</menu>
If you want to customize the ActionBar, here you are a complete tutorial for it:
How can I implement custom Action Bar with custom buttons in Android?
It's very good an complete for customizing almost everything, so I recommend it to you.
Even tough, I ask you to change your question in order to make more clear the target of it, now you know what you were triying to mean ;)
<menu xmlns:tools="schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:context="com.example.sample.getMsgActivity"
xmlns:yourapp="http://schemas.android.com/apk/res-auto">
<!-- Search, should appear as action button -->
<item android:id="#+id/action_write"
android:icon="#drawable/ic_action_refresh"
android:title="#string/action_write"
yourapp:showAsAction="ifRoom" />
<!-- Settings, should always be in the overflow -->
<item android:id="#+id/action_read"
android:title="#string/action_read"
yourapp:showAsAction="never" />
REMEMBER: clean, then build. it should work then.

Categories

Resources