I am new to android app development. I am trying to create a toolbar that has 3 buttons on it, left middle and center. My left are right buttons are positioned correctly but my middle button displays in the middle of the page instead of middle of the tool bar. Wondering if anyone can help with this. Thanks
Also wondering if anyone can help with the white space above the tool bar
activity_main:
<?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:fitsSystemWindows="true"
tools:openDrawer="start">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
>
<include
android:id="#+id/app_bar_main"
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include
android:id="#+id/toolbar"
layout="#layout/toolbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/menu_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Menu" />
<Button
android:id="#+id/add_new_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerInParent="true"
android:text="Add New" />
<Button
android:id="#+id/home_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Home" />
</RelativeLayout>
<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"
android:background="#141619"
android:fitsSystemWindows="true"
app:itemIconTint="#141619"
app:itemTextColor="#FFFFFF"
app:menu="#menu/activity_main_drawer" >
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
app_bar_main:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.MPL.AppBarOverlay">
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
toolbarlayout:
<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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#141619"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
/>
I have fixed issue with all of your layouts.
for your activity_main.xml copy and paste below layout.
<?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:fitsSystemWindows="true"
tools:openDrawer="start">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/app_bar_main"
layout="#layout/app_bar_main" />
</RelativeLayout>
<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"
android:background="#141619"
android:fitsSystemWindows="true"
app:itemIconTint="#141619"
app:itemTextColor="#FFFFFF">
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
change you app_bar_main to following
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#282941"
android:fitsSystemWindows="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:minHeight="?attr/actionBarSize">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingEnd="16dp">
<Button
android:id="#+id/menu_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Menu" />
<Button
android:id="#+id/add_new_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerInParent="true"
android:text="Add New" />
<Button
android:id="#+id/home_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Home" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
That's it, you don't have to create any other layout. Now wherever you want to have this toolbar you can include your app_bar_main.xml in the layout and you will get the toolbar. Then in your activity if you want to access toolbar and button inside toolbar, do like this:
Toolbar toolbar = findViewById(R.id.account_toolbar);
setSupportActionBar(toolbar);
Button btnEdit = toolbar.findViewById(R.id.menu_button);
let me know if you have any questions. I'll try to help you out.
I don't know if what you are trying to do is a good idea.
From a design perspective, you have only a limited space in the toolbar and you should position there only the most relevant actions to the context, all the other actions are going to be hiden in the classic "three dots" menu.
You can check what I mean here https://developer.android.com/training/appbar/actions
https://material.io/components/app-bars-top#anatomy
Even thouth, to achieve what you are trying to do, I'll do it using Constraint Layout instead of Relative Layout, makes your life easier and is up to date ;) https://developer.android.com/training/constraint-layout
First, create title_menu.xml Layout. make sure android:layout_height="wrap_content" and android:gravity="center"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Button"/>
</LinearLayout>
Second, add the following code on the onCreate method in your Activity.
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.title_menu);
Related
This bounty has ended. Answers to this question are eligible for a +50 reputation bounty. Bounty grace period ends in 21 minutes.
Zac1 is looking for a canonical answer:
Please provide working XML layout code to fix this issue. If I resize my listView in the Android Studio Design editor such that listView is above the adView, the adView still seems to overlap the last item of the listView.
Here's the activity_results XML layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
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.test.test.ResultsActivity">
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:titleTextAppearance="#style/ToolbarTitle" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
app:tabMaxWidth="0dp">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.test.test.ResultsActivity">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/adView"></ListView>
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center|bottom"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/banner_ad_unit_id"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
And, here's the content_results.xml layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/activity_horizontal_margin">
<TextView
android:id="#+id/abc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dip"
android:textColor="#color/colorAccent"
android:textSize="14sp"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/def"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#color/colorPrimary"
android:textSize="14sp"
android:textStyle="bold" />
</RelativeLayout>
<TextView
android:id="#+id/ghi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#color/colorPrimary"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
I want to have the adView item at the bottom of the last element of the listView. Is this possible with the layouts I currently have? Because it looks like the adView in the activity_results has no relation to the list items in the content_results file?
I've also tried app:layout_constraintBottom_toTopOf attribute to position the adView below the ListView, but there seems to be no change.
Please let me know if you can catch any other basic errors in these layouts?
How about wrapping up co-ordinator view group with constraintLayout and putting adview outside of this co-ordinator viewgroup and constrain adview to bottom to the activity layout so that ad view is independent of list view's data.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
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.test.test.ResultsActivity">
<androidx.coordinatorlayout.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"
app:layout_constraintBottom_toTopOf="#+id/adView"
android:layout_height="wrap_content">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:titleTextAppearance="#style/ToolbarTitle" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
app:tabMaxWidth="0dp">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.test.test.ResultsActivity">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/adView"></ListView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/banner_ad_unit_id"
app:layout_constraintBottom_toBottomOf="parent" />
</ConstraintLayout>
I have two pieces of advice for you:
Avoid using ListView (unless you have a fixed amount and few items). Prefer RecyclerView which is so much more performative. Basically, if you have so many items, with RecyclerView, just a certain amount of items will have the layout rendered. With ListView, even the hundredth item will have the layout rendered (even if you can see just the first four items on your screen at a certain moment).
Take care about using several nested view groups. It impacts the performance to render the layout on the device. In general, just a root ConstraintLayout solves all the problems you can face to align the elements.
For the first layout, because the AppBarLayout needs the CoordinatorLayout to work properly, you can keep the CoordinatorLayout as root and use ConstraintLayout after the AppBarLayout. For the second layout, the same thing. Here is an example:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="10dp">
<TextView
android:id="#+id/abc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="10dp"
android:textColor="#color/design_default_color_primary"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/def"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/abc"
android:textColor="#color/design_default_color_primary"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/ghi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/def"
android:text=""
android:textColor="#color/design_default_color_primary"
android:textSize="14sp"
android:textStyle="bold" />
</androidx.constraintlayout.widget.ConstraintLayout>
About your problem with the AdView position, try something like this:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:padding="10dp">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
tools:itemCount="#integer/material_motion_duration_long_2"
tools:layout_editor_absoluteX="3dp" />
<com.google.android.gms.ads.AdView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/recyclerview"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Let me know if it worked. If you need some more help, contact me.
I'm beginner in android programming and I want to know how to make an OneUi styled navigation like in this picture.
This is what I made so far. Unfortunately, when I scroll it, it will totally collapse and I cannot get it back.
I used CoordinatorLayout with AppBarLayout and I follow some code from material.io guidelines but it did'nt work as I expected. I want the app bar to be short when scrolled and tall when it is on the top.
Here is my XML Layout Code:
<androidx.coordinatorlayout.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:background="#F0F0F0"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginStart="72dp"
app:expandedTitleMarginBottom="28dp"
app:layout_scrollFlags="scroll|snap">
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
app:contentInsetStart="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is a text"
android:textSize="50dp"
/>
</RelativeLayout>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
For your use case. There are few things you need to change.
Put the content below AppBarLayout in NestedScrollView to have scrolling layout_behavior.
Put some content to mimic scrolling effect. Like textview with huge height for example.
Put the content you want to collapse into one CollapsingToolbarLayout basically things to show when it's tall or not collapsed.
Put your MaterialToolbar as a direct child of AppBarLayout
Example code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:background="#F0F0F0"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginBottom="28dp"
app:expandedTitleMarginStart="72dp"
app:layout_scrollFlags="scroll|snap">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is collapsing content"
android:textSize="32sp" />
</RelativeLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:title="This is MaterialToolbar" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">
<TextView
android:layout_width="match_parent"
android:layout_height="800dp"
android:text="Hello Test" />
</androidx.cardview.widget.CardView>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Output:
Not collapsed:
Collapsed:
I've created a menu with a width of 150dp. The toolbar does not match the width of the app. so that the area under the navbar icon is unfilled.
Current toolbar
What I want
custom_toolbar.xml
<Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="150dp"
android:id="#+id/mytoolbar"
android:background="#color/colorPrimaryDark">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- text -->
<LinearLayout
android:id="#+id/dates"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This text is underneath"
android:textColor="#color/white"
android:textSize="40sp" />
</LinearLayout>
</RelativeLayout>
</Toolbar>
activity_main.xml
<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_id"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/Theme.AppCompat.Light" />
<!-- Container for the rest of the screen - Below the Toolbar -->
<FrameLayout
android:id="#+id/framelayout_id"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<!-- Container for contents of drawer - use NavigationView to make configuration easier -->
<com.google.android.material.navigation.NavigationView
android:id="#+id/navid"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:visibility="gone"
app:headerLayout="#layout/nav_header_layout"
app:menu="#menu/nav_drawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>
Questions
Why is the toolbar not filling the whole area? How can I fix this?
Can I use something other than a fixed 150dp size to set the height of the navbar? (such as a percentage)
Can I use something other than a fixed 150dp size to set the height of
the navbar? (such as a percentage)
for this i use
android:layout_height="?attr/actionBarSize"
Is this what you're trying to achieve?
<LinearLayout
android:id="#+id/dates"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical"
>
<Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="150dp"
android:backgroundTint="#color/colorGreen2"
android:id="#+id/mytoolbar"
android:background="#color/colorPrimaryDark">
</Toolbar>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This text is underneath"
android:textColor="#color/colorBlack"
android:textSize="40sp" />
</LinearLayout>
I'm currently making an app and is facing this problem:
after I created fragments in a drawermenu my floating button doesn't react to anything anymore. I have asked this question on another forum and their answer was that my Drawerlayout was intercepting the clicks. How can I fix this?
<?xml version="1.0" encoding="utf-8"?>
<!-- Use DrawerLayout as root container for activity -->
<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"
android:fitsSystemWindows="true"
xmlns:tools="http://schemas.android.com/tools"
tools:openDrawer="start"
android:clickable="false"
android:focusable="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#00FFFFFF"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
android:elevation="4dp"/>
<!-- Layout to contain contents of main body of screen (drawer will slide over this) -->
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:clickable="false"
android:focusable="false"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start">
<RelativeLayout
android:id="#+id/upper_section"
android:layout_width="match_parent"
android:layout_height="225dp"
android:background="#drawable/bg">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/listview"
android:layout_alignParentBottom="true"
android:layout_gravity="end|bottom"
android:layout_marginBottom="22dp"
android:src="#drawable/ic_add"
app:fabSize="normal" />
</RelativeLayout>
</FrameLayout>
<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"
app:menu="#menu/drawer_view" />
Here's how to implement the drawer layout correctly. You seem to have some unwanted layout settings. Try copying the entire layout and replace only what's inside the frame layout :)
I have an activity that has a toolbar and a framelayout where I inject fragments.
This is the layout for that activity:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drwDrawerRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_main_selector"
android:theme="#style/AppTheme">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/viewMainToolbar"
layout="#layout/view_toolbar" />
</LinearLayout>
<FrameLayout
android:id="#+id/frmDrawerContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/toolbar_height"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical" />
<include
android:id="#+id/viewDrawer"
layout="#layout/view_drawer"
bind:name="#{name}"/>
<include
android:id="#+id/viewUserDrawer"
layout="#layout/view_user_drawer"
bind:name="#{name}"/>
</android.support.v4.widget.DrawerLayout>
I have the framelayout with a margin so that the contents from the fragments do not overlay the toolbar, but I set clipChildren and clipToPadding to false as per some other posts I have seen here.
On some fragments however I have a loading view, which I would like to occupy all the screen.
This is a sample fragment:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layout_main"
style="#style/Layout.FullScreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layout_footer"
android:orientation="vertical">
<TextView
android:id="#+id/textView7"
style="#style/Text.Header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/login_header" />
<EditText
android:id="#+id/edtMessage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:elevation="1dp"
android:ems="10"
android:inputType="textMultiLine" />
<Button
android:id="#+id/btnSend"
style="#style/Button.Primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/support_button" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_footer"
style="#style/Layout.FullScreen.Footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<TextView
android:id="#+id/footerInfo"
style="#style/Text.White.Small.Centered"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/footer_info" />
</LinearLayout>
<include
layout="#layout/view_loading"
android:visibility="invisible"
bind:loading="#{loading}" />
</RelativeLayout>
Ans this is the included loading view, which I have set with negative margin, hoping it would move up to the top of the screen:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="-40dp"
android:background="#color/colorLoadingBackground"
android:clickable="true"
android:visibility="#{loading ? View.VISIBLE : View.GONE}">
</FrameLayout>
Am I missing something here?
Is this doable or do I need to change how I am doing this?
Clarification:
The first / root layout includes a toolbar and the second layout is included within the frame layout of the first. this means that the content of the second layout starts below the toolbar. However, I would like the third layout (a loading screen that is included in the second layout) to have a negative margin so that it overlays the full screen, not just starting below the toolbar.
You need to use CoordinatorLayout then you wont need negative margins. here are the sample layout u can customise according to your need
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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=".MainActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_behavior= "#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="My App" />
</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"/>
<!--include a full screen loading layout here and hide/show according to your need-->
<include layout="#layout/loading_layout/>
</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/nav_header"/>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>