Custom Toolbar design - android

I'm building a custom toolbar for search activity and it's suitable in some devices and not suitable in other screens .
i tried it on my device 720*1280 and it's fine . but when i open app on genymotion device 768*1280 it appears like that .
search_toolbar.xml
<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="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/search_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/search_bar_bg"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginBottom="2dp"
android:layout_weight=".1"
android:background="#fff"
android:clickable="true"
android:onClick="back"
android:src="#drawable/ic_arrow_back_black" />
<EditText
android:id="#+id/searchText"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:layout_weight=".99"
android:hint="#string/search"
android:padding="3dp"
android:textColor="#000"
android:textColorHint="#FFCEC9C9"
android:textSize="15sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Search.xml
<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/search_page_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v7.widget.RecyclerView
android:id="#+id/search_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp" />
</LinearLayout>

You should modify you Search.xml like this (Remember add app:layout_behavior="#string/appbar_scrolling_view_behavior" in your recyclerview):
<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="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/search_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/search_bar_bg"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginBottom="2dp"
android:layout_weight=".1"
android:background="#fff"
android:clickable="true"
android:onClick="back"
android:src="#drawable/ic_arrow_back_black" />
<EditText
android:id="#+id/searchText"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:layout_weight=".99"
android:hint="#string/search"
android:padding="3dp"
android:textColor="#000"
android:textColorHint="#FFCEC9C9"
android:textSize="15sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/search_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

Try android:theme="#style/ThemeOverlay.AppCompat.ActionBar" in AppBarLayout.

Related

Android Toolbar and Webview

I've got a Webview and a Toolbar. Without the Toolbar, the Webview is completely scollable, but when I add the Toolbar the the Webview doesn't scroll anymore. I've tried NestedScrollView but it just doesn't work. Here's the layout of my activity:
<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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="100">
<ImageButton
android:id="#+id/homeButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="20"
android:contentDescription="#string/home"
app:srcCompat="#drawable/ic_home" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="60"
android:gravity="center"
android:text="#string/app_name"
android:textSize="24sp"
android:textStyle="bold"
app:fontFamily="Sans Serif" />
<ImageButton
android:id="#+id/menuButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="20"
android:contentDescription="#string/menu"
app:srcCompat="#drawable/ic_menu_black_24dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:id="#+id/relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MailActivity">
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
The Java code for the Toolbar simply creates the menu and the home button, while the webview simply loads an url (javascript is enabled).
Thanks a lot for your help!
<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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="100">
<ImageButton
android:id="#+id/homeButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="20"
android:contentDescription="#string/home"
app:srcCompat="#drawable/ic_home" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="60"
android:gravity="center"
android:text="#string/app_name"
android:textSize="24sp"
android:textStyle="bold"
app:fontFamily="Sans Serif" />
<ImageButton
android:id="#+id/menuButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="20"
android:contentDescription="#string/menu"
app:srcCompat="#drawable/ic_menu_black_24dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
You have to move Relative layout outside of the Appbar.
<?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:orientation="vertical"
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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="100">
<ImageButton
android:id="#+id/homeButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="20"
android:contentDescription="#string/home"
app:srcCompat="#drawable/ic_home" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="60"
android:gravity="center"
android:text="#string/app_name"
android:textSize="24sp"
android:textStyle="bold"
app:fontFamily="Sans Serif" />
<ImageButton
android:id="#+id/menuButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="20"
android:contentDescription="#string/menu"
app:srcCompat="#drawable/ic_menu_black_24dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>

Make NavigationDrawer above SlidingUpPanel

