My app shows a line chart and a custom MarkerView. One problem with the MarkerView is that the shadow doesn't work. The same code works in activity's layout. But, if I copy it to the MarkerView's layout, the shadow doesn't show when I run the app.
To show the shadow, I set elevation to 5dp and a background colour on the View. Then, for its parent view, I set padding to 5dp, set clipToBounds to false. like below:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/line_chart_view"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:padding="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some text"
android:elevation="10dp"
android:background="#FFFFFFFF"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
So for my markerview this elevation wont work. Reason for it is because under the hood everything will be drawn on a canvas. So what we did was basically creating a shadow in our MarkerView XML Layout:
markerview.xml (drawable):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<gradient
android:startColor="#FF808080"
android:endColor="#00000000"
android:gradientRadius="11dp"
android:type="radial" />
</shape>
</item>
<item android:top="1dp" android:left="1dp" android:right="1dp" android:bottom="6dp">
<shape android:shape="oval">
<solid android:color="#android:color/holo_blue_bright" />
<stroke
android:width="3dp"
android:color="#color/white" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
</item>
</layer-list>
As you can see the top, left, right, bottom is there to manipulate the shadow. I know you are working with a textview, but maybe this can give you insight on how it actually works.
Hopefully this helps others who are struggling as well with this issue.
Related
I am trying to create a border around a EditText but it does not work
Here is my EditText code
<EditText
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_margin="16dp"
android:autofillHints="no"
android:background="#drawable/edit_text_border"
android:hint="#string/text"
android:inputType="number"
android:padding="8dp"
android:textColorHint="#757575" />
Here is my .xml code
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:color="#color/border"/>
<corners android:radius="5dp"/>
</shape>
Edit: I tried adding solid color but the whole box became of that color and not just border.
the corners are fixed
You are missing the width on stroke tags.
This should work:
<stroke android:color="#color/border" android:width="5dp"/>
I am trying to create a border on top of the selected bottom navigation view.
Activity.xml
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="60sp"
app:itemBackground="#drawable/bottom_navigation_border"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav_menu"
/>
bottom_navigation_border.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="line">
<stroke android:width="6dp" android:color="#color/red_700"/>
<corners android:radius="5dp"/>
</shape>
</item>
</selector>
This is the current output of the code. I tried adding padding but it didn't work. Is there any to make it to the top of the navigation bar.
for this case 9patch image would be an optimal resolution, check out how to draw such image in HERE
I am trying to design a custom layout like below:
So far I have done as following image but that's not exactly like the intended one:
Here is the code that I have tried.
***et_rounded_corner*******
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/white" />
<corners android:radius="10dp" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" >
</padding>
<stroke
android:width="0dp"
android:color="#color/white"/>
</shape>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/et_rounded_corner"
android:padding="5dp">
<TextView
android:id="#+id/et_search"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentStart="true"
android:layout_toStartOf="#+id/imageView"
android:maxLines="1"
android:padding="5dp"
android:text="#string/loading"
android:textAppearance="#style/Small"
android:visibility="visible" />
<ImageView
android:id="#+id/imageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:background="#color/red"
android:padding="5dp"
android:visibility="visible"
app:srcCompat="#drawable/ic_search" />
</RelativeLayout>
For the record, I have fixed it by using the following background with imageview.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/red" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="0dp"
android:topRightRadius="20dp" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" >
</padding>
<stroke
android:width="0dp"
android:color="#color/red"/>
</shape>
Increase your corner radius to a big number, like 100dp.
<corners android:radius="100dp" />
Android will then create a circle at each end for you.
Apply the same trick to a red background of your `ImageView~ and make the actual image have a transparent background. That will give you the correct rounded corners on the right of the red. But the left will now be rounded.
To make the left border of the red button vertical, either overlay a white block, or better, add a negative left padding to this new red background drawable. Then the left rounded part will try to draw outside the view, so it will not show.
As stated by other answer, you also need to remove the padding from the enclosing view, because this is adding the vertical space, and the right padding on the red image.
For the same reason, remove the padding on your image.
I need to add a shadow to a Button with these attributes "from zeplin":
and this is the design
I tried this code
<Button
android:id="#+id/btn_sign_in"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginTop="35dp"
android:background="#drawable/auth_button_shape"
android:shadowColor="#41ff4800"
android:shadowDx="0"
android:shadowDy="8"
android:text="#string/sign_in"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textSize="14sp" />
auth_button_shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ff7c44" />
<corners android:radius="100dp" />
</shape>
But not worked and the other attributes "Blur" and "Spread" How I can set them for the button.
Thanks.
Thanks to Taras I have solution. You can use this library for creating colored shadow to button. Just place your view element inside shadow layout. Of course basic layout is ConstraintLayout.
Some pieces of code for example
<com.gigamole.library.ShadowLayout
android:id="#+id/shadowLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:sl_shadow_angle="90"
app:sl_shadow_color="#color/light_orange_color"
app:sl_shadow_distance="2dp"
app:sl_shadow_radius="7dp"
app:sl_shadowed="true">
<ImageView
android:id="#+id/ivYourImageName"
android:layout_width="144dp"
android:layout_height="44dp"
android:background="#drawable/button_shape"
android:foregroundGravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
</com.gigamole.library.ShadowLayout>
Button shape :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp" />
<gradient android:angle="180" android:endColor="#ffc349" android:startColor="#ff8006" />
</shape>
</item>
</selector>
Result:
you need to add this line of code inside button tag
android:stateListAnimator="#null"
because button override any evelation value you set by passing null to android:stateListAnimator it will remove stateList attrs
for color you can add this line to show colored shadow
android:outlineSpotShadowColor="#303030"
check answer
Android elevation not showing shadow on Button
use AppCompatButton instead of Button,use elevation and use android:backgroundTint for button colour.
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sign_in"
android:backgroundTint="#ccd3e0ea"
android:elevation="4dp"/>
output is,
bg_test.xml :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--the shadow comes from here-->
<item
android:bottom="-6dp"
android:drawable="#android:drawable/dialog_holo_light_frame"
android:left="-6dp"
android:right="-6dp"
android:top="-6dp">
</item>
<item
android:bottom="-6dp"
android:left="-6dp"
android:right="-6dp"
android:top="-6dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<stroke
android:width="#dimen/_1sdp"
android:color="#color/yellow" />
</shape>
</item>
</layer-list>
Activity.xml code:
<Button
android:layout_width="#dimen/_150sdp"
android:layout_height="48dp"
android:layout_marginTop="10dp"
android:text="#string/sign_In"
android:layout_marginLeft="#dimen/_80sdp"
android:layout_gravity="center"
android:textSize="14sp"
android:background="#drawable/bg_test" />
Design Button :
I am using a list view in which I have an xml referencing drawable/list as follows:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
//For the borders
<item>
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<corners android:radius="0dp" />
</shape>
</item>
//For the background color of cells
<item android:top="1px"
android:left="0dp"
android:right="0dp"
android:bottom="1px">
<shape android:shape="rectangle">
<solid android:color="#262626" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
The above code is basically used to define the borders and the background color of cells. However, I want to be able to use line for the borders instead of rectangle so that the bottom border of one rectangle doesnt leave a 1 dp gap between the top border of another rectangle below it.
Please refer the image below:
As you can see from the image, the rectangular bottom border below BOK.L is a little off showing a gap between the top rectangular border of GOOG.OQ Is there a way to fix this such that both the borders either overlap on top of each other and no such double line gap appears or is there a way I can define a line shape such that it is defined above and below all the cells in the pic without a gap?
Any clue?
Thanks!
Justin
The xml file referencing the same (drawable/list) is as follows :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/list"
android:padding="4dp"
>
<TextView
android:id="#+id/symbol"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="2dp"
android:paddingLeft="8dp"
android:textColor="#color/search_autosuggest_header_text"
foo:customFont="Roboto-Bold.ttf"
android:singleLine="true"
android:layout_toLeftOf="#+id/last_container"
android:ellipsize="end"
android:gravity="left"
android:textSize="14sp"/>
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
foo:customFont="Roboto-Regular.ttf"
android:layout_alignParentLeft="true"
android:layout_below="#id/symbol"
android:layout_toLeftOf="#+id/last_container"
android:paddingBottom="4dp"
android:textColor="#color/search_autosuggest_item_subtitle"
android:singleLine="true"
android:ellipsize="end"
android:textSize="11sp" />
<FrameLayout
android:id="#+id/last_container"
android:layout_width="87dp"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:layout_toLeftOf="#+id/net_change_container" >
<TextView
android:id="#+id/last_back"
style="#style/TextView.ListsTextView"
android:layout_width="87dp"
android:layout_height="wrap_content"
android:padding="3dp" />
<TextView
android:id="#+id/last"
style="#style/TextView.ListsTextView"
android:layout_width="87dp"
android:textSize="12sp"
android:layout_height="wrap_content" />
</FrameLayout>
<FrameLayout
android:id="#+id/net_change_container"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:layout_toLeftOf="#+id/percent_change_container" >
<TextView
android:id="#+id/net_change_back"
style="#style/TextView.ListsTextView"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:padding="3dp" />
<TextView
android:id="#+id/net_change"
style="#style/TextView.ListsTextView"
android:layout_width="80dp"
android:textSize="12sp"
android:layout_height="wrap_content" />
</FrameLayout>
<FrameLayout
android:id="#+id/percent_change_container"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="1dp" >
<TextView
android:id="#+id/percent_change_back"
style="#style/TextView.ListsTextView"
android:layout_width="65dp"
android:textSize="14sp"
foo:customFont="Roboto-Regular.ttf"
android:layout_height="wrap_content"
android:padding="3dp" />
<TextView
android:id="#+id/percent_change"
style="#style/TextView.ListsTextView"
android:layout_width="65dp"
android:textSize="12sp"
android:layout_height="wrap_content"/>
</FrameLayout>
</RelativeLayout>
Also,#jboi with with your fix the screen that I get is:
In order to not have double selectors(and in proper positions like also at the top, at the bottom) you have two cases that you need to tackle, the top element(which needs the selector at the top and bottom) plus every other row which needs the selector only at the bottom(the top will be covered by the selector of the previous element). This has to be done in code, in your adapter(if you were using a simple table you could have just made one drawable for the top element and one for the other elements):
remove the properties like android:top, android:bottom etc from the layer-list(as you'll be setting those in code)
in the getView() method of the adapter retrieve the background of the row view(which will be a LayerDrawable)
based on the position you have(mainly 0 vs any oher position) use the LayerDrawable.setLayerInset() method and set the inset for the layer with index 1(if that is your complete drawable): top and bottom for the first element, top(with a value of 0) and bottom for every other position
You could play with ListView params android:divider and android:dividerHeight, to set a line separator of the color and height you want.
The reason for having two lines is, that the background (second layer) lets shine thru the white part on both ends, at the bottom and the top. Therefore every list entry gets a white line on top and on bottom. As list items have a small distance between each other you see two lines.
Two things you need to do
For each item, let only one (top or bottom) shine thru. Therefore you get only one line per item. The drawable XML for an item:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<corners android:radius="0dp" />
</shape>
</item>
<item android:top="1dp"
android:left="0dp"
android:right="0dp"
android:bottom="0dp">
<shape android:shape="rectangle">
<solid android:color="#262626" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
For the whole list, you need the drawable that shows the one missing line. The drawable XML for this looks nearly the same. Just bottom and top is exchanged:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<corners android:radius="0dp" />
</shape>
</item>
<item android:top="0dp"
android:left="0dp"
android:right="0dp"
android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#262626" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>