I try to create like this custom rounded corners imageview.I searched out it and I found some examples,but Also I would to create progress bar,I mean progress in this blue border, like instagram.
Can anyone give me a some suggestions, how I can create like this loader?
Thanks
You can create a custom layout for that. Set the background of the layout (whether constraint, relative or linear) to the drawable you've created and place a progress bar in middle of it.
*Edit: Drawable file *
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid
android:color="#color/white"/> <!--Foreground color-->
<stroke
android:color="#color/blue"
android:width="1dp"/> <!--stroke color-->
<corners
android:radius="50dp"/>
</shape>
</item>
</selector>
Related
I want to add border and image to side NavigationDrawer , how do I do it. I tried but I cannot find a proper tutorial for it. My XML files are how you get when we chose a navigation drawer activity in Android, nothing changed in it.
I have drawn it below roughly about how I want it to be. Any help would be appreciated thank you. Also please ignore the orange background of header. I do not want it, I would just like the Gru image on both head and body
I want the image to be there on the body as well as header of the navigation drawer. One single image covering the body as well as header.
While this looks like tough you can achieve this easily by designing backgrounds for the header and nav differently. Try putting the image in navbar background and making the header background transparent so that the same image is shown. Also you should use stroke for the blue lined border.
Let me show you a basic example for it
For nav-header
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:color="#color/blueshade"
android:width="4dp"
/>
<corners android:topRightRadius="35dp"
/>
<solid android:color="#android:color/transparent"/>
</shape>
For navbar
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:color="#color/blueshade"
android:width="4dp"
/>
<corners android:topRightRadius="35dp"
android:bottomRightRadius="35dp"/>
<solid android:color="#android:color/white"/>
</shape>
</item>
<item android:right="20dp" android:left="5dp" android:top="5dp" android:bottom="5dp" >
<bitmap android:src="#drawable/gru"
android:gravity="fill"
android:alpha="105"
/>
</item>
</layer-list>
Now you can set the nav-top as background for nav_header_main layout and the navbar as background for NavigationView in activity_main layout
I have developed a listView for my app. My UI is simple flat UI, here is a snapshot:
when I searched internet for better interfaces I found this for example:
As you see in this sample, background colors have shadows at the bottom. Is there a way that I can color my Layout background like this? Thanks in advanced.
In order to achieve a shadow effect I'd guess that it's better to use a layer-list with two items, one with the solid color and the second item would be a gradient coming from transparent to a black color with an alpha value.
Here's how this would look like (needs to be placed in res/drawable/):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#ff33b5e5" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<gradient
android:angle="-90"
android:endColor="#90000000"
android:startColor="#android:color/transparent" />
</shape>
</item>
</layer-list>
Doing it this way, you won't need to "search" for a darker color of your solid color all the time.
Output would look like this:
Create an XML file and named it as "gradient_effect" in Res -> Drawable folder and put below code in it
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#a0a0a0"
android:endColor="#f5f5f5"
android:angle="0"
/>
Now use this file as a background in any of your layout as you can get is like
android:Background= "#Drawable/gradient_effect"
Set above line as an attribute for any of you view or layout in xml file
This can help too!
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#A2000000"
android:startColor="#android:color/transparent" />
</shape>
</item>
I've been using the following method to add a border to the top of a view:
<?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="#b7b7b7" />
</shape>
</item>
<item android:top="1px" >
<shape android:shape="rectangle">
<solid android:color="#5f5f5f" />
</shape>
</item>
</layer-list>
The above gets specified in its own xml file within the drawable folder, then set as the background on the view where I want the border to appear.
Now, the problem here is that this border is "hard coded" to a specific background color. Whichever view I apply it on, the background color will be changed to #5f5f5f.
I want to be able to set any background color, then apply a border. In other words, I can have a red view, a green view, and a blue view. Suppose I want to place the same border on top of each one. Is there a way to do this without making 3 copies of the above xml file and changing the color in each one?
I have created layout similar to this:
<RelativeLayout
android:id="#+id/layout_one"
style="#style/layout_one" >
<RelativeLayout
android:id="#+id/layout_two"
style="#style/layout_two" >
<RelativeLayout
android:id="#+id/layout_three"
style="#style/layout_three" >
</RelativeLayout>
</RelativeLayout>
For layout one I have created a custom drawable with rectangle shape so that the corners would be rounded and blue background color.
But for layout three I need to set white background color but if I do android:background="#FFFFFF" than it changes also the shape and the bottom corners are no longer rounded.
My first thought was to create custom drawable for the layout_three with rounded bottom corners but it wasnt working. Either all the corners were rounded or none.
Need to create something like this in the picture with rounded corners. Any suggestions?
I see that for layout three you use #style/layout_three which is different from #style/layout_one. So why don't you go to your style folder and put item with background white in layout_three style
It should look something like this:
<style name="layout_three">
<item name="android:background">#FFFFFF</item>
<!-- ... other stuff here... -->
</style>
EDIT: Sorry I did not understand your question well, reading that comment now.
There is only one way that comes to my mind right now to help you fix that.
Create an .xml file in your drawable folder and name it layout_three.xml or whatever.
And use this code:
<?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="#FFFFFF" />
<padding
android:bottom="10dp" <!-- you can set padding here
or on your layout layout_three -->
android:left="10dp"
android:right="10dp"
android:top="10dp"
/>
<corners android:radius="2dp" /> <!-- change the radius too -->
</item>
</layer-list>
And then you just use #drawable/layout_three instead of #style/layout_three
EDIT2: You can also use this code for the corners if you want only the bottom one to be rounded
<corners
android:topRightRadius="0dp"
android:topLeftRadius="0dp"
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"/>
You can create a xml drawable with rounded bottom corners for your requirement. Try the below code:
<item>
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners android:radius="7dp"
android:topRightRadius="0dp"
android:topLeftRadius="0dp"
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"/>
</shape>
</item>
I just read that the problem is that the Android layout preview doesn't show the different corner radius so you have to test in on device or emulator to see the difference.
I have a layout with 2-3 childs. Set linear layout backgroud to a following drawable using android:background property.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#373949"/>
<stroke android:width="3dip" android:color="#FFF"/>
<corners android:radius="30dip" />
<padding android:left="10dip" android:top="10dip" android:right="10dip" android:bottom="10dip" />
</shape>
But when set radius to 30dip, rounded corners getting displayed, but back to
layout default gray colored border with rectangular shape is displayed.
Is there any way to get rid of that ?
Thanks in advance
Try this code
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFFFF"/>
<corners android:radius="15px"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
once you change the background of the view, this drawable will no longer be active to draw UI, hence the default layout of view will be applicable, so if you want gray layout to also be rounded, make another drawable, and set that drawable instead of gray color.
That rounded corner border that you see is of the parent of layout that you have changed background.If your cusytomized background belongs to your activity than the grey color you see belongs to system. You can use Hierarchy Viewer. To see it in detail.
you can also refer this for your reference.