Android: I have created a toolbar using Material science and I am using it in my activity. My activity contains a text view and 2 Buttons(Prev and Next). The text is multiline so I am using Scrollview,But the issue is when by adding scrollview my toolbar is also getting hidden when I scroll the Text. I understand this as I am included the toolbar inside the scrollview so it is also getting scrolled. But I only want to scroll my text not my toolbar and wants to always show my toolbar at the top. Please look at my xml file and let me know the soln.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include android:id="#+id/app_bar" layout="#layout/toolbar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/app_bar"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Singleton"
android:id="#+id/textView"
android:layout_marginTop="70dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textColor="#212121"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next"
android:id="#+id/button"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="10dp"
android:background="#color/designPrimaryBackgroundColor"
android:textColor="#FFFFFF"
android:onClick="onClick"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/single_string"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true" />
</RelativeLayout>
I am using to add the customized toolbar. Please let me know how can I include the toolbar in this file so that it wont get scrolled when I scrolled the text
You should have a LinearLayout as the main parent and have the toolbar (include) as the first child and the ScrollView as the second child
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation:vertical >
<include android:id="#+id/app_bar" layout="#layout/toolbar" />
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent" >
...
Related
i want to make a view that will be below another view and overlays it too
i made the following
<RelativeLayout android:layout_height="wrap_content" android:layout_width="wrap_content">
<include layout="#layout/toolbar" android:id="#+id/tool"
/>
<include layout="#layout/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tool"
android:layout_marginBottom="30dp"
/>
</RelativeLayout>
but it didn't work, any solutions?
First, you'll need to reverse the order of the views, toolbar should hide content_main so it should be added after it.
Second, you can use negative margins for this, you tell content_main to be below toolbar, and then put a negative top margin on it, so it moves a bit higher, and beneath toolbar.
Example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000" >
<TextView
android:text="first line, will be partially covered. fdjkfsjdf kldsjfkdsljfklds "
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
android:layout_marginTop="-20dp"
android:textSize="36sp"
android:fontFamily="sans-serif-light"
android:background="#00ff00"/>
<TextView
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#0000ff"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:textSize="36sp"
android:text="TOOLBAR" />
</RelativeLayout>
And result:
Try to use a FrameLayout, instead of RelativeLayout.
The LinearLayout that's been placed inside Toolbar is shifted to the right as you can see...
As a result, the Toolbar doesn't stack up well with the TabHost (which is again implemented with a Toolbar in a parent Fragment).
How can I fix it?
Layout sketch (Android Studio)
Actual app
Layout Code
<LinearLayout 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:orientation="vertical"
tools:context="com.android.example">
<android.support.v7.widget.RecyclerView
android:id="#+id/recview_navigator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="2dp"
android:layout_weight="1"/>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/accent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_navigator"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView_navigator_up"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_weight="1"
android:src="#drawable/ic_navigate_before_white_48dp"
android:tint="#color/recview"/>
<ImageView
android:id="#+id/imageView_navigator_save"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_weight="1"
android:src="#drawable/ic_save_white_48dp"
android:tint="#color/recview"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</LinearLayout>
Have you tried removing the content insets?
<android.support.v7.widget.Toolbar`
app:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
...>
The problem
The extra margin space is because of the toolbar tag. It has about 16dp of space by default. It is required, so that icons like hamburger,app_icon or up-caret can be shown.
How can you fix it?
Well, the hack is to include android:layout_marginLeft="-16dp" attribute in the toolbar tag, but this can mess up the layout if up-caret(back-button) is shown when a child activity is called or hamburger icon in case of a navigation drawer.
I've written about this earlier here.
If you're not going to use the functionality of toolbar then it is better to replace the whole appBarLayout with the following layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView_navigator_up"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="false"
android:src="#drawable/ic_navigate_before_white_48dp"/>
<ImageView
android:id="#+id/imageView_navigator_save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_save_black_48dp"/>
</LinearLayout>
I'm stuck with an issue and I have browsed the entire internet for a solution but nothing is working for me.
I have added an imageview inside my toolbar but it's slightly towards the right. It doesn't align centrally, it's shifted a bit towards the right. When i align the imageview to the left, there's an unknown padding/gap between the imageview and the left side of the toolbar. Following is my XML code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
tools:context=".NavigationDrawerHomeScreen.BaseActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_home_activity"
android:layout_width="match_parent"
android:layout_height="45dp"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:contentInsetStartWithNavigation="0dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/logo_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/fixer_title_thick" />
</RelativeLayout>
<android.support.v7.widget.SearchView
android:id="#+id/search_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:showAsAction="ifRoom"
android:visibility="gone">
</android.support.v7.widget.SearchView>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/home_bg" />
</FrameLayout>
<!--<TextView-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_centerInParent="true"-->
<!--android:text="this is base" />-->
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
<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:background="#2A2929"
android:backgroundTint="#2A2929"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_home_customer"
app:itemTextAppearance="#style/NavDrawerTextStyle"
app:itemTextColor="#fff"
app:menu="#menu/activity_home_customer_drawer">
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:clickable="true"
android:orientation="vertical">
<!-- any addition stuff you want in yoour footer layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="50dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set Search Radius"
android:textColor="#color/white" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:clipChildren="false">
<com.crystal.crystalrangeseekbar.widgets.CrystalSeekbar
android:id="#+id/rangeSeekbar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:bar_color="#color/blue"
app:left_thumb_color="#color/blue_dark" />
<TextView
android:id="#+id/textMin1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rangeSeekbar1"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="5dp"
android:text="0"
android:textColor="#color/white"
android:textSize="16dp" />
<TextView
android:id="#+id/textMax1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/rangeSeekbar1"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:text="100"
android:textColor="#color/white"
android:textSize="16dp" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#1E88E5">
<TextView
android:id="#+id/logout_footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:drawableLeft="#drawable/ic_logout_white_24dp"
android:drawablePadding="32dp"
android:text="Logout"
android:textColor="#fff"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
</android.support.design.widget.NavigationView>
The app:contentinset/android:contentinset solution works for some people but it doesnt work for me.
here's the image http://imgur.com/a/Vp2g6.
I had this same problem, and I tried a lot of things like setting
app:contentInsetStart ="0dp" ;
app:contentInsetStartWithNavigation = "0dp" ;
It didn't work. I even set them to a negative value, but it didn't work. I tried adding a right margin to my child view but it reduced the visible size of child view instead of occupying that left space. So probably child views are not allowed in this space.
So after spending some time I figured there are 2 ways to workaround this problem, one is preferred other I'd not prefer. First let me tell you the one I do not prefer:
Custom Implementation of the Up button: This problem only arises when in your Java Class for this layout you set this toolbar as your ActionBar and you
setDisplayHomeAsUpEnabled(true);
Without this command this problem doesn't exist. So if you don't use the default back button and implement one your own by putting an imageView and providing onClick implementation, this should work fine.
Make ChildViews as rather Siblings: The other method is using the property of toolbar of it being just another view.
I prefer this method because by using this method you can use the android's default up button. The only thing you need to do is - instead of defining child views inside the toolbar, make the child view and toolbar as siblings in a Linear or Relative Layout. This way you can reduce the left space only to "wrap_content" of the toolbar and utilise the left space in other child views. In my app, I even had an onClick functionality on the toolbar which can now be done by giving that functionality on the parent of both the layouts i.e. set the onClick on the LinearLayout.
Though I still don't know the exact reason why the left space exists or is there a way to disable it, but this is a pretty clean method to work around this.
I want is the following sort of layout:
<CoordinatorLayout>
<ToolBar></ToolBar>
<RelativeLayout></RelativeLayout>
<RecyclerView></RecyclerView>
<LinearLayout>
<EditText></EditText>
</LinearLayout>
<CoordinatorLayout>
However, my issue is when I click on my EditText, the keyboard pops up and shows the RecyclerView perfectly, but when I try to scroll further up, I can't seem to see my RelativeLayout, nor can I see my ToolBar. However, when I don't have the keyboard up, I can see everything fine. Here are some images showing what's happening:
I understand it is most likely because I don't have a parent ScrollView that nests the entire layout, but I can't seem to have that because of my RecyclerView. Is there either a. a way to implement a sort of custom RecyclerView so I can have a ScrollView parent layout or b. find some way for me to be able to scroll and see my ToolBar and RelativeLayout in addition to my RecyclerView? I've included my attempt with a ScrollView but I still can only see the RecyclerView when I click on the EditText. Any help is appreciated. Thanks!
Code:
AndroidManifest.xml:
<activity android:name=".com.tabs.activity.Comments"
android:label="View Post"
android:theme="#style/AppTheme.NoActionBar"
android:configChanges="keyboardHidden"
android:windowSoftInputMode="adjustPan|stateVisible|stateAlwaysHidden">
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value=".com.tabs.activity.news_feed"/>
</activity>
comments.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:flatui="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fresco="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/comments_coordinator_layout">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/comments_appbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/layout_comments">
<RelativeLayout
android:layout_marginTop="?attr/actionBarSize"
android:id="#+id/view_post"
android:layout_width="match_parent"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:orientation="horizontal"
android:layout_height="175dp"
android:background="#e6e6e6">
<com.facebook.drawee.view.SimpleDraweeView
android:layout_marginTop="15dp"
android:id="#+id/poster_picture"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_marginLeft="10dp"
fresco:placeholderImage="#mipmap/blank_prof_pic"
fresco:roundedCornerRadius="5dp"
fresco:roundAsCircle="true"
/>
<TextView
android:layout_marginLeft="5dp"
android:layout_marginTop="15dp"
android:layout_toRightOf="#id/poster_picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textStyle="bold"
android:id="#+id/poster_name"/>
<TextView
android:layout_alignParentRight="true"
android:layout_marginTop="15dp"
android:layout_toRightOf="#id/poster_name"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:id="#+id/post_date"/>
<TextView
android:layout_marginLeft="5dp"
android:layout_toRightOf="#id/poster_picture"
android:layout_below="#id/poster_name"
android:textSize="20sp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/view_status" />
</RelativeLayout>
<LinearLayout
android:id="#+id/send_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<com.cengalabs.flatui.views.FlatEditText
android:id="#+id/write_comment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
android:paddingLeft="10dp"
android:gravity="bottom|left"
android:cursorVisible="false"
android:hint="Comment back!"
android:inputType="textMultiLine"
flatui:fl_fieldStyle="fl_box"
android:scrollHorizontally="false" />
<com.cengalabs.flatui.views.FlatButton
android:id="#+id/send_comment"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:text="send"
flatui:theme="#array/sea"
flatui:fl_textAppearance="fl_light"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/view_post"
android:layout_above="#id/send_message"
android:id="#+id/view_comments">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
</ScrollView>
</android.support.design.widget.CoordinatorLayout>
According to:
I understand it is most likely because I don't have a parent
ScrollView that nests the entire layout, but I can't seem to have
that because of my RecyclerView. Is there either a. a way to
implement a sort of custom RecyclerView so I can have a ScrollView
parent layout or b. find some way for me to be able to scroll and see
my ToolBar and RelativeLayout in addition to my RecyclerView?
I've included my attempt with a ScrollView but I still can only see
the RecyclerView when I click on the EditText. Any help is
appreciated. Thanks!
So you need to extend range of existing ScrollView view. Just put AppBarLayout and RelativeLayout view into new vertical oriented 'LinearLayout', as ScrollView takes only one view. This new created ViewGroup would be an only child of 'CoordinatorLayout'.
Once you wrap AppBarLayout and RelativeLayout' into new madeLinearLayout, put it into existingScrollView`.
Hope you now understand how to do it. If not, tell me and I would tomorrow in the early morning edit my post and change your actual code with desired one.
put your <RecyclerView> in the one <LinearLayout>
and set your linearlayout as match_parent but in your RecyclerView set height="0dp" and use weight="1" like this :
<CoordinatorLayout>
<ToolBar></ToolBar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></RecyclerView>
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_anchorGravity="bottom"></EditText>
<CoordinatorLayout>
and then, when your keyboard opens your recyclerview will not be under keyboard and your can scroll to see items under keybard
good lock
I am trying to place a RelativeLayout within a Toolbar so that I can position views easily within the Toolbar. This Toolbar is used in standalone mode and has two menu items.
I have this in my layout 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"
tools:context=".MainActivity"
android:background="#ffffff">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:elevation="3dp"
android:background="#ff17182b">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f76865"
android:layout_gravity="center_horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textSize="17sp"
android:textStyle="bold"
android:textColor="#ffffff"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFD10202"
android:elevation="3dp"
android:text="Stopped"
android:textColor="#ffffff"
android:padding="2dp"
android:layout_marginTop="50dp"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
http://i.imgur.com/XLZx7Ts.png is a link to a screenshot of the resulting UI
With the layout above, the RelativeLayout is positioned to the left and its right border stops just at the left border of the toolbar menu items. it is as if the menu items cover the area from the top of the screen to the end of the toolbar and won't allow placing of elements within that area
Please, I need to know if I am doing anything wrong or if there is a right way of positioning views within a toolbar