I have an application that uses a sliding drawer. I had to make some changes, the sliding drawer content was a simple relative layout but I had to change it to include a fragment.
this is the slider layout before the changes:
<SlidingDrawer
android:id="#+id/drawer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal"
android:handle="#+id/handle"
android:rotation="180"
android:content="#+id/content">
<ImageView
android:id="#id/handle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/handle"
android:rotation="180"
/>
<RelativeLayout
android:id="#id/content"
android:background="#drawable/border"
android:layout_width="140dip"
android:layout_height="fill_parent"
android:orientation="vertical"
android:rotation="180"
android:focusable="true"
android:focusableInTouchMode="true">
<EditText
android:drawableLeft="#android:drawable/ic_menu_search"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:id="#+id/editInp"
android:layout_marginLeft="20dip"
android:imeOptions="actionDone"
android:layout_marginRight="20dip"
android:layout_marginTop="15dip"
android:hint=""
android:textColor="#color/themeapp"
android:background="#drawable/layout_corner_white"
android:singleLine="true"
android:inputType="textNoSuggestions"/>
<ImageView
android:id="#+id/clear_button"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginTop="23dip"
android:layout_alignRight="#id/editInp"
android:src="#android:drawable/ic_menu_close_clear_cancel"/>
<RelativeLayout
android:id="#+id/progress_conteiner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/footer1"
android:layout_below="#+id/header1"
android:visibility="gone">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
style="?android:attr/progressBarStyle"/>
</RelativeLayout>
<ExpandableListView
android:id="#+id/list"
android:layout_below="#+id/editInp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dip"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:divider="#color/themeapp"
android:dividerHeight="1dp"
android:indicatorRight="300dp" />
</RelativeLayout>
</SlidingDrawer>
after the changes it looks like this:
<SlidingDrawer
android:id="#+id/drawer"
android:layout_width="140dp"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal"
android:handle="#id/handle"
android:rotation="180"
android:content="#id/content_frame">
<ImageView
android:id="#+id/handle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/handle"
android:rotation="180"
/>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="140dp"
android:layout_height="fill_parent" >
</FrameLayout>
</SlidingDrawer>
java code to inflate the fragment:
getActivity().getSupportFragmentManager().beginTransaction().add(R.id.content_frame, new FragmentFleetListMap(this)).commit();
the previous slider content, has been moved (unchanged) to a separate layout file to be used in the newly created fragment.
before, the slider worked weel, but now I see the fragment content overlapped to the activity content (see screeenshot below), is also not limited to the slider space but takes up the whole screen
as you can see in the screenshot the slider is open and it takes the correct portion on the screen (see the position of the handler [the little orange rectangle in the middle of the right side), so I think the problem is actually that the fragment content is not being positioned inside the slider
can anybody help me with this?
looks like this line:
getActivity().getSupportFragmentManager().beginTransaction().add(R.id.content_frame, new FragmentFleetListMap(this)).commit();
was "adding" my fragment containing the list over the mapfragment instead of the frameLayout. changing it to:
getChildFragmentManager().beginTransaction().add(R.id.content_frame, new FragmentFleetListMap(this)).commit();
solved the problem
Related
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 want to make my layout like this as per below picture. this image i am able to see in iphone devices.
Here i used frame layout to achieve make overlays of top and bottom image bar on imageview but after using frame layout i can only able to see top imagebar overlay not bottom image bar? why its happens?
Forgot about the content of top and bottom iamge bar.. i am focusing to achieve this functionality.
Please make me correct if i am wrong in my code.
xml file code :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<include
android:id="#+id/top_bar"
layout="#layout/item_below_image_bar"
android:gravity="top" />
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="fitXY" />
<include
android:id="#+id/below_bar"
layout="#layout/item_below_image_bar"
android:gravity="bottom" />
</FrameLayout>
per android documentation
Child views are drawn in a stack, with the most recently added child on top.
so you need to arrange your layout as follows
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="fitXY" />
<include
android:id="#+id/top_bar"
layout="#layout/item_below_image_bar"
android:gravity="top" />
<include
android:id="#+id/below_bar"
layout="#layout/item_below_image_bar"
android:gravity="bottom" />
</FrameLayout>
in this case the actual location of the view is not determined by the order that the views are declared in the xml. For a linear layout this would be true however not so with the FrameLayout, in a framelayout the location is determined by gravity so your views will still be placed in the correct locations and they will be loaded in order they were declared, so first is the image view, then the first include is placed on top of that, then the second include is placed on top of that (however in this case they dont intersect so it doesn't matter).
edit2: after chatting with sam we were able to figure out the problem here's our solution
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:id="#+id/greenImage"
android:src="#2dff3d"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignParentRight="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Label"
android:id="#+id/textView"
android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignParentRight="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Label"
android:id="#+id/textView1"
android:layout_centerVertical="true"/>
</RelativeLayout>
</FrameLayout>
note the usage of layout_gravity as apposed to just gravity.
I am using the sliding menu in my application
After clicking on the setting icon I go the following result
The content in the first layout is wrapping, instead I want to hide that part of view
Xml file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/menu_bg"
tools:context=".PrincipalActivity" >
<include layout="#layout/actionbar_menu" android:id="#+id/actionBarMenu"/>
//listview for displaying menu
<ListView
android:id="#+id/listMenu"
android:layout_below="#+id/actionBarMenu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#282828"
android:dividerHeight="1dip"
android:background="#3F3F3F"
android:fadingEdge="none"
android:listSelector="#drawable/list_selector">
</ListView>
//this is main layout which is visible first time when application starts
<RelativeLayout
android:id="#+id/layoutToMove"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/actionBar"
android:background="#282828">
<include layout="#layout/actionbar_layout" android:id="#+id/actionBar"/>
<ImageButton
android:id="#+id/menuButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignBottom="#+id/actionBar"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:onClick="openCloseMenu"
android:src="#drawable/menu"
android:background="#android:color/transparent" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="asdkjasdksajdkasjdkasjdkasdddddddddddddddddddddddddddddd"
android:textColor="#fff"
android:layout_centerVertical="true"/>
<Button
android:id="#+id/separator"
android:layout_width="1dp"
android:layout_height="50dp"
android:layout_toRightOf="#+id/menuButton"
android:background="#drawable/custom_button_black" />
</RelativeLayout>
Any kind of help will be greatly appreciated
You should consider using jfeinstein10's SlidingMenu. It is quite good and is widely used by many popular Android apps such as Foursquare Rdio, Falcon Pro, ...etc
I want to create a Wizard like layout which should look like described:
* at the top should be some kind of title of the current dialog
* at the bottom should be a navigation bar containg buttons for next/previous and various operations. THis bar should always(!) be at the very bottom of the screen.
* at the center should be a list (should use all the space left, except the title bar and the navigation bar described above)
My first attempt is posted below. I used framelayout however I was told this is a bad idea. The problem I ran into is that last row of my list is below the bar with the buttons at the bottom of the screen. Do you have any suggestions on how I could solve my Problem?
Thanks
Here's my not working draft:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical" >
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal" style="#android:style/ButtonBar">
<ImageView android:src="#drawable/person"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/personstring"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textStyle="bold" android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<ListView android:visibility="visible" android:id="#android:id/list"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout android:id="#+id/footer"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_gravity="bottom|center"
android:layout_alignParentBottom="true" style="#android:style/ButtonBar">
<ImageButton android:id="#+id/loacreation.previousButton"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1" android:src="#drawable/buttonarrowleft" />
<ImageButton android:id="#+id/loacreation.nextButton"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1" android:src="#drawable/buttonarrowright" />
</LinearLayout>
</FrameLayout>
Use a RelativeLayout as your outermost container, and the LinearLayout that contains your buttons can have android:layout_alignParentBottom="true".