In my Nav Drawer, I have a ListView and below that some ImageButtons. To show the Listview on top and rest of the views at the bottom of the screen, I used relative layout as below.
In this scenario, when I rotate my phone to horizontal orientation (e.g. not enough length to show ListView and others), the ImageButtons overlap the ListView (like floating DIVs in HTML).
I tried using LinearLayout with layout_gravity = "bottom" for the container of ImageButtons, but then the buttons were placed adjacent to the Listview, rather than at the bottom of the scren.
Please guide me how to implement this correctly.
<!-- Framelayout to display Fragments -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start">
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="240dp"
android:layout_height="wrap_content"
android:layout_gravity="start" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<LinearLayout
android:id="#+id/extrabuttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/credit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/information" />
<ImageButton
android:id="#+id/exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_exit" />
</LinearLayout>
<TextView
android:id="#+id/ad"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/extrabuttons"
android:gravity="start"
android:text="#string/ad_tag" />
</RelativeLayout>
</RelativeLayout>
This is what it should be looked like & how it is looked like in vertical mode
This is how it is looked like in horizontal mode
The layout components are overlapped because you have used Relative layout as parent.Try to use Linear layout with vertical orientation, instead of Relative layout.
Then Try to do this
<LinearLayout
android:id="#+id/drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:orientation="vertical" >
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="240dp"
android:layout_height="0dp"
android:layout_gravity="start"
android:layout_weight="6" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/extrabuttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/credit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<TextView
android:id="#+id/ad"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/extrabuttons"
android:gravity="start"
android:text="string/ad_tag" />
</RelativeLayout>
</LinearLayout>
I know my answer is bit late. I will suggest to make seperate xml layout and add this layout to listview with 'addFooterView' method. It will bound that xml always in last of that list view. I hope it will help you.
Related
I followed up the android docs to build a navigation drawer on my app main activity. But the contents are in a string array in my main activity java code. The listview elements are not lined up.
How do I make them lined up to the left so they all are aligned equal distance from the left side of the screen? I also want this behavior in portrait and layout modes.
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"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="fill_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="#+id/adla"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tvan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#color/blue"
android:textSize="#dimen/abc_action_bar_default_height_material"
android:text="#string/app_name" />
<AutoCompleteTextView
android:id="#+id/acgetd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="center_horizontal" />
<requestFocus />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_gravity="bottom" >
<Button
android:id="#+id/bgetd"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/skimmy"
android:text="#string/bgetd" />
<Button
android:id="#+id/brejec"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/skimmy"
android:text="#string/reject" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
<ListView
android:id="#+id/MList"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111">
</ListView>
</android.support.v4.widget.DrawerLayout>
From the link you shared, there is a layout R.layout.drawer_list_item. there is an XML layout called drawer_list_item.xml. this is the file responsible for all the item in the listView.
check for gravity in the XML and remove it or set the property to alignParentLeft
You should NOT be creating this yourself, and instead should be using the AppCompat provided NavigationLayout for this.
This is designed to set this all up for you using just menu.xml files, and using this control will ensure your drawer matches the guidelines exactly.
http://developer.android.com/reference/android/support/design/widget/NavigationView.html
I think your Text of ListView is align to the center,
android:layout_gravity="center
change that to right or left according to your requirement
which may help
I suspect that you are using android:gravity="center" instead of android:gravity="center_vertical" in the TextView for the List.
i need to add header image like this Post :
can I add an image header in navigation drawer layout
but, im using android studio sample navigation drawer for doing this.
it is good or bad for design this ?
and the better way or Compact way for doing this ?
any suggestion ?
thanks.
Can I add an Image Header in Navigation Drawer Layout?
Yes you can add with no problems.
If you use android studio navigation drawer or some thing else every thing are same. Some additional methods will be present and you need to check the methods required by you and delete other methods. You may also need to add few methods.
As per the latest android, best way of designing navigation drawer is by using recycler view and by using material design.
There are lot of materials in google for doing this, one of the finest tutorials I prefer is in the link given below you can have a look:
https://www.youtube.com/watch?v=zWpEh9k8i7Q&list=PLonJJ3BVjZW6CtAMbJz1XD8ELUs1KXaTD&index=6
Hope it helps.
In the menudrawer activity setcontentview(layout).Inside this layout
try to add an imageview.My sample xml is as folllows
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:background="#android:color/transparent"
android:layout_height="match_parent" />
<!-- android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
The drawer is given a fixed width in dp and extends the full height of
the container. A solid background is used for contrast
with the content view. -->
<LinearLayout
android:layout_height="match_parent"
android:layout_width="120dp"
android:weightSum="7"
android:layout_gravity="start"
android:id="#+id/parentlayoutt"
android:choiceMode="singleChoice"
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:id="#+id/headerimage"
android:src="#drawable/yourimage"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/parentmenuone"
android:soundEffectsEnabled="true"
android:descendantFocusability="blocksDescendants"
android:background="#color/pure_white"
>
<ImageButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/birdwhite"
android:background="#color/white"
android:id="#+id/sidejive1"
android:clickable="false"
android:layout_centerInParent="true"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/sidejive1"
android:id="#+id/title1"
android:clickable="false"
android:textColor="#color/violetbg"
android:text="#string/createmenu"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:descendantFocusability="blocksDescendants"
android:id="#+id/parentmenutwo"
android:background="#drawable/whitebox"
>
<ImageButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/profilewhite"
android:background="#color/white"
android:id="#+id/sidejive2"
android:clickable="false"
android:layout_centerInParent="true"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/sidejive2"
android:id="#+id/title2"
android:clickable="false"
android:textColor="#color/violetbg"
android:text="#string/Accountmenu"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:descendantFocusability="blocksDescendants"
android:id="#+id/parentmenuthree"
android:background="#drawable/whitebox"
>
<ImageButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/homewhite"
android:background="#color/white"
android:id="#+id/sidejive3"
android:clickable="false"
android:layout_centerInParent="true"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/sidejive3"
android:id="#+id/title3"
android:textColor="#color/violetbg"
android:text="#string/Dashboardmenu"
android:clickable="false"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/parentmenufour"
android:descendantFocusability="blocksDescendants"
android:background="#drawable/whitebox"
>
<ImageButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/examplewhite"
android:background="#color/white"
android:id="#+id/sidejive4"
android:clickable="false"
android:layout_centerInParent="true"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/sidejive4"
android:id="#+id/title4"
android:textColor="#color/violetbg"
android:text="#string/Examplemenu"
android:clickable="false"
/>
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
I am trying to set my ImageButtons in a horizontal scroll view that appears under the frame layout. Below is what I have done so far. However, this scrolls everything, including my frame layout. How do I avoid that? Or in another way to look at it, I'm trying to take my navigation drawer and lay it down instead of popping out from the side? Maybe there's a way to replicate that? Overall goal is to get something that looks similar to the old blackberry scroll menu.
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DMActivity">
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="900px"></FrameLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/container"
android:src="#drawable/directmessage_button"
android:id="#+id/btn_DirectMessages"
android:background="#0000"
android:padding="20px"
android:focusableInTouchMode="false" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/container"
android:src="#drawable/instantmessage_button"
android:id="#+id/btn_InstantMessage"
android:layout_toRightOf="#+id/btn_DirectMessages"
android:background="#0000"
android:padding="20px"
android:focusableInTouchMode="false"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/container"
android:layout_toRightOf="#+id/btn_InstantMessage"
android:src="#drawable/reports_button"
android:id="#+id/btn_Reports"
android:background="#0000"
android:padding="20px"
android:focusableInTouchMode="false"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/conference_button"
android:id="#+id/btn_Conference"
android:layout_toRightOf="#+id/btn_Reports"
android:layout_below="#+id/container"
android:background="#0000"
android:padding="20px"
android:focusableInTouchMode="false"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/account_button"
android:id="#+id/btn_Account"
android:layout_toRightOf="#id/btn_Conference"
android:layout_below="#+id/container"
android:background="#0000"
android:padding="20px"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/filetransfer_button"
android:id="#+id/btn_FileTransfer"
android:layout_below="#id/container"
android:layout_toRightOf="#+id/btn_Account"
android:background="#0000"
android:padding="20px"/>
</RelativeLayout>
</HorizontalScrollView>
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:name="datamotion.dmandroidclient.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
I don't know if I understood well, but I use this library to do horizontal scroll, you can implement this horizontal listView and inside it put your ImageButtons just like you would do with a vertical ListView.
https://github.com/sephiroth74/HorizontalVariableListView
Hope it helps you.
i am using the following xml file in navigation drawer
XML:
<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
</FrameLayout>
<!-- android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
The drawer is given a fixed width in dp and extends the full height of
the container. A solid background is used for contrast
with the content view. -->
<RelativeLayout
android:layout_width="240dp"
android:layout_height="fill_parent"
android:layout_gravity="start"
android:id="#+id/drawer_frame"
android:background="#drawable/list_selector"
>
<LinearLayout
android:id="#+id/header"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:background="#drawable/list_selector"
android:clickable="true"
android:onClick="Login"
>
<ImageView
android:id="#+id/DisplayImage"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="5dp"
android:src="#drawable/displayimage"
android:contentDescription="#string/contentdescription"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="vertical" >
<TextView
android:id="#+id/Displayname"
android:layout_marginLeft="3dp"
android:layout_marginTop="5dp"
android:layout_marginRight="3dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/counter_text_color"
android:textSize="14sp"
android:text="#string/Signin"
android:gravity = "center"
/>
</LinearLayout>
</LinearLayout>
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#color/card_background"
android:dividerHeight="1dp"
android:background="#drawable/list_selector"
android:layout_marginTop="5dp"
android:layout_below="#+id/view1"
/>
<include android:id="#+id/progressinformation" layout="#layout/emptyview"/>
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/header"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:background="#color/card_background"
/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
i am setting include as an Empty view for left_drawer (left_drawer.setEmptyView(R.id.progressinformation)).
my problem is, suppose if listview is empty when i click on the navigation drawer the elements behind the navigation drawer are selecting. how to avoid this selection when listview is empty.
Not sure if understand correctly but you have to set navigation drawer layout param clickable to true
<RelativeLayout
android:layout_width="240dp"
android:layout_height="fill_parent"
android:layout_gravity="start"
android:id="#+id/drawer_frame"
android:background="#drawable/list_selector"
android:clickable="true"
>
http://developer.android.com/design/patterns/navigation-drawer.html
I am working on navigation-drawer. The code suggested that I use a navigation drawer like this:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<ListView android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
The framelayout would store the fragment and the left_drawer is the left menu, the problem is , I would like to add a view between left_drawer and framelayout, which is
left_drawer on top of my view , my view on top of framelayout. How to implement such layout? or I need to add my view to every fragment ?
Thanks
Updated:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!--
As the main content view, the view below consumes the entire
space available using match_parent in both dimensions.
-->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--
android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
The drawer is given a fixed width in dp and extends the full height of
the container. A solid background is used for contrast
with the content view.
-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<TextView
android:id="#+id/bottomMenu1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/bottom_menu_unchecked"
android:gravity="center"
android:text="#string/bottom_menu_1"
android:textColor="#ffffff"
android:textSize="20sp" />
<TextView
android:id="#+id/bottomMenu2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/bottom_menu_unchecked"
android:gravity="center"
android:text="#string/bottom_menu_2"
android:textColor="#ffffff"
android:textSize="20sp" />
<TextView
android:id="#+id/bottomMenu3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/bottom_menu_unchecked"
android:gravity="center"
android:text="#string/bottom_menu_3"
android:textColor="#ffffff"
android:textSize="20sp" />
<TextView
android:id="#+id/bottomMenu4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/bottom_menu_unchecked"
android:gravity="center"
android:text="#string/bottom_menu_4"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="0dip"
android:layout_gravity="start"
android:layout_weight="1"
android:background="#111"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>
Put a View above a ListView, and wrap it inside a vertical LinearLayout . Give to your ListView android:layout_weight="1" and android:layout_height="0dip"