Customize Edittext and Button - java

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"

Related

How Can I add line(view) below each of the item name in bottom navigation view?

I want to add a line below each name of the items. How can I do this with bottom navigation view? The image has an orange line below the item name. So It should be visible for the selected item only. I have done with the Linear layout. I need to do with the bottom navigation view.
Please check with this image. I did with selector functions for this
attribute app:itemBackground="#drawable/selector"
For do this:
Create 2 drawables, 1 whit and 1 without the under line
Whit line:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
<item
android:right="20dp"
android:left="20dp">
<shape>
<stroke
android:width="4dp"
android:color="#color/bottom_sheet_divider" />
<solid android:color="#color/transparent" />
</shape>
</item>
<item
android:bottom="4dp">
<shape>
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
without line:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
</shape>
</item>
<item android:top="-41dp" android:right="-41dp" android:left="-41dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="4dp"
android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
Create a drawable whit drawable checked state
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/line_selected" android:state_checked="true"/>
<item android:drawable="#drawable/line_unselected" android:state_checked="false"/>
</selector>
Add this drawable on the BottomNavigationView
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
---> app:itemBackground="#drawable/item_line"
app:menu="#menu/bottom_navigation_menu" />

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>

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?

Create own styles in Android

Every time I try to customize the style of a view I have the same problem.
What parameters can I change; and how to override the system defaults? For example:
How to change the highlighted color of a element of a ListView when clicked
How to change the default frame of a DialogFragment? I mean the frame that is removed with the Style DialogFragment.STYLE_NO_FRAME.
Where can I check what are the values I should play with for achieve my custom layouts?
Thanks
Well you can change the look by creating a new xml file in the drawable folder but dont make a layout xml jus pick andrid xml from the wizard and it will give u a list of components you can modify including colour.
<?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/black" />
</shape>
</item>
<item android:top="1dp" android:left="2dp" android:right="2dp" android:bottom="25dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_purple" />
</shape>
</item>
<item android:top="1dp" android:left="400dp" android:right="2dp" android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_purple" />
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp" android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
</item>
<item android:top="1dp" android:left="2dp" android:right="400dp" android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_purple" />
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp" android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
</item>
</layer-list>
then you can just change whats required!
But provider some code and i will be able to answer better..

Categories

Resources