How to make layout which divides views and shows colored when selected?

Question

enter image description hereI want to make a layout which has different options and when we select it it should look colored. Like below:

I have tried something like this but cant get the same effect. I tried to use selector to show it colored when clicked but the color goes after click. It just shows when we have pressed the view.

Please help.. I want to make same layout like image.

 <LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="05dp"
    android:layout_marginRight="05dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/shape">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/shape"
        android:clickable="true">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="@string/pickupbak"
        android:id="@+id/textView47"
        android:layout_gravity="center"
        android:textAlignment="gravity"
        android:gravity="center_vertical"
        android:layout_marginLeft="05dp"
        android:layout_marginRight="05dp" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/shape">
    <TextView
        android:layout_width="89dp"
        android:layout_height="match_parent"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="@string/pickupbox"
        android:id="@+id/textView48"
        android:layout_gravity="center"
        android:gravity="center_vertical"
        android:layout_marginLeft="05dp"
        android:layout_marginRight="05dp" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/shape">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="@string/engkelbak"
        android:id="@+id/textView49"
        android:layout_gravity="center"
        android:gravity="center_vertical"
        android:layout_marginLeft="05dp"
        android:layout_marginRight="05dp" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/shape">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="@string/engkelbox"
        android:id="@+id/textView50"
        android:layout_gravity="center"
        android:gravity="center_vertical"
        android:layout_marginLeft="05dp"
        android:layout_marginRight="05dp" />
        </LinearLayout>
</LinearLayout>
</LinearLayout>

Selector

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:drawable="@android:drawable/list_selector_background" />
</selector>

Thank you for reply. I have used selector I have updated in question please check. @Chirag Savsani — , Dec 14 '15 at 10:34
This will work only when you press on particular layout. Effect not remain in particular layout. — Chirag Savsani, Dec 14 '15 at 10:35
So how to do it to make it remain for that layout??@Chirag Savsani — , Dec 14 '15 at 10:41
For that post list_selector_background drawable, I will create demo app for you. — Chirag Savsani, Dec 14 '15 at 10:48
I have referenced this link.... http://stackoverflow.com/questions/34264245/how-to-make-layout-which-divides-views-and-shows-colored-when-selected — , Dec 14 '15 at 10:54
Pleas check the added image I am getting a layout like that. How ca I arrange those layout and border for that?? It dose not look as good as the one I want to make like.@Chirag Savsani — , Dec 14 '15 at 10:57
You can make linear layout with text background drawable with radius of linear layout and textviews background background change on onclick listener of buttons, if you wana code then I will do it. — Ramesh Kumar, Dec 14 '15 at 11:05
Give `android:background="@drawable/shape"` to your root layout. — Chirag Savsani, Dec 14 '15 at 11:08
And have look this http://stackoverflow.com/questions/33942116/state-checked-doesnt-toggle-imageview-on-and-off/34020870#34020870 for create checkable linearlayout. — Chirag Savsani, Dec 14 '15 at 11:11
Thank you for reply. I want to code. Can you please show the code?? @Ramesh Kumar — , Dec 14 '15 at 11:14
I have also given android:background="@drawable/shape" to my root layout but it then dose not divide the text views. I want border between the text views too. @Chirag Sasvani — , Dec 14 '15 at 11:15
@user5669913 I have shared code i have worked on three buttons. you can modify this code as per requirement. If you feel any difficulty let me know. — Ramesh Kumar, Dec 14 '15 at 11:36
Hey @user5669913 , In this Your tab is fixed or not? If your tab is fixed means always for or 3, then I got one solution. — Chirag Savsani, Dec 14 '15 at 13:14
But that method is too long. If you want to set at any how then that method also useful. — Chirag Savsani, Dec 14 '15 at 13:19

Ramesh Kumar · Answer 1 · 2015-12-15T09:44:37.290

As Discussed in Comments I have made for 3 tabs: I am sharing you code:

for Linear layout: drawable background: bg_home_buttons.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@color/blue"/>
    <stroke android:width="@dimen/stroke_width" android:color="@color/blue" />
    <corners android:radius="@dimen/five"/>
</shape>

For Left Button:(Drawable File) home_button_left.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <!--<stroke android:width="@dimen/stroke_width" android:color="@color/facebook" />-->
    <corners android:topLeftRadius="@dimen/five" android:bottomLeftRadius="@dimen/five"/>
</shape>

For Right Button:(Drawable File) home_button_right.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <!--<stroke android:width="@dimen/stroke_width" android:color="@color/facebook" />-->
    <corners android:topRightRadius="@dimen/five" android:bottomRightRadius="@dimen/five"/>
</shape>

XML file LinearLayout:

