Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

navigation header layout cutoff from top

i am using navigation view with expandable listview. i am adding header layout programmatically. but it cut off from top. if i give header layout height to 240dp than it looks ok but in lower version it take to much height. heres my header layout xml which i am inflating to header of expandable listview.

navigation_header

<?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:background="@color/colorPrimary"
              android:gravity="bottom"
              android:orientation="vertical"
              android:paddingBottom="@dimen/activity_vertical_margin"
              android:paddingLeft="@dimen/activity_horizontal_margin"
              android:paddingRight="@dimen/activity_horizontal_margin"
              android:paddingTop="@dimen/activity_vertical_margin"
    >

    <com.lib.CircleImageView
        android:id="@+id/imageViewHeaderPerson"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:src="@android:drawable/sym_def_app_icon"/>

    <TextView
        android:id="@+id/textViewName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Android Studio"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
        android:textColor="@color/DEFAULT"/>

    <TextView
        android:id="@+id/textViewCode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Base.TextAppearance.AppCompat.Body1"
        android:text="heelo"
        android:textColor="@color/DEFAULT"/>

</LinearLayout>

and my navigation layout having drawer

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
           />

    </LinearLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        >
    <ExpandableListView
        android:groupIndicator="@null"
        android:id="@+id/left_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:headerDividersEnabled="false"
        android:childDivider="#00000000"


       />
    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>
like image 360
Pramod mishra Avatar asked May 14 '16 08:05

Pramod mishra


People also ask

What is the difference between navigation bar-fixed-top and navigation bar-fixed-bottom?

The .navbar-fixed-top class makes the navigation bar fixed at the top: The .navbar-fixed-bottom class makes the navigation bar stay at the bottom: The navigation bar often takes up too much space on a small screen. We should hide the navigation bar; and only show it when it is needed.

What is a Divi header layout?

The header has a transparent background so that the content of the page/post is still visible. This menu is similar to a vertical Divi menu, but the menu items and icons are displayed vertically rather than horizontal. This is one of the cool Divi header layouts and would likely suit a more design orientated niche rather than a corporate website.

How do I add a navigation bar to the page?

A navigation bar is a navigation header that is placed at the top of the page: With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class="navbar navbar-default">. The following example shows how to add a navigation bar to the top of the page: ...

How do I align the navigation bar vertically?

Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding and text color). The navigation bar can also be fixed at the top or at the bottom of the page.


3 Answers

add your NavigationView android:fitsSystemWindows="false"

like image 80
Burak Durmuş Avatar answered Oct 07 '22 09:10

Burak Durmuş


Add top margin of action bar size in your layout, like

<ExpandableListView
    android:groupIndicator="@null"
    android:id="@+id/left_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:headerDividersEnabled="false"
    android:layout_marginTop="?attr/actionBarSize"
    android:childDivider="#00000000"
   />
like image 1
abhishesh Avatar answered Oct 07 '22 09:10

abhishesh


i solved this by using this. thanks for the comment to set navigation view below toobar.

   // Calculate ActionBar height
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            TypedValue tv = new TypedValue();
            int actionBarHeight = 0;

            if (getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) {
                actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources()
                        .getDisplayMetrics());
            }
            ViewGroup.MarginLayoutParams mlp = (ViewGroup.MarginLayoutParams) expandableListView
                    .getLayoutParams();

            mlp.setMargins(0, actionBarHeight, 0, 0);
            expandableListView.setLayoutParams(mlp);
        }
like image 1
Pramod mishra Avatar answered Oct 07 '22 09:10

Pramod mishra