I want to add a gradient on the bottom of my image . Something like this :
I tried something like this but I only get the gradient no image..
<ImageView
android:id="#+id/trendingImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/trend_donald_sterling"
android:src="#drawable/trending_gradient_shape"
/>
trending_gradient_shape:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#android:color/darker_gray"
android:startColor="#android:color/darker_gray" />
<corners android:radius="0dp" />
</shape>
You need two layers: An ImageView, and a View on top of that with your gradient as android:background. Put these two Views in a FrameLayout:
<FrameLayout
... >
<ImageView
...
android:src="#drawable/trend_donald_sterling" />
<View
...
android:background="#drawable/trending_gradient_shape"/>
</FrameLayout>
Simply set the alpha value in your gardient.xml:
Your imageView:
android:background="#drawable/trend_donald_sterling"
android:src="#drawable/trending_gradient_shape"
Your gradient xml file:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#aa000000"
android:centerColor="#00ffffff" />
<corners android:radius="0dp" />
</shape>
In the color value, the first two places after # correspond to the alpha value, while the rest are the actual color value in R G B format, two for each.
try using the "foreground" attribute in your imageview
<ImageView
...
android:src="#drawable/trend_donald_sterling"
android:foreground="#drawable/trending_gradient_shape" />
it worked for me.
Use android:foreground="..." instead of android:background="..."
Now you won't need to put ImageView and View inside a FrameLayout!
So your final code will be:
ImageView
<ImageView
...
android:foreground="#drawable/trend_donald_sterling"/>
Drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#aa000000"
android:centerColor="#00ffffff" />
<corners android:radius="0dp" />
</shape>
this is how im gonna do,
i used relative layout as my parent layout, use the following code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/img_sample"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradiant"/>
<LinearLayout
android:layout_marginLeft="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.55"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.25"
android:text="Events"
android:gravity="bottom"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#ffffff"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.25"
android:text="Some description about the events goes here"
android:textSize="14sp"
android:textColor="#ffffff"/>
</LinearLayout>
</RelativeLayout>
hope you can figure out, here i attach my gradiant code below.use it inside the drawable folder....
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#aa000000"
android:centerColor="#00ffffff" />
<corners android:radius="0dp" />
</shape>
This is an easy way that creates a similar effect yet doesn't actually have the image disappear. Sometimes using the foreground attribute is not the best for the gradient, especially if using a motionlayout or you have nested scrollviews. Create an entirely new imageview and set the background to the gradient.
XML With Both Imageviews
<ImageView
android:id="#+id/main_imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="#drawable/peakpx__1_"
ads:layout_constraintHeight_percent=".55"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/main_imageView_gradient"
android:layout_width="0dp"
android:layout_height="0dp"
ads:layout_constraintHeight_percent=".55"
android:background="#drawable/gradient_theme_background"
app:layout_constraintEnd_toEndOf="#id/main_imageView"
app:layout_constraintBottom_toBottomOf="#id/main_imageView"
app:layout_constraintStart_toStartOf="#id/main_imageView" />
Then for the gradient, I use black #000000 for darker themes, and white #ffffff for lighter ones. A lot of answers I see on this are not adding the center color. This is important if you want to have the gradient start closer to the edge of the image.
gradient_background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:type="linear"
android:endColor="#ff000000"
android:centerColor="#00000000"
android:startColor="#00000000"/>
</shape>
**1> Create file black_shadow.xml**
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="270"
android:startColor="#00000000"
android:centerColor="#9c000000"
android:endColor="#000000"
android:type="linear" />
</shape>
</item>bla
</selector>
**2> Just add below line in Imageview.**
android:foreground="#drawable/black_shadow"
Related
I have a shape in android button, i wanted it colored two colors. but not gradient. just the colors as is , how can it be done? below is my drawable. I dont want it gradient, just two colors as is.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:angle="0"
android:endColor="#e574bd"
android:startColor="#874dbc"
android:type="linear" />
<corners
android:radius="20dp"/>
</shape>
Edit: I attached image how I want it to look like
<RelativeLayout
android:id="#+id/registration"
android:layout_width="match_parent"
android:layout_height="#dimen/buttonHeight"
android:paddingEnd="#dimen/default_margin"
android:paddingStart="#dimen/default_margin"
android:background="#drawable/abovexml"
android:gravity="center_horizontal">
<ImageView
android:layout_width="match_parent"
android:id="#+id/sadad2"
android:src="#+id/theimagewithoutwordingchangepassword"
android:scaleType="fitXY"
android:layout_height="#dimen/buttonHeight"/>
<TextView
android:id="#+id/loginText"
android:layout_width="match_parent"
android:layout_height="#dimen/buttonHeight"
android:layout_centerInParent="true"
android:gravity="center"
android:text="#string/changepass"
android:textColor="#android:color/white"
android:textSize="#dimen/buttonSize"></TextView>
</RelativeLayout>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/white" />
<corners
android:bottomLeftRadius="30dp"
android:topLeftRadius="30dp" />
</shape>
<Button
android:id="#+id/btn_list"
android:layout_width="#dimen/width_100dp"
android:layout_height="wrap_content"
android:background="#drawable/my_background"/>
Tried the above code but it does not work for me. do i need to make a custom class extending button class.
Very Easy!, Take CardView as root element. CardView rounds child elements edges according to itself.
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_margin="20dp"
app:cardCornerRadius="25dp"
app:cardElevation="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="#string/app_name" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ecb8ff"
android:gravity="center"
android:text="#string/app_name" />
</LinearLayout>
</androidx.cardview.widget.CardView>
Output:
Also if you need TabLayout. You can see this answer
Try this it's a little tricky but it works
<?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="#FFF" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="500dp"
android:topLeftRadius="0dp"
android:topRightRadius="500dp" />
</shape>
</item>
</layer-list>
I have been trying to achieve button like in attached image & for that I have created gradient SVG with shadow so that it looks like elevation but when this svg applied to button as background drawable it looks flat & ripple effect is also gone.
I want to achieve same button as below image :
And here is my code :
<Button
android:id="#+id/btn_login"
android:layout_width="match_parent"
android:layout_height="52dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:enabled="false"
android:elevation="10dp"
android:translationZ="10dp"
android:stateListAnimator="#null"
android:background="#drawable/bg_gradient"
android:text="#string/btn_txt_login"
android:textColor="#android:color/white"
android:textSize="18sp" />
I'm using SVG file for creating background gradient with rounded border. Any help would be appreciated.
I have a solution for you.
Add this into your build.gradle(Module:app) dependency:
implementation 'com.android.support:cardview-v7:27.1.1'
Now use CardView layout instead of Button:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="4dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:gravity="center_vertical|center_horizontal"
android:textSize="18sp"
android:text="LOGIN"
android:textColor="#android:color/white"
android:textStyle="bold"
android:background="#drawable/gradient"/>
</android.support.v7.widget.CardView>
Create gradient.xml file into drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#8b0ab7"
android:endColor="#0b85d0"
android:angle="0"/>
<corners android:radius="10dp"/>
</shape>
Add these attributes, if still it doesn't work use cardview
android:clipChildren="false"
android:clipToPadding="false"
and here is your code
<Button android:id="#+id/btn_login"
android:layout_width="match_parent"
android:layout_height="52dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:enabled="false"
android:elevation="10dp"
android:translationZ="10dp"
android:stateListAnimator="#null"
android:clipChildren="false"
android:clipToPadding="false"
android:background="#drawable/bg_gradient"
android:text="#string/btn_txt_login"
android:textColor="#android:color/white"
android:textSize="18sp" />
Please try with using the following drawable content.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorDefaultButtonRipple">
<item>
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray" />
<corners android:radius="15dp" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="0" android:endColor="#5789bc" android:startColor="#8e6fa6" />
<corners android:radius="15dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</ripple>
I want to draw a line as ImageView's background.But it doesn't work?
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
<solid android:color="#FF0000FF" />
<size android:width="10dp"
android:height="2dp"/>
</shape>
Just a demo.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dividing_line"
android:layout_marginLeft="10dp" />
ImageView has no content so size will be 0x0dp. If you want a divider try setting the width to match_parent and the height to whatever you feel comfortable with (2dp for example).
Update: Try this.
In your layout file:
<ImageView
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/dividing_line"
android:layout_marginLeft="10dp" />
The drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
<stroke android:width="2dp" android:color="#0000FF"/>
<size android:height="2dp" />
</shape>
It is working for me.
As pointed out by TheTool if you just want a divider the easier solution is to add
<View android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/yourColor" />
to your layout file.
I want to create a button with image inside it as shown at the bottom of this pic https://trianglewiki.org/RGreenway_App/_files/android.jpg/_info/. I am trying using layer-list and shape drawables and able to create buttons very similar. My problem is that my image is not scaling inside the button as I would like. The ring shape is coming on the top of the image but image is not inside it.
I want the image to be completely inside the ring. I think there is something wrong with the parameters values I am giving. But it could be I am not doing it the proper way.
Can somebody check my xml files and see what is the problem or provide me with any information how to do it so that I get the same effect in the button as in the link above. Thanks
custom_button.xml (in res/drawable)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/map"/>
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="20dp"
android:innerRadiusRatio="1.75"
android:shape="ring"
android:thicknessRatio="25"
android:useLevel="false"
>
<gradient
android:angle="90"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
<size
android:width="50dp"
android:height="40dp" />
<solid android:color="#008000" />
</shape>
</item>
</layer-list>
custom_layout (in res/drawable for linearlayout's background)
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:startColor="#FF000000"
android:endColor="#FFFFFFFF"
android:type= "linear" />
<stroke
android:width="1dp"
android:color="#FF000000" />
<padding
android:left="5dp"
android:right="5dp"
/>
<size
android:height="50dp"
/>
<solid
android:color="#00FF00"
/>
</shape>
header.xml (in res/layout)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/custom_layout"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:contentDescription="Button"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:background="#drawable/custom_button"
android:scaleType="fitXY"
android:color="#ff0000"
/>
<ImageButton
android:id="#+id/map"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="Map"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
<ImageButton
android:id="#+id/weather"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="Weather"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
<ImageButton
android:id="#+id/citilink"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="CitiLink"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
</LinearLayout>
You are overcomplicating this is if I understand your question. Look to here for an answer. It's the trick I have used in the past.