<?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:layout_margin="@dimen/ten"
    android:background="@drawable/bg_home_buttons"
    android:orientation="horizontal"
    android:padding="1dp">

    <TextView
        android:id="@+id/tv_pick_up_bak"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:paddingBottom="@dimen/five"
        android:paddingTop="@dimen/five"
        android:text="@string/add_property"
        android:textColor="@android:color/white"
        android:textSize="@dimen/fifteen_sp" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@color/blue" />

    <TextView
        android:id="@+id/tv_pick_box"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/white"
        android:gravity="center"
        android:paddingBottom="@dimen/five"
        android:paddingTop="@dimen/five"
        android:text="@string/my_property"
        android:textColor="@color/blue"
        android:textSize="@dimen/fifteen_sp" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@color/blue" />

    <TextView
        android:id="@+id/tv_engkel_box"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/home_button_right"
        android:gravity="center"
        android:paddingBottom="@dimen/five"
        android:paddingTop="@dimen/five"
        android:text="@string/portfolio"
        android:textColor="@color/blue"
        android:textSize="@dimen/fifteen_sp"
        android:typeface="sans" />

</LinearLayout>

Button Change Functionality:

Context context;
 public void changeBackground(int id) {
        if (id == tvPickBag.getId()) {
            tvPickBag.setTextColor(context.getResources().getColor(R.color.white));
            tvPickBox.setTextColor(context.getResources().getColor(R.color.blue));
            tvEngKelBox.setTextColor(context.getResources().getColor(R.color.blue));
            tvPickBag.setBackgroundColor(context.getResources().getColor(android.R.color.transparent));
            tvEngKelBox.setBackground(context.getDrawable( R.drawable.home_button_right));
            tvPickBox.setBackgroundColor(context.getResources().getColor(R.color.white));
        } else if (id == tvEngKelBox.getId()) {
            tvPickBag.setBackground(context.getDrawable(R.drawable.home_button_left));
            tvEngKelBox.setBackgroundColor(context.getResources().getColor(android.R.color.transparent));
            tvPickBox.setBackgroundColor(context.getResources().getColor(R.color.white));
            tvPickBag.setTextColor(context.getResources().getColor(R.color.blue));
            tvPickBox.setTextColor(context.getResources().getColor(R.color.blue));
            tvEngKelBox.setTextColor(context.getResources().getColor(R.color.white));
        } else if (id == tvPickBox.getId()) {
            tvPickBag.setBackground(context.getDrawable( R.drawable.home_button_left));
            tvEngKelBox.setBackground(context.getDrawable( R.drawable.home_button_right));
            tvPickBox.setBackgroundColor(context.getResources().getColor(android.R.color.transparent));
            tvPickBag.setTextColor(context.getResources().getColor(R.color.blue));
            tvPickBox.setTextColor(context.getResources().getColor(R.color.white));
            tvEngKelBox.setTextColor(context.getResources().getColor(R.color.blue));
        }
    }

in changeBackground method you should pass the id of clicked button id from onClickListener.

Dimension:

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>

    <!-- Per the design guidelines, navigation drawers should be between 240dp and 320dp:
         https://developer.android.com/design/patterns/navigation-drawer.html -->
    <dimen name="navigation_drawer_width">300dp</dimen>
    <dimen name="padding_text_view">10dp</dimen>
    <dimen name="border">1dp</dimen>
    <dimen name="ten">10dp</dimen>
    <dimen name="five">5dp</dimen>
    <dimen name="radius_circle_indicator">8dp</dimen>
    <dimen name="width_button_sign_up">300dp</dimen> -2px match_parent
    <dimen name="size_sign_up_text">13sp</dimen>  15
    <dimen name="padding_tutorial_text">20dp</dimen>
    <dimen name="padding_text_view_right">30dp</dimen>
    <dimen name="fifteen_sp">14sp</dimen> 15
    <dimen name="eighteen_sp">15sp</dimen> 18
    <dimen name="twenty_sp">17sp</dimen> 20
    <dimen name="two">2dp</dimen>
    <dimen name="one">0.5dp</dimen>
    <dimen name="sixteen_sp">16sp</dimen>
    <dimen name="twenty_five_sp">22sp</dimen> 25
    <dimen name="margin_">30dp</dimen>
    <dimen name="map_padding">100dp</dimen>
    <dimen name="stroke_width">1dp</dimen>
    <dimen name="loader_size">80dp</dimen>
    <dimen name="loading_width">5dp</dimen>
    <dimen name="loader_layout_size">300dp</dimen>
    <dimen name="fifteen">15dp</dimen>
    <dimen name="fourty_sp">30sp</dimen> 40
    <dimen name="thirty_sp">20sp</dimen> 20
    <dimen name="height_chart">230dp</dimen>
    <dimen name="height_chart_minus">200dp</dimen>
    <dimen name="width_chart">400dp</dimen>
    <dimen name="size_sales_history">11sp</dimen> 13
    <dimen name="size_text_house_price">22sp</dimen> 25
    <dimen name="twenty">20dp</dimen>
    <dimen name="fifty">100dp</dimen>
    <dimen name="top_margin_sales_history_button">30dp</dimen>
    <dimen name="ten_minus">-10dp</dimen>
    <dimen name="size_marker_text">11sp</dimen>
    <dimen name="profile_image_size">120dp</dimen>
    <dimen name="invite_icon_size">18sp</dimen>
    <dimen name="fourty">40dp</dimen>
    <dimen name="minimum_height_listview">200dp</dimen>
    <dimen name="map_size">300dp</dimen>
    <dimen name="bar_text_size">11sp</dimen>
    <dimen name="margin_bar_text">7dp</dimen>
    <dimen name="five_hundred">800dp</dimen>
    <dimen name="padding_text_view_fourteen">14dp</dimen>
    <dimen name="eight">8dp</dimen>
    <dimen name="thirteen">13dp</dimen>
    <dimen name="three">3dp</dimen>
    <dimen name="seven">7dp</dimen>
    <dimen name="margin_home_buttons">14dp</dimen>
    <dimen name="margin_home_buttons_four">4dp</dimen>
    <dimen name="space_to_change_since">3dp</dimen>

    <dimen name="half_divider">0.5dp</dimen>
    <dimen name="size_sales_history_box_width" >60dp</dimen>
    <dimen name="height_line_thick">@dimen/two</dimen>
    <dimen name="height_buttons_social">40dp</dimen>
    <dimen name="four">4dp</dimen>
    <dimen name="actionbar_text_size">15sp</dimen>
    <dimen name="actionbar_symbol_size">20sp</dimen>
    <dimen name="actionbar_text_size_title">15sp</dimen>

