activity_main_tab_background
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<layer-list>
<item android:gravity="top">
<shape android:shape="rectangle">
<size android:height="#dimen/_5fdp"/>
<solid android:color="#color/red"/>
<corners android:bottomLeftRadius="#dimen/_3fdp"
android:bottomRightRadius="#dimen/_3fdp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
bottom navigation in main activity
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/main_bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#drawable/activity_main_tab_background"
app:labelVisibilityMode="unlabeled"
app:menu="#menu/home_bottom_nav" />
My output
expected output
How can I change the indicator width?
<size android:height="#dimen/_5fdp" android:width="#dimen/_10fdp"/> // tried and not working
You can tackle this by designating the desired width in your drawable and use a center or center_horizontal gravity besides the top:
For API Level 23+:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<layer-list>
<item android:width="50dp" android:gravity="top|center_horizontal">
<shape android:shape="rectangle">
<size android:height="#dimen/_5fdp" />
<solid android:color="#color/red" />
<corners android:bottomLeftRadius="#dimen/_3fdp" android:bottomRightRadius="#dimen/_3fdp" />
</shape>
</item>
</layer-list>
</item>
</selector>
UPDATE:
The down side of the above is that the android:width is available at API level 23. But you can use it within the <size> tag to be available on any API level, and the result is the same:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<layer-list>
<item android:gravity="top|center_horizontal">
<shape android:shape="rectangle">
<size android:width="50dp" android:height="#dimen/_5fdp" />
<solid android:color="#color/red" />
<corners android:bottomLeftRadius="#dimen/_3fdp" android:bottomRightRadius="#dimen/_3fdp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Preview:
i'm trying to create a border for a Button with two color white and black. So I decide to create a shape. i trying to add gradient with white and black color my code doesn't work
i want border like this :
my xml :
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="360"
android:centerColor="#000000"
android:endColor="#bfbfbf"
android:gradientRadius="360"
android:startColor="#ffffff"
android:type="sweep" />
<stroke
android:width="2dp"
android:color="#ffffff" />
</shape>
</item>
<item
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp">
<shape android:shape="rectangle" >
<solid android:color="#d2d2d2" />
</shape>
</item>
</layer-list>
and buttn :
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK"
android:background="#drawable/border"
android:layout_alignBottom="#+id/progress"
android:layout_centerHorizontal="true"
android:id="#+id/okbtn" />
button_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:width="#dimen/stroke_width_outer"
android:color="#000" />
</shape>
</item>
<item
android:bottom="#dimen/stroke_width_outer"
android:right="#dimen/stroke_width_outer">
<shape android:shape="rectangle">
<stroke
android:width="#dimen/stroke_width_outer"
android:color="#FFF" />
</shape>
</item>
<item
android:bottom="#dimen/stroke_width_outer"
android:left="#dimen/stroke_width_outer"
android:right="#dimen/stroke_width_outer"
android:top="#dimen/stroke_width_outer">
<shape android:shape="rectangle">
<stroke
android:width="#dimen/stroke_width_outer"
android:color="#7F7F7F" />
</shape>
</item>
<item
android:bottom="#dimen/stroke_width_inner"
android:left="#dimen/stroke_width_outer"
android:right="#dimen/stroke_width_inner"
android:top="#dimen/stroke_width_outer">
<shape android:shape="rectangle">
<stroke
android:width="#dimen/stroke_width_outer"
android:color="#DFDFDF" />
</shape>
</item>
<item
android:bottom="#dimen/stroke_width_inner"
android:left="#dimen/stroke_width_inner"
android:right="#dimen/stroke_width_inner"
android:top="#dimen/stroke_width_inner">
<shape android:shape="rectangle">
<solid android:color="#BFBFBF" />
</shape>
</item>
</layer-list>
values/dimen.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="stroke_width_outer">3dp</dimen>
<dimen name="stroke_width_inner">6dp</dimen>
</resources>
stroke_width_inner should be twice of stroke_width_outer always
Apply background to button -
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_background"
android:text="OK"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
On Layout Editor -
On Device -
On Device you won't see the grayish left and top border as you see on Layout Editor
This appears to be a good place to use a 9-patch image. Any solution based on a regular .png file, a <shape>, or a <vector> will wind up scaling the white and black borders of your button.
Once you've created your button.9.png file, then you can set it to be your button's background using android:background="#drawable/button".
Edit
Here's a 9-patch based on your linked .png file:
Please look here about creating a shape drawable http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
Once you have done this, in the XML for your button set android:background="#drawable/your_button_border"
I´m working on an app wich uses different progress bars, and I want them to look as the ones in Google fit, with rounded cornes.
I have a custom drawable for each bar with different colors, and it rounds the outside corners but not the inside corners, as you can see here:
My custom drawable is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="#dimen/progress_bar_rounded" />
<solid android:color="#color/progressbarBackground" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="#dimen/progress_bar_rounded" />
<solid android:color="#color/progressbarGreen" />
</shape>
</clip>
</item>
</layer-list>
An the progress bars code is:
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="#dimen/progress_bar_high"
android:id="#+id/GreenProgressBar"
android:indeterminate="false"
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:progressDrawable="#drawable/custom_green_progressbar" />
I could use some libraries as https://github.com/akexorcist/Android-RoundCornerProgressBar , but as it is such a simple thing i think it´s not worth it.
I also have been looking on different threads, but nothing has worked for me.
Any idea, without having to work with .9.png images, if possible?
Thanks a lot!
Use the scale tag rather than clip:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="#dimen/progress_bar_rounded" />
<solid android:color="#color/progressbarBackground" />
</shape>
</item>
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%" android:useIntrinsicSizeAsMinimum="true">
<shape>
<corners android:radius="#dimen/progress_bar_rounded" />
<solid android:color="#color/progressbarGreen" />
<size android:width="#dimen/progress_bar_rounded"/>
</shape>
</scale>
</item>
</layer-list>
I'm working for Android API 16+, testing on an API 21 device.
I'm using a SeekBar programmatically. I've got the following thumb Drawable defined in XML:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#color/my_red" />
<size android:width="18dp" android:height="18dp" />
</shape>
</item>
<item android:state_selected="true">
<shape android:shape="oval">
<solid android:color="#color/my_red" />
<size android:width="12dp" android:height="12dp" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="oval">
<solid android:color="#color/my_red" />
<size android:width="10dp" android:height="10dp" />
</shape>
</item>
<item> <!-- state_default -->
<shape android:shape="oval">
<solid android:color="#color/my_red" />
<size android:width="0dp" android:height="0dp" />
</shape>
</item>
</selector>
I apply this drawable using SeekBar.setProgressDrawable. What happens is that the thumb properly uses the default state drawable (as far as I know, the thumb does not show) but never changes. I tried to use setSelected, requestFocus and to just drag the thumb, but it does not change.
What am I missing?
EDIT: Based on a suggestion by #pskink, I changed my XML to try this:
seekbar_thumb_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/my_red" />
<size android:width="20dp" android:height="20dp" />
</shape>
seekbar_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<inset android:drawable="#drawable/seekbar_thumb_shape"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
android:insetLeft="0dp" />
</item>
<item android:state_selected="true">
<inset android:drawable="#drawable/seekbar_thumb_shape"
android:insetTop="5dp"
android:insetRight="5dp"
android:insetBottom="5dp"
android:insetLeft="5dp" />
</item>
<item android:state_focused="true">
<inset android:drawable="#drawable/seekbar_thumb_shape"
android:insetTop="5dp"
android:insetRight="5dp"
android:insetBottom="5dp"
android:insetLeft="5dp" />
</item>
<item> <!-- state_default -->
<inset android:drawable="#drawable/seekbar_thumb_shape"
android:insetTop="10dp"
android:insetRight="10dp"
android:insetBottom="10dp"
android:insetLeft="10dp" />
</item>
</selector>
The result is extremely random. I was also expecting a small animation to happen, much like the default SeekBar animations, but it just changes drawables brutally.
My goal is just to reproduce a SeekBar close to the one of the YouTube Android App.
I would like to create the same border of this LinearLayout as the example :
In this example, we can see that the border is not the same all around the linearLayout.
How can I create this using an XML drawable file?
For now, I have only able to create a simple border all around the LinearLayout like this :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners
android:radius="1dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp" />
<stroke
android:width="1dp"
android:color="#E3E3E1" />
<solid android:color="#color/blanc" />
</shape>
Try this..
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
That's why CardView exists. CardView | Android Developers
It's just a FrameLayout that supports elevation in pre-lollipop devices.
<android.support.v7.widget.CardView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardUseCompatPadding="true"
app:cardElevation="4dp"
app:cardCornerRadius="3dp" >
<!-- put whatever you want -->
</android.support.v7.widget.CardView>
To use this you need to add dependency to build.gradle:
compile 'com.android.support:cardview-v7:23.+'
I get the best looking results by using a 9 patch graphic.
You can simply create an individual 9 patch graphic by using the following editor:
http://inloop.github.io/shadow4android/
Example:
The 9 patch graphic:
The result:
The source:
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="vertical"
android:background="#drawable/my_nine_patch"
okay, i know this is way too late. but i had the same requirement. i solved like this
1.First create a xml file (example: border_shadow.xml) in "drawable"
folder and copy the below code into it.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<item>
<shape>
<!-- set the shadow color here -->
<stroke
android:width="2dp"
android:color="#7000" />
<!-- setting the thickness of shadow (positive value will give shadow on that side) -->
<padding
android:bottom="2dp"
android:left="2dp"
android:right="-1dp"
android:top="-1dp" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#fff" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
2.now on the layout where you want the shadow(example: LinearLayout) add this in android:background
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="8dip"
android:background="#drawable/border_shadow"
android:orientation="vertical">
and that worked for me.
This is so simple:
Create a drawable file with a gradient like this:
for shadow below a view below_shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#20000000"
android:endColor="#android:color/transparent"
android:angle="270" >
</gradient>
</shape>
for shadow above a view above_shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#20000000"
android:endColor="#android:color/transparent"
android:angle="90" >
</gradient>
</shape>
and so on for right and left shadow just change the angle of the gradient :)
As an alternative, you might use a 9 patch image as the background for your layout, allowing for more "natural" shadows:
Result:
Put the image in your /res/drawable folder.
Make sure the file extension is .9.png, not .png
By the way, this is a modified (reduced to the minimum square size) of an existing resource found in the API 19 sdk resources folder.
I left the red markers, since they don't seem to be harmful, as shown in the draw9patch tool.
[EDIT]
About 9 patches, in case you never had anything to do with them.
Simply add it as the background of your View.
The black-marked areas (left and top) will stretch (vertically, horizontally).
The black-marked areas (right, bottom) define the "content area" (where it's possible to add text or Views - you can call the unmarked regions "padding", if you like to).
Tutorial: http://radleymarx.com/blog/simple-guide-to-9-patch/
You create a file .xml in drawable with name drop_shadow.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--<item android:state_pressed="true">
<layer-list>
<item android:left="4dp" android:top="4dp">
<shape>
<solid android:color="#35000000" />
<corners android:radius="2dp"/>
</shape>
</item>
...
</layer-list>
</item>-->
<item>
<layer-list>
<!-- SHADOW LAYER -->
<!--<item android:top="4dp" android:left="4dp">
<shape>
<solid android:color="#35000000" />
<corners android:radius="2dp" />
</shape>
</item>-->
<!-- SHADOW LAYER -->
<item>
<shape>
<solid android:color="#35000000" />
<corners android:radius="2dp" />
</shape>
</item>
<!-- CONTENT LAYER -->
<item android:bottom="3dp" android:left="1dp" android:right="3dp" android:top="1dp">
<shape>
<solid android:color="#ffffff" />
<corners android:radius="1dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Then:
<LinearLayout
...
android:background="#drawable/drop_shadow"/>
1.First create a xml file name shadow.xml in "drawable" folder and copy the below code into it.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#CABBBBBB" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="6dp"
android:left="0dp"
android:right="6dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
Then add the the layer-list as background in your LinearLayout.
<LinearLayout
android:id="#+id/header_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shadow"
android:orientation="vertical">
Use this single line and hopefully you will achieve the best result;
use:
android:elevation="3dp" Adjust the size as much as you need and this is the best and simplest way to achieve the shadow like buttons and other default android shadows.
Let me know if it worked!
If you already have the border from shape just add elevation:
<LinearLayout
android:id="#+id/layout"
...
android:elevation="2dp"
android:background="#drawable/rectangle" />
Ya Mahdi aj---for RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#7d000000"
android:endColor="#android:color/transparent"
android:angle="90" >
</gradient>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="3dp"
android:top="0dp"
android:bottom="3dp">
<shape android:shape="rectangle">
<padding
android:bottom="40dp"
android:top="40dp"
android:right="10dp"
android:left="10dp"
>
</padding>
<solid android:color="#color/Whitetransparent"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
I know this is late but it could help somebody.
You can use a constraintLayout and add the following property in the xml,
android:elevation="4dp"
I found the best way to tackle this.
You need to set a solid rectangle background on the layout.
Use this code - ViewCompat.setElevation(view , value)
On the parent layout set android:clipToPadding="false"