How can I add divider between action Items in Toolbar - android

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>

Related

Android How to center title of top actionBar?

To start my objective is to center my title. I have started a project by selecting the bottom navigation activity template. This came with 3 fragments and a main activity. I am attempting to center the title of the top action bar. I have attempted to access the mobile_navigation by id and align the text within the MainActivity but this does not seem to work. I also tried adding a textAlignment attribute in the homeFragment.xml but this did not work either. I do not find any similar scenarios anyone know how could I be able to resolve this?
mobile_navigation.xml:
<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="#+id/mobile_navigation"
app:startDestination="#+id/navigation_home">
<fragment
android:id="#+id/navigation_home"
android:name="com.Example.exmaple.ui.home.HomeFragment"
android:label="#string/app_name"
tools:layout="#layout/fragment_home" />
<fragment
android:id="#+id/navigation_dashboard"
android:name="com.Example.exmaple.ui.dashboard.DashboardFragment"
android:label="#string/title_dashboard"
tools:layout="#layout/fragment_dashboard" />
<fragment
android:id="#+id/navigation_notifications"
android:name="com.Example.exmaple.ui.notifications.NotificationsFragment"
android:label="#string/title_notifications"
tools:layout="#layout/fragment_notifications" />
</navigation>
I also attempted to add:
android:gravity="center"
Any feedback welcomed.
To use a custom title in your Toolbar all you need to do is remember is that Toolbar is just a fancy ViewGroup so you can add a custom title like so:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/action_bar_bkgnd"
app:theme="#style/ToolBarTheme" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
This means that you can style the TextView however you would like because it's just a regular TextView. So in your activity you can access the title like so:
Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);
setSupportActionBar(toolbar);
mTitle.setText(toolbar.getTitle());
getSupportActionBar().setDisplayShowTitleEnabled(false);
Try below code may works for you
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.abs_layout);
Better add a layout file for tool bar and center the title there and add dynamically on create or include in your fragment layout file.
I was able to figure out the solution. I will post it incase anyone runs across this issue.
I added the following to the Main Activity xml:
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolBar"
android:elevation="5dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBlack">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorTransparent"
android:layout_alignParentStart="true"
android:layout_gravity="start"
android:text="#string/log_out"
android:textAlignment="center"
android:textColor="#color/lightblue"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textColor="#color/colorApp"
android:textSize="20sp"/>
<ImageButton
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/ic_add"
android:tint="#color/lightblue"
android:layout_alignParentEnd="true"
android:layout_gravity="end"
android:background="#color/colorBlack" />
</androidx.appcompat.widget.Toolbar>
I also took away the padding top from the androidx.constraintlayout.widget.ConstraintLayout opening tag in the Main Activity XML
Added the following style to styles.xml:
<style name="AppTheme.NoActionBar" parent="AppTheme">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
Finally in the Android manifest I added the following theme to the Main Acivity:
android:theme="#style/AppTheme.NoActionBar"

My BottomNavigationBar icons goes outside of the screen

I am using BottomNavigationBar from here. I followed every instruction carefully and it works fine until I got this problem where icons pop out of the screen with too much of gap between them.
Menu_items.xml
<menu xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/nav_Menu"
android:enabled="true"
android:icon="#drawable/menu"
android:title="#string/nav_menu"
android:visible="true"
app:showAsAction="withText"/>
<item
android:id="#+id/nav_Deals"
android:enabled="true"
android:icon="#drawable/fire_deals_icon"
android:title="#string/nav_deals"
android:visible="true"
app:showAsAction="withText"/>
.
.
.
</menu>
MainMenu.xml
<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:id="#+id/main_menu_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/TextcolorforWhite"
tools:context=".MainMenu">
<com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
android:id="#+id/main_nav"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
app:menu="#menu/nav_items"/>
<View
android:id="#+id/myProfileDivider"
android:layout_width="match_parent"
android:layout_above="#+id/main_nav"
android:layout_height="0.5dp"
android:background="#color/SettingsColor"/>
<FrameLayout
android:id="#+id/main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:paddingBottom="57dp"
android:layout_above="#id/myProfileDivider">
</FrameLayout>
Is there any solution for this?
In MainMenu.xml (in case of using constraintLayout, as the main parent layout, which is better to use) change android:layout_width="match_parent" to android:layout_width="0" and add these:
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
Also you may have to omit: android:layout_alignParentBottom="true".
See this documentation
Don’t use more than five destinations. For those cases, try tabs or a navigation drawer.
Five destinations: Active destinations display an icon and text label. Inactive destinations use icons, and use text labels if space permits.
Did you check your icon size
The recommended width is 24dp
The recommended height is 24dp
First remove android:layout_alignParentBottom="true" from your FrameLayout Second in your com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx add below item:
android:layout_alignParentEnd = "true"
android:layout_alignParentStart = "true"
android:layout_width="match_parent"

Transparent Status Bar in Android causes EditText hidden by keyboard

