Custom background with layer-list to show diagonal lines? - android

I just want to create a custom background but I'm not getting how to do that with xml not with image.
Here is the xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#layout/ui_shape"
tools:context="${relativePackage}.${activityClass}" >
</RelativeLayout>
and I want like this. Is it possible to create xml like the required image?
here is ui_shape
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
>
<item>
<rotate
android:fromDegrees="45">
<shape
android:shape="line" >
<stroke android:color="#color/ui" android:width="1dp" />
<solid
android:color="#color/ui" />
</shape>
</rotate>
</item>
</layer-list>
and color
<color name="ui">#0095A0</color>
here is what i got
anybody any idea?

I know I am late, but this is my solution if anyone gets here:
1) create a single small diagonal line in photoshop or any other program, it should look like this
*
*
*
*
2) Create the following XML drawable in android studio where "#drawable/diagonal_line" is the previous mentioned image:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/diagonal_line"
android:tileMode="repeat"
android:dither="true"
>
</bitmap>
what this bitmap drawable will do is take that single diagonal line and repeat it all over the selected view.
3) Now use that XML drawable as your view background, as an example, this is how I used it, where "#drawable/tiled_background" is the XML in step 2:
<View
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="#drawable/tiled_background"/>
and here is the result:
I hope this helps anyone. Happy Coding!

Use
android:background="#drawable/yourcustombackground"
Define your custom background inside drawable (something like below)
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<stroke android:width="1dp" android:color="#555555"/>
<solid android:color="#111111"/>
</shape>
Update: To display image at background
android:background="#drawable/ic_image"
ic_image is the desired image
Or you can use gradient also

No. it is not possible in android to set diagonal line .You have to use image for it for the diagonal lines

Related

Custom Shape to PopupWindow

How to implement PopupWindow shape like on the screenshot below ?
I understand how to create Rectangle shape with stroke/solid color.
I know how to play with corners, but how can I implement an arrow < near Close label ?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/edittext_border"
android:left="#dimen/edittext_border"
android:right="#dimen/edittext_border"
android:top="#dimen/edittext_border">
<shape android:shape="rectangle">
<stroke
android:width="#dimen/edittext_border_width"
android:color="#color/divider_color_light" />
<solid android:color="#color/white" />
<padding android:bottom="#dimen/awsome_edittext_padding" android:left="#dimen/awsome_edittext_padding" android:right="#dimen/awsome_edittext_padding"/>
</shape>
</item>
</layer-list>
you can set exactly that type of background in custom popup
see this library
https://github.com/kvirair/Quick-Action
U can use .9 patch png as background for PopupWindow.
like below code `
<FrameLayout
android:id="#+id/popupbg"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/POPUPBACkGROUND" >
</FrameLayout>
You can refer this site!

I want to create a Semi circle around imageView in Android. Can any one help me in it?

Can any please help me to create a drawable which create a semi circle around imageView?
I tried using clip drawable
<?xml version="1.0" encoding="utf-8"?>
<clip
xmlns:android="http://schemas.android.com/apk/res/android"
android:clipOrientation="vertical"
android:gravity="bottom"
android:drawable="#color/cardview_dark_background"
>
<shape android:shape="oval" android:thickness="10dp">
<solid android:color="#444"/>
</shape>
</clip>

How to make android round buttons

I have tried to search this a lot however I was not able to make the same buttons as in the picture for android.
I have been trying to use the following code but the button is not transparent and it doesn't have that nice rounding on the sides:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffff" />
<corners android:radius="15dp" />
</shape>
Currently it looks like this
I want the EditTexts and the buttons to be transparent with a white border
It would be a great great help if someone could assist me on this.
Defining shape is proper approach. If you want it to be transparent with white border you need to avoid using solid tag and use stroke (that is the border).
So for example you will have this shape (let's call it bg_button.xml under drawable folder):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="#android:color/white" android:width="1dp" />
<corners android:radius="15dp" />
</shape>
Apply then this to your views as background. This is an example:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Facebook"
android:background="#drawable/bg_button"/>
Please try this not just on Android Studio editor but also on your emulator / device. Rendering of rounded corners on Android Studio editor can create problems.
Say you have a xml drawable called rounded_button
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#6E6E6E"/>
<corners
android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"/>
</shape>
You then set the background of the button to the #drawable resource you created.

Android: Is it possible to scale a xml drawable?

Here is what I want to do: I have this scale xml:
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/mydrawable"
android:scaleGravity="bottom"
android:scaleHeight="50%" />
And I want to use it with this drawable xml:
<?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">
<gradient android:startColor="#FFFFFFFF"
android:endColor="#FFFF0000"
android:angle="90" />
</shape>
</item>
</layer-list>
Then I set the scale xml as a background for a LinearLayout, but I don't see anything. Am I missing something or is it not possible to do this (with XML)?
This is an issue with the ScaleDrawable object which cannot be resolved in XML.
But it is easy, just do the following:
// Get the scale drawable from your resources
ScaleDrawable scaleDraw = (ScaleDrawable)getResources().getDrawable(R.drawable.background_scale);
// set the Level to 1 (or anything higher than 0)
scaleDraw.setLevel(1);
// Now assign the drawable where you need it
layout.setBackgroundDrawable(scaleDraw);
I tested your code using this solution and it worked fine.

Android create iphone-like Gradient

I need to create black iphone like gradient in my android application. Please view black gradient at the top in the image below. How to do it? Thanks
Something like this, perhaps?
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#FF000000"
android:endColor="#FF8E8E8E"
android:angle="270"/>
</shape>
I've posted a blog about an Iphone look an Android:
http://www.dibbus.com/2011/06/android-gradient-toolbar/
You can find some examples of gradients and what is possible using xml and/or 9-pacth images.
You can create gradients in XML
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:type="radial" android:gradientRadius="400"
android:startColor="#88cce7" android:endColor="#075e81"/>
</shape>
This example is a round gradient but by changing type param you can create others.
Include this code in a xml file in your drawable folder and you can refer to that file when you set a background. ie. android:background="your drawable file"
I know this is an old question, but I was messing around to get this same effect for a customer who wants a copy of his iPad app on Android, this is what I came up with:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="270"
android:centerColor="#FF333333"
android:centerY="2%"
android:endColor="#FF000000"
android:startColor="#FF8E8E8E" />
<corners android:radius="5dp" />
</shape>

Categories

Resources