how to implement layout shadow in xml layer list? - java

i need to make a menu shadow like in the photo. how can i implement it?

this is the one I use
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#d8d8d8" />
<corners android:radius="7dp" />
</shape>
</item>
<!-- White Top color -->
<item android:bottom="5px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="7dp" />
</shape>
</item>
</layer-list>

I just made this drawable for this case
shadow.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#00FFFFFF"
android:endColor="#0c6bba"
android:type="linear" />
</shape>
</item>
</layer-list>
And set it to the navigation drawer like this
navigationDrawer.setDrawerShadow(R.drawable.shadow, GravityCompat.START);

Related

Right-Bottom-Corner black colored on a layer list

I have this code for the style of my list item.
<?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="40dp"
android:height="40dp" />
<solid android:color="#444444" />
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>
</item>
<item android:top="30dp">
<shape android:shape="rectangle">
<size
android:width="30dp"
android:height="30dp" />
<solid android:color="#2f2f2f" />
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="00dp"
android:topRightRadius="0dp"/>
</shape>
</item>
</layer-list>
How can I dye the right bottom corner black ?
When I add a new layer-list-item it only appears at the bottom of the last.
Here is an example what I want to do:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary" />
<item
android:bottom="-200dp"
android:right="-200dp"
android:top="250dp">
<rotate
android:fromDegrees="-6"
android:pivotX="0%"
android:pivotY="100%">
<shape android:shape="rectangle">
<solid android:color="#edf0f9" />
</shape>
</rotate>
</item>
</layer-list>
Try this one and chnage from degree ,pivot x and y
and one thing add this as child view and put both view inside framelayout

Adding shadow to the view

I have a view and I need to add shadow to it below and right. Here is my xml.
With this xml, the borders at bottom and right look like a line rather than a shadow.
<?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/darkGray"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/darkGray"/>
</shape>
</item>
<item android:bottom="5px" android:right="5px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#color/lightGray"/>
</shape>
</item>
</layer-list>
How can add shadow with the above code?
For shadow you can use elivation attributes in your view component. Check below show for show shadow in button :-
<Button
android:elevation="5dp"/>

Move text in android Button on click

I have a button with some shapes as a background so basically I want to move the text a little bit to the bottom so it makes a 3D effect
Here is an image of my button
Left(not clicked) and Right(clicked). Please ignore click circle.
Selector XML file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false"
android:state_pressed="false" android:drawable="#drawable/button_red_normal" />
<item android:state_focused="false"
android:state_pressed="true" android:drawable="#drawable/button_red_pressed" />
<item android:state_focused="true"
android:state_pressed="false" android:drawable="#drawable/button_red_focused" />
</selector>
Normal state drawable:
<?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="#FF0000" />
<corners android:radius="#dimen/button_radius" />
</shape>
</item>
<item android:bottom="#dimen/button_padding_bottom">
<shape android:shape="rectangle">
<solid android:color="#color/red" />
<corners android:radius="#dimen/button_radius" />
</shape>
</item>
</layer-list>
Pressed state drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/red" />
<corners android:radius="#dimen/button_radius" />
</shape>
Is it possible to make the text move to the bottom just with XML?

How to define a different color and width of an EditText in Android