I make an Android application, following Google's material design guidelines.
So, I've implemented the latest support libraries (my min Sdk value is 14)
Now, I face to a problem : I've made the status bar transparent, with custom ToolBar (defined in a XML file). Everything works well, except that FloatingActionButton (from https://github.com/makovkastar/FloatingActionButton) skips XML's defined layout margin. Idem, one of my app's UI uses TextView to login the user : once focused, they're hidden by the soft keyboard.
These two problems came after replacing the main style from "AppCompat.DarkActionBar" to "AppCompat.NoActionBar" (and with item "android:windowTranslucentStatus" set to "true").
I tried to use windowSoftInputMode in my manifest with "adjustPan|adjustResize", but nothing change. Adding "ScrollView" to the layout with "EditText" inside doesn't solve my problem neither.
My english is bad, and I know that pictures are better than words, so here is what I want to do and what's happening :
(link to image) http://i.stack.imgur.com/fIRCl.png
Any ideas ? Thanks for reading !
EDIT : I solved my problem with the FloatingButton, just need to add this line to the component's XML declaration :
android:layout_alignParentBottom="true"
The only problem now is the keyboard that hides EditText.
Here is my code :
.
activity_main.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="7dp"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- My toolbar -->
<include
android:id="#+id/tool_bar"
layout="#layout/toolbar_design">
</include>
<!-- Fragment's place -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true">
</FrameLayout> <!-- Open drawer bug fix -->
</LinearLayout>
<!-- Sliding Drawer -->
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#null"
android:clipToPadding="false"
android:overScrollFooter="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#color/drawer_background"/>
</android.support.v4.widget.DrawerLayout>
toolbar.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/md_blue_800"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:elevation="4dp" >
</android.support.v7.widget.Toolbar>
fragment_profile.xml (the view with EditText's)
<LinearLayout 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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/container_dropshadow">
<!-- Top fragment's Image -->
<ImageView
android:layout_width="match_parent"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:src="#drawable/top_image"/>
</LinearLayout>
<!-- Scrollview in case of screen's height is too small -->
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:id="#+id/rlFillProfile">
<!-- long long text ( 9 lines ) -->
<TextView
android:text="#string/text_edit_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:id="#+id/tvEditProfile" />
<!-- User ID EditText -->
<com.rengwuxian.materialedittext.MaterialEditText
android:layout_below="#id/tvEditProfile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:maxLines="1"
android:singleLine="true"
android:maxEms="10"
android:hint="Your user ID"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:id="#+id/etUserID"
android:layout_alignLeft="#+id/etUserPassword"
android:layout_alignStart="#+id/etUserPassword" />
<!-- User ID TextView -->
<TextView
android:id="#+id/tvUserID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Identifiant :"
android:textSize="18dp"
android:layout_marginBottom="16dp"
android:layout_alignBottom="#id/etUserID"
android:layout_alignRight="#+id/tvUserPassword"
android:layout_alignEnd="#+id/tvUserPassword" />
<!-- User password TextView -->
<com.rengwuxian.materialedittext.MaterialEditText
android:layout_below="#id/etUserID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:maxLines="1"
android:singleLine="true"
android:maxEms="10"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:inputType="textPassword"
android:id="#+id/etUserPassword"
android:hint="******"
android:layout_toRightOf="#+id/tvUserPassword"
android:layout_toEndOf="#+id/tvUserPassword" />
<!-- User password TextView -->
<TextView
android:id="#+id/tvUserPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mot de passe :"
android:textSize="18dp"
android:layout_alignBottom="#+id/etUserPassword"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<!-- Button to get user's touch event -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Continuer"
android:id="#+id/button_disconnect"
android:layout_below="#id/etUserPassword"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</ScrollView>
</LinearLayout>
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" ... >
<!-- Permissions -->
...
<application
... >
<activity
android:name="..."
android:label="#string/app_name"
android:screenOrientation="portrait"
android:configChanges="orientation|keyboardHidden"
android:windowSoftInputMode="adjustResize|stateHidden">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
In my MainActivity, I have the DrawerLayout and some codelines not in relationship with the Toolbar / layout, except for :
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
...
toolbar = (Toolbar) findViewById(R.id.tool_bar);
toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
setSupportActionBar(toolbar);
// enabling action bar app icon and behaving it as toggle button
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setIcon(new ColorDrawable(getResources().getColor(android.R.color.transparent)));
...
}
// A method to find height of the status bar
// Source : an Stackoverflow's answer
public int getStatusBarHeight() {
int result = 0;
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = getResources().getDimensionPixelSize(resourceId);
}
return result;
}
Ok, finally found a solution. Using this code in Fragment solves everything.
getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN | WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
By the way, use AppCompatActivity instead of ActionBarActivity (support V7), I'm not sure it changes something, but just in case ...
(From : this answer https://stackoverflow.com/a/28012530/5200029)

Selector for layout inside DrawerLayout doesn't work

I have a view aligned to the bottom of a navigation drawer that is not in list.
activity_main.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/readscreen_bg">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/loading_layout"
android:visibility="invisible">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressBar"
android:layout_centerInParent="true" />
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:id="#+id/navigation_drawer_content"
android:layout_width="#dimen/navigation_width"
android:layout_height="match_parent"
android:background="#color/navdrw_bg"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_gravity="start" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/navigation_support_item_height"
android:id="#+id/support_project"
android:focusableInTouchMode="true"
android:clickable="true"
android:focusable="true"
android:background="#drawable/support_project_selector"
android:layout_alignParentBottom="true">
<ImageView
android:layout_width="#dimen/navigation_item_icon_size"
android:layout_height="#dimen/navigation_item_icon_size"
android:id="#+id/navigation_icon"
android:layout_marginLeft="#dimen/navigation_item_icon_left_margin"
android:layout_marginRight="#dimen/navigation_item_icon_right_margin"
android:layout_centerVertical="true"
android:src="#drawable/ic_menu_support"
android:layout_alignParentLeft="true"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/navdrw_bg"
android:text="#string/navigation_support_project"
android:textSize="#dimen/navigation_item_text_size"
android:id="#+id/navigation_name"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_toRightOf="#+id/navigation_icon"/>
</RelativeLayout>
<ListView android:id="#+id/left_drawer"
android:layout_width="#dimen/navigation_width"
android:layout_height="match_parent"
android:layout_above="#+id/support_project"
android:layout_gravity="left"
android:dividerHeight="0dp"
android:divider="#null"/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
It is, with id support_project. The problem is selector for this layout doesn't work.
support_project_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selected -->
<item
android:drawable="#color/navdrw_support_block_bg_pressed"
android:state_focused="true"
android:state_selected="true"/>
<!-- Pressed -->
<item
android:drawable="#color/navdrw_support_block_bg_pressed"
android:state_focused="false"
android:state_selected="true"/>
<!-- When not selected -->
<item
android:drawable="#color/navdrw_support_block_bg"/>
</selector>
I was trying many variants and nothing helped. Selector does install color when view is not clicked but when it is clicked it doesn't change it's color.
But layout is clickable, I do receive click event and can process it. The problem is only with click/activate color.
Colors in selector for active and normal state are 100% completely different.
There are multiple aspects you are handling not so good, here.
First, your selector possible states:
You should have an item tag per state you want to customize and one different android:state value per item tag. So, remove your android:state_focused attributes from both states (selected and pressed).
On your pressed state, you are using android:state_selected="true" when you should be using android:state_pressed="true". This will make your selector work when the item is actually pressed, not only when it is selected.
Second, in order to affect the selector to your RelativeLayout, you have to set it clickable by adding android:clickable=true attribute in your xml layout. RelativeLayout is not clickable by default, unlike a Button, for example.
For last, add android:duplicateParentState="true" to your RelativeLayout children Views, ImageView and TextView. This attribute allows the children to have the same state as the parent. When your RelativeLayout is selected or pressed, that state will be replicated by its children.
And you are done. Your selector is working.

Android CustomListView overlapping other components

In my application I have a header (at the top) and a footer(at the bottom) and a CustomListView inside. I have made the HEADER & FOOTER stationary and they won't scroll. But the ListView which is placed between them, has some components which are overlapping the FOOTER. I somehow want those components in my CustomListView not to overlap the footer. Is there any way this can be done?
The code for my layout is given below-
<?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:orientation="vertical" >
<!-- Title Bar -->
<include
android:id="#+id/title_bar"
android:layout_alignParentTop="true"
layout="#layout/title_bar" />
<!-- Settings Components list -->
<ListView
android:id="#+id/custom_items_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title_bar"
android:layout_weight="1" >
</ListView>
<!-- Options Bar -->
<include
android:id="#+id/options_bar"
style="#style/btn_options_bar"
android:layout_alignParentBottom="true"
layout="#layout/options_bar" />
</RelativeLayout>
Have you tried adding android:layout_above="#id/options_bar" to the ListView? To do so you would also have to move the declaration of the footer to be above the ListView in the layout file so that you are not referencing an id that hasn't been declared yet. But even though the options bar would be listed in the layout before the ListView, it would still get displayed below it because of the options_bar layout_alignParentBottom="true".
I finally found the problem. The problem was, (I don't know why but) I needed to set the layout_height and layout_weight again after <include>
For those who are interested, updated xml is-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- Title Bar -->
<include
android:id="#+id/title_bar"
android:layout_alignParentTop="true"
layout="#layout/title_bar" />
<!-- Options Bar -->
<include
android:id="#+id/options_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
style="#style/btn_options_bar"
android:layout_alignParentBottom="true"
layout="#layout/options_bar" />
<!-- Settings components' list -->
<ListView
android:id="#+id/custom_items_list"
android:layout_above="#id/options_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title_bar">
</ListView>
</RelativeLayout>

Categories

Resources