I have a shape (rectangle) for ListItem selector:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#eef0f3" />
<corners
android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp"
android:topLeftRadius="4dp"
android:topRightRadius="4dp" />
</shape>
It's rectangle with color #eef0f3, but I need use background image instead of:
<solid android:color="#eef0f3" />
How can I to do this?
You could use a layer-list instead of a shape.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_image" />
<item>
<shape android:shape="rectangle">
<corners
android:bottomRightRadius="4dp"
android:bottomLeftRadius="4dp"
android:topLeftRadius="4dp"
android:topRightRadius="4dp"/>
</shape>
</item>
You will also need to add rounded corners to the image. To do this, look up:
How to make an ImageView with rounded corners?
Related
I have a bottom nav that had a shape corner and i want to make something above it and it should be curved to inside like this image
Create Drawable which have top corners as round shape
navigation_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">
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_orange_dark" />
<corners
android:topLeftRadius="16dp"
android:topRightRadius="16dp" />
</shape>
</item>
</layer-list>
Replace view background with navigation_background.xml to make view top corners as round.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:background="#drawable/navigation_background"
... />
I am attempting to create a drawable shape that will become the background of a search bar. I know how to create a rectangle with two colors but I do not know how to tilt the color at an angle, like in the second image. Can someone help me with this? Thanks.
Take a Toolbar...code is here...
<android.support.v7.widget.Toolbar
android:layout_width="500dp"
android:layout_height="wrap_content"
android:background="#drawable/custom_background" />
create a drawable res file custom_background.xml and
In that toolbar set drawable like this....code is here
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<size
android:width="500dp"
android:height="50dp" />
<solid android:color="#0072BC" />
<corners android:radius="0dp"/>
</shape>
</item>
<item
android:top="8dp"
android:bottom="0dp"
android:left="-400dp"
android:right="128dp">
<rotate
android:fromDegrees="160">
<shape android:shape="rectangle">
<solid android:color="#FFF" />
</shape>
</rotate>
</item>
I need to create a round corner border, where border with gradient.enter link description here is working.But My page is using a image as background which is also with gradient. I need to show background image from middle of the filed. I want to create just like below image:
round_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="4dp"
android:color="#color/transparent" />
<gradient
android:startColor="#374533"
android:centerColor="#432727"
android:endColor="#222430"
android:angle="135"/>
<corners android:radius="10dp" />
</shape>
round_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#efe301"
android:centerColor="#7dc17b"
android:endColor="#01dae6"
android:angle="180"/>
<corners android:radius="10dp" />
result_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/round_border"/>
<item android:drawable="#drawable/round_background" />
</layer-list>
Here, you can set android:width="4dp" in round_background.xml to set size of your border. use result result_drawable.xml where you want..
Enjoy. :}
I am trying to create drawable resource oval com rectangle shape? I want exact the below shape
But I am getting the follow :
what I'm using:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:startColor="#36D53D"
android:centerColor="#36D53D"
android:endColor="#36D53D"
android:angle="90"/>
<padding android:left="3dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
<corners android:radius="160dp"></corners>
</shape>
how to create the shape what I want? Thank you in advance
Try this one for oval.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<!-- fill/color -->
<solid
android:color="#ff0000"/>
<!-- Control the width and height of the shape -->
<size
android:width="120dp"
android:height="70dp"/>
</shape>
Rectangle with rounded corner
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- fill/color -->
<solid
android:color="#ff0000"/>
<!-- Control the width and height of the shape -->
<size
android:width="200dp"
android:height="70dp"/>
<!-- Control the radius of each corners -->
<corners
android:topLeftRadius="30dp"
android:topRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"/>
</shape>
Try this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#189B5F" />
<corners
android:topLeftRadius="15dp"
android:topRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
/>
</shape>
use shape drawable and for android:shape give rectangle
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
</shape>
increase the corner dp value can keep checking. i think giving around 20-25dp for all corners will give you that shape. And for correction it is not oval it is rounded rectangle.
I'd like to have a background color of a RelativeLayout similar to that of an image shown in the link below. Ignore the black strip in the bottom half of the image.
I don't want to use the image as a background of the layout. Can you give me an idea of how to proceed?
You can use gradient. Set different gradient in selector as you want. Done!
GradientDrawable.class
This is what you want, set your colors. Enjoy!
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:bottom="30dp">
<shape android:shape="rectangle" >
<corners
android:topRightRadius="8dip"
android:topLeftRadius="8dip" />
<gradient
android:startColor="#030303"
android:endColor="#3B3B3B"
android:angle="270" />
</shape>
</item>
<item android:top="30dp" >
<shape android:shape="rectangle" >
<corners
android:bottomLeftRadius="8dip"
android:bottomRightRadius="8dip" />
<gradient
android:startColor="#4B5057"
android:endColor="#4B5059"
android:angle="270" />
<size android:height="30dp" />
</shape>
</item>
</layer-list>
just try with shape file structure. I think this may give the solution.
//save this below code as gradient and use as background of your layout as
android:background="#drawable/gradient"
//gradient.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#232323" android:endColor="#4B5059"
android:angle="270"/>
</shape>