Develop Reference

Draw colored circle around PNG

I am using this PNG in my project (within my resources):
Programmically, I want to achieve this:
Change color to white.
Add a solid-colored circle around the icon.
The result should look to something like this:
The red color has to be changeable dynamically at runtime. How do I achieve this?

Add this to your XML file:
<ImageView
android:id="#+id/image_view"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="#drawable/circle"
android:padding="8dp"
android:src="#drawable/bull_image"
app:tint="#android:color/white" />
This is circle.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#android:color/white"/>
</shape>
And to change the background color dynamically:
imageView.backgroundTintList = ColorStateList.valueOf(ContextCompat.getColor(this, R.color.your_color))

Something like this shoud do the trick (adjust the cardCornerRadius to your liking):
<androidx.cardview.widget.CardView
android:layout_height="wrap_content"
app:cardBackgroundColor="#color/red"
app:cardCornerRadius="10dp"
android:layout_width="wrap_content"
app:cardElevation="0dp">
<ImageView
android:src="your_image"
android:tint="#color/white" />
</androidx.cardview.widget.CardView>

Define a drawable that you can use as your background, for example:
<!-- res/drawable/the_drawable_above.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" android:padding="10dp">
<stroke android:width="1dp"
android:color="#color/colorLightGrey"/>
<solid
android:color="#color/colorAccent"/>
</shape>
For your image view:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/your_image"
scale_type="fit_center"
android:tint="#android:color/white"
android:background="#drawable/the_drawable_above"/>

gradient alternative to color the button

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>

Android: in drawable xml, layer-list, why does the width for item not work in API 19 or lower?

<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
>
<!--width here doesn't work-->
<item
android:gravity="left"
android:width="10dp"
>
<shape
android:shape="rectangle"
>
<stroke
android:width="1dp"
android:color="#color/black"
/>
<!--<gradient-->
<!--android:startColor="#00dddddd"-->
<!--android:endColor="#40404040"-->
<!--android:angle="0"-->
<!--/>-->
</shape>
</item>
<!--width here doesn't work-->
<item
android:width="10dp"
android:gravity="right"
>
<shape
android:shape="rectangle"
>
<stroke
android:width="1dp"
android:color="#color/black"
/>
<!--<gradient-->
<!--android:startColor="#00dddddd"-->
<!--android:endColor="#40404040"-->
<!--android:angle="180"-->
<!--/>-->
</shape>
</item>
Here is the example.
It works in Lollipop or higher, but it doesn't work in Kitkat, the width is being ignored, the rectangle will fill the whole view.
I also tried to remove the second item, only leaves the first item, the width is still being ignored.
The ImageView uses this drawable:
<!--Width will be changed dynamically-->
<ImageView
android:id="#+id/someid"
android:layout_width="100dp"
android:layout_height="#dimen/someheight"
android:src="#drawable/the_xml_above"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:clickable="false"
/>
How to solve this?

Alright, I'll answer my own question:
It seems that on Android 4.4 or below, size node or width/height attribute will be ignored.
So the best approach is: create different shapes in different drawable xml files, create a relative layout instead of ImageView, and combine them in relative layout.
<RelativeLayout
android:id="#+id/id1"
android:layout_width="30dp"
android:layout_height="#dimen/someheight"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:clickable="false">
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:src="#drawable/somesrc"/>
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:rotation="180"
android:src="#drawable/somesrc"/>
</RelativeLayout>

change background with animation when user clicks on it

I used one LinearLayout in my activity for changing two views. Here, i used two textviews. When user clicks on linear layout i change views as per my requirnments. xml file is here,
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/customswitchselector"
android:textStyle="bold"
android:layout_below="#+id/linearTab"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:showText="true"
android:id="#+id/switch1"
android:checked="false"
android:weightSum="2">
<TextView
android:id="#+id/tv_switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:textStyle="bold"
android:textColor="#272351"
style="bold" />
<TextView
android:id="#+id/tv_switch_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:textStyle="bold"
android:layout_gravity="center_vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:textColor="#ffffff"
style="bold"
/>
</LinearLayout>
These two images show my two conditions. I have done enough to change this. Now i want to do animation while i am changing background for textviews on layout clicks. I have checked transitiondrawable example but it not helpful to me.
customswitchselector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<gradient android:angle="270" android:endColor="#ffffff" android:startColor="#ffffff" />
<corners android:radius="30dp" />
</shape>
</item>
<item android:state_checked="false">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<gradient android:angle="270" android:endColor="#ffffff" android:startColor="#ffffff" />
<corners android:radius="30dp" />
</shape>
</item>
</selector>
custom_track.xml This is used for textview with blue background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle"
android:useLevel="false"
android:visible="true">
<gradient
android:angle="270"
android:endColor="#292850"
android:startColor="#292850" />
<corners android:radius="30dp" />
<size
android:width="100dp"
android:height="30dp" />
</shape>

A possibility would be to set the white drawable as background of a FrameLayout and add a View for the blue oval and two TextViews for the titles to it.
To still acchieve that the views takes exactly the half of the container you could use PercenFrameLayout (read more about it in the official docu). To use it you need to add this dependency to your build.gradle: compile 'com.android.support:percent:25.2.0'
After creating the layout you just animate the gravity of the blue oval from left to right or the other way round.
So your layout would look like this:
<PercentFrameLayout
android:id="#+id/container"
android:animateLayoutChanges="true"
android:background="#drawable/white_oval"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- blue oval -->
<View
android:id="#+id/blue_oval"
android:gravity="start"
android:background="#drawable/blue_oval"
app:layout_widthPercent="50%"
android:layout_height="wrap_content"
android:transformPivotX="0dp" />
<!--2 textviews-->
<TextView
app:layout_widthPercent="50%"
android:layout_height="wrap_content"
android:text="left"
android:gravity="start"/>
<TextView
app:layout_widthPercent="50%"
android:layout_height="wrap_content"
android:text="right"
android:gravity="end"/>
</FrameLayout>
Then in your code animate the gravity change of the blue oval like this:
private void animateGravity(int toGravity) {
LayoutTransition layoutTransition = container.getLayoutTransition();
layoutTransition.enableTransitionType(LayoutTransition.CHANGING);
layoutTransition.setDuration(YOUR_ANIMATION_DURATION);
layoutTransition.setInterpolator(LayoutTransition.CHANGING, new AccelerateDecelerateInterpolator());
FrameLayout.LayoutParams layoutParams = (LayoutParams) blueOvalView.getLayoutParams();
layoutParams.gravity = toGravity;
blueOvalView.setLayoutParams(layoutParams);
}

Add gradient to imageview

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"