I have an android application where in an activity i need a tab like selector where user can select an option.The 3 options are blue,green,red.User need to select any one of them.I can use a spinner for this.But i like to use a round edged tab like feature which can toggle and the selected item will show as highlighted and the others will be grayed out as below.
I just want the user to be able to toggle only one of the buttons.user can select an option by clicking or by toggling and the view should look like a bar with rounded edge.How to implement above view in android? Please help me.
Try Like This
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:azeoo="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RadioGroup
android:id="#+id/rgTask"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_border"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/rbBlue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/bg_blue"
android:button="#android:color/transparent"
android:gravity="center"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:singleLine="true"
android:text="Blue"
android:textSize="22sp" />
<View
android:id="#+id/vSep1"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#0000FF"
android:visibility="visible" />
<RadioButton
android:id="#+id/rbGreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/bg_green"
android:button="#android:color/transparent"
android:gravity="center"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:singleLine="true"
android:text="Green"
android:textSize="22sp" />
<View
android:id="#+id/vSep2"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#0000FF"
android:visibility="visible" />
<RadioButton
android:id="#+id/rbRed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/bg_red"
android:button="#android:color/transparent"
android:gravity="center"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:singleLine="true"
android:text="Red"
android:textSize="22sp" />
</RadioGroup>
put all below file in your drawable folder
bg_blue.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"><shape android:shape="rectangle">
<solid android:color="#0000FF" />
<corners android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" />
</shape></item>
<item><shape android:shape="rectangle">
<solid android:color="#00000000" />
</shape></item>
</selector>
bg_green.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"><shape android:shape="rectangle">
<solid android:color="#00FF00" />
</shape></item>
<item><shape android:shape="rectangle">
<solid android:color="#00000000" />
</shape></item>
</selector>
bg_red.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"><shape android:shape="rectangle">
<solid android:color="#FF0000" />
<corners android:bottomRightRadius="10dp" android:topRightRadius="10dp" />
</shape></item>
<item><shape android:shape="rectangle">
<solid android:color="#00000000" />
</shape></item>
</selector>
round_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- view background color -->
<solid android:color="#00000000" >
</solid>
<!-- view border color and width -->
<stroke
android:width="1dp"
android:color="#0000FF" >
</stroke>
<!-- If you want to add some padding -->
<!-- Here is the corner radius -->
<corners android:radius="10dp" >
</corners>
</shape>
and output like this
Related
Is there a way to create these two boxes with XML only (beside the icon of course)
The tob box has rounded bordered around it and shadow but inside it divided to two parts which one is pink background and one is white background (without stroke between them)
Create 2 XML drawables
rect_colored.xml
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorAccent"/>
<corners android:bottomRightRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
rect_white.xml
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:color="#color/colorPrimaryDark"
android:width="2dp"/>
<corners android:radius="5dp"/>
</shape>
Position the drawables appropriately
This will work differently with different root views. I'm using ConstraintLayout for simplicity
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
android:background="#drawable/rect_white"
android:id="#+id/frameLayout"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp">
<!--Content here-->
</FrameLayout>
<FrameLayout
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginBottom="0dp"
android:layout_marginRight="2dp"
android:layout_marginTop="0dp"
android:background="#drawable/rect_colored"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintRight_toRightOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="#+id/frameLayout">
<!--Content here-->
</FrameLayout>
</android.support.constraint.ConstraintLayout>
The output
Just use a LayerList with the shapes you need nested. May take a little tweaking, but it is simple enough. You can even add in your bitmaps for the left icon if you like. Just make your layers, and adjust from the sides and handle your corners.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="50dp">
<shape
android:shape="rectangle" >
<solid android:color="#0000FF" />
<corners android:bottomRightRadius="20dp" android:topRightRadius="20dp" />
</shape>
</item>
<item android:right="50dp">
<shape
android:shape="rectangle" >
<solid android:color="#ffffff" />
<corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />
</shape>
</item>
</layer-list>
Here simply you create a one xml file & drawable file to create shape & border.
MyActivity.Xml
<LinearLayout
android:id="#+id/ll_mobile_img"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<RelativeLayout
android:id="#+id/rr_verification_code"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_weight="0.3">
<EditText
android:id="#+id/et_verification_code"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/ractangle_mobile_white_border"
android:ems="10"
android:hint="Enter Code"
android:drawableLeft="#mipmap/ic_launcher"
android:imeOptions="actionGo"
android:inputType="number|textAutoComplete"
android:maxLength="6"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingTop="16dp"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHint="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
<LinearLayout
android:id="#+id/ll_country_img"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#android:color/white"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/tv_verification_code_img"
android:layout_width="38dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/globe"
android:textColor="#color/blue_font_color"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>
Drawable:- ractangle_mobile_white_border.xml
[![<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="360" android:endColor="#android:color/transparent" android:startColor="#android:color/transparent" />
<stroke android:width="1dp" android:color="#android:color/white" />
<corners android:bottomRightRadius="1dp" android:topRightRadius="1dp"/>
<padding android:bottom="3dp" android:left="0dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Hope this helps you.
I am using this code for adding a border to my button layout but no change is appearing in the button.
button_bg.xml(drawable)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="14dp"
/>
<solid
android:color="#fff"
/>
<stroke
android:width="3px"
android:color="#000"
/>
</shape>
Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/button_bg"
android:textColor="#000"
android:text="#string/category_name" />
</RelativeLayout>
img
I want to create square shape in background. Android studio shape doesn,t support square.How to create manually in border.xml?
Here is my code
border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#9294a3" />
<stroke
android:width="2dp"
android:color="#c2bbbb" />
<corners android:radius="2dp" />
</shape>
my.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#9294a3">
<TextView
android:id="#+id/tv_2"
android:layout_width="wrap_content"
android:text="2"
android:textColor="#c2bbbb"
android:textSize="30sp"
android:background="#drawable/border"
android:layout_height="wrap_content" />
</LinearLayout
Button like this
xml
<TextView
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#drawable/border"
android:text="2"
android:textSize="50sp"
android:gravity="center"
android:textColor="#ffffff"
android:padding="5dp"/>
Style (drawable/border.xml)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorGray"/>
<stroke android:color="#color/colorBlack"
android:width="4dp" />
<!--corners allow us to make the rounded corners button-->
<corners android:radius="15dp" />
</shape>
</item>
</selector>
<TextView
android:id="#+id/input_name"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_gravity="right"
android:direction="center"
android:gravity="center"/>
you should specify shape='Rectangle' for square it will be better.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="#9294a3" />
<stroke
android:width="2dp"
android:color="#c2bbbb" />
<corners android:radius="2dp" />
I have a dialog and in this i have 2 button "Yes" and "No". If i slide right then it will treat as pressed "No" and if i slide left it will treated as pressed "Yes" same as like some phone calling screes do for accept and reject calls. I tired this link. Initially my slider is positioned at mid position (android:progress ="50"), and if current progress returns 5 i am considering it pressed "yes" and if it returns 90 i consider pressed "No" and when i try to slide left or right it should produce a sliding effect for better UI as thumb moves. I tired this way but its not a good effect when right/left movement of thumb..
Means i want exactly same as slide to unlock button like this but want to keep the slider in middle so that i can move both side for Yes and No.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<shape>
<gradient
android:angle="0"
android:startColor="#ff2c10"
android:endColor="#ff2c10" />
<corners android:radius="35dip" />
<size android:height="55dp"
android:width="250dp"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip >
<shape>
<gradient
android:angle="0"
android:centerY="0.5"
android:startColor="#295d0b"
android:endColor="#295d0b" />
<corners android:radius="35dip" />
<size android:height="55dp"
android:width="250dp"/>
</shape>
</clip>
</item>
</layer-list>
And my seekbar.xml looks like....
<SeekBar
android:id="#+id/sb"
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:progress="50"
android:progressDrawable="#drawable/seek_bar"
android:thumb="#drawable/slide_thumb"
android:splitTrack="false"
android:background="#null"
android:thumbOffset="2dp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Yes"
android:textSize="25sp"
android:textColor="#android:color/white"
android:layout_marginTop="22dp"
android:layout_marginLeft="10dp"
android:textStyle="bold"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="No"
android:textSize="25sp"
android:textColor="#android:color/white"
android:layout_alignParentRight="true"
android:layout_marginTop="22dp"
android:layout_marginRight="10dp"
android:textStyle="bold"
/>
but its not giving me the right effect as i wanted, i want same as these below pictures are.. But with "yes" and "No" text.
Layout
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_gravity="center"
android:layout_marginTop="121dp"
android:max="100"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:progress="50"
android:progressDrawable="#drawable/seekbar_progressbar"
android:thumbTintMode="multiply" />
<TextView
android:layout_width="wrap_content"
android:layout_height="24dp"
android:background="#drawable/circle_background_no"
android:textColor="#dedede"
android:text="No"
android:padding="5dp"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:layout_alignTop="#+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="24dp"
android:textColor="#dedede"
android:background="#drawable/circle_background_yes"
android:padding="5dp"
android:paddingRight="7dp"
android:paddingLeft="7dp"
android:gravity="center"
android:text="Yes"
android:id="#+id/textView"
android:layout_marginRight="13dp"
android:layout_marginEnd="13dp"
android:layout_alignTop="#+id/seekBar"
android:layout_alignRight="#+id/seekBar"
android:layout_alignEnd="#+id/seekBar"
android:layout_marginTop="4dp" />
In drawable
circle_background_yes.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="10dip"/>
<stroke android:color="#14ba92" android:width="0dip"/>
<solid android:color="#14ba92"/>
</shape>
circle_background_no.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="10dip"/>
<stroke android:color="#990800" android:width="0dip"/>
<solid android:color="#990800"/>
</shape>
seekbar_progressbar.xml
<?xml version="1.0" encoding="utf-8"?>
<item>
<shape android:shape="rectangle" >
<corners android:radius="5dp"/>
<gradient
android:angle="180"
android:endColor="#14ba92"
android:startColor="#14ba92" />
</shape>
</item>
<item>
<clip>
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<gradient
android:angle="180"
android:endColor="#990800"
android:startColor="#d14900" />
</shape>
</clip>
</item>
<item>
<clip>
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<gradient
android:angle="180"
android:endColor="#990800"
android:startColor="#d14900" />
</shape>
</clip>
</item>
If you don't like the default thumb, you will have to create your own Drawable, which you can then set the thumb in code with something like:
Drawable thumb = getResources().getDrawable( R.drawable.myThumb );
SeekBar mSeekBar = (SeekBar) findViewById(R.id.mySeekBar);
mSeekbar.setThumb(thumb);
Or you can set the thumb in XML with:
<SeekBar
...
android:thumb="#drawable/seek_thumb" />
The actual Drawable can be an image, shape, or any other kind of Drawable you could possibly desire. If you want the thumb to change appearance when it is pressed, you will want to create a State List Drawable.
Here is an example of an app that used XML to design button.
How can i have the same design with XML?
How make my buttons look like it is floating just like in the image below?
I think you will need to use a shape drawable with a layered list, here is an example of a button that has a different color on the top and bottom (the drop shadow effect). You will set this as the background attribute of the Button.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<corners android:radius="2dp" />
<solid android:color="#color/button_border_dark" />
</shape>
</item>
<item android:top="1dp">
<shape android:shape="rectangle" >
<corners android:radius="2dp" />
<solid android:color="#color/button_border_light" />
</shape>
</item>
<item
android:bottom="1dp"
android:top="1dp">
<shape android:shape="rectangle" >
<corners android:radius="2dp" />
<solid android:color="#color/button_general_color" />
</shape>
</item>
</layer-list>
Here is the XML of the Button. You can also use custom typeface as well as shadows to make it the way you want.
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#android:color/holo_blue_dark"
android:textColor="#android:color/white"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_gravity="center"
android:shadowColor="#android:color/holo_blue_light"
android:id="#+id/btnClickMe"
android:text="Click Me!"
/>
Use this one....
<?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:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:background="#drawable/selected" // selected is the name of your custom file
android:text="Register"
android:textColor="#fff" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:background="#37a8f7"
android:text="Login"
android:layout_marginTop="15dp"
android:textColor="#fff" />
</LinearLayout>
you can make custom file selected.xml in drawable folder for red button.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ff0000"/>
<corners android:radius="1dp"/>
<padding android:left="3dp" android:top="2dp"
android:right="3dp" android:bottom="2dp" />
</shape>
and set it to your red button.
And you can make same as for your blue button.