Develop Reference

How to create a complete round LinearLayout or RelativeLayout

I am trying to create a complete circular Layout so that if i put any content inside that layout. That content should be inside the circle. How is that possible ? I tried the following way. But the shape is not circular all the time. Sometime it becomes oval depending on the space. How to keep the layout circular all the time and content should come inside it ?
<LinearLayout
android:id="#+id/zodiac_Layout"
android:layout_width="100dp"
android:layout_height="100dp"
android:orientation="vertical"
android:background="#drawable/circular_background">
<ImageView
android:id="#+id/zodiac_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="2dp"
android:adjustViewBounds="true"
android:src="#drawable/sunrise" />
<TextView
android:id="#+id/zodiac_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:text="#string/na"
android:textColor="#fff"
android:textSize="#dimen/nakshatra_text_size" />
</LinearLayout>
This is the circular_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#50514F"/>
<size android:width="5dp"
android:height="5dp"/>
</shape>
What if I make the ImageView match_parent. It comes out of the circle shape of the Layout. I want the content to be cropped along the circular shape of the layout.

Due to what we have chatted in the comments. Now I know what you real want is the Circular crop to your ImageView and also a TextView. So after a dedicated work I have decided to form the solution that will result to an output that is shown in the image below:.Dont worry about the textView you can position it anywhere. Even on top of the image! And change its size! First you will have to know there is no default implementation on this meaning there is no default View class that provides Circular cropped Views in android. So here are the two alternatives for solving this trick using XML ONLY!
FIRST ALTERNATIVE ( BEST OPTION )
We are going to use a FrameLayout which is a layout that add Views on top of each other. That means if you put the first then the second will be on top of the first etc.
Requirements
To fit an image well in a circular view then it should be SQUARE(this is just logical) so you we will need to set width and height equal values.
We will need a circular shape with stroke (The idea is to put it on top of a well calculated view sizes!)
Inside your drawable folder make a file called circular_image_crop.xml. And paste the code (dont worry will describe it later!) do not forget to read the comments in it:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#00ffffff"/>
<!--The above colour is completely transparent!-->
<stroke android:width="20dp" android:color="#ec407a" />
<size android:width="140dp" android:height="140dp"/>
</shape>
After making that drawable file we will have to make our FrameLayout (This frame layout is not a root view of any view just copy it inside any view you want to show this layout) Go on and paste the code below (we will explain it later!) again read the comments in it:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ec407a">
<!-- This is our framelayout! Notice our background color is the same as the one in the stroke of our drawable. Also this is your image view notice the it has width and height similar (square) do use match parent or wrap content just define a square and views will be position by adjust view bounds true-->
<ImageView
android:id="#+id/image_view_user_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:adjustViewBounds="true"
android:contentDescription="#string/your_image_description"
android:src="#drawable/your_image" />
<!-- Ooh here we have another image! This is an image just for displaying our drawable and crop our image (how?? dont worry!) -->
<ImageView
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/also_your_image_description_if_any"
android:src="#drawable/circular_image_crop" />
<!--This text view we almost forget here it is!-->
<TextView
android:id="#+id/your_text_view_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="8dp"
android:layout_marginTop="125dp"
android:gravity="center"
android:text="John Nanai Noni"
android:textColor="#ffffff"
android:textSize="16sp"
android:textStyle="bold" />
</FrameLayout>
How it works and customizations!???
The good thing is that we used our Frame Layout and position our real View at the centre horizontal(square image). The we made our drawable which is a circular and also have a circular hole(space) at the centre which matches the height and with our picture. Lastly we add our textview and put on top of all those but at the bottom (it should not obscure out image right?). So the way that we can understand this is viewing the following image as an outline to whats needed.(dont think its complicated):So from there we can see how it went on the image at the middle the Circular crop and etcThe next stage:From there we can apply the same background colour to our whole layout (FrameLayout) to hide the Circular things and leave our own visible space. And yes we have finished our layout! What about customization.
Customization
For colours you can put your own colour anywhere in the FrameLayout background well as well as the stroke of the drawable. But never change the <solid> colour it should always be completely transparent always.For customization of the radius of the circular crop lets dig into its mathematics formula to figure out the coverage of the image!Mathematics
Let your width or height(the image is square remember) of your image be x dps. Then the values in your drawable are
stroke= 0.2071 * x
size(height and width)=stroke + x
You can 2 or 3 dps for elimination of truncation errors!
Actually the mathematics behind is based on the formula below. The formula works if your interested how comment below:
SECOND ALTERNATIVE
Another alternative which I think is good for someone who DOES NOT care about the space between the circular view is by making the ImageView inside the CardView and making the corner radius half the size of the CardView for example this code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="280dp"
android:layout_height="280dp"
android:layout_gravity="center_horizontal"
android:layout_margin="30dp"
app:cardCornerRadius="140dp"
app:cardElevation="12dp">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/login_back_ground" />
</android.support.v7.widget.CardView>
This is an output I get In android Studio. Also I cant guarantee how is this is going to look like in various devices especially old ones!
CONCLUSIONBoth methods are good and useful. Understanding both can even lead to more customizations like making using the first alternative with the second to bring about customizations like adding elevations of circular image. But the first method fits number of daily uses and it also bring equal experiences to all android devices. I hope this will even help future users who might have the same problem.

how to slowly fill background color of cardview in android

I am trying to figure out how to fill background color of a card from bottom to top based on the processing of a particular task. I want the background color of card to be filled slowly from bottom to top approach based on some timer or processing. How to achieve this scenario. Please help me here.

