Multi color Stroke image with XML - android

Does it possible to create multi-color stroke with the help of XML? I want to create exact view attached here.
Thanks

You could use a trick by creating a drawable shape with gradient and make it a parent's background... something like this:
gradient_stroke.xml (in res/drawable):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:startColor="#fff96200"
android:centerColor="#fffff60f"
android:endColor="#fff96200"
android:centerX="50%"
>
</gradient>
<corners android:radius="5dp"></corners>
</shape>
</item>
your_view.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:padding="2dp"
android:background="#drawable/gradient_stroke"
android:layout_height="wrap_content">
<Button android:text="Submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/green"
android:id="#+id/button"/>
</LinearLayout>
Just an idea - play around with it to get desired values...

Related

I want to add strokes to a view

I'm trying to add strokes to a view using drawable.
But I want add it only in side parts(left and right), not in whole parts.
Is there any good way to add stroke in side parts?
Below is my drawable xml code. (leanear_border_gray.xml)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp"
android:color="#778899"/>
</shape>
and below is my target view xml code.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/linear_border_gray"
android:layout_weight="1">
....
</LinearLayout>
You need to wrap your shape into layer-list drawable with rectangular shape, add stroke and using top and bottom margins with negative values "hide" top and bottom lines, like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-4dp" android:bottom="-4dp">
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#778899"/>
</shape>
</item>
</layer-list>
You can do it by using layer-list drawable suggested by #iDemigod
Your Layout should be like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:background="#drawable/border_left_right"
android:layout_gravity="center"
android:layout_weight="1">
</LinearLayout>
Note: If you are giving android:layout_height="match_parent" and android:layout_weight="1" then you must have to set android:layout_width="0dp" and vice versa for android:layout_width="match_parent".
File: border_left_right.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-4dp" android:bottom="-4dp">
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#07060b"/>
</shape>
</item>

Android - Draw a ribbon shape

I am trying not to use image view. This is because, later, I will generate many objects with the same shape but different colors, so I wouldn't need to keep adding image views but simply adding colors on my code.
How can I create those images on Android Studio? I looked over Paint, onDraw, Canvas, etc, but this looks difficult to me.
If you want to use from XML , Try this way it will work
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="40dp" />
<solid android:color="#5EB888" />
<corners android:radius="0dp"/>
</shape>
</item>
<item
android:top="-26dp"
android:bottom="31dp"
android:left="-90dp"
android:right="75dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
OUTPUT
You can create vector image using any vector program like Adobe Illustrator or convert it using a conversion tool like vectormagic or find already existing one then import it to android studio.
it will be imported as xml file where you can change the colors as you want
Create a drawable file as named left_arrow.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<rotate
android:fromDegrees="45"
android:toDegrees="90"
android:pivotX="0%"
android:pivotY="1%" >
<shape android:shape="rectangle" >
<stroke
android:width="10dp"
android:color="#00000000" />
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
Now, create a view layout to create this type of stripes or image like this, here is the below code:-
<?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">
<LinearLayout
android:id="#+id/llMain"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:background="#color/black"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:background="#drawable/left_arrow"
android:contentDescription="#string/app_name" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:contentDescription="#string/app_name" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9" />
This above layout creates the required arrow stripe as a layout.
Now add this layout to your required layout where you wan't to show this stripes. For example,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/llMain"
layout="#layout/xtra"/>
</LinearLayout>
Now, you are able to also use OnClickListener by using "llMain".
Hope it will help.
You could use the white png image you already have and use the setColorFilter method on the image view class to tint it with any color you desire

Drawable padding overrides layout padding

I have a TextView like so:
<TextView
android:id="#+id/friends"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp" />
And I'm setting the background like:
textView.setBackgroundResource(R.drawable.background_color);
where background_color.xml is:
<?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" >
<solid android:color="#217dd2" />
</shape>
</item>
<item
android:left="5dip">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#deebf6" />
</shape>
</item>
This removes my default padding of 8dp and replaces it with the left padding of 5dp that I have declared on the 2nd item of the layered-list. Any way to avoid this? Or another way to create a 2 color background for a View?
That's known issue, setBackgroundResource method resets paddings.
Try to set your background from XML:
<TextView
android:id="#+id/friends"
android:background="#drawable/background_color"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp" />
It will work properly in this case.

Android creating Circular layout

I am trying to create a circular layout that always stay's on the screen.
To do so, I have created a System overlay and added a button.
But, now I want to make it round.
Either I can use 4 different ImageView and and textView and add both to FrameLayout.
I read somewhere that simple things like this can be made by XML.
How do I do it?
I want to achieve something like this :
EDIT
After following your guide I was able to achieve this :
But I am not satisfied by the way I used.
What I did was created 2 shaped (background, forground) and added them to a layerlist.
BACKGROUND
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#50000000" />
</shape>
FORGROUND
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#99009900" />
</shape>
LIST
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/circleback">
</item>
<item
android:bottom="5dp"
android:drawable="#drawable/circlefront"
android:left="5dp"
android:right="5dp"
android:top="5dp">
</item>
</layer-list>
Then, I used a framelayout and added 2 textview.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#drawable/circle" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="33dp"
android:text="#string/data_left"
android:layout_marginTop="8dp"
android:textColor="#fff"
android:textSize="30sp"
android:typeface="sans"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:text="#string/band"
android:layout_marginTop="40dp"
android:textColor="#fff"
android:textSize="20sp"/>
</FrameLayout>
And then inflated them by service. But I am not happy with the textposition and the fact that I have to random hit and trial to find center of circle.
I'll later add pinch to zoom to view so, I really want to find a way that text align itself to centre of circle.
You need to create a shape drawable (in the res/drawable folder) like:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"
<solid android:color="#ff00ff00 />
</shape>
See docs: https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

how to create a pointy button on android?

How can I create a pointy button like iPhone back button in Android XML ?
I want to create using like this
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#f8bb49"
android:endColor="#f7941d"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#8c8382" />
<corners.....
Path and PathShape can build whatever you want. By layering a couple together and using a gradient fill you can create the 3D effect (recessed) effect.
However, you will need a class that you can use to create a drawable reference if you want to be able to use an XML definition. Sorry I have not worked out the exact code, but it's something I'm planning to do (which is how I found your question).
Looks like you have an image you can work with. Read the docs on 9-patches to set margins and resizable areas.
http://developer.android.com/guide/developing/tools/draw9patch.html
Create image like that and use ImageButton instead of Button
and , use this property for ImageButton
android:background="#drawable/createdimage"
I did this for the following back button
https://drive.google.com/file/d/0B1cySRpqElgyTkptOFpQa3NsdDQ
using the XML files:
left_arrow.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<rotate
android:fromDegrees="-45"
android:toDegrees="-45"
android:pivotX="89%"
android:pivotY="-22%" >
<shape
android:shape="rectangle" >
<stroke android:color="#color/calendarOrange" android:width="3dp"/>
<solid
android:color="#color/drakBlue" />
</shape>
</rotate>
</item>
</layer-list>
button_body.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:left="-4dp">
<shape android:shape="rectangle" >
<stroke android:color="#color/calendarOrange" android:width="3dp"/>
<solid
android:color="#color/drakBlue" />
</shape>
</item>
</layer-list>
Getting them together:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="1.0"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/left_arrow"
android:layout_weight="0.7"
>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/button_body"
android:layout_weight="0.3"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#color/white"
android:text="Back"
android:gravity="center"
android:textStyle="bold"
android:textSize="22dp"
/>
</RelativeLayout>
</LinearLayout>
PS: You might need to change the android:pivotX and android:pivotY parameters depending on your conteiner layout

Categories

Resources