I want to make navigation drawer above sliding up panel.
I use this https://github.com/umano/AndroidSlidingUpPanel
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/suplSurveys"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoScrollableView="#+id/vpPlace"
sothree:umanoPanelHeight="68dp"
sothree:umanoParallaxOffset="100dp"
sothree:umanoDragView="#+id/dragView"
sothree:umanoOverlay="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#006df0"
app:titleTextColor="#color/colorBackGrey"
android:elevation="20dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_marginTop="65dp"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_my_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_marginTop="10dp"
android:layout_marginEnd="15dp"
app:backgroundTint="#color/jet"
app:fabSize="normal"
app:srcCompat="#drawable/ic_my_location" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="65dp"
android:paddingLeft="80dp"
android:paddingRight="80dp"
android:layout_gravity="center">
<com.dd.morphingbutton.impl.IndeterminateProgressButton
android:id="#+id/add_new_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:fontFamily="#font/pt_mono"
android:layout_gravity="center_horizontal"
android:textSize="18sp"
android:textColor="#color/colorBackGrey"
android:text="ADD"/>
</FrameLayout>
</LinearLayout>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navdraw_header"
app:menu="#menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="400dp"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:background="#drawable/border"
android:orientation="vertical"
android:focusable="false"
android:id="#+id/dragView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="68dp"
android:orientation="vertical">
<TextView
android:layout_width="48dp"
android:layout_height="2dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_gravity="center"
android:background="#dddddd" />
<TextView
android:layout_width="48dp"
android:layout_marginTop="5dp"
android:layout_height="2dp"
android:gravity="center"
android:layout_gravity="center"
android:background="#dddddd" />
<TextView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="14sp"
android:fontFamily="#font/pt_mono"
android:textStyle="bold"
android:text="DAFTAR LOKASI SURVEY"
android:textColor="#color/colorAccent"
android:gravity="center_vertical"
android:paddingLeft="10dp"/>
</LinearLayout>
<ProgressBar
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:id="#+id/pbLoad"
android:gravity="center"
android:layout_margin="15dp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/vpPlace"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout></com.sothree.slidinguppanel.SlidingUpPanelLayout>
That's my layout code
So I dont understand what does it mean to make second child
So I dont understand what does it mean to make second child
So I dont understand what does it mean to make second child
So I dont understand what does it mean to make second child
So I dont understand what does it mean to make second child
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:sothree="http://schemas.android.com/apk/res-auto">
<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:id="#+id/suplSurveys"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoScrollableView="#+id/vpPlace"
sothree:umanoPanelHeight="68dp"
sothree:umanoParallaxOffset="100dp"
sothree:umanoDragView="#+id/dragView"
sothree:umanoOverlay="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#006df0"
app:titleTextColor="#color/colorBackGrey"
android:elevation="20dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_marginTop="65dp"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_my_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_marginTop="10dp"
android:layout_marginEnd="15dp"
app:backgroundTint="#color/jet"
app:fabSize="normal"
app:srcCompat="#drawable/ic_my_location" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="65dp"
android:paddingLeft="80dp"
android:paddingRight="80dp"
android:layout_gravity="center">
<com.dd.morphingbutton.impl.IndeterminateProgressButton
android:id="#+id/add_new_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:fontFamily="#font/pt_mono"
android:layout_gravity="center_horizontal"
android:textSize="18sp"
android:textColor="#color/colorBackGrey"
android:text="ADD"/>
</FrameLayout>
</LinearLayout>
</FrameLayout>
<!--</android.support.v4.widget.DrawerLayout>-->
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="400dp"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:background="#drawable/border"
android:orientation="vertical"
android:focusable="false"
android:id="#+id/dragView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="68dp"
android:orientation="vertical">
<TextView
android:layout_width="48dp"
android:layout_height="2dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_gravity="center"
android:background="#dddddd" />
<TextView
android:layout_width="48dp"
android:layout_marginTop="5dp"
android:layout_height="2dp"
android:gravity="center"
android:layout_gravity="center"
android:background="#dddddd" />
<TextView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="14sp"
android:fontFamily="#font/pt_mono"
android:textStyle="bold"
android:text="DAFTAR LOKASI SURVEY"
android:textColor="#color/colorAccent"
android:gravity="center_vertical"
android:paddingLeft="10dp"/>
</LinearLayout>
<ProgressBar
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:id="#+id/pbLoad"
android:gravity="center"
android:layout_margin="15dp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/vpPlace"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navdraw_header"
app:menu="#menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
This should be a simple fix, I can't see your layout xml with your drawer style (feel free to share the code).
Using a standard navigation view as an example to give the same layout you have now would look something like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
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.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<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:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
Which displays something like this (similar to yours):
You will need to wrap the whole screen in another layout (likely linear layout in vertical). You will want to extract the toolbar and bring it out to the outer/top most position like so:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
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
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<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:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
This gives you what you desire - the toolbar will now stay on top and appear like:
Let me know if that does help - please bare in mind that I have made a few assumptions since I have not seen any code yet.

