android:windowTranslucentStatus=true, android:fitsSystemWindows=true , gap above listView - android

I need translucent status bar. So I use flag in styles.xml.
<item name="android:windowTranslucentStatus">true</item>
my_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<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/tool_bar" />
<LinearLayout
android:id="#+id/containerCenter"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:animateLayoutChanges="true"
android:background="#ffffff"
android:scrollbarStyle="outsideOverlay" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:text="Test"/>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
When I click on EditText the soft keyboard overlap the editText. So I use flag "android:fitsSystemWindows=true "to fix this. OK.
But as result above on listView (between "tool_bar" and "containerCenter) has gap with height equal to height of status bar.
How I can remove this gap?
Here is attach:
If I move the android:fitsSystemWindows="true" to the top-most LinearLayout
the gap is gone BUT statusbar not translucent anymore. See attachment#2

Related

Keyboard pushes layout below statusbar (or even further up)

I have the following xml
<RelativeLayout
...>
<Toolbar
.../>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
android:fitsSystemWindows="true"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</TextInputLayout>
<TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</TextInputLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
In my AndroidManifest.xml I set the windowSoftInputMode to adjustResize. But now when I click in one of those EditText fields the layout moves up and the actual field where I want to type is not even visible anymore. The scrolling works, but only downwards and not fully up. Any ideas on how to fix this? I don't want to use adjustPan because that disables the scroll in general.

Android Linear Layout weight and soft keyboard issue

I'm trying to achieve the following view in a chat app. There are basically two states one with the soft touch keyboard showing and one without.
So this is my initial state without the keyboard showing.
This is what happens when the keyboard shows up.
This is what i'm trying to achieve.
Note
I'm current using "adjust-resize" as the windowSoftInputMode. I know using "adjust-pan" will fix the issue, but with "adjust-pan" there are 2 problems :
The toolbar also moves up making space for the edit-text and keyboard.
The editText gets partly covered by the keyboard.
A layout experts help is needed here!
Thanks in advance.
Edit:
This is what my XML looks like:
<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">
<LinearLayout
android:id="#+id/view_group_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimaryDark"
android:elevation="4dip" >
<!-- Toolbar stuff -->
</android.support.v7.widget.Toolbar>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_bar"
android:layout_below="#+id/view_group_toolbar"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6">
<include
layout="#layout/layout_that_covers_60%_of_the_screen (This is not my actual layout name :/ using it for understandability)"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/view_group_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:gravity="center_vertical">
<include
layout="#layout/layout_that_covers_40%_of_the_screen"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="60dip"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:padding="8dip" >
<!-- This is where my edit text resides -->
</RelativeLayout>
</RelativeLayout>
So here is what I think you should do,
use
windowSoftInputMode="adjustResize" - The activity's main window is always resized to make room for the soft keyboard on screen. Also adjustResize keeps the ToolBar on top.
Try adding both your LinearLayouts inside a NestedScrollView. The reason I say this is because your NestedScrollView contents can scroll up.
I think your Layout will look like this- .
<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">
<LinearLayout
android:id="#+id/view_group_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimaryDark"
android:elevation="4dip" >
<!-- Toolbar stuff -->
</android.support.v7.widget.Toolbar>
</LinearLayout>
<NestedScrollView
android:layout_above="#+id/bottom_bar"
android:layout_below="#+id/view_group_toolbar">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6">
<include
layout="#layout/layout_that_covers_60%_of_the_screen (This is not my actual layout name :/ using it for understandability)"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/view_group_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:gravity="center_vertical">
<include
layout="#layout/layout_that_covers_40%_of_the_screen"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
</NestedScrollView>
<RelativeLayout
android:id="#+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="60dip"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:padding="8dip" >
<!-- This is where my edit text resides -->
</RelativeLayout>
Let me know if this works for you.
EDIT 1:
If you have a RecyclerView inside your layouts, you may need to set this attribute for smooth scroll -
recyclerView.setNestedScrollingEnabled(false);

android:windowTranslucentStatus broke scrolling on Android 5.0/6.0

Android 6.0. I want to has translucent status bar.
my_layout.xml:
<ScrollView
android:id="#+id/srollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/content_layer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/containerPhoneNumber"
android:layout_width="match_parent"
android:layout_height="64dp">
<EditText
style="#style/edit_text_style"
android:layout_width="match_parent"
android:layout_height="64dp"
/>
...
</ScrollView>
styles.xml
<style name="RegistrationTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
</style>
As result the status bar is translucent. OK.
When start my_layout.xml on Android 7.0 , and focus on editText the scroll success scrolling. OK. But when I run same my_layout.xml on Android 5.0/6.0 the scrolling is NOT work. Why?
Thanks.
The solution is to create parent container (LinearLayout with attirbute "fitsSystemWindows" = true) for ScrollView.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<ScrollView
android:id="#+id/srollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/content_layer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/containerPhoneNumber"
android:layout_width="match_parent"
android:layout_height="64dp">
<EditText
style="#style/edit_text_style"
android:layout_width="match_parent"
android:layout_height="64dp"
/>
...
</ScrollView>
</LinearLayout>
Thanks.

Floating Action Buttons over Drawer Menu

I have added 2 floating action buttons to my activity. The problem is that I also have a drawer menu and when I open it my floating buttons remain visible.
This is how my XML file looks like:
<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.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/DrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="7dp">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
></include>
<LinearLayout
android:id="#+id/viewA"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#FF8845"
android:orientation="horizontal"/>
<LinearLayout
android:id="#+id/viewB"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#AF3800"
android:orientation="horizontal">
<ListView
android:id="#+id/listView5"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="270dp"></ListView>
</LinearLayout>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.DrawerLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/button_add_new_friend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_add_friend"
app:layout_anchor="#id/viewA"
app:layout_anchorGravity="bottom|right|end"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/button_user_photos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="100dp"
android:clickable="true"
android:src="#drawable/ic_user_photos"
app:layout_anchor="#id/viewA"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
And this is how they look like:
Any ideas how I can solve this problem?
Set visibility of buttons GONE or INVISIBLE in onDrawerOpened(View view) listener.
Move floating buttons declaration in XML to the top of CoordinatorLayout container (before the DrawerLayout declaration). Android draws views from top to bottom.
UPD.
As suggested by #JohanShogun, elevation might be the key. FABs probably have default elevation value higher than you have in your DrawerLayout. Try to override it with lower value and if it won't help, have a look at this answer.

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

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!

Categories

Resources