How to set Custom ActionBar to fixed top position inside ScrollView layout? - android

How do I set this action bar in a way even when scroll the long data screen it keeps visible on the top of the screen?
toolbar.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
Guys please see my update:
I tried everything but it seems that next component after actionBar is not being set after actionBar but behind it:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#drawable/background_telas"
android:orientation="vertical" >
<include layout="#layout/toolbar" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:id="#+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</ScrollView>
</LinearLayout>
<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/actionBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/actionBarBackgroundColor"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp" >
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#A0A09F" />
Project (eclipse):
Screen stopped:
Screen scrolled up:
Java:
Toolbar actionBar = (Toolbar) findViewById(R.id.actionBar);
actionBar.setTitle("ProTaxi Passageiro");
actionBar.setSubtitle("Cadastro");
actionBar.setTitleTextColor(Color.parseColor("#846A1A"));
setSupportActionBar(actionBar);

If you don't want the Toolbar to scroll with the content, then you have to put it outside the ScrollView.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar" />
<ScollView
...>
you content here..
</ScollView>
</LinearLayout>

You can also set the layout_scrollFlags to enterAlways to get rid of the toolbar scrolling.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>

I had a similar problem with the layout behind the toolbar, setting fixed height to the Toolbar helped me, try android:layout_height="?attr/actionBarSize". Also use the layout #Floern adviced you.

To fix the layout above the bar, try doing the following. Wrap the whole activity in a relative layout. Then give an id to the Top Action Bar Relative layout. Afterwards on your scroll view, add this line layout_below/#id/top_profile_bar to have the layout scroll below the bar.
<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">
<!--Top Action Bar-->
<RelativeLayout
android:id="#+id/topprofilebar"
android:layout_width="match_parent"
android:layout_height="50dp">
<include layout="#layout/top_actions_bar" />
</RelativeLayout>
<!--Add a layout_below/#id/top_profile_bar to have it below the bar-->
<ScrollView
android:layout_below="#id/topprofilebar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Some Content-->
</ScrollView>
then in your top_actions_bar.xml add app:layout_scrollFlags="enterAlways" to the tool bar.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/profileToolBar"
app:layout_scrollFlags="enterAlways"
android:background="#drawable/bg_white_grey_border_bottom">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ivBack"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<TextView
android:layout_toRightOf="#+id/ivBack"
android:id="#+id/top_actions_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:textSize="20sp"
android:textColor="#color/colorBlack"
android:layout_marginLeft="15dp"
android:text="Scoper Settings"
/>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
Hope this helps!

Related

How to add button to a view pager in Android Studio?

I want to add a button to a View Pager. Tried adding button, fragment, and layout without success.
I've also tried this:
Add button to ViewPager
But it didn't work.
This is my layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context="com.airpal.yonatan.airpal.MainActivity_User">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBarLayout">
<include layout="#layout/app_bar_layout" android:id="#+id/main_page_toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/white">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_tabPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/appBarLayout">
</android.support.v4.view.ViewPager>
</LinearLayout>
This is the screen shot, I want to add the button on the bottom of the page.
Thanks.
You can Wrap this LinearLayout in the Relative layout. If you don't want to change the Linear layout to RelativeLayout. Here is the modified layout XML and It will display Button the Bottom Right. You can modify layout_alignParentRight to left, center depend on your need.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.airpal.yonatan.airpal.MainActivity_User">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBarLayout">
<include layout="#layout/app_bar_layout" android:id="#+id/main_page_toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/white">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_tabPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/appBarLayout">
</android.support.v4.view.ViewPager>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Try using RelativeLayout for the root view and use :
android:layout_alignParentBottom="true"
With LinearLayout at root view is not possible. Also, instead of RelativeLayout, ConstraintLayout is a good alternative.

transparent status bar breaks scrollview

I'm following this solution to create transparent status bar
The problem is now i have a ScrollView which is not working if i opened the keyboard.
If i remove this line it works fine but i loose the transparent status bar feature.
w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
Any idea why this is happening and how to solve it ?
This my layout xml
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:orientation="vertical"
android:fitsSystemWindows="true"
tools:context="com.paytabs.merchant.paytabsmerchant.Activities.RegisterOneActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:title="Create Your Account"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/r1toolbar"
android:layout_width="match_parent"
android:paddingTop="10dp"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_register_one" />
</LinearLayout>
And this is what is inside content_register (Minimal Code, my controls inside this linear layout)
<ScrollView
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:isScrollContainer="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<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"
android:paddingBottom="50dp"
android:paddingTop="10dp"
android:paddingRight="20dp"
android:paddingLeft="20dp"
tools:context="com.paytabs.merchant.paytabsmerchant.Activities.RegisterOneActivity"
tools:showIn="#layout/activity_register_one">
</LinearLayout>
</ScrollView>

How to set a toolbar to be fixed in the bottom of the screen

