I am trying to add 5 icons on the bottom of the navigation bar. and this is what it came out like pic1. When I click on the bottom, other icons would show up only one at a time, shown in pic2. I need to make it look like the this picture, pic3.
Does anyone have any idea on what's wrong with the code?
These are the libraries that I am using:
implementation 'com.android.support:support-core-utils:27.1.1'
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:design:27.1.1'
Here is my bottom navigation layout view:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true">
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bottomNavViewBar"
android:background="#drawable/white_grey_border_top"
app:menu="#menu/bottom_navigation_menu">
</android.support.design.widget.BottomNavigationView>
</RelativeLayout>
Here is white_grey_border_top drawable file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1dp">
<item
android:bottom="-1dp"
android:top="1dp"
android:right="-1dp"
android:left="-1dp">
<shape
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/grey" />
<solid
android:color="#color/white" />
</shape>
</item>
Here is my bottom_navigation_menu:
<?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/ic_house"
android:icon="#drawable/ic_house"
android:title="">
</item>
<item
android:id="#+id/ic_search"
android:icon="#drawable/ic_search"
android:title="">
</item>
<item
android:id="#+id/ic_circle"
android:icon="#drawable/ic_circle"
android:title="">
</item>
<item
android:id="#+id/ic_alert"
android:icon="#drawable/ic_alert"
android:title="">
</item>
<item
android:id="#+id/ic_android"
android:icon="#drawable/ic_android"
android:title="">
</item>
update:
when I add android:backgroundTint="#1091BF" to my bottom navigation layout view, then it works but the background is blue (pic4). Also, I notice that if I just change the android:color="#color/white" in my white_grey_border_top drawable file to any other color then all the icon would show up.
Try using the following inside your bottom navigation layout view.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="#drawable/background"
>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigationView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:backgroundTint="#1091BF"
app:itemIconTint="#fff"
app:itemTextColor="#fff"
app:menu="#menu/navigation"/>
</android.support.constraint.ConstraintLayout>
Make sure to add dependency
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
Related
Is it possible to change bottom navigation view color tint to a custom color created using xml? If so how do I do this? I am aware that you can change the icon color tint with the property "app:itemIconTint="#color/colorPrimaryDark", but I am not sure how to go about referencing the color in my drawable for the iconTint color.
Bottom navigation view
<?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="com.examp.smartshop.Controller.MainActivity">
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/bottom_navigation">
</FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemIconTint="#color/colorPrimaryDark"
app:itemTextColor="#color/colorPrimaryDark"
app:menu="#menu/bottom_navigation"
app:itemIconSize="25sp"
android:background="?android:attr/windowBackground"/>
</RelativeLayout>
**Custom color**
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#EC6EAD"
android:startColor="#3494E6"
android:type="linear" />
<corners
android:radius="0dp"/>
</shape>
Android BottomNavigationView
To disable this behaviour
bottomNavigationView.itemIconTintList = null
**
Change Icon and Selected Icon
**
Navigation Item (including text and icon) is specified in a menu file.
<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:menu="#menu/navigation"
/>
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_dailyquote"
android:icon="#drawable/yy_dailyquote"
android:title="#string/navigation_dailyquote"/>
...
</menu>
To support both icon and selected icon, create res/drawable/yy_dailyquote.xml.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/yy_dailyquote_sun" android:state_checked="false"/>
<item android:drawable="#drawable/yy_dailyquote_sun_active" android:state_checked="true"/>
</selector>
TextColor and selected TextColor
Change TextColor
<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:itemTextColor="#998971"
/>
Support TextColor and Selected TextColor
<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:itemTextColor="#color/navigation_text_color"
/>
Create res/color/navigation_text_color.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#9A8971" />
<item android:state_checked="false" android:color="#AD9F88"/>
</selector>
Change Background Color
<com.google.android.material.bottomnavigation.BottomNavigationView
...
android:background="#FDFAE6"
/>
I have this main layout. It should display 3 buttons, but I am showing you only 1 button definition in order not to put mostly code in the question.The other buttons have the same definition.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="70dp"
android:paddingBottom="70dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:gravity="center"
android:orientation="horizontal"
android:padding="50dp">
<Button
android:id="#+id/btnRfid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/main_button_background"
android:padding="20dp"
android:text="#string/button_rfid"
android:textSize="36sp"
android:drawableLeft="#drawable/button_rfid"/>
</LinearLayout>
</LinearLayout>
This is the main_button_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#949597"
android:angle="270" />
<corners android:radius="20dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
This is how I see it in design editor of Android Studio:
However, this is how it is viewed in the emulator:
Why are text rendered that way? Is something missing?
By reading tutorials, I don't see anything special in the button definition.
Regards
Jaime
1) Migrate your project to androidx.
2) Include dependency in your build.gradle:
implementation 'com.google.android.material:material:1.0.0'
3) Use in your layout:
<com.google.android.material.button.MaterialButton
android:id="#+id/material_icon_button"
style="#style/Widget.MaterialComponents.Button.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/icon_button_label_enabled"
app:icon="#drawable/icon_24px"/>
4) Don't forget to change your applevel theme to Material Component theme.
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
is there a way to add a background to the toolbar icons,
I want to achieve this design
or there is another way to do it. since it has the overflow icon
complete reference code
this is the result
add the following in your app theme or activity style to make it NoActionBar activity
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
add the toolbar in your activity.xml and customize the view as you like
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/AppTheme"
app:layout_collapseMode="parallax"
app:popupTheme="#style/AppTheme">
<RelativeLayout
android:layout_width ="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/back_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#drawable/cir_shape"
android:onClick="clickBack"
android:padding="6dp"
android:visibility="visible"
app:srcCompat="#drawable/ic_arrow_back_black_24dp"
tools:ignore="VectorDrawableCompat" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/rect_shape"
android:gravity="center"
android:orientation="horizontal"
android:padding="3dp">
<ImageView
android:id="#+id/app_bar_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:visibility="visible"
android:layout_marginRight="3dp"
app:srcCompat="#drawable/ic_visibility_black_24dp"
android:layout_marginEnd="3dp" />
<TextView
android:id="#+id/app_bar_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="1.3K"
android:textAllCaps="false"
android:textColor="#color/whiteColor"
android:textSize="18sp"
android:textStyle="bold"
android:visibility="visible" />
</LinearLayout>
</RelativeLayout>
3.add the support action bar as the toolbar in the MainActivity.java in OnCreate()
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
}
4.the circle_shape.xml in the drawable for arrow_back drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#95686566" />
</shape>
5.the rectangle_shape.xml in the drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#95686566" />
</shape>
6.for customizing the 3 dots(overflow icon) add
<item name="actionOverflowButtonStyle">#style/ThreeDotsStyle</item>
the in your style.xml main theme
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="actionOverflowButtonStyle">#style/ThreeDotsStyle</item>
</style>
and create it's theme
<style name="ThreeDotsStyle" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">#drawable/my_threedots_menu</item>
</style>
7.the my_threedots_menu.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#95686566" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
</item>
<item
android:drawable="#drawable/ic_menu_dots"
android:gravity="center" />
</layer-list>
8.inflate your menu
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.my_menu, menu);
return true;
}
Create a custom toolbar and put your custom icons inside of it.
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:theme="#style/myCustomAppBarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- your custom icons goes here -->
</RelativeLayout>
</android.support.v7.widget.Toolbar>
1) btn_ripple_background
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/ripple_circular_shape"/>
</selector>
2) ripple_circuler_shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/btn_state_pressed_text_color"
android:shape="oval">
<solid android:color="#color/btn_state_pressed_text_color" />
</shape>
Finally android:foreground="#drawable/ripple_btn_background"
You could create container with custom background inside Toolbar, put ImageView inside and add some padding to it for example:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/middle_background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:src="#drawable/baseline_arrow_forward_white_24" />
</LinearLayout>
Background middle_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/resandroid"
android:shape="oval">
<solid android:color="#android:color/holo_orange_dark" />
</shape>
Adjust padding, ImageView to get desired look but basically you will have something like this:
Good day.I want to draw an rectangle as a view but which bottom shall be curved.I do not want to apply background image like that or use any views,because if i use an view and set background,the curve part will still have invisible empty space and i would not be able to attach another curve image to the bottom curve of the custom view.So how shall i draw an rectangle with bottom curved line and use it as a view to set any background color i want?
Notice: i have heard something and read about quadTo() and cubicTo() android methods but i have no clue even how to use them i mean i did not understand anything from documents....So i came here for help.
Ideally instead of such description you could see what i really want to achieve from the image...It is an toolbar or action bar or whatsover but i have to make such thing...I have no ideas at all.(By the way you can notice that there is an image curved on top as well...i have to do it too,and i reckon i can do it by drawing an bitmap.meanwhile i'm still failing to do any of the image parts in android view.)
Just play with the oval item values to get the desired output.
curve_toolbar_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"/>
</item>
<item
android:bottom="0dp"
android:left="-100dp"
android:right="-100dp"
android:top="-80dp">
<shape android:shape="oval">
<solid android:color="#color/colorPrimary" />
</shape>
</item>
</layer-list>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/curve_toolbar_bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
</android.support.v7.widget.Toolbar>
</android.support.constraint.ConstraintLayout>
This is what I did to achieve curved status bar on my android application. This created a toolbar that can be over other views so when you scroll views goes under the toolbar.
First I hid the original Toolbar from activity by creating a no title theme and selecting that theme from manifest. Then I created a Titlebar of my own and then by playing with margins and paddings I achieved desired result.
statusbar
sytles.xml:
<style name="Notitle.Theme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowNoTitle">true</item>
</style>
AndroidManifest.xml
<activity
android:name=".MainActivity"
android:theme="#style/AppTheme.NoActionBar"/>
arch.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"/>
</item>
<item
android:bottom="0dp"
android:left="-100dp"
android:right="-100dp"
android:top="-80dp">
<shape android:shape="oval">
<gradient
android:startColor="#2629fb"
android:endColor= "#2699FB"
android:angle="90" />
</shape>
</item>
</layer-list>
mainActivity.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#27292c">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp"
android:layout_marginBottom="-50dp"
android:elevation="5dp"
android:background="#drawable/arch">
<TextView
android:id="#+id/headerWidgetTitle"
android:text="Title"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="24sp"
android:paddingTop="10dp"
android:textColor="#FFFFFF"
android:paddingBottom="20dp"/>
</androidx.appcompat.widget.Toolbar>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/scrollLinearLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:elevation="0dp"
android:paddingTop="50dp"
android:clipToPadding="false">
<!-- Your Views -->
</LinearLayout>
</ScrollView>
I am testing first time an App with the new Navigation Drawer with the Material Design library.
My problem is, that when I select an item, then the whole selected item inclusive the icon are fully overlayed, like in the pictures shown below.
What can be my mistake here? I have tried several things, whitout success.
This is the XML with the Navigation Drawer:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"
/>
</android.support.v4.widget.DrawerLayout>
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:divider="#FFFFFF"
android:fitsSystemWindows="true"
android:background="#drawable/side_nav_bar"
app:itemTextColor="#FFFFFF"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"
app:itemBackground="#drawable/drawer_item_background"
/>
in #layout/nav_header_main you can create your xml file contains header part for navigation drawer.
for drawer_item_background--
create xml file in drawable folder and paste below code:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/colorPrimary" />
</shape>
</item>
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#48607B" />
</shape>
</item>
</layer-list>
app:menu contains menu item contained in navigation drawer.
this may be look like this:
<?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_dashboard"
android:title="Dashboard" />
<item
android:id="#+id/nav_my_m3_account"
android:title="#string/my_account_fragment" />
<item
android:id="#+id/nav_notification_settings"
android:title="Notification Settings" />
<item
android:id="#+id/nav_faq"
android:title="FAQ" />
<item
android:id="#+id/nav_terms_condition"
android:title="Terms & Conditions" />
<item
android:id="#+id/nav_privacy_policy"
android:title="Privacy Policy" />
<item
android:id="#+id/nav_logout"
android:title="Log Out" />
</group>
</menu>
After try to reduce the External Libraries, I found out that this library was the problem:
it.sephiroth.android.library.targettooltip
But I dont know how to repair it. So I will remove this lib.