Custom tab indicator view - android

I want to reproduce this tab indicator structure (screen is from nova launcher): a dropdown menu and an arrow in the right bottom corner.
I have no problem about code but i can't reproduce this appearance.
I tried this:
mBar.addTab(mBar.newTab().setText(ctx.getString(R.string.tab_actions)).setTabListener(this).setCustomView(R.layout.navigation_spinner));
where mBar is sherlock support actionBar.
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_margin="-10dp"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<Button android:id="#+id/button1" android:layout_width="match_parent"
android:layout_height="match_parent" android:text="Button" />
</LinearLayout>
and this is my result:
The problem is that the button in the central tab doesn't fill the tab indicator. How can i set a custom view that perfectly fill the indicator without margin or padding? Or i have to approach this in a different way to have the a result like the firs screen? Thanks in advice

What you are trying to do is really complicated, and will be hard to achieve.
If you want drop down menus you can try those :
menu/options.xml:
<item
android:icon="#drawable/ic_menu_sort"
android:showAsAction="ifRoom">
<menu>
<item
android:id="#+id/menuSortNewest"
android:title="Sort by newest" />
<item
android:id="#+id/menuSortRating"
android:title="Sort by rating" />
</menu>
</item>
Second option:
menu/options.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/menuSort"
android:showAsAction="ifRoom"
android:actionLayout="#layout/action_sort" />
</menu>
layout/action_sort.xml:
<Spinner xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_menu_refresh"
android:entries="#array/order" />
Docs for menu resources - http://developer.android.com/guide/topics/resources/menu-resource.html

Related

Set a particular group item at end in Navigation Drawer menu

okay, Google Keeps-Notes and Lists App have a navigation drawer like this,
Google Keeps-Notes and Lists App Navigation Drawer(Original)
I want to do same exact as I mention in this image. I want this
'EDIT'
I want that EDIT (the TextView) at right side of navigation drawer.
I achieved this far,My Navigation Drawer
<group>
<item android:title="LABALS"
android:actionLayout="#layout/main_nav_drawer_edit">
<menu>
<item
android:id="#+id/navigation_drawer_lable"
android:title="Label 1" />
<item
android:id="#+id/navigation_drawer_create_new_label"
android:title="Create new label" />
</menu>
</item>
what should I do to achieve this, Is it possible?
Create a custom View and apply to the app:actionLayout attribute of your <item>.
<item
android:id="#+id/grp_labeled"
android:title="LABALS"
app:actionLayout="#layout/main_nav_drawer_edit">
<menu>
<item
android:id="#+id/navigation_drawer_lable"
android:title="Label 1" />
<item
android:id="#+id/navigation_drawer_create_new_label"
android:title="Create new label" />
</menu>
</item>
layout:
<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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="EDIT"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
like this?

(android) Why doesn't app:actionLayout="" work?

Hi
I'm using Navgation Drawer.
I want to change from text to text and icon at overflow menu items.
So i used 'android:icon' and 'android:title' in menu.xml. But Anything is not displayed.
To be exact, I could only see text.
and
I used android:actionLayout="#layout/overflow_menu_item". In overflow_menu_title, Text and Icon are defined.
But It dosen't work, too
I don't no why it dosen't work.
How to set Text and icon in overflow menu item?
I searched a lot but it didn't help.
plz help me...
Here is Code
overflow_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"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MovieList">
<item
android:id="#+id/menu_movie"
android:orderInCategory="150"
android:icon="#drawable/ic_search_black_24dp"
android:title="setting1"
android:actionLayout="#layout/overflow_menu_title"
app:showAsAction="never" />
<item
android:id="#+id/menu_gallery"
android:orderInCategory="150"
android:title="setting2"
android:icon="#drawable/ic_search_black_24dp"
app:showAsAction="never" />
<item
android:id="#+id/settings3"
android:orderInCategory="150"
android:icon="#drawable/ic_search_black_24dp"
android:title="setting2"
app:showAsAction="never" />
</menu>
overflow_menu_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_vertical"
android:padding="2dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#drawable/ic_15"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MOVIE"
android:textSize="24dp"/>
</LinearLayout>
You can't create a custom layout for menu item using android:actionLayout for items that are not on the action bar.
In other meaning, you can't set android:actionLayout for non-action items that are in the overflow menu items.

How to use images as icons in bottom navigation view [Android]

I am trying to add bottom navigation view like below:
But it is coming like below:
I tried all the options, but I don't seem to quite get through, everything I do is only changing the color but I am not able to quite achieve what I want to.
Code below
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/action_search"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_gravity="start"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="#menu/navigation_menu"
tools:layout_editor_absoluteX="8dp"
android:background="#232323"
app:itemTextColor="#color/PrimaryText"
app:itemIconTint="#null"/>
Navigation Menu :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/action_add_expense"
android:icon="#drawable/addincome"
android:title="Add Income" />
<item android:id="#+id/action_add_income"
android:icon="#drawable/addexpense"
android:title="Add Expense" />
</menu>
set the Icon TintList to null programatically and you will be able to show your icons without any tint.
bottomNavigationView.setItemIconTintList(null);

android navigation drawer item without icon, display text only