I have a linearView with cardViews and some other elements.
The view with all it's elements is scrallable.
I'm trying to add a fixed toolbar in the bottom of the screen by wrapping everything in RelativeView and using alignParentBottom on the layout of my toolbar, but The toolbar is added to the bottom of the scrallable page ( you need to scroll all the way down to see it.
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_poi_detail_main_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/toolbar_image" />
<View
android:id="#+id/fragment_poi_detail_line"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_shadow_height"
android:background="#drawable/shape_shadow"/>
<include
layout="#layout/fragment_poi_detail_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/fragment_poi_detail_card_margin_vertical_first"
android:layout_marginBottom="#dimen/fragment_poi_detail_card_margin_vertical"
android:layout_marginLeft="#dimen/fragment_poi_detail_card_margin_horizontal_first"
android:layout_marginRight="#dimen/fragment_poi_detail_card_margin_horizontal_last"/>
<include
layout="#layout/fragment_poi_detail_content_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/fragment_poi_detail_card_margin_vertical_first"
android:layout_marginBottom="#dimen/fragment_poi_detail_card_margin_vertical"
android:layout_marginLeft="#dimen/fragment_poi_detail_card_margin_horizontal_first"
android:layout_marginRight="#dimen/fragment_poi_detail_card_margin_horizontal_last"/>
<include
layout="#layout/fragment_poi_detail_content_banner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/fragment_poi_detail_card_margin_vertical"
android:layout_marginBottom="#dimen/fragment_poi_detail_card_margin_vertical"
android:layout_marginLeft="#dimen/fragment_poi_detail_card_margin_horizontal_first"
android:layout_marginRight="#dimen/fragment_poi_detail_card_margin_horizontal_last" />
<include
layout="#layout/fragment_poi_detail_content_map"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/fragment_poi_detail_card_margin_vertical"
android:layout_marginBottom="#dimen/fragment_poi_detail_card_margin_vertical"
android:layout_marginLeft="#dimen/fragment_poi_detail_card_margin_horizontal_first"
android:layout_marginRight="#dimen/fragment_poi_detail_card_margin_horizontal_last" />
<include
layout="#layout/fragment_poi_detail_content_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/fragment_poi_detail_card_margin_vertical"
android:layout_marginBottom="#dimen/fragment_poi_detail_card_margin_vertical_last"
android:layout_marginLeft="#dimen/fragment_poi_detail_card_margin_horizontal_first"
android:layout_marginRight="#dimen/fragment_poi_detail_card_margin_horizontal_last" />
</LinearLayout>
<include layout="#layout/fragment_poi_detail_bottom_action_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
</include>
</RelativeLayout>
What am I doing wrong?
Thanks for your help :)
This is the view scrolled to bottom, and the bar in the bottom of the view.

android:fitsSystemWindows not working on Toolbar

I'm using android library Android-ObservableScrollView from ksoichiro. I use his sample Flexible Space with viewpager and i modify it.
But there's some problem. You can see in my xml there is 2 android:fitsSystemWindows. One in LinearLayout, and the other in Toolbar. In LinearLayout working good. but in Toolbar is not working. Why this happen?
Thank you. Sorry for my bad english
theres my xml code:
<FrameLayout 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">
<com.github.ksoichiro.android.observablescrollview.TouchInterceptionFrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_background"
android:scaleType="centerCrop"
android:src="#drawable/bridge" />
<View
android:id="#+id/overlay"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_background"
android:background="?attr/colorPrimary" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_height">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_margin="#dimen/abc_action_bar_default_padding_material"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:minHeight="?attr/actionBarSize"
android:textColor="#android:color/white"
android:textSize="20sp" />
</FrameLayout>
<com.bright.nongkrongyuk.ui.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/black"
app:sliding_textColor="#drawable/sliding_tab_profile" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light" />
</LinearLayout>
</com.github.ksoichiro.android.observablescrollview.TouchInterceptionFrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true" />
</FrameLayout>
The android:fitsSystemWindows attribute sets a padding. This means the fitting applies to the child views. You would have to apply this either to your FrameLayout or put the Toolbar into a nested Layout
It's really tricky to make a proper fullscreen layout with views fitted to the screen. I subclassed Fragment where I can declare a content-view which will get padding depending on Status- and/or Navigationbar

How to get Toolbar to overlay sibling layout (z-ordering)

For the life of me, I cannot get this Toolbar to layout on top (note: not above, but on top of) its sibling LinearLayout. The only way I can get the Toolbar to overlay its sibling is by specifying the Toolbar's elevation to be > 0, but this doesn't work for pre-5.0.
I am using a parent FrameLayout, and the child Toolbar is located after its sibling LinearLayout in the XML. What am I missing? Even the Android Studio preview pane shows the Toolbar on top of the LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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:id="#+id/fragment_main_container"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame"
android:orientation="vertical"
>
<FrameLayout
android:layout_weight="4"
android:layout_width="match_parent"
android:layout_height="0dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher"
/>
</FrameLayout>
<ListView
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:id="#+id/home_list_listview"
android:drawSelectorOnTop="true"
android:divider="#null"
android:dividerHeight="0dp"
tools:listitem="#layout/home_list_item"
>
</ListView>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/slogan"
android:gravity="center"
android:textColor="#color/colorPrimaryDark"
/>
</LinearLayout>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#android:color/transparent"
/>
</FrameLayout>
Turns out I had a fragment committing the linear layout over the main activity, which already contained it. Oops!
That's because of FrameLayout.
If you want to use FrameLayout, the views will not relate each other.
So all you need to do is ...
set "height of toolbar" to MarginTop of LinearLayout.
Hope, it will help.

Categories

Resources