I want to make this shape,for that i tried layer-list to design such shape but it doesn't happen exactly what i want.
<?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="#color/APP_PRIMARY"/>
<corners android:topRightRadius="100dp"
android:bottomRightRadius="100dp"/>
</shape>
</item>
<item android:width="100dp" >
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
<corners android:topRightRadius="90dp"
android:bottomRightRadius="90dp"/>
</shape>
</item>
</layer-list>
Output of above code is
Desired Output.
This is what you exactly want
<?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="#color/colorPrimary"/>
<corners android:radius="90dp"
/>
</shape>
</item>
<item android:width="100dp" >
<shape android:shape="rectangle">
<solid android:color="#ffff"/>
<corners android:radius="90dp"/>
</shape>
</item>
<item android:width="90dp" >
<shape android:shape="rectangle">
<solid android:color="#color/red"/>
<corners android:radius="90dp"
/>
</shape>
</item>
Inform me either it works or not. Thanks
you can use horizontal linear layout consists of two views
the right view you can use this drawable
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- The bottom layer is blue square.-->
<item
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp">
<shape>
<solid android:color="#color/accentYellowCanary" />
<size android:height="100dp"
android:width="200dp" />
<corners android:topLeftRadius="50dp"
android:bottomLeftRadius="50dp"
android:topRightRadius="50dp"
android:bottomRightRadius="50dp"/>
</shape>
</item>
<!-- The middle layer is green circle.-->
<item
android:left="5dp"
android:top="5dp"
android:right="150dp"
android:bottom="5dp">
<shape android:shape="oval">
<size
android:width="100dp"
android:height="100dp" />
<solid android:color="#FFF" />
</shape>
</item>
which will result :
and for the left one you can use
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- The bottom layer is blue square.-->
<item
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp">
<shape>
<solid android:color= "#color/offWhite"/>
<size android:height="100dp"
android:width="200dp" />
<corners android:topLeftRadius="50dp"
android:bottomLeftRadius="50dp"
android:topRightRadius="50dp"
android:bottomRightRadius="50dp"/>
</shape>
</item>
Related
I want to create edittext and button like this. I am not able to create the bottom shadow and round corner. please help me to design the xml.
This is my xml code
<item>
<shape android:shape="rectangle">
<solid android:color="#2CB386" />
<corners android:radius="5dp"/>
</shape>
</item>
<item android:bottom="5px">
<shape android:shape="rectangle">
<solid android:color="#F5F2F2" />
</shape>
</item>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Deep Green shadow. -->
<item android:left="3dp" android:top="5dp">
<shape>
<solid android:color="#046A4B" />
<corners android:radius="15dp" />
</shape>
</item>
<!-- Green foreground. -->
<item android:bottom="5dp" android:right="3dp">
<shape>
<solid android:color="#2CB386" />
<corners android:radius="15dp" />
</shape>
</item>
Create a button_bg.xml file under drawable folder and set your button background to button_bg.xml
android:background="#drawable/button_bg"
I searched in internet to find a way to implement graphical designs then I find a way to implement them with drawables;
I start to coding the template but it doesn't display correctlly :(
My designed drawable
Main layout
what is the problem ? How can I fix it ?
I designed it but it dosen't work. I don't know what is the problem with that.
Should I use image of that template in the background of imageview for all templates like this ?
Notice : I set that drawable for background of layouts like linear,relative and constraint but doesn't shown correctly too.
<?xml version="1.0" encoding="utf-8"?>
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#9c9c9c" />
</shape>
</item>
<item
android:bottom="920dp"
android:left="-100dp"
android:right="50dp"
android:top="-700dp">
<rotate
android:fromDegrees="50"
android:pivotX="-50%"
android:pivotY="100%">
<shape android:shape="rectangle">
<solid android:color="#fff" />
<corners android:radius="30dp" />
<stroke
android:width="2dp"
android:color="#dfcefc" />
</shape>
</rotate>
</item>
<item
android:bottom="50dp"
android:left="-30dp"
android:right="315dp"
android:top="-100dp">
<rotate
android:fromDegrees="-40"
android:pivotX="10%"
android:pivotY="50%">
<shape android:shape="rectangle">
<solid android:color="#fff" />
<corners android:radius="20dp" />
<stroke
android:width="2dp"
android:color="#dfcefc" />
</shape>
</rotate>
</item>
<item
android:bottom="200dp"
android:left="100dp"
android:right="-400dp"
android:top="-40dp">
<rotate
android:fromDegrees="-40"
android:pivotX="60%"
android:pivotY="40%">
<shape android:shape="rectangle">
<solid android:color="#fff" />
<corners android:radius="30dp" />
<stroke
android:width="2dp"
android:color="#dfcefc" />
</shape>
</rotate>
</item>
<item
android:bottom="420dp"
android:left="120dp"
android:right="150dp"
android:top="100dp">
<rotate
android:fromDegrees="-40"
android:pivotX="365%"
android:pivotY="125%">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<gradient
android:angle="270"
android:endColor="#7436f6"
android:startColor="#aa57e5"
android:type="linear" />
</shape>
</rotate>
</item>
<item
android:bottom="-200dp"
android:left="-100dp"
android:right="240dp"
android:top="500dp">
<rotate
android:fromDegrees="-40"
android:pivotX="60%"
android:pivotY="5%">
<shape android:shape="rectangle">
<solid android:color="#fff" />
<corners android:radius="30dp" />
<stroke
android:width="2dp"
android:color="#dfcefc" />
</shape>
</rotate>
</item>
<item
android:bottom="100dp"
android:left="-100dp"
android:right="100dp"
android:top="200dp">
<rotate
android:fromDegrees="-40"
android:pivotX="130%"
android:pivotY="145%">
<shape android:shape="rectangle">
<solid android:color="#fff" />
<corners android:radius="30dp" />
<gradient
android:angle="270"
android:endColor="#7436f6"
android:startColor="#aa57e5"
android:type="linear" />
</shape>
</rotate>
</item>
I need it. Please help me :)
use <size android:width="50dp"
android:height="50dp"
/> to set height width
here is your square
<item
android:bottom="420dp"
android:left="120dp"
android:right="150dp"
android:top="100dp">
<rotate
android:fromDegrees="-40"
android:pivotX="365%"
android:pivotY="125%">
<shape android:shape="rectangle">
<size android:width="50dp"
android:height="50dp"
/>
<corners android:radius="10dp" />
<gradient
android:angle="270"
android:endColor="#7436f6"
android:startColor="#aa57e5"
android:type="linear" />
</shape>
</rotate>
</item>
Change
app:src="#drawable/test3"
to
app:srcCompat="#drawable/test3"
in your ImageView of MainLayout (i.e. page_text.xml)
Hopefully it will work.. Try it..
I want to have a pattern as a background in my RelativeLayout which is repeated.
<RelativeLayout
android:layout_width="0dp"
android:layout_height="600dp"
android:layout_weight=".20"
android:background="#drawable/timetable_background"
android:tileMode="repeat" >
But the tileMode does not work and shows only one run.
This is my pattern:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:bottom="50dp" android:height="50dp">
<shape android:shape="rectangle" >
<solid android:color="#color/timetableEntryBackground1" />
</shape>
</item>
<item android:top="50dp" android:height="50dp">
<shape android:shape="rectangle" >
<solid android:color="#color/timetableEntryBackground2" />
</shape>
</item>
</layer-list>
What do I need to change, that the background repeats?
You should use the tileMode inside the item of your layer-list, like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:bottom="50dp" android:height="50dp">
<shape android:shape="rectangle" >
<solid
android:color="#color/timetableEntryBackground1"
android:tileMode="repeat" />
</shape>
</item>
...
</layer-list>
i want to make my own background transparent, can anyone guide me how.
below is the background color i wanna use and i want it transparent
<?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="rectangle" >
<corners android:radius="10dp" />
<stroke android:width="1dip" android:color="#ffffff" />
<gradient android:angle="-90" android:startColor="#ffffff" android:endColor="#000000" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="10dp" />
<stroke android:width="1dip" android:color="#000000" />
<solid android:color="#ffffff"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="10dp" />
<stroke android:width="1dip" android:background="#null" />
<gradient android:angle="-90" android:startColor="#C0C0C0" android:centerColor="#C0C0C0" android:endColor="#C0C0C0" />
</shape>
</item>
</selector>
Try to use #android:color/transparent for your background field, it is the android's system color for transparency
I was planning to add a shadow on my edittext I know how to add shadow but I want also to add a selector on it how can I add selector and shadow at the same time?
selector:
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:state_focused="true">
<shape>
<solid
android:color="#3f3f3f"/>
<stroke
android:width="2.3dp"
android:color="#656565" />
<corners
android:radius="2dp" />
</shape>
</item>
<item android:state_pressed="true" android:state_focused="false">
<shape>
<solid
android:color="#3f3f3f"/>
<stroke
android:width="2.3dp"
android:color="#656565" />
<corners
android:radius="2dp" />
</shape>
</item>
<item android:state_pressed="false" android:state_focused="true">
<shape>
<solid
android:color="#3f3f3f"/>
<stroke
android:width="2.3dp"
android:color="#656565" />
<corners
android:radius="2dp" />
</shape>
</item>
<item android:state_pressed="true" android:state_focused="true">
<shape>
<stroke
android:width="2.3dp"
android:color="#F6EBC9" />
<corners
android:radius="10dp" />
</shape>
</item>
<item android:state_enabled="true">
<shape>
<solid
android:color="#3f3f3f"/>
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp"
/>
</shape>
</item>
</selector>
shadow:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- most improtant is order of layers -->
<!-- Bottom right side 2dp Shadow -->
<item >
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
<!-- White Top color -->
<item android:bottom="3px" android:right="3px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
edittext:
<EditText
android:id="#+id/searchScreen2Edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/textinputborder"
android:ems="10"
android:hint="Search Bus Station..."
android:imeOptions="actionDone"
android:inputType="textVisiblePassword"
android:padding="8dip"
android:textSize="18sp"
android:shadowColor="#000000"
android:shadowDx="1.2"
android:shadowDy="1.2"
android:shadowRadius="1.5"
>
I dont know how to implement the both cause I can add two background at the same time.. how can Do it?