View view = new MyView(this, R.drawable.custombutton, R.drawable.custombutton, "Channels");
// channelTabSpec = tabhost.newTabSpec("channels").setIndicator(view)
.setContent(intent);
// channelTabSpec = tabhost.newTabSpec("channels").setIndicator(view)
.setContent(intent);
tabhost.addTab(channelTabSpec);
---
----
---
Similarly I created two more tabs in application. The class MyView used above is
private class MyView extends LinearLayout {
ImageView iv;
TextView tv;
public MyView(Context c, int drawable, int drawableselec, String label) {
super(c);
tv = new TextView(c);
tv.setText(label);
tv.setGravity(Gravity.CENTER);
tv.setBackgroundColor(Color.TRANSPARENT);
tv.setTextColor(Color.WHITE);
tv.setTextSize(14);
tv.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT, (float) 1.0));
setOrientation(LinearLayout.VERTICAL);
Drawable d = getResources().getDrawable(drawableselec);
tv.setBackgroundDrawable(d);
addView(tv);
}
}
ImageView iv;
TextView tv;
public MyView(Context c, int drawable, int drawableselec, String label) {
super(c);
tv = new TextView(c);
tv.setText(label);
tv.setGravity(Gravity.CENTER);
tv.setBackgroundColor(Color.TRANSPARENT);
tv.setTextColor(Color.WHITE);
tv.setTextSize(14);
tv.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT, (float) 1.0));
setOrientation(LinearLayout.VERTICAL);
Drawable d = getResources().getDrawable(drawableselec);
tv.setBackgroundDrawable(d);
addView(tv);
}
}
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false">
<shape>
<gradient android:startColor="@color/darkblue" android:centerColor="@color/lightblue"
android:endColor="@color/darkblue" android:angle="270" />
<stroke android:width="1dp" android:color="@color/lightblue" android:radius="1dp"/>
<corners android:radius="5dp" />
<padding android:left="1dp" android:top="20dp"
android:right="1dp" android:bottom="20dp" />
</shape>
</item>
<item android:state_selected="true">
<shape>
<gradient android:endColor="@color/steel_blue" android:gradientRadius="50"
android:startColor="@color/blue" android:angle="270" android:type="radial" />
<stroke android:width="1dp" android:color="@color/lightblue" />
<corners android:radius="5dp" />
<padding android:left="1dp" android:top="20dp"
android:right="1dp" android:bottom="20dp" />
</shape>
</item>
</selector>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false">
<shape>
<gradient android:startColor="@color/darkblue" android:centerColor="@color/lightblue"
android:endColor="@color/darkblue" android:angle="270" />
<stroke android:width="1dp" android:color="@color/lightblue" android:radius="1dp"/>
<corners android:radius="5dp" />
<padding android:left="1dp" android:top="20dp"
android:right="1dp" android:bottom="20dp" />
</shape>
</item>
<item android:state_selected="true">
<shape>
<gradient android:endColor="@color/steel_blue" android:gradientRadius="50"
android:startColor="@color/blue" android:angle="270" android:type="radial" />
<stroke android:width="1dp" android:color="@color/lightblue" />
<corners android:radius="5dp" />
<padding android:left="1dp" android:top="20dp"
android:right="1dp" android:bottom="20dp" />
</shape>
</item>
</selector>
First item is for non-selected tab and second for selected. In selected tab we are using radial gradient with start color and end color. In non-selected tab we are using linear gradient with start color, center color and end color and angle as 270. Angle can be 90, 180, and 270. Other values for angle will crash the program. Center color is optional.
You can get more info about custom shapes in this android tutorialhttp://developer.android.com/guide/topics/resources/drawable-resource.html
At the end, my tabs look like this. Well don't bother about color combination, I know I am not so good in that.
The gradient type can be linear, radial or sweep - linear is default. For selected tab I am using radial gradient.
Notice one more thing here, I am defining two shapes - one for selected and another for not selected - using selector. If you want to use this for button you can use android:state_pressed and android:state_focused and define different shapes for these.
Look at another example where I am defining different drawable pngs for different states
</selector>
I have lightbtn.png and darkbtn.png in my /res/drawable-hdpi . Now when I touch the button darkbtn is displayed else lightbtn is displayed
The gradient type can be linear, radial or sweep - linear is default. For selected tab I am using radial gradient.
Notice one more thing here, I am defining two shapes - one for selected and another for not selected - using selector. If you want to use this for button you can use android:state_pressed and android:state_focused and define different shapes for these.
Look at another example where I am defining different drawable pngs for different states
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
android:drawable="@drawable/lightbtn" >
</item>
<item android:state_pressed="true"
android:drawable="@drawable/darkbtn">
</item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
android:drawable="@drawable/lightbtn" >
</item>
<item android:state_pressed="true"
android:drawable="@drawable/darkbtn">
</item>
</selector>
This xml file is stored as mybutton.xml in /res/drawable-hdpi and I use the following line in my layout file
----
----
<Button
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:id="@+id/okbutton"
android:layout_gravity="center_horizontal"
android:layout_marginTop="50dp"
android:background="@drawable/mybutton">
</Button>
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:id="@+id/okbutton"
android:layout_gravity="center_horizontal"
android:layout_marginTop="50dp"
android:background="@drawable/mybutton">
</Button>
No comments:
Post a Comment