This is how I go about adding a border to a EditText. How can I go about adding a border only on 3 sides of a EditText, and define a different color and width to each of the borders?
EditText editText = new EditText(this);
editText.setText("Find");
editText.setWidth(555);
GradientDrawable border = new GradientDrawable();
border.setColor(0xFFFFFFFF); // white background
border.setStroke(1, 0xFF000000); // black border with full
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
editText.setBackgroundDrawable(border);
} else {
editText.setBackground(border);
}
My attempt below doesn't work:
<?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="#FF0000" />
</shape>
</item>
<item android:right="5dp">
<shape android:shape="rectangle">
<solid android:color="#FFFF" />
</shape>
</item>
<item android:left="22dp">
<shape android:shape="rectangle">
<solid android:color="#746565" />
</shape>
</item>
</layer-list>
Vielen dank im voraus.
Create a layer-list drawable and define 3 different rectangle shape with custom width and color, and hide 3 side of each shape to show only one side. like this:
my_edittext_border.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list android:paddingLeft="30dp" xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="-1dp"
android:left="-1dp"
android:right="-1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#ff0000" />
</shape>
</item>
<item
android:bottom="-3dp"
android:right="-3dp"
android:top="-3dp">
<shape android:shape="rectangle">
<stroke
android:width="3dp"
android:color="#11ee66" />
</shape>
</item>
<item
android:bottom="-5dp"
android:left="-5dp"
android:top="-5dp">
<shape android:shape="rectangle">
<stroke
android:width="5dp"
android:color="#0000ff" />
</shape>
</item>
</layer-list>
Now set this drawable to your EditText background:
android:background="#drawable/my_edittext_border"
Set this drawable as background and modify it as per your choice:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Top border-->
<item
android:bottom="-2dp"
android:left="-2dp"
android:right="-2dp"
android:top="0dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/black" />
</shape>
</item>
<!--Bottom border-->
<item
android:bottom="0dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/orange" />
</shape>
</item>
<!--Right border-->
<item
android:bottom="-2dp"
android:left="-2dp"
android:right="0dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/remove" />
</shape>
</item>
<!--Left border-->
<item
android:bottom="-2dp"
android:left="0dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/green" />
</shape>
</item>
</layer-list>
Above all answer you can also use vector drawable to draw that :
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="200px"
android:width="200px"
android:viewportHeight="150"
android:viewportWidth="200">
<path
android:strokeColor="#android:color/black"
android:strokeWidth="1"
android:pathData="M0,0 L100,0 "/>
<path
android:strokeColor="#android:color/white"
android:strokeWidth="1"
android:pathData="M100,0 L100,100 "/>
<path
android:strokeColor="#android:color/holo_red_light"
android:strokeWidth="1"
android:pathData="M100,100 L0,100 "/>
<path
android:strokeColor="#android:color/holo_green_dark"
android:strokeWidth="1"
android:pathData="M0,100 L0,0 "/>
</vector>

How to style ToggleButton so that the background color is WHITE?

I have tried the following
View view = (View) findViewById (id);
view.setBackgroundColor (Color.WHITE);
The above destroys the property of the ToggleButton. I can no longer make out if it is TextView or ToggleButton. Clicking the button produces onClick but the UI change to show the selected bar is absent.
ToggleButton btn = (ToggleButton) findViewById (id);
btn.setBackgroundColor (Color.WHITE);
This also produces the same error. Using XML styling also causes the same error. I am using Android Studio v1.0.2 and the target is a lollipop emulator. I tried the same thing in 4.4.4 mobile. I see the same behavior.
I don't want to use images. Kindly don't suggest that to me. I have gone through the threads that are available in stackoverflow - nothing works for me.
Can anyone help me?
It will be something like this as an xml file in drawables that you want as the background for the toggle button. You need to add the various colors to a color file in res/values. See: https://developer.android.com/samples/MediaRouter/res/values/colors.html
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:state_pressed="true">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_pressed" />
</shape>
</item>
<item android:top="2dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_checked" />
</shape>
</item>
<item android:top="2dp" android:bottom="2dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_pressed" />
</shape>
</item>
</layer-list>
</item>
<item android:state_pressed="true">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_pressed" />
</shape>
</item>
<item android:top="2dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_unchecked" />
</shape>
</item>
<item android:top="2dp" android:bottom="2dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_pressed" />
</shape>
</item>
</layer-list>
</item>
<item android:state_checked="true">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_shadow" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_unpressed" />
</shape>
</item>
<item android:bottom="2dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_checked" />
</shape>
</item>
<item android:bottom="4dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_unpressed" />
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_shadow" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_unpressed" />
</shape>
</item>
<item android:bottom="2dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_unchecked" />
</shape>
</item>
<item android:bottom="4dp" android:left="10dp" android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/toggle_button_unpressed" />
</shape>
</item>
</layer-list>
</item>
</selector>
I haven't checked it so I don't know if it works. Please let me know if I made any errors.

Categories