Skip to main content

Tabs with different background colors

For past 3 days I was trying to have different colors for android tabs instead of normal grey and whitish grey. I got an articles from net android tabs like iphone. Now I am unable to find the article now. Anyways, here is the code

View view = new MyView(this, R.drawable.custombutton, R.drawable.custombutton, "Channels");
       //         channelTabSpec = tabhost.newTabSpec("channels").setIndicator(view)
        .setContent(intent);
 tabhost.addTab(channelTabSpec);
---
----
---

Similarly I created two more tabs Newspapers and Techsites. 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);
        
          }
         }

I have created a file custombutton.xml in the folder /res/drawable for having different appearances for the normal tab and selected tab. Here is the file

<?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>

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 tutorial http://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
<?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>

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>

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

Comments

Popular posts from this blog

Copy to clipboard

In my upcoming app, I have codes which I display. These are some times lengthy, and I want the app to be able to copy this to clipboard. Once it is in clipboard, users can paste it anywhere. So how do you copy some text from your app to clipboard. You need to use clipboard manager. Clipboard Manager This class sets and gets data for the clipboard using Clipdata objects.  You can get the object of this class using system service.  - using statement context.getSystemService(Context.CLIPBOARD_SERVICE) Example I have a dummy project with a button, onclick of which copies content to clipboard. Here is my activity file package com . hegdeapps . testapp ; import android.content.ClipData ; import android.content.ClipboardManager ; import android.support.v7.app.AppCompatActivity ; import android.os.Bundle ; import android.view.View ; import android.widget.Button ; import android.widget.TextView ; public class MainActivity extends ...

Drawables in Android - Layer drawable

Let us see how to use layer drawable. You can have two or more bitmaps on different layers to create such a drawable Using xml : You should use layer-list in your xml file to create layerdrawable. Here is layer.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:src="@drawable/whiteicon" android:gravity="top|left"/> </item> <item> <bitmap android:src="@drawable/blueicon" android:gravity="top|left"/> </item> <item> <bitmap android:src="@drawable/redicon" android:gravity="top|left"/> </item> </layer-list> We are using three different bitmaps whiteicon.png, redicon.png and blueicon.png which are present in /res/drawable/mdpi folder. All these are of different sizes and aligned to top left. Thi...

Ratings and feedbacks

Once your android project is at the finishing stage, you need to add the following extra features to your app. Rate the app Because rates drive app download Other apps by you free advertisement for your apps Send feedback you need them to remove bugs and improve the app Well, I personally feel that the pop up screens which ask the user to rate the app, is not a good idea. People may get irritated by this. But to provide the first one, you need to know the playstore page of your app. How do you get the page if you have not yet published the page? Well, the app page always looks like this https://play.google.com/store/apps/details?id =your_app_package_name    the last part is your package name of the app. And to take the user to all apps by you, you need to use a url like this https://play.google.com/store/apps/developer?id=yourdevelopername  So these two settled, let us write our xml and code <?xml version="1.0" encoding="utf-8...