I want to add a menu item entry without icon to navigation drawer in my android app.
I have checked the samples at NavigationDrawer
and read through the tutorial at Android Developer training article.
I edited the sample menu to add new menu items "My Text 1" and "My Text 2" as per this xml file following this image:
<?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/nav_camera"
android:icon="#drawable/ic_menu_camera"
android:title="Import" />
<item
android:id="#+id/nav_gallery"
android:icon="#drawable/ic_menu_gallery"
android:title="Gallery" />
<item
android:id="#+id/nav_slideshow"
android:icon="#drawable/ic_menu_slideshow"
android:title="Slideshow" />
<item
android:id="#+id/nav_manage"
android:icon="#drawable/ic_menu_manage"
android:title="Tools" />
<item
android:id="#+id/example"
android:title="My Text 1" />
</group>
<item android:title="Communicate">
<menu>
<item
android:id="#+id/nav_share"
android:icon="#drawable/ic_menu_share"
android:title="Share" />
<item
android:id="#+id/nav_send"
android:icon="#drawable/ic_menu_send"
android:title="Send" />
<item
android:id="#+id/sample"
android:title="My Text 2" />
</menu>
</item>
</menu>
If i remove the two lines declaring icons for "Share" and "Send", then "My Text 2" gets aligned to the left as shown in this image
But i want to keep the icons of other items, and just add a text item, i hope there is some parameter that allows no icon menu item in groups.
I tried using android_icon="#android/color:transparent", but that doesn't/can't solve the problem either.
I dont want to provide any icons for my menu items, but i expect that text to align to the left. Is that achievable? If yes, how?
No custom layout here.
You have to create a second group with an ID (even dummy) then in this group put all the items without any icon.
Note: every time the group ID changes Android adds a separator line.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:showIn="navigation_view">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_menu_dummy1"
android:title="#string/nav_menu_home"/>
<item
android:id="#+id/nav_profile"
android:icon="#drawable/ic_menu_dummy2"
android:title="#string/nav_menu_profile"/>
</group>
<group android:id="#+id/dummy">
<item
android:id="#+id/nav_info"
android:title="#string/nav_menu_info"/>
<item
android:id="#+id/nav_settings"
android:title="#string/nav_menu_settings"/>
</group>
Create your custom layout for the Navigation Drawer and do whatever you want with that:
This is my xml file for custom design of drawer layout-
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeActivity">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/rl_topbar"
layout="#layout/inflate_topbar" />
<FrameLayout
android:id="#+id/fl_content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/rl_topbar" />
</LinearLayout>
<!-- The navigation drawer -->
<LinearLayout
android:id="#+id/ll_navbar_container"
android:layout_width="#dimen/navbar_width"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#color/color_255_255_255"
android:orientation="vertical">
<!--This is my custom layout how I want, you can design as you want and include it-->
<include
android:id="#+id/ll_navbar"
layout="#layout/inflate_navbar" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
<!--Add progress bar-->
<!--Add other views-->
</RelativeLayout>
Now in your activity of this xml file take the references of views and make click events or other changes easily.
A simple alternative would be to use a custom layout instead of a menu.
It'll be a simple change. Simply, you can just create a custom layout as you would in any other layout but instead of indicating the corresponding menu within the NavigationView, instead of using the app:menu="#menu/drawer_view" attribute.
You can simply follow the layout structure of in your Activity.
<android.support.design.widget.CoordinatorLayout
<android.support.v4.widget.DrawerLayout
<RelativeLayout/>
<LinearLayout/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
There's no fundamental difference between the structure of the tutorial and that of this layout except, I've chosen to use a LinearLayout instead of a menu resource for the side menu (obviously the rootlayout for the side view will be at your discretion but for your use-case LinearLayout fits best.).
An Example
Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<include layout="#layout/content_activity_main"/>
<include layout="#layout/layout_side_view"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
You'll notice in this layout that there are two include statements in place of the layouts before as shown in the structure before. One for the actual content of the activity and one for the side view. I'll show you an example of your requested use case layout below:
layout_side_view.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:id="#+id/with_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="#color/black"
android:drawableLeft="#drawable/icon"
android:drawableStart="#drawable/icon"
android:drawablePadding="15dp"
android:gravity="start|center_vertical"
android:text="TextView 1"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:id="#+id/without_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="#color/black"
android:gravity="start|center_vertical"
android:text="Text View 2"/>
</LinearLayout>
</LinearLayout>
You can then simply customize your layout and where you want a TextView with an icon on the left use the DrawableLeft | DrawableStart attribute, and if you don't want an icon simply just don't use it.
I hope this helps.
Note:
I would look into what the DrawerLayout does and why it is structured that way, the content goes below the menu for what reason? Looking into these things helps you develop an understanding where you can customize layout structures to your liking.

How to display some text for menu in ActionBar?

I have simple requirement to display some text in the actionBar near the menu. How can I acheive it?
What it looks like now?
What I need?
Try this ActionBar menu sample:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:yourApp="http://schemas.android.com/apk/res-auto"
>
... ...
<item
android:id="#+id/item_text"
yourApp:showAsAction="always"
yourApp:actionLayout="#layout/action_text"
/>
</menu>
Then you need a layout action_text for your TextView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
>
... ...
<TextView android:id="#+id/lb_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/your_text"
android:textSize="10sp"
android:textColor="#color/white"
/>
</RelativeLayout>
Hope this help!
<item
android:id="#+id/action_refresh"
android:icon="#android:drawable/ic_input_add"
android:title="Options"
app:showAsAction="withText|always" />
<item
android:id="#+id/action_options_unused"
app:showAsAction="withText|always"
android:title="Options"
/>
Don't set a android:icon if you don't want an icon appearing at the left side of your textual item. Also make sure this <item> is the last one in your menu's XML file.

Categories

Resources