Sunday, January 8, 2012

iPhone like segment-control button for Android


This implementation of segment buttons for android is based on custom styled button. Here four button styles are used for button's state and position changes. And With a few tweaks you can add more buttons to the group.
Activity Code:
offlineBtn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
onlineFlag = 0;
offlineBtn.setBackgroundResource(R.drawable.segment_button_left_on);
onlineBtn.setBackgroundResource(R.drawable.segment_button_right);
}
});

onlineBtn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
onlineFlag = 1;
offlineBtn.setBackgroundResource(R.drawable.segment_button_left);
onlineBtn.setBackgroundResource(R.drawable.segment_button_right_on);
}
});

Layout(View) File:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"  android:layout_height="wrap_content"    
    android:layout_marginTop="0dip"  android:layout_marginBottom="0dip" 
    android:orientation="horizontal" android:baselineAligned="false">
        <Button android:id="@+id/offline_button" 
        android:layout_height="wrap_content" 
        android:text="Offline" android:textColor="#ffffff"    
                android:textSize="13dip" android:singleLine="true"
        android:background="@drawable/segment_button_left_on"
        android:layout_marginTop="5dp" android:layout_width="wrap_content">
        </Button>
        <Button android:id="@+id/online_button" 
        android:layout_height="wrap_content" 
        android:text="Online" android:textColor="#ffffff"    
                android:textSize="13dip" android:singleLine="true"
        android:background="@drawable/segment_button_right"
        android:layout_marginTop="5dp" android:layout_width="wrap_content">
        </Button>
</LinearLayout>

res/drawable-hdpi/segment_button_left_on.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_focused="true" >
<shape>
<gradient
android:endColor="#7E3117" android:startColor="#7E3817"
android:angle="270" />
<stroke android:width="1dp" android:color="#646060" />
<corners android:topLeftRadius="6dp" android:bottomLeftRadius="0.1dp"
android:bottomRightRadius="6dp" android:topRightRadius="0.1dp"/>
<padding
android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
</shape>
</item>

<item>
<shape>
<gradient
android:startColor="#99009900" android:endColor="#FF009900"
android:angle="270" />
<stroke android:width="0.5dp" android:color="#646060" />
<corners android:topLeftRadius="6dp" android:bottomLeftRadius="0.1dp"
android:bottomRightRadius="6dp" android:topRightRadius="0.1dp"/>
<padding
android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
</shape>
</item>
</selector>

res/drawable-hdpi/segment_button_left.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_focused="true" >
<shape>
<gradient
android:endColor="#7E3117" android:startColor="#7E3817"
android:angle="270" />
<stroke android:width="1dp" android:color="#646060" />
<corners android:topLeftRadius="6dp" android:bottomLeftRadius="0.1dp"
android:bottomRightRadius="6dp" android:topRightRadius="0.1dp"/>
<padding
android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
</shape>
</item>

<item>
<shape>
<gradient
android:startColor="#991A1111" android:endColor="#991A1111"
android:angle="270" />
<stroke android:width="0.5dp" android:color="#646060" />
<corners android:topLeftRadius="6dp" android:bottomLeftRadius="0.1dp"
android:bottomRightRadius="6dp" android:topRightRadius="0.1dp"/>
<padding
android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
</shape>
</item>
</selector>

res/drawable-hdpi/segment_button_right_on.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_focused="true" >
<shape>
<gradient
android:endColor="#7E3117" android:startColor="#7E3817"
android:angle="270" />
<stroke android:width="1dp" android:color="#646060" />
<corners android:topLeftRadius="0.1dp" android:bottomLeftRadius="6dp"
android:bottomRightRadius="0.1dp" android:topRightRadius="6dp"/>
<padding
android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
</shape>
</item>

<item>
<shape>
<gradient
android:startColor="#99009900" android:endColor="#FF009900"
android:angle="270" />
<stroke android:width="0.5dp" android:color="#646060" />
<corners android:topLeftRadius="0.1dp" android:bottomLeftRadius="6dp"
android:bottomRightRadius="0.1dp" android:topRightRadius="6dp"/>
<padding
android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
</shape>
</item>
</selector>

res/drawable-hdpi/segment_button_right.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_focused="true" >
<shape>
<gradient
android:endColor="#7E3117" android:startColor="#7E3817"
android:angle="270" />
<stroke android:width="1dp" android:color="#646060" />
<corners android:topLeftRadius="0.1dp" android:bottomLeftRadius="6dp"
android:bottomRightRadius="0.1dp" android:topRightRadius="6dp"/>
<padding
android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
</shape>
</item>

<item>
<shape>
<gradient
android:startColor="#991A1111" android:endColor="#991A1111"
android:angle="270" />
<stroke android:width="0.5dp" android:color="#646060" />
<corners android:topLeftRadius="0.1dp" android:bottomLeftRadius="6dp"
android:bottomRightRadius="0.1dp" android:topRightRadius="6dp"/>
<padding
android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
</shape>
</item>
</selector>

1 comment:

Unknown said...

i want to do it for three buttons