I'm struggling to add a shadow to my custom overlay button over the google map. My goal is to make my custom button look just like Google's MyLocation button. Here's how my app looks like now:
layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
style="#style/AppTheme">
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/map"
tools:context=".MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true" />
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/ic_search_black_24dp"
android:tint="#color/icon_gray"
android:onClick="searchButtonClicked"
android:background="#drawable/mapbutton"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.quinny898.library.persistentsearch.SearchBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/searchbox"
/>
</LinearLayout>
</RelativeLayout>
mapbutton.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<corners android:radius="1.3dp" />
<solid android:color="#55FFFFFF" />
</shape>
</item>
<item
android:state_pressed="true"
android:state_enabled="true">
<shape android:shape="rectangle">
<corners android:radius="1.3dp" />
<solid android:color="#ccb3b3b3" />
</shape>
</item>
<item
android:state_focused="true"
android:state_enabled="true">
<shape android:shape="rectangle">
<corners android:radius="1.3dp" />
<solid android:color="#A9FFFFFF" />
</shape>
</item>
<item android:state_enabled="true">
<shape android:shape="rectangle">
<corners android:radius="1.3dp" />
<solid android:color="#baffffff" />
</shape>
</item>
</selector>
I have already tried changing the android:elevation value on the ImageButton. Unfortunately, adding elevation value doesn't seem to add a shadow to the button. Is there a way to add a shadow to my mapbutton drawable?
From here what worked for me was:
<ImageButton
android:clipToPadding="false"
android:outlineProvider="bounds"
android:elevation="2dp" />
Try this code
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:left="5dp" android:top="5dp">
<shape>
<corners android:radius="3dp"/>
<solid android:color="#D6D6D6"/>
</shape>
</item>
<item android:bottom="2dp" android:right="2dp">
<shape>
<gradient android:angle="270" android:endColor="#DC5F0A" android:startColor="#E68F54"/>
<!--
<stroke android:width="1dp" android:color="#BABABA" />
-->
<corners android:radius="4dp"/>
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
I hope it will.
Related
I want to give gradient to this view like around 10% of imageview at top , transparent center with 70% and 30% gradient at the bottom.
How i can achieve this
Instead of just using a shape with a gradient use a layer-list with 2 gradients with specified height for each
API 21
The android:bottom , android:top attributes represent the padding for the layer list, change these to change the percentage of the gradient to show
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="690dp"
android:gravity="top">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:type="linear"
android:endColor="#android:color/transparent"
android:startColor="#000000" />
</shape>
</item>
<item
android:top="610dp"
android:gravity="bottom">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:type="linear"
android:endColor="#000000"
android:startColor="#android:color/transparent" />
</shape>
</item>
If your minSDK is 23+ then it's more easier to specify the height for each layer type
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="40dp"
android:gravity="top">
<shape android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#android:color/transparent"
android:startColor="#000000"
android:type="linear" />
</shape>
</item>
<item
android:height="70dp"
android:gravity="bottom">
<shape android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#000000"
android:startColor="#android:color/transparent"
android:type="linear" />
</shape>
</item>
Then just apply this as the background of your ViewPager
Try this out, hope this solves your issue
top_gradient:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="270"
android:centerColor="#android:color/transparent"
android:centerY="0.1"
android:startColor="#000000" />
</shape>
bottom_gradient:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:centerColor="#android:color/transparent"
android:centerY="0.3"
android:startColor="#000000" />
</shape>
background:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg" />
<item android:drawable="#drawable/bg2" />
</layer-list>
gradient.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#00000000"
android:centerColor="#00000000"
android:endColor="#color/primaryTextColor"
android:angle="270"
android:centerY="0.7"
android:dither="true"
android:type="linear"
/>
</shape>
layout.xml:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/bottomConstraint"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="bottom"
android:background="#drawable/gradient">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tvTitle"
style="#style/TextStyleNormal.Large.Bold.White"
android:paddingHorizontal="#dimen/padding_large"
android:paddingTop="#dimen/padding_medium"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/bottomConstraint"
app:layout_constraintTop_toTopOf="#+id/bottomConstraint"
tools:text="System Solution to Online Education:
Look To Northeast communal." />
</androidx.constraintlayout.widget.ConstraintLayout>
This will have transparent view but in bottom the gradient would be dark .
You can achieve it like this
gradient_top.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#2B3135"
android:centerColor="#2B3135"
android:endColor="#android:color/transparent"
android:angle="270"
android:centerY="0.1"
/>
</shape>
gradient_bottom.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#2B3135"
android:centerColor="#2B3135"
android:endColor="#android:color/transparent"
android:angle="90"
android:centerY="0.3"
/>
</shape>
layout.xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/ib"/>
<View
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_alignParentTop="true"
android:background="#drawable/gradient_top"/>
<View
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:background="#drawable/gradient_bottom"/>
</RelativeLayout>
This is my TabLayout xml code:
<android.support.design.widget.TabLayout
app:tabBackground="#drawable/profile_tab_selector"
android:id="#+id/profileTabLayout"
android:layout_width="match_parent"
android:layout_height="28dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabTextColor="#color/white">
</android.support.design.widget.TabLayout>
And this one is for tabBackground="#drawable/profile_tab_selector":
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape>
<stroke android:width="1dp" android:color="#color/white"/>
<solid android:color="#color/white"/>
</shape>
</item>
<item>
<shape>
<stroke android:width="1dp" android:color="#color/white"/>
<solid android:color="#color/blue"/>
</shape>
</item>
</selector>
I want to design it like this, with rounded cornenrs:
The problem is that in selector I can not detect the first and the last tabs to modify them. And this is the result:
You have given the shape in the drawable file , but you didn't give corner radius.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
<stroke
android:width="10dp"
android:color="#android:color/transparent"></stroke>
<solid android:color="#23cf5a" />
</shape>
And you can design something like this too
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomLeftRadius="16dp"
android:bottomRightRadius="16dp"
android:radius="32dp"
android:topLeftRadius="16dp"
android:topRightRadius="16dp" />
<solid android:color="#color/tab_color" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<size
android:height="32dp" />
</shape>
Your Solution is here
Don't Use : app:tabBackground="#drawable/profile_tab_selector"
Use : android:background="#drawable/profile_tab_selector"
You also try it.
I wanna have a button with backgroundTint and corner radius :D
Here is the style I defined:
<style xmlns:tools="http://schemas.android.com/tools" name="myButton" parent="Widget.AppCompat.Button.Colored">
<item name="android:background">#drawable/button_light</item>
<item name="android:backgroundTint" tools:targetApi="lollipop">#e0e0e0</item>
</style>
And the #drawable/button_light code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="15dp" />
<solid android:color="#FAFAFA" />
</shape>
And I apply #style/myButton to the button I want and the result is I have round corners but no ripple effect (backgroundTint doesn't work indeed).
How can I solve this?
You can use layer-list to achieve this.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<corners android:radius="15dp" />
<solid android:color="#FAFAFA" />
</shape>
</item>
<!-- Put any image or anything here as the drawable -->
<item android:drawable="?attr/selectableItemBackground"/>
</layer-list>
Create a drawable/butt.xml file containing:
?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#41ba7a" />
<stroke
android:width="2dip"
android:color="#03ae3c" />
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#3AA76D" />
<stroke
android:width="2dip"
android:color="#03ae3c" />
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp" />
</shape>
</item>
</selector>
2: Use it in button tag in any layout file in your code
<Button
android:layout_width="220dp"
android:layout_height="220dp"
android:background="#drawable/butt"
android:text="#string/btn_scan_qr"
android:id="#+id/btn_scan_qr"
android:textSize="15dp"
/>
you can use from this library :
material ripple effect
to add ripple effect to your button and adding your shape to button
like this :
<com.balysv.materialripple.MaterialRippleLayout
style="#style/RippleStyleBlack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
>
<Button
android:id="#+id/call_btn"
android:layout_width="60dp"
android:layout_height="25dp"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:text="call"
android:textSize="12sp"
android:background="#drawable/call_btn_bg"
android:textColor="#color/deep_orange_600"
/>
</com.balysv.materialripple.MaterialRippleLayout>
I have Button that is using a custom drawable to make rounded corners. But I would like to change the background colors for the different states, focused, pressed etc..
I have used the below in onCreate to change the overall background color. But I don't know how to target the state_pressed to change its color too.
Any help?
in onCreate
DrawableCompat.setTint(btnLogin.getBackground(), ContextCompat.getColor(getApplicationContext(), R.color.colorGreen));
Button
<Button
android:id="#+id/btnLogin"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="#drawable/button_rounded"
android:text="Sign In"
android:textColor="#android:color/white"
android:textStyle="bold" />
button_rounded.xml
<?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="10dip" />
<solid android:color="#5c89c1" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle">
<corners android:radius="10dip" />
<solid android:color="#204778" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="10dip" />
<solid android:color="#204778" />
</shape>
</item>
</selector>
Try this and it work for me:
Drawable drawable = getResources().getDrawable(R.drawable.button_rounded);
drawable = DrawableCompat.wrap(drawable);
DrawableCompat.setTint(drawable.mutate(), getResources().getColor(R.color.colorGreen));
Can I change the height of "progress line" in ProgressBar in Android, so it's larger than the "background line" to achieve this effect?
I have tried setting size on background and progress items on my custom progressBarDrawable, but doesn't seem to work.
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:progress="50"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:progressDrawable="#drawable/xml_progress_bar_line"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"/>
Here is the xml_progress_bar_line.xml file.
<?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>
<size
android:height="5dp"/>
<solid
android:color="#color/grey" />
</shape>
</item>
<item
android:id="#android:id/progress">
<clip>
<shape>
<size
android:height="10dp"/>
<solid
android:color="#color/green" />
<corners
android:radius="10dp"/>
</shape>
</clip>
</item>
</layer-list>
Yes you can do it with add android:top & android:bottom like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background" android:top=2dp android:bottom=2dp>
<shape>
<size
android:height="5dp"/>
<solid
android:color="#color/grey" />
</shape>
</item>
<item
android:id="#android:id/progress">
<clip>
<shape>
<size
android:height="10dp"/>
<solid
android:color="#color/green" />
<corners
android:radius="10dp"/>
</shape>
</clip>
</item>
Change the maxHeight and minHeight to equal each other, then set the layout_heightexplicitly.
Also try using #android:style/Widget.ProgressBar.Horizontal
You can also set vertical scale - mProgressBar.setScaleY(3f);
Here's an example I took from: https://xinyustudio.wordpress.com/2014/08/19/android-change-progressbar-height/
I ended up not using the progress bar at all!
I just used 2 lines in relative layout. Here is the corresponding code!
Here is the progress bar background line xml (xml_custom_progress_bar_bg.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:radius="4dp"/>
<solid
android:color="#color/light_grey"/>
</shape>
Here is the progress bar "progress line" xml (xml_custom_progress_bar_progress.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:radius="4dp"/>
<gradient
android:angle="270"
android:startColor="#color/green"
android:endColor="#color/green"/>
</shape>
And here is the progress bar container:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_centerVertical="true"
android:background="#drawable/xml_custom_progress_bar_bg"/>
<View
android:layout_width="0dp"
android:layout_height="8dp"
android:layout_centerVertical="true"
android:background="#drawable/xml_custom_progress_bar_progress"/>
</RelativeLayout>
Then, I calculate the progress manually and set the width of "progress line" programmatically.