Color.xml

<resources>
    <color name="light_purple">#ca0571</color>
    <color name="dark_blue">#203142</color>

    <color name="facebook">#3b589a</color>
    <color name="twitter">#4799ef</color>
    <color name="google">#d44837</color>d34836
    <color name="white">#FFFFFF</color>
    <color name="green">#98c269</color>
    <color name="gray">#f6f0ee</color>
    <color name="blue">#56a6db</color>
    <color name="orange">#f26522</color>
    <color name="gray_dark">#b8000000</color>
    <color name="divider_color">#717171</color>

    <color name="menu_bg_color">#444f5b</color>
    <color name="email">#ca0571</color>
</resources

OnClikLister: pass the id of the view onClicklistener like: changeBackground(tvPickBag.getId()) like this.

Sorry I did not understand why have you created home_button_left.xml and home_button_right.xml?? Where r u adding these layouts?? @Ramesh Kumar — , Dec 14 '15 at 11:43
because I have to use the curved border of left side button and right side button.. — Ramesh Kumar, Dec 14 '15 at 11:44
I am getting an error on ViesStatic. Cannot resolve symbol ViewsStatic. And will you please explain what I have to do on OnClickListner?? @Ramesh Kumar — , Dec 15 '15 at 06:57
Thank u.. Sorry but OnClickListner of each text view right?? @Ramesh kumar — , Dec 15 '15 at 10:10
Its showing null pointer exception on tvPickBak.setBackground(context.getDrawable(R.drawable.home_button_left)); this. @Ramesh Kumar — , Dec 15 '15 at 10:24
you need to initialize the tvPickBack, tv... eg: TextView tvPickBox = (TextView) findViewById(R.id.tv_pick_box); and then call these function — Ramesh Kumar, Dec 15 '15 at 11:55
yes Ofcourse I have initialized all those...I will add the code in question Please check.. @ Ramesh Kumar — , Dec 15 '15 at 12:19
Actually there is no view with the drawable home_button_left.. Where to specify that?? — , Dec 15 '15 at 12:25
you need to create files in drawable folders (home_button_left.xml and home_button_right.xml). these are not views.I think I have to make demo project for the on GitHub, I will share code. — Ramesh Kumar, Dec 15 '15 at 17:26
yes I have created drawable files but as u applied one of them to the text view layout android:background="@drawable/home_button_right" ,,, home_button_left is not added to any view.. Please can you review the layout code above. @ Ramesh Kumar — , Dec 15 '15 at 17:30
yes, it is applied using code when user clicks on the left most button — Ramesh Kumar, Dec 15 '15 at 17:33
But I am getting a null pointer exception on tvPickBag.setBackground(context.getDrawable(R.drawable.home_button_left)); — , Dec 15 '15 at 17:35
I think I should have to make an project and share via github — Ramesh Kumar, Dec 16 '15 at 07:37

score 0 · Accepted Answer · answered Dec 16 '15 at 07:44

0

What you are looking for is called as segmented control on iOS , here is a similar one on android from github https://github.com/hoang8f/android-segmented-control

answered Dec 16 '15 at 07:44

vishal dharankar

7,536
7
57
93

How to make layout which divides views and shows colored when selected?

2 Answers2