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
Related
Help me please.
How can i do fab like this.
What i must use, that i can do this.
Maybe you know, that i can read about my problem?
Are there any samples / examples to perform such a transformation?
I tried using a background, but it's doesn't work
Problem in making this view.
FloatingActionButton hides all view on it. So your dot view can not be placed upon FAB. So we have to make ImageView instead of FAB.
Put this in your layout.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/blue_circle"
android:padding="15dp"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="13dp"
android:layout_height="13dp"
android:layout_gravity="top|right"
android:src="#drawable/red_circle" />
</FrameLayout>
make new xml in res>drawable>blue_circle_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:endColor="#8e81fc"
android:startColor="#7264EA" />
</shape>
make new xml in res>drawable>red_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ff0000" />
</shape>
Output will be same like this:
I have been trying to design a button and a edittext in native android but unable to create the exact UI as shown in the picture. If anyone has any idea how can I create such UI please share your thoughts. In the image the first field should act as an input box and the second field should act as button.
The following given xmls will create the same UI you asked for. :)
create roundedbutton.xml resource file in drawable folder, given below
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#eeC4C6C7" />
<corners android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp"
android:topRightRadius="30dp"
android:topLeftRadius="30dp"/>
</shape>
create roundededittext.xml resource file in drawable folder, given below
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#eeCD3E22" />
<corners android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp"
android:topRightRadius="30dp"
android:topLeftRadius="30dp"/>
</shape>
Create your main xml layout file. I created with your custom edit text, shown here:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp">
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/roundedbutton"
android:elevation="10dp"
android:layout_gravity="center_vertical"
android:text="t"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginLeft="-30dp"
android:elevation="2dp"
android:layout_gravity="center_vertical"
android:background="#drawable/roundededittext"/>
</LinearLayout>
Hope it helps! Ask for any doubt.
I am trying to create a button, aligned to the bottom of the page. I want it to fill 100% space, from left, right and bottom. Whatever attributes I will choose, there are still very small non covered areas. Can you please help?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="match_parent"
tools:context="com.example.myapplication.MainActivity">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_margin="0dp"
android:padding="0dp"
android:text="search"
/>
</RelativeLayout>
Here is the screenshot, showing not filled areas
Create a file in drawable folder like this, say simple_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<!-- Normal color -->
<solid android:color="#android:color/white" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<!-- Color - when the view is pressed -->
<solid android:color="#android:color/black"/>
</shape>
</item>
</selector>
Now simply set the background as the above created drawable.
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:background="#drawable/simple_selector"
android:text="search"
/>
The above code can change color in both normal and pressed states of the button. You can change the colors as per your requirement.
The space you see is the shadow around the button in its background drawable. You need to create your own background drawable and it should then completely occupy the width.
Or, you could also just set the background to null.
android:background="#null"
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...
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