Custom View not displaying completely in activity

I'm trying to display "Spaces-Navigation-View" from here https://github.com/armcha/Space-Navigation-View
The problem I'm facing is that the view appears perfectly in simple activity but not in my main activity which contains coordinator layout.
Here is the xml for my main activity and the result is below
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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:animateLayoutChanges="true"
android:fitsSystemWindows="true"
tools:context="com.rvnd.bookshare.Strt">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="false"
android:background="#color/background"
android:paddingTop="#dimen/appbar_padding_top"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/transparent"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:text="Book Share"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="cursive"
android:textSize="27sp"
android:textColor="#color/text"/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
/>
<TextView
android:id="#+id/status"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:elevation="5dp"
android:textColor="#000000"
android:background="#FFD54F"
android:gravity="center"
android:padding="5dp"
android:layout_gravity="top|center"
android:visibility="gone"
android:text="Syncing..."
android:textAppearance="?android:attr/textAppearanceMedium"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<com.luseen.spacenavigation.SpaceNavigationView
android:id="#+id/space"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:space_background_color="#color/colorPrimary"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:layout_behavior="com.luseen.spacenavigation.SpaceNavigationViewBehavior"/>
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:visibility="gone"
app:srcCompat="#drawable/booky"/>
</android.support.design.widget.CoordinatorLayout>
Here is the result of it
On the other hand, if I use the same view in a different simpler activity, the view is rendered properly
Here is the code and below it, is how it should actually look like
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/activity_history"
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="com.rvnd.bookshare.History"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:gravity="center"
android:background="#color/skyblue"
android:layout_height="40dp">
<TextView
android:text="All your book transfers are recorded here..."
android:layout_width="0dp"
android:layout_height="match_parent"
android:id="#+id/status"
android:textColor="#ffffff"
android:gravity="center"
android:layout_weight="1"
android:textSize="13sp"/>
<Button
android:text="Clear history"
android:layout_height="match_parent"
android:id="#+id/clear"
android:textAllCaps="false"
android:layout_width="98dp"
android:textSize="12sp"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/rec"/>
<com.luseen.spacenavigation.SpaceNavigationView
android:id="#+id/space"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:space_background_color="#color/colorPrimary"
android:background="#color/colorPrimary"
android:layout_gravity="bottom"
app:layout_behavior="com.luseen.spacenavigation.SpaceNavigationViewBehavior"/>
</LinearLayout>
Here is the result :
I've tried everything and It just doesnt display properly, please do help!
Thanks

How to make long images fit in the CollapsibleToolbar

I am tying to add image in a Fragment with image at the top and parallax effect when scrolled down. I tried doing this using Collapsible Toolbar, but image is not filling up the Collapsible Toolbar, and parallax is not working.
I want something like this
But this is what I achieved till now.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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"
xmlns:card_view="http://schemas.android.com/tools"
android:id="#+id/drawerlayout1">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorlayout"
android:layout_width="fill_parent"
android:layout_height="match_parent"
app:expandedTitleMarginStart="70dp">
<android.support.design.widget.AppBarLayout
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="fill_parent"
android:id="#+id/actionbarlayout"
android:layout_height="207dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/CollapsingToolbarLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:id="#+id/details_Image"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
android:minHeight="?attr/actionBarSize"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardElevation="3dp"
card_view:cardCornerRadius="7dp"
android:layout_margin="5dp"
android:id="#+id/new_order"
card_view:cardBackgroundColor="#color/cardview_shadow_end_color"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:layout_marginTop="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/download"
android:background="#null"
android:src="#drawable/ic_action_ic_file_download_white_36dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/favourite"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/zoom"
android:background="#null"
android:src="#drawable/ic_action_ic_zoom_out_map_white_36dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageDescription"
android:text="keckwcbjbewbcbcbcwjbejwkbcwkbcbwjc"
/>
</ScrollView>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone"
android:id="#+id/fullimage"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorlayout"
android:layout_width="fill_parent"
android:layout_height="match_parent"
app:expandedTitleMarginStart="70dp">
<android.support.design.widget.AppBarLayout
android:id="#+id/actionbarlayout"
android:layout_width="fill_parent"
android:layout_height="207dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/CollapsingToolbarLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/details_Image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:background="#color/colorAccent"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/new_order"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
card_view:cardBackgroundColor="#color/cardview_shadow_end_color"
card_view:cardCornerRadius="7dp"
card_view:cardElevation="3dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:id="#+id/download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_action_ic_file_download_white_36dp"
android:background="#null" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:id="#+id/favourite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:id="#+id/zoom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_action_ic_zoom_out_map_white_36dp"
android:background="#null" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<TextView
android:id="#+id/imageDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="keckwcbjbewbcbcbcwjbejwkbcwkbcbwjc"
/>
</ScrollView>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<ImageView
android:id="#+id/fullimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
</android.support.design.widget.CoordinatorLayout>
Replace your code with this.

