I am very beginner in android. I am trying to design a screen, in which I had selected the navigation drawer template when I created the project. So the basic things required are in place, like toolbar on the top and a drawer menu icon on the left. Now i want to place an imageview below the toolbar and a list view below the imageview. I am using the following xml for the layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
<ImageView
android:id="#+id/sliderTempImageView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="fitXY"
android:src="#drawable/slider_image1" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
But the image covers the toolbar and fit the entire screen, even I had given fixed height of 100dp. Once the image view had set properly, I need to add list view also below the imageview.
My answer in comment : Add the ImageView in app_bar_main layout.
Reason why your code didn't work :
As per DrawerLayout specification
DrawerLayout acts as a top-level container for window content that allows for interactive "drawer" views to be pulled out from one or both vertical edges of the window.
To use a DrawerLayout, position your primary content view as the first child with width and height of match_parent and no layout_gravity because the XML order implies z-ordering and the drawer must be on top of the content . Add drawers as child views after the main content view and set the layout_gravity appropriately. Drawers commonly use match_parent for height with a fixed width.
Note the statement position your primary content view as the first child. In your case you want to place an ImageView below the Toolbar which means you want to modify the primary content. And the primary content is located inside app_bar_main layout.
But the image covers the toolbar and fit the entire screen, even I had given fixed height of 100dp
It is because Drawers commonly use match_parent for height with a fixed width.
Also remove the RelativeLayout from the main layout as it is useless. Make the DrawerLayout as the root layout.
References :
https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html
https://developer.android.com/training/implementing-navigation/nav-drawer.html
Give an id to the app bar include:
android:id="#+id/mToolbar"
And add this in your ImageView:
android:layout_below="#id/mToolbar"
Since you're using RelativeLayout, you can use the layout below, above and other attributes to position your views.
Hint: Avoid hardcoding your values. Use match_parent or wrap_content or use your dimens.xml file to declare your values.
Actually RelativeLayout have feature to arrange its child below/above/left/right/center/top/bottom one layout to other using below property
BELOW
ABOVE
LEFT_OF
RIGHT_OF
CENTER_IN_PARENT
ALIGN_PARENT_TOP
ALIGN_PARENT_BOTTOM
Related
I have this ScrollView Which contains a ConstraintLayout with wrap_content height
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:ignore="ContentDescription">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
----------------
----------------
----------------
----------------
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Currently I am having one ImageView inside ConstraintLayout. which comes at the Bottom when I get the data from server.
But When I am in processing state , I see the image in the middle of the screen. That I want show at the bottom.
I want to place the ImageView at the bottom in such a manner that after getting data from server, it should come at the last after scrolling the screen and in the processing state It should be seen at the bottom.
try to set android:fillViewport="true" for ScrollView. this will make child of ScrollView (in your case ConstraintLayout) fulfil height of ScrollView in case when it have smaller height (so probably when you have only one ImageView inside). for testing just set some fixed color background for ConstraintLayout and check with and without this flag (by default its false)
I would like to display on the bottom of the view frame layout which has some layouts inside of the FrameLayout hidden and are displayed after some button click. I would like to display the FrameLayout to start from bottom of the screen above all other views.
How can i do it in the right way please?
Many thanks for any advice.
I have implemented something similar to what you would like to achieve...first of all you should place your entire Activity of Fragment layout inside a CoordinatorLayout. Then you should place the FrameLayout which you want to show above all other views as the last View inside the CoordinatorLayout. You could give the FrameLayout a fixed height(200px) and the same negative value as margin bottom(-200px) so it can not be visible in the first place. And after some button click you can animate your desired view (in this case FrameLayout) to overlap all other views starting from the bottom of the screen.
<?xml version="1.0" encoding="utf-8"?>
<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"
android:orientation="vertical">
//Your views here
<FrameLayout //Your FrameLayout
android:layout_width="match_parent"
android:layout_height="200px" android:layout_marginBottom="-200px">
//Place whatever views you prefer here
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
Since Android Support Library 23.2 you can use Materials Bottom Sheets like the Google Map one:
Include the support design library (use the most recent version):
compile 'com.android.support:design:24.1.1'
You are supposed to use a component which is aware of nested scrolling like NestedScrollView (which extends FrameLayout by the way) and RecyclerView inside a CoordinatorLayout and add this behavior to it:
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
And to make it visible on the bottom just a little:
app:behavior_peekHeight="64dp"
Im my app i have an Activity called MainActivity it contains a dynamic fragment with id container which i switch depending on state usually my app can be in the state Syncing or Regular now i wan't to add a NavigationDrawerto and i want it to be visible in the ActionBar and on the left only if the MainActivityis not on the Syncingstate since that if the Activity Synching i should not be abble to use the drawer to navigate in my app.
Im using the following activity layout
<!-- 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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="pt.ecs.myenergy.MainActivity">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/container"
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.
If you're not building against API 17 or higher, use
android:layout_gravity="left" instead. -->
<!-- The drawer is given a fixed width in dp and extends the full height of
the container. -->
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:name="---------.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
The question is for a clever/best way to achieve this. I tought of a few but im not sure which one to use:
Have two xml layouts for the activity, one with the drawer included other without it and use setContentView which would cause for the xml to be inflated not sure if this is a good aproach
Use the merge tag with two childs one the drawer layout (with the container) other with only the container (for the syncing)
I would suggest doing none of those options. They both seem over complicate for no good reason for me.
you should lock the drawer closed using: drawer.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)
and if you're also using the an ActionBarDrawerToggle you disable it's indicator with drawerToggle.setDrawerIndicatorEnabled(false)
I want to overlay an image above all activities after some operation to have a feel like phone is locked. How can I do this programmatically in android ?
You can set a FrameLayout at the end of you XML layout file with an ImageView and "match_parent" dimension for both length and height. Set it's visibility to "gone" in the XML layout file. and the problematically in your code change it's visibility to visible to show this full screen Image and hide all the other components that are laid below it.
For example in your XML file put this at the end of the XML:
<FrameLayout
android:id="#+id/lockScreenLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/your_iamge"
android:contentDescription="#drawable/your_iamge" />
</FrameLayout>
So it would be the child of your root xml element.
and then in code, do this:
lockScreenLayout = (FrameLayout) findViewById(R.id.lockScreenLayout);
lockScreenLayout.setVisibility(View.VISIBLE);
One simple solution consists in setting your image as the background of the root view of your activities.
I am trying to make a selection ListActivity, similar to the one used to add shortcuts to the launcher screens. I have rolled my own header and footers, which I would like to be "sticky" at the top and bottom of the view when on screen. In order to do this, I am using a RelativeLayout with the header set to dock to top, footer set to dock to bottom, and the list set to go below the header and above the footer. In terms of the overall layout of the activity, this is rendering as I would expect. The header is sticky to the top, the footer is sticky to the bottom, and the list scrolls in between them.
One odd thing though happened when I switched to the RelativeLayout as my root. Please see the following screenshot:
I want my Activity's height to be wrap_content, so that the form is only as high as the content displayed in it, but once i switched to RelativeLayout, it seems to render the Activity effectively as fill_parent, taking up the whole screen, even though the content doesn't warrant it. Notice that there are not enough list items to fill the screen, which with the fill_parent style, is leaving a bunch of whitespace between the end of the list, and the footer. I was setting my height's via styles - which worked fine with LinearLayout, but seems to be ignored now. So I tried hard-coding the height directly on the RelativeLayout, but it still doesn't work and still renders as fill_parent.
Here is my layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/GroupsList"
android:layout_height="wrap_content">
<FrameLayout android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/hdrGroups"
android:layout_alignParentTop="true">
<include layout="#layout/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</include>
</FrameLayout>
<FrameLayout style="#style/MyFooter"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:id="#+id/ftrGroups">
<ImageView style="#style/CloseButton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/add"
android:id="#+id/imgGroupsAdd"
android:clickable="true">
</ImageView>
</FrameLayout>
<ListView android:divider="#9f9f9f"
android:id="#+id/android:list"
android:choiceMode="singleChoice"
android:dividerHeight="1dp"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_below="#id/hdrGroups"
android:layout_above="#id/ftrGroups">
</ListView>
<TextView android:text="#string/browser_no_groups"
style="#style/ListedItemB"
android:id="#+id/android:empty"
android:layout_height="wrap_content"
android:layout_above="#id/ftrGroups"
android:layout_below="#id/hdrGroups"
android:layout_width="fill_parent">
</TextView>
</RelativeLayout>
All layout is done via XML, ... I am not doing any layout in code.
How can I get the sticky header and footer while also having the activity as a whole behave in a wrap_content mode for its height? Is there some other way I should be going about this instead of a RelativeLayout?
According to the developer documentation your desired behaviour is not possible for Relative layout ;
"Note that you cannot have a circular dependency between the size of
the RelativeLayout and the position of its children. For example, you
cannot have a RelativeLayout whose height is set to WRAP_CONTENT and a
child set to ALIGN_PARENT_BOTTOM."
RelativeLayout
To solve your problem you could maybe try to use a linear layout, set to wrap_content and set max height via code to screen height.
You can get the screen height as described here : get screen height
I just change my RelativeLayout in FrameLayout and all starts to work