You can easily achieve this with Clipping. This is a modified code from Android Drawable Resources.
First specify the clipping view in XML file saved at res/drawable/clip.xml
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/android"
android:clipOrientation="vertical"
android:gravity="bottom" />
It basically means that whatever drawable you assign to this xml, it will be clipped vertically starting from the bottom. Then in your cardview XML set this drawable as a background.
<CardView
android:id="#+id/cardview"
android:background="#drawable/clip"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
Then in your activity do something like this
CardView cardview = (CardView) findViewById(R.id.cardview);
ClipDrawable drawable = (ClipDrawable) cardview.getBackground();
drawable.setLevel(/*your level*/);
Regarding the level:
Increasing the level reduces the amount of clipping and slowly reveals
the image.The default level is 0, which is fully clipped so the image
is not visible. When the level is 10,000, the image is not clipped and
completely visible.
Hope this helps.

How to add two gradients(top-bottom and bottom-top) in a single image view in android?

I am trying to add gradient to an imageview on both top and bottom side of the image. I dont want to add a textview on top of image view. How do I implement it?

It appears that your simple and clean solution would be to wrap ImageView with FrameLayout and use foreground property as follows:
Layout
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:foreground="#drawable/gradient">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/male"/>
</FrameLayout>
And gradient just in case
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#33000000"
android:centerColor="#android:color/transparent"
android:endColor="#33000000"
android:angle="90"/>
</shape>
Produces this:
A FrameLayout is relatively simple structure which will not add complexity to your view hierarchy, as opposed to RelativeLayout for example, which will cause extra measurements.
If you absolutely have to avoid adding any extra wrapper views, then your next option would be creating a CustomView, extending from ImageView and overriding onDraw() method and manually covering your existing canvas with pixels from gradient bitmap.

Android: Custom seekbar progress drawable is rendered incorrectly

I intend to make a custom seekbar, with my own set of images for the background and progress drawables. I've made 2 9-patch images, one each for the background and progress drawables. Here is the code I am using for the progressDrawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#+id/background"
android:drawable="#drawable/experience_seekbar_background" />
<item android:id="#+id/progress">
<clip
android:clipOrientation="horizontal"
android:gravity="left|top"
android:drawable="#drawable/experience_seekbar_progress" />
</item>
</layer-list>
Also, here is the xml definition of my seekbar:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp" >
<SeekBar
android:id="#+id/experienceSeekBar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:max="2"
android:progress="1"
android:progressDrawable="#drawable/experience_seekbar" />
</LinearLayout>
The problem is, the progress portion of the drawable is drawn below the background portion, instead of directly overlapping it.
Expected/Desired: (http://i.imgur.com/C27dQZK.png)
Actual Output: (http://i.imgur.com/ftNlMMI.png)
Having gone through tens of custom seekbar tutorials, I am still stuck at what could I possibly be doing wrong here. It might be something very trivial, but I am just not able to spot it.

It turns out there were several things at play here.
1) I used 9-patch images for the seekBar background and progress drawables. However, I did not know that 9-patch images also have, apart from the stretch lines at the top and left edges, padding lines at the right and bottom edges. These define the content area of the image, and the area left automatically becomes the padding area (i.e. the non-content area counts towards the padding of the view for which this image will be used as background). Also, if no padding lines are specified, android uses the stretch lines as padding lines.
2) In a layer-list, the padding of items stacks up. This means that if the first item in a layer-list has some padding, this padding will add up to the padding of all items after it, the second item's padding adds up to padding of all items below it, and so on.
So in my case, the 9-patch image used as seekBar background (first item in the layer-list) got some unintended padding (because stretch lines were being used as padding lines), and the seekBar progress drawable got this padding added to its own unintended padding (again, since it was a 9-patch) which caused it to be displayed below the background.
To correct this, I changed the 9-patch images and set the padding lines to their full length i.e. I defined the entire image as the content area. There was no other option, as any padding would lead to twice the padding for the progress drawable, displacing it from its intended position (which is exactly above the background drawable).

Centering a background image in Android

I have a background image about 100 x 100 that I want to center in an Android app. Is there a way to do this?
I'm thinking it would greatly help with orientation changes for simple apps.

You can use BitmapDrawable for the case. Create centered.xml in res/drawable folder:
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/your_image"
android:gravity="center"/>
Then you can use centered drawable as background.

Or if you want to use your mipmap image, you should use item instead of bitmap:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/app_bg_color" />
<item android:drawable="#mipmap/ic_launcher_round"
android:gravity="center"/>
</layer-list>

Question is old and answer has one big weakness - we have no possibility to change image size, it means it fully depends from drawable we have.
While using newest Android design libraries the root of activity view will be CoordinatorLayout or DrawerLayout and those layouts has no default view showing hierarchy, it means that first child view will be overshadowed by any next one, and second by third and ... to last one. So to have centered background We need to add as first child LinearLayout with centered image inside it. Some code snippet:
<android.support.v4.widget.DrawerLayout>
<!-- first child -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="60dp"
android:src="#drawable/some_background"
/>
</LinearLayout>
... next view will be above
We can fully customize size of image which will be centered by LinearLayout gravity option. Important is also to have match_parent on width and height of LinearLayout, thanks that center will be center of parent view also.
The same thing can be done in RelativeLayout or any other layout which enable child views overlapping.

With a ConstraintLayout you can set the background tag directly. To be honest it took me a few hours to work this one out but it's a lot simpler than you might think ;)