How to put RelativeLayout inside CoordinatorLayout

I'm trying to recreate the search box as it is in Airbnb Android app.
So I'm using CoorinatorLayout with Toolbar and RecyclerView.
But when I insert something inside the Coordinator besides those two things, it doesn't show up.
Here is my 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/slidingLayout"
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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="20dp"
android:background="#drawable/rounded_background"
android:orientation="horizontal"
android:padding="6dp"
app:layout_scrollFlags="scroll|enterAlways">
<EditText
android:id="#+id/search"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="6"
android:background="#null"
android:fontFamily="sans-serif-light"
android:hint="Unesite grad"
android:paddingLeft="16dp"
android:paddingStart="16dp" />
<ImageView
android:id="#+id/cancelSearch"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_cancel" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/appbar"
android:background="#ffffff"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
But actually if this even worked, I would have the trouble of putting the search box above the RecyclerView.
I have tried to put everything inside the RelativeLayout but that didn't work.
Here is also the picture of what I'm trying to make
EDIT:
Here is the code with RelativeLayout
<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/slidingLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
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:background="#00000000">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="20dp"
android:background="#drawable/rounded_background"
android:orientation="horizontal"
android:padding="6dp"
app:layout_scrollFlags="scroll|enterAlways">
<EditText
android:id="#+id/search"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="6"
android:background="#null"
android:fontFamily="sans-serif-light"
android:hint="Unesite grad"
android:paddingLeft="16dp"
android:paddingStart="16dp" />
<ImageView
android:id="#+id/cancelSearch"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_cancel" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/appbar"
android:background="#ffffff"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
I was trying to do something a little similar, but with an ad banner at the bottom of the screen. My solution was to wrap the RelativeLayout outside the CoordinatorLayout as so:
<?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:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/ad_view">
<android.support.design.widget.AppBarLayout
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" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/ad_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_gravity="center|bottom"
app:adSize="SMART_BANNER"
app:adUnitId="#string/admob_id" />
</RelativeLayout>
The toolbar properly hides when scrolling inside the RecyclerView and everything seems to be working just fine. I would imagine if you followed a similar principle you should be good-to-go.
If you want remove status bar white colour, you must remove the next line
<item name="android:statusBarColor">#android:color/transparent</item>`
in v21/styles.xml
Thanks for example.
<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/slidingLayout"
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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red"
app:layout_scrollFlags="scroll|enterAlways"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="20dp"
android:background="#drawable/rounded_background"
android:orientation="horizontal"
android:padding="6dp"
app:layout_scrollFlags="scroll|enterAlways">
<EditText
android:id="#+id/search"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="6"
android:background="#null"
android:fontFamily="sans-serif-light"
android:hint="Unesite grad"
android:paddingLeft="16dp"
android:paddingStart="16dp"/>
<ImageView
android:id="#+id/cancelSearch"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_cancel" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/appbar"
android:background="#ffffff"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Check if this works for you.

Categories

Resources