I have a UI design to create where the toolbar is immersed within the recyclerview.
I have created the design but the lines of the layout are still visible on device whereas it appears to be right in the emulator. How do I merge the layout line in recyclerview.
Below is a screenshot from emulator
and below is a screenshot from my device
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:background="#android:color/transparent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:elevation="0dp"
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="100"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_width="match_parent"
android:weightSum="100"
android:background="#android:color/transparent"
android:layout_height="match_parent">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="80"
android:layout_height="match_parent"
android:text="#string/app_name"
android:textColor="#android:color/black"
android:textSize="25sp"
android:textStyle="bold" />
<ImageView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="20"
android:layout_gravity="right"
android:src="#drawable/ic_add_black_24dp" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:background="#android:color/transparent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
That line is a shadow, caused by the Toolbar's elevation. Elevation only happens automatically on devices running Lollipop or newer, and the layout preview often doesn't show shadows.
Try adding this attribute to your Toolbar's XML to remove the elevation (and therefore the shadow):
android:elevation="0dp"
The most concise answer and easiest way to remove hide ToolBar Layout line/divider adding this line in your style.xml file inside the AppTheme style or whatever theme style you declared for your activity:
<item name="android:showDividers">none</item>
then your should look something like this
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
...
<item name="android:showDividers">none</item>
<!-- This line is not compulsory -->
<item name="actionBarDivider">#android:color/transparent</item>
<!-- This line is not compulsory -->
...
</style>
I hope this helps. it worked for me tho
Result: here's a screenshot of a typical example:
Related
I'm trying to achieve AppbarLayout with background, inside the AppbarLayout to have a static Toolbar, under the the Toolbar i'm using a CollpasingToolBar that now contains a Toolbar and later supposed to include also a Custom View that it's content will be scaled according to scrolling position, and in the bottom of the AppBarLayout i'm using a TabLayout.
The issue i can't resolve is: i want that the AppbarLayout Drawable will be also be spread over the status bar, currently i failed to achieve this.
I'm attaching the xml layout and also a screen shot:
<?xml version="1.0" encoding="utf-8"?>
<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:windowDrawsSystemBarBackgrounds = "true"
android:statusBarColor="#android:color/transparent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#drawable/winterscenery"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="180dp"
app:statusBarScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:fitsSystemWindows="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="One" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Two" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Three" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/content_text_one" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/content_button" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/content_text_two" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
After editing Manifest file :
<activity android:name=".ExitUntilCollapsedActivity" android:theme="#style/JustTryStyle" />
And creating the JustTryStyle style:
<style name="JustTryStyle" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
</style>
I got the following apperance:
In your theme you need to add
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
Edit:
Add these two to the theme your activity uses as defined in the AndroidManifest.
If other activities also use use this theme but should not have the transparent navigationbar then you need to extend it and update your AndroidManifest accordingly.
Edit 2: try adding <item name="android:windowTranslucentStatus">true</item> instead or additionally
Edit 3: also add fitSystemWindow=true to constraintlayout and appbar
I am developing android app and I want to add switch inside toolbar it is not showing
below is my xml
<LinearLayout 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:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Switch
android:id="#+id/switch1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Switch" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
following screen current ui
I want to know how to achieve that kind of ui what I have to do
Simply Change AppTheme to NoActionBar from styles.xml
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
Now run your app, switch will show on the top in Toolbar.
You need to use custom toolbar which you are already using in your xml file but you need to remove your default toolbar by calling getSupportActionBar().hide(); in activity onCreate(). and set the color of toolbar in xml
<LinearLayout 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:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:elevation="#dimen/margin_large"
android:background="#color/colorPrimaryDark"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Switch
android:id="#+id/switch1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Switch" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
hello i have project that use multiple activity and xml one of this xml is navigation drawer it's easy to change backgournd color of actionbar/toolbar but when i change it on the other layout/xml background actionbar/tooolbar not change how to change all of them it's
Screenshot
screenshot
on this change
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="ir.diamonddesign.tajrobi96.MainActivity">
<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="#android:color/holo_red_dark"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
on this not change
/*
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="ir.diamonddesign.tajrobi96.Questionsactivity"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15dp"
android:textAppe``arance="?android:attr/textAppearanceLarge"
android:text="#string/kharej_text"
android:id="#+id/textView2"
android:textDirection="rtl"
android:layout_alignTop="#+id/textView3"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/dakhel_text"
android:textSize="15dp"
android:id="#+id/textView3"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="false"
android:textDirection="rtl" />
</RelativeLayout>*/
Find the file named styles.xml in your res folder.
You should have defined a theme for your project which looks something like below code
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/text_description</item>
<item name="colorPrimaryDark">#color/black</item>
<item name="colorAccent">#color/theme_teal</item>
</style>
Here, colorPrimary defines the color of your actionBar. This color must have been set to blue acc to the screenshot.
Try changing the colorPrimary value to the desired color that you want.
Change style.xml:
<item name="colorPrimary">#color/colorPrimary</item>
to :
<item name="colorPrimary">#android:color/holo_red_dark</item>
i need to do this :
http://developer.android.com/design/material/images/card_travel.png
so i create and add the dependency to the project and here is my activity main code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/feed_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="6dp">
<ImageView
android:layout_width="100dp"
android:layout_height="50dp"
android:src="#drawable/ic"/>
<TextView
style="#style/TextAppearance.AppCompat.Caption"
android:textColor="#555"
android:layout_margin="3dp"
android:gravity="end"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Detail"/>
</android.support.v7.widget.CardView>
</LinearLayout>
so, how we can do this like below picture:?
http://i.stack.imgur.com/Z0lNa.png
Cheers!
What you're looking for is a translucent status bar. When you have this configured you're able achieve this effect. Make also sure to remove the actionbar as I do in my example down below, otherwise you'll have to make it transparent.
Change your v21/themes.xml file to this:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
Then add android:fitsSystemWindows="true" to your LinearLayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/feed_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
I am using the toolbar from AppCompat V7 to replace the previous action bar and want to have the shadow of toolbar like the previous actionbar. but the toolbar doesn't have shadow by default, and I have tried the fixes mentioned from reddit. but without luck.
the code to set the shadow:
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
The toolbar layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:minHeight="?attr/actionBarSize"
android:background="#F1F1F1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_margin="0dp"
foreground="?android:windowContentOverlay">
the activity layout:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
android:layout_width="match_parent"
android:id="#+id/drawer_layout"
android:layout_height="match_parent">
<!-- activity view -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<FrameLayout android:id="#+id/fragment_container"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
<!-- navigation drawer -->
<RelativeLayout
android:id="#+id/left_drawer"
android:layout_gravity="start"
android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:divider="#eee"
android:background="#EEE"
android:id="#+id/drawer_header">
<ImageView
android:id="#+id/user_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:contentDescription="#string/user_icon"
android:src="#drawable/ic_action_person"
android:paddingTop="0dp"
android:paddingLeft="0dp"/>
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/user_icon"
android:gravity="center"
android:layout_gravity="center_vertical"
android:layout_centerVertical="true"
android:textSize="14sp"
android:text="#string/not_logged_in"
android:paddingTop="0dp"
android:paddingBottom="0dp"/>
</RelativeLayout>
<ListView
android:id="#+id/drawer_list"
android:layout_below="#+id/drawer_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#eee"
android:background="#fff"
android:dividerHeight="0dp" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Setting in the style.xml:
<style name="myAppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowContentOverlay">#drawable/drawer_shadow</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/black</item>
</style>
Can anyone help?
thanks!
update 1: with the suggestion from Willis, I get the shadow displayed, but it is not below the toolbar, instead it is to the left of the toolbar.
Update 2: I have noticed that if I don't set the windowContentOverlay in toolbar.xml and styles.xml, the shadow is actually on the top of the toolbar.
Those two are completely different shadows. The vertical one is that of DrawerLayout. It's supposed to be showing beside expanded drawer. The horizontal one is part of windowContentOverlay on APIs below LOLLIPOP (on LOLLIPOP it's #null).
When you work with Toolbar widget the toolbar isn't part of window decor anymore so the shadow starts at the top of the window over the toolbar instead of below it (so you want the windowContentOverlay to be #null). Additionally you need to add an extra empty View below the toolbar pre-LOLLIPOP with its background set to a vertical shadow drawable (8dp tall gradient from #20000000 to #00000000 works best). On LOLLIPOP you can set 8dp elevation on the toolbar instead.
Note: Use the same gradient but horizontal as the drawer shadow for best results.
You can set the amount of shadow by using the setElevation method. For example:
getSupportActionBar().setElevation(25);
Increasing/decreasing the value passed to setElevation will consequently increase/decrease the presence of the shadow effect.
To show shadow under your toolbar please use AppBarLayout available in Google Android Design Support Library. Here is an example of how it should be used.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"/>
</android.support.design.widget.AppBarLayout>
To use Google Android Design Support Library enter following into your build.gradle file:
compile 'com.android.support:design:22.2.0'