I need more shadow than the current situation. I've used a CardView, since I assumed this is the better way to add shadow instead of an XML in the drawable directory.
How it currently is:
How it should be:
My Code:
<android.support.v7.widget.CardView
android:id="#+id/filter_button_layout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
card_view:cardElevation="16dp">
<LinearLayout
android:id="#+id/filter_linear_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="horizontal">
<TextView/>
<TextView/>
</LinearLayout>
</android.support.v7.widget.CardView>
You can achieve something like this by defining a custom shadow (drawable/shadow.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#android:color/transparent"
android:startColor="#android:color/black"/>
</shape>
Using it like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="360dp"
android:layout_height="24dp"
android:background="#drawable/shadow"
/>
<View
android:layout_width="360dp"
android:layout_height="50dp"/>
</LinearLayout>
So the "shadowView" is on top of the View you want to have your shadow.
Related
I have Linear Layout, inside that i have recycler view. I want elevation and corner radius but it not working properly. Can someone suggest me what i am doing wrong.
MainLayout
<androidx.constraintlayout.widget.ConstraintLayout 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:paddingStart="16dp"
android:paddingEnd="16dp"
android:clipToPadding="false"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/container"
style="#style/WhiteBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
RecyclerView Item Layout
<androidx.constraintlayout.widget.ConstraintLayout 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:clipToPadding="false"
android:paddingStart="12dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
tools:ignore="RtlSymmetry">
.....more elements..
</androidx.constraintlayout.widget.ConstraintLayout>
styles
<style name="WhiteBox" >
<item name="android:background">#drawable/white_box_background</item>
<item name="android:elevation">8dp</item>
</style>
white_box_background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="7dp"/>
<solid android:color="#android:color/white"/>
</shape>
As below image show what i am getting, corner and shadow also not showing properly
What I want i.e. Expected Result
I would suggest you use card view instead.
Add the dependency to your app module's build.gradle
dependencies {
implementation "androidx.cardview:cardview:1.0.0"
}
Replace your current LinearLayout snippet with
<androidx.cardview.widget.CardView
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:orientation="vertical"
app:cardCornerRadius="5dp"
android:elevation="2dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</androidx.cardview.widget.CardView>
for more info on CardView see https://developer.android.com/guide/topics/ui/layout/cardview#kts
Try to add android:clipToPadding="false" to the parent ConstraintLayout which is holding the elevated view. Please see the accepted answer to this post for more details.
How I can hide Items on recyclerview scrollbar gradually
I want like this Image
Tool Bar
<?xml version="1.0" encoding="utf-8"?>
<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/toolbar"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="#color/posts_toolbar"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<com.salah250.forvo.Funcations.TextViewFont
android:id="#+id/txt_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/posts_title"
android:textColor="#color/posts_title"
android:textSize="18dp" />
</android.support.v7.widget.Toolbar>
Activity Posts
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/posts_main"
android:orientation="vertical"
tools:context=".Posts.PostsActivity">
<include layout="#layout/toolbar_posts" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_posts"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never" />
</LinearLayout>
I looked before I could post here and I could not find any topics talking about it at all, I hope to get some ideas for doing that.
You can put gradient image in front of your RecyclerView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/posts_main"
android:orientation="vertical"
tools:context=".Posts.PostsActivity">
<include layout="#layout/toolbar_posts" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_posts"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never" />
<ImageView
android:layout_width="match_parent"
android:layout_height="40dp"
android:src="#drawable/gradient"/>
<FrameLayout/>
</LinearLayout>
#drawable/gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#00FFFFFF"
android:startColor="#302e43" />
</shape>
Then also add empty view with height of gradient to the header of your RecyclerView so topmost item will be not faded
I want to set different background for every item in navigation drawer.
I want to achieve
Can Any one of you will explain how to that ?
My Activity_main.xml
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="#menu/nav_menu"
android:fitsSystemWindows="true"
android:background="#android:color/black"
app:itemTextColor="#android:color/white"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_header"
app:itemIconTint="#android:color/white"
app:itemBackground="#drawable/header_background"
/>
Create a custom navigationView layout and include the layout like below,
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="end"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main">
<include layout="#layout/custom_layout"></include>
</android.support.design.widget.NavigationView>
custom_layout.xml file
<?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.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
Now just shape a drawable like this,(change the colors as per your need)
btn_green_border.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/colorSkyBlue"
tools:targetApi="lollipop">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorAccent" />
<stroke
android:width="#dimen/_1dp"
android:color="#color/colorLightBlue"></stroke>
<corners android:radius="#dimen/_30dp"></corners>
<size
android:width="#dimen/_50dp"
android:height="#dimen/_100dp"></size>
</shape>
</item>
</ripple>
and use this drawable in the layout for your RecyclerView items like the following
item_row.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_card"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/btn_refer"
android:layout_width="200dp"
android:layout_height="#dimen/_40dp"
android:background="#drawable/btn_green_border"
android:text="Navigation Item Name"
android:textAllCaps="false"
android:textColor="#color/colorPrimary" />
</LinearLayout>
And you will achieve what you want.
Thank you
is it possible to set top border for bottom navigation bar in android, if possible tell me how we can do this, i am using the new bottom navigation view of android.
Here is my code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true">
<include
android:id="#+id/gamebar"
layout="#layout/gamebar_layout"
/>
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_layout" />
</LinearLayout>
<!-- Let's add fragment -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/app_bar_layout"
android:layout_above="#+id/bottom_navigation"
android:id="#+id/contentContainer"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
app:itemBackground="#color/BottomNavigationBgColor"
app:itemIconTint="#color/CelestialBlue"
app:itemTextColor="#color/CelestialBlue"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>
You can try this: add a View element above BottomNavigationView
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_above="#+id/bottom_navigation"
android:background="#000000"></View>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
app:itemBackground="#color/BottomNavigationBgColor"
app:itemIconTint="#color/CelestialBlue"
app:itemTextColor="#color/CelestialBlue"
app:menu="#menu/bottom_navigation_main" />
Define a background drawable using XML:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimaryDark" />
</shape>
</item>
<item android:top="1dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorWhite" />
</shape>
</item>
</layer-list>
Use it as background with
android:background="#drawable/myBackgroundBottomDrawer"
You can add top border by creating a new LinearLayout with a View for top border and place android.support.design.widget.BottomNavigationView below top ber View.
Here is the working code. Just update your XML as below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true">
<include
android:id="#+id/gamebar"
layout="#layout/gamebar_layout"/>
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_layout" />
</LinearLayout>
<!-- Bottom Navigation Layout-->
<LinearLayout
android:id="#+id/layout_bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true">
<!-- Top Border -->
<View
android:layout_width="match_parent"
android:layout_height="6dp"
android:background="#FF0000">
</View>
<!-- BottomNavigationView -->
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
app:itemBackground="#color/BottomNavigationBgColor"
app:itemIconTint="#color/CelestialBlue"
app:itemTextColor="#color/CelestialBlue"
app:menu="#menu/bottom_navigation_main" />
</LinearLayout>
<!-- Let's add fragment -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/app_bar_layout"
android:layout_above="#id/layout_bottom_navigation"
android:id="#+id/contentContainer"/>
</RelativeLayout>
UPDATE: If you don't use View then you can add attribute android:layout_marginTop to android.support.design.widget.BottomNavigationView and set background color to android:background="#FF0000" to LinearLayout.
<!-- Bottom Navigation Layout-->
<LinearLayout
android:id="#+id/layout_bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:background="#FF0000">
<!-- BottomNavigationView -->
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginTop="6dp"
app:itemBackground="#color/BottomNavigationBgColor"
app:itemIconTint="#color/CelestialBlue"
app:itemTextColor="#color/CelestialBlue"
app:menu="#menu/bottom_navigation_main" />
</LinearLayout>
Hope this will help you~
Here is the fixed version of the latest answer's issue where the divider is slightly thin.
Define a background drawable using XML:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="top">
<shape android:shape="rectangle">
<size android:height="1.0dip" />
<solid android:color="#color/colorWhite" />
</shape>
</item>
</layer-list>
Use it as background with
android:background="#drawable/bottom_navigation_view_background"
How can I add a divider so that it appears underneath the action bar and above the master/detail panes? I've already defined the vertical divider but don't know how to define the horizontal divider also.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:divider="#drawable/divider_vertical"
android:showDividers="middle"
android:baselineAligned="false"
tools:context=".MainActivity" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/master_container"/>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:id="#+id/detail_container"/>
</LinearLayout>
divider_vertical.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:width="1dp"/>
<solid android:color="#FFFFFF"/>
</shape>
divider_horizontal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:height="1dp"/>
<solid android:color="#FFFFFF"/>
</shape>
I do not see the code for the toolbar, so in my sense there should be a view below the toolbar as follows. I have used material design toolbar, you may use any toolbar.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark">
</android.support.v7.widget.Toolbar>
<View android:layout_height="0dp"
android:layout_width="fill_parent"
android:id="#+id/stripBelowToolbar"/>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/Theme.Insider.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="#color/black"
android:elevation="0dp"
android:theme="#style/ToolbarColoredBackArrow"
android:background="#color/background_tint"
app:popupTheme="#style/Theme.Insider.PopupOverlay" />
<View
android:background="#color/lighter_color"
android:layout_width="match_parent"
android:layout_height="2dp"
/>
</com.google.android.material.appbar.AppBarLayout>
This worked for me