I am trying to implement my custom toolbar to my app. How can i fix problem with background color to make toolbar looks properly? Or mayby i can make this white backgroud transparent. I will be appreciate for any help. If you find this question incorrect or it is not enough information here, please leave a comment.
Here is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true"
tools:context=".MainActivity"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/main_toolbar"/>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient_background"/>
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/nav_view"
app:headerLayout="#layout/nav_header"
app:menu="#menu/main_menu"/>
</androidx.drawerlayout.widget.DrawerLayout>
And toolbar layout:
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/mainToolbar"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/background_shape"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:titleTextColor="#color/colorTextGray"
android:theme="#style/AppTheme.NoActionBar"
>
</androidx.appcompat.widget.Toolbar>
Here is java code:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = findViewById(R.id.mainToolbar);
setSupportActionBar(toolbar);
}
Here what i actually expect.
This is how i get so far :)
You can add your background of FrameLayout to your parent. Then that white colour background will get remove.
android:background="#drawable/gradient_background"
Add Above code to your DrawerLayout like below example :
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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:background="#drawable/gradient_background"
android:fitsSystemWindows="true"
tools:context=".MainActivity"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/main_toolbar" />
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:menu="#menu/main_menu" />
</androidx.drawerlayout.widget.DrawerLayout>
Related
I am trying to create a separate page for my drawerlayout and add the background as the activity_main.xml so that the two pages are separate but I can't manage to do this. How do I do this in xml in android studio? This is my code for my drawerlayout page in xml in android studio. What changes do I have to make for this to work?
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true"
tools:openDrawer="start"
tools:context=".MainActivity"
android:orientation="vertical">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:elevation="4dp"
android:background="#6666ff"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
</androidx.appcompat.widget.Toolbar>
<FrameLayout
android:background="#+id/main_background"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:menu="#menu/navig_menu"
android:layout_width="wrap_content"
android:layout_height="match_parent">
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
I have a requirement to show bottom navigation view, drawer menu in same layout.
Bottom navigation has three tabs each has its own content.The first bottom navigation tab contains a view pager with tablayout that has some conflict with the parent toolbar.
Problem
The child fragment toolbar hides the parent toolbar menu ☰ icon.
Here is the layout I am using.
ParentLayout.xml
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.HomeActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="6dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="#menu/navigation" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:menu="#menu/menu_drawer" />
</android.support.v4.widget.DrawerLayout>
BottomNavFragment1.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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.telenor.magri.saatdo.activities.TabbedActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.NoActionBar.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.NoActionBar.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorPrimaryDark"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
ScreenShot : Child layout having tablayout
ScreenShot : Child layout not having tablayout
But the problem is toolbar menu icon for drawer is not showing up its hiding behind the child toolbar. So any idea what is problem in my layout.
Thanks
You are overriding the Parent Activity toolbar in your Bottom Navigation View- Fragment 1
Change your layout to remove the toolbar..
BottomNavFragment1.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:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
app:tabGravity="fill"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#3b5998"
android:minHeight="?attr/actionBarSize"
app:tabIndicatorColor="#c8130d"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
EDIT
In your activity layout use layout_below attribute for your FrameLayout
ParentLayout.xml
<FrameLayout
android:id="#+id/container"
android:layout_below = "#+id/appBarLayout" //add this
android:layout_width="match_parent"
android:layout_height="match_parent" />
otherwise it will replace the whole layout including the toolbar in your parent.
My background hides under the navbar.
How can I put the background start showing just below the navbar?
code:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/backgroundnew"
android:scaleType="centerCrop" />
In your activity_main.xml, Have you closed the toolbar correctly?
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:showIn="#layout/app_bar_main">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
</LinearLayout>
If you didn't close your toolbar, the view is overlapped.
I'm new to android development and recently learning about fragments.
I have a recyclerview inside fragment, and I want it to be attached to the toolbar, I tried put app:layout_behavior="#string/appbar_scrolling_view_behavior"
inside the container layout but whenever the toolbar shows the FAB moves down below the navigation bar as you can see here.
activity_main.XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/main_screen"
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.atar.mango.MainActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/toolbar"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/logo_header"
app:menu="#menu/menu_for_navigation_view"/>
</android.support.v4.widget.DrawerLayout>
home_fragment.XML
<android.support.design.widget.CoordinatorLayout
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.atar.mango.HomeFragment"
android:background="#color/background">
<TextView
android:id="#+id/empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/empty"
android:gravity="center"
android:textSize="90sp"
android:textColor="#32000000"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/notes"
app:backgroundTint="#color/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
android:overScrollMode="never">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_note"
app:backgroundTint="#color/options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginRight="#dimen/fab_margin_right"
android:layout_marginEnd="#dimen/fab_margin_right"
app:layout_anchorGravity="bottom|right|end"
android:layout_marginBottom="16dp"
android:src="#mipmap/add_note"
app:borderWidth="0dp"
android:elevation="6dp"
app:pressedTranslationZ="12dp"
app:fabSize="normal"/>
</android.support.design.widget.CoordinatorLayout>
Thanks.
I think you must specify your layout target,
in this way:
<android.support.design.widget.FloatingActionButton
...
android:layout_gravity="bottom|end|right"
app:layout_anchor="#id/notes"
app:layout_anchorGravity="bottom|right|end"
/>
I am currently redesigning my app to include a navigation drawer for navigating through the app. Currently, each screen is an activity and the way I have designed the home screen, is that it contains a toolbar and another xml file.
<?xml version="1.0" encoding="utf-8"?>
<Toolbar
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay">
<ImageView
android:layout_width="#dimen/_30sdp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_95sdp"
android:src="#drawable/logo"
android:id="#+id/logo"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sync_green"
android:id="#+id/sync_button"
android:layout_marginStart="#dimen/_75sdp"/>
</Toolbar>
<include layout="#layout/activity_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/run"
/>
Now, I have made another XML file for the navigation drawer:
<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_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The main content view where fragments are loaded -->
<FrameLayout
android:id="#+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<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:menu="#menu/activity_main_drawer" />
My dilemna is that since my toolbar is in the home.xml fragment, when I switch fragments, I will lose the toolbar. I want to keep the toolbar for all the views in the navigation drawer.
Also, in my java code, the setActionBar(toolbar) is throwing up an error saying cannot resolve method setActionBar.
One simple and straightforwrd solution for integrating NavigationDrawer along with Fragment in an Activity, is to design the activity_main.xml the following way :
<?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"
android:layoutDirection="rtl"
tools:openDrawer="start">
<include
layout="#layout/content_act_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"
android:background="#color/flat_white_light">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
Now, in the content_act_main.xml you can have :
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ToolbarColoredBackArrow"
app:popupTheme="#style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
If you notice, in the conten_act_main.xml, there is a toolbar that will be available to all the content that are shown in the FrameLayout, and you can use this FrameLayout as the container of your Fragments.
You can of course maintain this toolbar, you need ActionBarDrawerToggle to bind the drawerLayout and Toolbar together.
Minimal configuration would be more or less :
ActionBarDrawerToggle actionBarDrawerToggle;
DrawerLayout drawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
drawerLayout = (DrawerLayout) findViewById(R.id.navigation_drawer);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.app_name,R.string.app_name);
drawerLayout.setDrawerListener(actionBarDrawerToggle);
}
And you put the Toolbar in your base activity layout and other views wrapped in DrawerLayout.
<Android.support.v4.widget.DrawerLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="#+id/navigation_drawer"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">
<Android.support.v7.widget.Toolbar
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="#+id/toolbar"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
></Android.support.v7.widget.Toolbar>
....
....
</Android.support.v4.widget.DrawerLayout>
Try This in your activity
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("");
setSupportActionBar(toolbar);
This is my .xml file
<?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"
android:paddingBottom="#dimen/design_navigation_separator_vertical_padding"
tools:openDrawer="start">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/apptoolbar" />
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/nav_toolbar"
android:clickable="true">
</FrameLayout>
</RelativeLayout>
<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:background="#color/appColor"
android:fitsSystemWindows="true"
android:paddingBottom="#dimen/design_navigation_separator_vertical_padding"
app:itemTextAppearance="#style/NavigationDrawerStyle"
app:headerLayout="#layout/nav_header_home"
app:itemBackground="#color/appColor"
app:itemTextColor="#color/drawable_selector_drawer_item"
app:menu="#menu/activity_home_drawer" />
</android.support.v4.widget.DrawerLayout>