I'm implementing a Navigation View on my activityHome for the first time. When i run the app and enter the home activity it function well. The problem is at the XML editor on the android studio, the Nav View is above all the other elements and doesn't let me click on them.
I haven't touch anything else but these yet.
Thanks.
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:id="#+id/dl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:fitsSystemWindows="true"
tools:context=".activities.HomeActivity"
tools:openDrawer="start">
<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/header"
android:background="#color/colorPrimary"
app:menu="#menu/menu"
tools:ignore="MissingConstraints" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/iv_menu"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="?android:selectableItemBackground"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="#+id/guideline46"
app:layout_constraintEnd_toStartOf="#+id/guideline139"
app:layout_constraintStart_toStartOf="#+id/guideline135"
app:layout_constraintTop_toTopOf="#+id/guideline45"
android:elevation="10dp"
app:srcCompat="#drawable/menubuttonofthreelines_79781" />
...
and continues with the other elements.
Your layout has nothing wrong..
The reason that Android Studio shows that the drawer layout in the Open state in the design view because you set tools:openDrawer="start" in the DrawerLayout .. if you want to see the main layout in the design mode (i.e. to make the drawer in the close state), then you need to remove this attribute.
This attribute won't affect the looking of your app when you launch it.
Documentation:
You can insert sample data in your layout preview by using the tools: prefix instead of android: with any attribute from the Android framework. This is useful when the attribute's value isn't populated until runtime but you want to see the effect beforehand, in the layout preview.
XML tools namespace is just used to show you some behavior on Android Studio, but not while you run the app. Please check documentation for more info
Hello!
I just want to know if it's possible to make a bottom navigation bar like this, with this amazing blue center button. I just want the design (xml code). Can you help me?
Thanks!
I guess you can get the effect you want starting from this tutorial
then you have to work I guess the circle so that you can enlarge following another tutorial changing the size try this just to warm up and be confident for the concept, then you are going to find five solutions with the code here
<android.support.design.widget.CoordinatorLayout
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="match_parent">
<!-- Other components and views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:navigationIcon="#drawable/ic_menu_24"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bar"/>
</android.support.design.widget.CoordinatorLayout>
Background
In the past, Google always shown the toolbar to have the title aligned to the left:
https://material.io/develop/android/components/app-bar-layout/
However, recently, it seems that on some of its apps, the title is centered, even if it doesn't have symmetric content on the left and right. Example is on "Messages" app:
And on "Google News" app :
It also got updated on the material guidelines, here. Example:
Some people like to call it "material design 2.0", as it got various things updated.
The problem
While there are plenty of similar questions on StackOverflow from the time it was called "ActionBar" (example here ), here it's different, because it should have the support library (AKA "Android-X") have a way to handle it correctly, because things have changed, and now Google should support it as it's a part of the guidelines and part of various Android apps.
What I've tried
I tried to add a view within the toolbar, but even by coloring the view, you can see that it's not really centered, automatically, and that's before adding more action-items or up-button :
activity_main.xml
<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_height="wrap_content"
android:layout_width="match_parent"
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">
<TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="title"
android:gravity="center" android:background="#33ff0000"
android:id="#+id/titleTextView"/>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This solution is similar to many others presented on other StackOverflow threads similar to this question, and just like there, it fails to really center the text, while on Google's attempt, it gets centered correctly, no matter the number of action items and other views around.
There is also a nicer workaround that I've come up with: have one toolbar on each side, and make the TextView have margin that is the max of both. There is even a library for this, "Toolbar-Center-Title"... But again, this is a workaround. Not what I'm asking about.
The question
Is there now an official way to have a centered title on the Toolbar, no matter how many action items there are, and no matter what's on the other side (up button, for example) ?
If so, how can this be done?
NOTE: Again, I'm not interested in workarounds. There are plenty of workarounds and I can think of such by myself.
TL;DR: No, there's currently no official way to center the title on a toolbar.
I don't think there is an official way to do it, at least not yet. But I know that the Flutter framework supports it and it's pretty straight forward: you simply need to pass centerTitle: true to the appbar constructor, as described in this answer. And there's a good chance that the apps you've mentioned in your question were built with Flutter, since both are from Google.
I think the closest workaround to your expected layout is having the TextView on top of the Toolbar, as shown here:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>
<TextView
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"/>
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
But it would be really nice if the official Android API could support this the same way flutter does. Maybe you'd like to send a feature request to the Material Components Android Issue Tracker?
Now We have an official way to center the title on a toolbar using Material Design 3
Using Material Design 3 we can align the title in the center without doing extra work or without adding text view in toolbar
To align the title in the center We need to use the below properly
app:titleCentered="true"
To align subtitles in the center we need to use the below property
app:subtitleCentered="true"
Sample Code
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/topAppBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Center Aligned title"
app:subtitle="Sub title"
app:subtitleCentered="true"
app:menu="#menu/top_app_bar"
app:titleCentered="true"
app:navigationIcon="#drawable/ic_android_black_24dp" />
</com.google.android.material.appbar.AppBarLayout>
OUTPUT
How about textAlignment="center"? a RelativeLayout does the trick, when AppCompatTextView has set layout_width="match_parent"; for example:
<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:android="http://schemas.android.com/apk/res/android">
<androidx.appcompat.widget.LinearLayoutCompat
android:id="#+id/customView"
android:minHeight="?android:attr/actionBarSize"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="top">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Home Button -->
<include
layout="#layout/button_home_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"/>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="18sp"
android:textStyle="bold"/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/app_version"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="12sp"
android:textStyle="bold"/>
</androidx.appcompat.widget.LinearLayoutCompat>
</RelativeLayout>
</androidx.appcompat.widget.LinearLayoutCompat>
</layout>
the down-side is, that when showing several menu-items as action buttons - or when displaying extraordinary long strings as title, the title may overlap them - but when only showing one or two action buttons in combination with a title that fits the visually available width, this works just fine - that's because menu config ifRoom would always apply, because there is room. else one could only measure, which side of the toolbar has the most wide items' container - and then adjust the width on the other side's items' container. scaling the font-size depending on the available room might also be an option, to make it fit dynamically.
No official way to do it but subclassing provides most coverage without crazy tricks.
https://gist.github.com/bmc08gt/40a151e93969f2633b9b92bca4b31e83
app:contentInsetStart="#dimen/margin_64" //64dp
app:contentInsetEnd="#dimen/margin_64" // 64dp
toolabr section
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center_horizontal"
app:contentInsetEnd="#dimen/margin_64"
app:contentInsetStart="#dimen/margin_64">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Create"
android:gravity="center_horizontal"
android:textColor="#color/white"
android:textSize="18sp" />
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.AppBarLayout>
Hi I am a newbie to Android Programming using AS. This should be a common/easy problem but I have not found a solution so far.
I was creating left_ and right_fragments tags in activity_main.xml for tablets, in which I wanted to have a background color in right_fragment(temporarily set to #ffffff and keep left_fragment as default). Then the Android Lint warned that I got an Overdraw: Painting regions more than once on the right_fragment:
I tried to create a new theme:
<style name="NoBgTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:windowBackground">#null</item>
</style>
and added android:theme="#style/NoBgTheme" to right_fragment.xml, but it did not work.
Screenshot of this app w/ Debug GPU Overdraw enabled.
If I change android:theme= from "#style/AppTheme" to "#style/NoBgTheme" in AndroidManifest.xml, it worked, but all other layouts lost their backgrounds.
Any idea how to fix this OVERDRAW? Thx in advance.
activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal">
<fragment
android:id="#+id/left_fragment"
android:name="jerryc05.fragmenttest.LeftFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<fragment
android:id="#+id/right_fragment"
android:name="jerryc05.fragmenttest.RightFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
left_fragment.xml is so simple that we can just ignore it.
right_fragment.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:theme="#style/NoBgTheme"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff">
<TextView
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="This is right fragment"
android:textSize="20sp"
tools:ignore="HardcodedText" />
</LinearLayout>
AndroidManifest.xml remains unchanged.
MainActivity.java remains unchanged.
A little bit of overdraw will happen. You need to set the nobgtheme to your main activity if you want to fix the overdraw on your left fragment and right fragment display. If this only happens during tablet layouts you can check to see if this is a tablet layout being used and set the no background theme at runtime using methods described here: How to change current Theme at runtime in Android
Alright, I got an alternative solution.
I added android:theme="#style/NoBgTheme" after <activity android:name=".MainActivity" before >.
Then I manually specified android:background="#f0f0f0" and android:background="#ffffff" to left_ and right_fragment.xml respectively.
It worked so well!!!
But the Android Lint Warning still exists...(is this a bug or still my fault?)
Sorry for the question being too abstract but I really need fresh ideas.
I'm looking for a way to have multimedia keys, volume up and down and several other controls placed into an action bar in Android. Similar to the system action bar (with back and home button) I want the custom one to be visible all the time and on top of every other application's activity. The device to be used is rooted so this might make things easier. I specialize mostly in iOS development that's why I need your help.
Please if somebody has any idea please share it. I just need a direction to start.
EDIT: Sorry it seems like I haven't been understood correctly. What I meant is I want an action bar on top of every application. (Imagine the Facebook messanger's bubbles).
EDIT 2: Solution has been found: Creating a system overlay window (always on top)
First of all you should use ToolBar.
Create an xml file
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/CustomActionBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<ImageButton
android:id="#+id/vol_plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_vol_plus_24dp"
/>
<ImageButton
android:id="#+id/vol_minus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_vol_minus_24dp"
/>
<ImageButton
android:id="#+id/vol_mute"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_vol_mute_24dp"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Like this you can add controls in Toolbar and can attach in you activity
You can also layout for better view
yes you can have the action bar on top of the activity always just you ve to define the toolbar in the activity tht you arte goin to use.
// tool bar xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_action"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/ColorPrimaryDark"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
//inisde the xml
<include
android:id="#+id/toolbar_action"
layout="#layout/toolbar" >
</include>
//activity class
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);