Android Studio "Bottom Navigation Activity" template leaves blank area on the top
I created new Android project by selecting “Bottom Navigation Activity”. No other change. Only modify “fragment_notifications.xml” by adding background attribute to set background to black.
My question is:
- a) Why the fragment in black doesn't start right next to the blue title area, but leaving 1~2 cm blank on the top? What's the purpose of this area in the template? I don't think I'm so "lucky" to find bug obvious like this.
- b) How to eliminate the blank area. I tried modifying "activity_main.xml" and "fragment_notifications.xml" adjusting width/height and constraint attributes but none of them works.
Thanks for your time in advance.
I'm using Android Studio 4.1.1 and running the code on AVD Nexus 6 API 26, below is the source code of related files. All generated by Android Studio except the background of notification fragment.
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/bottom_nav_menu" />
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="@id/nav_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
mobile_navigation.xml as below:
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/mobile_navigation"
app:startDestination="@+id/navigation_home">
<fragment
android:id="@+id/navigation_home"
android:name="com.guo.butnavtest.ui.home.HomeFragment"
android:label="@string/title_home"
tools:layout="@layout/fragment_home" />
<fragment
android:id="@+id/navigation_dashboard"
android:name="com.guo.butnavtest.ui.dashboard.DashboardFragment"
android:label="@string/title_dashboard"
tools:layout="@layout/fragment_dashboard" />
<fragment
android:id="@+id/navigation_notifications"
android:name="com.guo.butnavtest.ui.notifications.NotificationsFragment"
android:label="@string/title_notifications"
tools:layout="@layout/fragment_notifications" />
fragment_notifications.xml as below:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:background="@color/black"
tools:context=".ui.notifications.NotificationsFragment">
<TextView
android:id="@+id/text_notifications"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java as below:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
BottomNavigationView navView = findViewById(R.id.nav_view);
// Passing each menu ID as a set of Ids because each
// menu should be considered as top level destinations.
AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications)
.build();
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
NavigationUI.setupWithNavController(navView, navController);
}
}
Why the fragment in black doesn't start right next to the blue title area
The reason: The activity_main.xml root layout (ConstraintLayout) has a paddingTop attribute that adds this top blank space which equals to the size of the ActionBar
android:paddingTop="?attr/actionBarSize"
The height of ActionBar size equals to 56dp
<dimen name="abc_action_bar_default_height_material">56dp</dimen>
How to eliminate the blank area.
Get rid of it.
UPDATE:
a) What's the potential use of this padding, why the template leaves this padding? Never see an App with action bar under title bar
This could have opinion-based answers according to your design, but generally-speaking, you can think of it as a space for a subheader .. or maybe because the ActionBar can hold a limited width title.. here you can find several design guidelines and uses of that.
b)The constraint layout is the root node of this UI. But why the paddingTop isn't above the title area?
That is because the root layout size starts from the bottom of the default ActionBar which is set using App theme in styles.xml... You can verify that when you add a View at the top most part of the root layout, .. this view will be laid out directly below the ActionBar not behind it.