I try to built a preference screen with a toolbar, but I got some issues:
The status bar is white. I want it to look like my main screen (same theme). Somehow it does not apply the color
The toolbar overlays the content. I tried a a layout_marginTop on the list view, but it does not change anything.
Here is the code of my activity_settings.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:navigationIcon="?attr/homeAsUpIndicator"
app:title="#string/action_settings"
android:theme="#style/ThemeOverlay.AppCompat.Dark" />
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar" />
</LinearLayout>
This is the AndroidManifest entry:
<activity
android:name=".activities.SettingsActivity"
android:label="#string/activity_settings"
android:theme="#style/AppTheme.NoActionBar" />
Can anybody help me?
Add android:layout_marginTop="?attr/actionBarSize" to your ListView in the xml.
Replace fill_parent with match_parent it's deprecated.
Remove android:layout_below="#+id/toolbar" it's not working in LinearLayout
Related
I implemented CoordinatorLayout with AppBarLayout and Toolbar to hide toolbar when scrolling and everything working greet.
The problem appears when i implemented search view.
Here is my activity_main layout:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<View
android:id="#+id/appbar_bottom"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/transparent"
android:visibility="invisible"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
And my fragment_layout :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/projects_swipe_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/projects_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"/>
</android.support.v4.widget.SwipeRefreshLayout>
Normal layout RecyclerView
The problem here when keyboard is hidden.
You can control the expandable behavior of the appBarLayout :
first By putting these lines in Manifest, you disable the appbar collapse effect due to the keyboard when it shows and when it hides.
<activity android:name="MyActivity"
...
android:windowSoftInputMode="adjustNothing"
...
</activity>
Then, simply expand/collapse appbar whenever you want :
appbar.setExpanded(true); / appbar.setExpanded(false);
you could collapse when EditText hasFocus, and expand when outter views get touch..
(someView.setOnTouchListener ...)
Answered here:
Android : Showing keyboard moves my components up, i want to hide them instead
Add android:windowSoftInputMode="adjustPan" to manifest - to the corresponding activity:
<activity android:name="MyActivity"
...
android:windowSoftInputMode="adjustPan"
...
</activity>
I have implemented material navigation drawer and toolbar in MainActivity. For implementing the navigation drawer and to ensure it shows up behind the status bar I have used following code for toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:fitsSystemWindows="true"
android:theme="#style/ToolbarTheme">
</android.support.v7.widget.Toolbar>
and included this in activity_main.xml as follows:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/navigation_drawer"
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/toolbar"
layout="#layout/toolbar" />
........
in styles.xml I am using following attribute,
<item name="android:windowTranslucentStatus">true</item>
With this everything is working just fine and I get the following result,
The problem occurs when i click on the edit text view (00.00). The moment that edit text view or any edit text view in the page is clicked, the toolbar just expands. See image below:
Now, I was able to rectify the issue by placing android:fitsSystemWindows="true" in activity_main.xml as follows:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/navigation_drawer"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
........
My question is, though this solution works but I am not sure as to why do I have to use the same attribute twice in layout file? And what made the toolbar expand? Also, is this the right approach to tackle this issue?
Edit - Removing android:fitsSystemWindows="true" from toolbar.xml and placing it in drawer layout results in the main activity yielding correct results but other activities have a white bar. See image below.
I had the same problem that you and I will tell you what I did for fix it
1) Defining the toolbar.xml
<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/toolBarDetalleContacto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin"
app:theme="#style/Theme.GpsFriends.Material">
</android.support.v7.widget.Toolbar>
The trick is to use this attribute in your activity xml inside a <android.support.v4.widget.DrawerLayout> parent component and set here the property android:fitsSystemWindows="true" (also in your toolbar.xml). If you dont use DrawerLayout the permanent grey color in your colorPrimaryDark attribute wont be change, will be always grey and just grey.
2) Defining your activity xml:
<android.support.v4.widget.DrawerLayout 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:fitsSystemWindows="true"
tools:context="com.wherefriend.activities.agregaramigos.AgregarAmigosActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar_main_gps_friends"
layout="#layout/toolbar_gps_friends"
></include>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/bBuscar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="buscarAmigos"
android:text="Buscar" />
<EditText
android:id="#+id/etfragmentCorreo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/bBuscar"
android:ems="10"
android:inputType="textEmailAddress" />
</RelativeLayout>
<ListView
android:id="#+id/listaResultado"
android:divider="#drawable/horizontal_linear_layout_divider"
android:dividerHeight="0dp"
android:layout_width="match_parent"
android:layout_height="fill_parent" >
</ListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
As you can see, I defined first child activity xml UI as DrawerLayout but just below I use <LinearLayout> to include my whole User interface View compontents. At first my Toolbar and then the rests of the components.
The result is like that, testing in a real Nexus 4 - LG API versión 22:
Q: How do I make the system bar be the correct color?
I've tried setting this up following the cheesesquare sample app.
When doing that, they use a coordinator layout and an appbar layout which contains a toolbar layout -- it looks like this:
Then I tried removign the coordinator layout, and app bar, and just have a LinearLayout with a toolbar and a nested scroll view inside it -- looks like this:
As you can probably tell it doesn't look like quite right. Using their nav drawer layout worked perfectly fine with the status bar being the same color as the toolbar.
I've also tried messing with fitsSystemWindows to no avail.
Q: How do I make the system bar be the correct color?
I think I heard about this potentially being a bug in the design library, so perhaps there is a workaround for now?
Here is my layout code:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/fixed_scroll_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/card_margin">
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Info"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="blank text for now" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
My style-v21 theme contains:
<item name="android:statusBarColor">#android:color/transparent</item>
Removing that fixed the problem.
I've set up a new android Toolbar with:
android:layout_height="?attr/actionBarSize"
The toolbar appears correctly at the top of the screen. The problem I'm having is that the top of the background image for the remainder of the app screen is being covered over by toolbar. I need to reduce the height of the container that holds the background image by the height of the toolbar in my layout file but am not having any luck.
The toolbar is showing correctly. It has an image as a background.
Here is the main.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="wrap_content"
android:background="#drawable/big_wave"
tools:context=".MainActivity" >
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="#drawable/actionbar_skypic" />
</RelativeLayout>
You can adjust the height of the image yourself, can't you? Or you can set the tool baar background as translucent or transparent.
toolbar.getBackground().setAlpha(0);
You can use android:layout_below property
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark" />
<com.example.sample.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:background="?attr/colorPrimaryDark"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="#android:color/white" />
</LinearLayout>
Here is the output.
You can see below toolbar there is sliding layout tabs
So my XML goes like this:
<?xml version="1.0" encoding="utf-8"?>
<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" >
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_height="56dp"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<FrameLayout
android:id="#+id/main_frag"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- ListView here -->
</android.support.v4.widget.DrawerLayout>
What is happening, even though I set my height explicitly as 56dp, the toolbar is acting like match_parent and wills the entire height of the screen? Is there a better way of doing this?
Or should I be putting the toolbar in side the layouts that my FragementTransactions fill the FrameLayout with? Which doesn't seem efficient because I have several of those.
DrawerLayout takes two children views: the first for the main content and the second for the drawer: both are always set to match_parent. Therefore your Toolbar and FrameLayout should be wrapped in a vertical LinearLayout which is set to match_parent as per the canonical example from the maker of AppCompat:
<!-- The important thing to note here is the added fitSystemWindows -->
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Your normal content view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- We use a Toolbar so that our drawer can be displayed
in front of the action bar -->
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<FrameLayout
android:id="#+id/main_frag"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<!-- Your drawer view. This can be any view, FrameLayout
is just an example. As we have set fitSystemWindows=true
this will be displayed under the status bar. -->
<FrameLayout
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:fitsSystemWindows="true">
<!-- ListView here -->
</FrameLayout>
</android.support.v4.widget.DrawerLayout>