Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making buttons that look like tabs in android

I want this kind of look. They don't seem like tabs so I believe they are buttons.

enter image description here

I am able to acheive the similar type with toggle button by keeping a selector in drawable.

<ToggleButton
    android:id="@+id/toggleButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/custom_selector"    
    android:textOn=" Button1    Button2"
    android:textOff=" Button1   Button2" />

But they have only two values and by clicking on the selected tab gets the other selected and the present one unselected. But I want exactly like tab. So can someone please help me achieve it? Thanks in advance.

like image 622
rick Avatar asked Jul 09 '13 04:07

rick


People also ask

How do I create a tab in Android?

Tabs are created using newTab() method of TabLayout class. The title and icon of Tabs are set through setText(int) and setIcon(int) methods of TabListener interface respectively. Tabs of layout are attached over TabLayout using the method addTab(Tab) method.

Can we change the shape of button in Android Studio?

We can set custom shapes on our button using the xml tag <shape> . These xml files are created in the drawable folder too. shape can be used inside selectors . The shape can be set to rectangle (default), oval , ring , line .


2 Answers

You have to create selector for all button and use RadioGroup with selector background and null button..

Follow @Andru answer for create Selector..

Below is RadioGroup code.

    <RadioGroup
    android:id="@+id/rdogrp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:gravity="center"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:background="@drawable/btn1Selector"
        android:button="@null"
        android:checked="true"
        android:gravity="center" />

    <RadioButton
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:background="@drawable/btn2Selector"
        android:button="@null"
        android:gravity="center" />

    <RadioButton
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:background="@drawable/btn3Selector"
        android:button="@null"
        android:gravity="center" />

    <RadioButton
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:background="@drawable/btn4Selector"
        android:button="@null"
        android:gravity="center" />
</RadioGroup>

here is sample code for btn1Selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn1_selected" android:state_checked="true"  />
    <item android:drawable="@drawable/btn1_normal" android:state_checked="false"/>
</selector>
like image 134
Niranj Patel Avatar answered Sep 18 '22 12:09

Niranj Patel


you can do something like this, instead of toggle button use normal buttons.
if "Data" button clicked do like this

data(View v)
 {
  databtn.setBackgroundResource(R.drawable.image1);
  w_chartbtn.setBackgroundResource(R.drawable.image2);
  H_chartbtn.setBackgroundResource(R.drawable.image2);
 }

if "H-chart" button clicked

 H_chart(View v)
 {
  databtn.setBackgroundResource(R.drawable.image2);
  w_chartbtn.setBackgroundResource(R.drawable.image2);
  H_chartbtn.setBackgroundResource(R.drawable.image1);
 }
like image 28
Senthil Avatar answered Sep 19 '22 12:09

Senthil