Transparent background for android - java

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

Related

How to design this shape in android

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>

UI error between what I design in drawables and what is displaying in imageview

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..

Change Button Shape on selected State?

I have an Android Button:
<Button
android:layout_width="wrap_content"
android:layout_height="44dp"
android:background="#drawable/action_button" />
action_button.xml is:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<padding
android:left="25dp"
android:right="25dp"/>
<gradient
android:angle="0"
android:endColor="#color/whiteColor"
android:startColor="#color/whiteColor"/>
<corners android:radius="#dimen/borderRadius"/>
<stroke
android:width="2px"
android:color="#color/actionColor"/>
</shape>
How can I change the shape, when the button is pressed?
Hi please use below selector and change according to your need
selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- <item android:state_enabled="false"
android:drawable="#drawable/cyan_strip" />
<item android:state_pressed="true"
android:drawable="#drawable/cyan_strip" />
<item android:state_pressed="false" android:state_focused="true"
android:drawable="#drawable/cyan_strip" />
<item android:drawable="#drawable/black_strip" /> -->
<item android:state_enabled="false">
<shape>
<solid
android:color="#4ec9d9" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid
android:color="#4ec9d9" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item android:state_pressed="false" android:state_focused="true">
<shape>
<solid
android:color="#4ec9d9" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item android:state_selected="true">
<shape>
<solid
android:color="#4ec9d9" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item >
<shape>
<solid
android:color="#000000" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
</selector>
you need a selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/action_button_pressed" />
<item android:drawable="#drawable/action_button" />
</selector>
put it in a xml file, under drawable/, and use it as background for your Button . Android will take care of the rest
see :
Link
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#302226"
android:endColor="#6D7B8D"
android:angle="45"/>
<padding android:left="6dp"
android:top="6dp"
android:right="6dp"
android:bottom="6dp" />
<corners android:radius="30dp" />
</shape>
or see :
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/shape_oval" />
Shape_oval is an image which we can take from google serching or drawing ourself in paint or photoshop.

An alternative way to set color values than in the drawable XML

I have a customized ProgressBar which gets its drawable from the drawable folder.
The XML:
<?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="5dip" />
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
>
<clip>
<shape>
<corners
android:radius="5dip" />
<gradient
android:startColor="#33FF33"
android:endColor="#008000"
android:angle="270" />
</shape>
</clip>
</item>
</layer-list>
I want to be able to change the startColor of progress (which is "#33FF33" in the XML). I need an alternative way to set the color.
lg, couka
After this line ,your ProgressBar will be in RED color: you can change it as you want
progressBar.getProgressDrawable().setColorFilter(Color.RED, Mode.SRC_IN);
Or try this solution :
https://stackoverflow.com/a/11288434/2337837

adding selector and layer list to edittext

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?

Categories

Resources