2

I created the following design for a button enter image description here

by using

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:right="245dp">
        <shape android:shape="rectangle" >
            <corners android:radius="3dp" />
            <solid android:color="#000" />
        </shape>
    </item>

    <item android:left="0dp">
        <shape android:shape="rectangle" >
            <corners android:radius="3dp" />
            <solid android:color="#80000000" />
        </shape>
    </item>
</layer-list>`

What I want to achieve is: enter image description here

The + sign is supposed to change in a 'tick' signed once the fragment that will be opened is completed(an address). How can I make the opacity of the black rectangle lower ? I still haven't figured out how to make the + sign, so any ideas are welcomed.

And the main question is: How can I set those styling values by using code in android ? I want to change the size of the first item(245dp) to 5% of the width of the button.

layout of my button:

<Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_marginTopPercent="7%"
        app:layout_marginBottomPercent="6%"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        app:layout_widthPercent="50%"
        android:layout_below="@id/button7"
        android:background="@drawable/btnstyle"
        android:text="Create"
        android:textColor="#fff" />

and btnstyle is defined above.

Bogdan Daniel
  • 2,689
  • 11
  • 43
  • 76

1 Answers1

3

Assuming the background is background.xml placed in drawables folder. You can use this-

<LinearLayout android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="100dp"
                android:background="@drawable/background"
                android:orientation="horizontal">
    <ToggleButton
      style="?android:attr/borderlessButtonStyle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginBottom="10dp"
      android:layout_marginLeft="20dp"
      android:layout_marginStart="20dp"
      android:layout_marginTop="10dp"
      android:checked="false"
      android:drawablePadding="80dp"
      android:drawableRight="@drawable/button_image"
      android:textColor="@android:color/white"
      android:textOff="Button1"
      android:textOn="Button1"/>

  </LinearLayout>

For the drawable button_image.xml, here is the code-

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="false" android:state_focused="true" android:drawable="@drawable/plus_img"/>
  <item android:state_checked="false" android:state_focused="false" android:drawable="@drawable/plus_img"/>
  <item android:state_checked="true" android:state_focused="true" android:drawable="@drawable/tick_img"/>
  <item android:state_checked="true" android:state_focused="false" android:drawable="@drawable/tick_img"/>
</selector>

On the clickListener of your toggleButton, you can open up the fragment and setChecked of your togglebutton to !toggleButton.isChecked(). Basically like this- toggleButton.setChecked(!toggleButton.isChecked());

Regarding opacity In your xml that you have written, the color of first item in rectangle is in the format #RGB. It can also be #ARGB where 'A' is for alpha. So if you set A = 0, the view will be transparent and with A = f, the view will be opaque.

Vaibhav Sharma
  • 2,293
  • 1
  • 17
  • 24
  • I'm sorry for responding so late, but I just tried your layout and I have some questions. I also updated with the layout of my button. My main question was about that little rectangle, which is part of the button, not about its opacity. Basically I want 5% of the button's width to be a color and the rest another color. And the icons inside your toggle button, how can I change their sizes. Now that I think about it, can't I just make an entire layout and make it clickable or is this a bad approach ? I could easily achieve that look in a layout by using percent. – Bogdan Daniel Feb 11 '16 at 00:39
  • Using layouts will definitely be more flexible. You can control everything in it, from the sizes to percentage of space allocated. So using weights, you can achieve the 5% mark :) Also as far as the size of the drawable in toggle button goes, i don't think you will be able to manipulate it beyond a certain size. So, if you can you should use a layout. Plus, if you want your layout to have a checked functionality, use this- http://developer.android.com/samples/CustomChoiceList/src/com.example.android.customchoicelist/CheckableLinearLayout.html. – Vaibhav Sharma Feb 11 '16 at 05:14
  • Then you can give all its children duplicateparentstate="true" and make them clickable="false". – Vaibhav Sharma Feb 11 '16 at 05:15
  • Thank you. I ll look into that. And there is a new percent library since last year, which in my opinion is a lot better than using weights. It gives you more flexibility. As for the clickable state, I don t really care, because I want to let rhe user modify the content if he wants to. So there is nothing wrong in using a clickable layout, right ? – Bogdan Daniel Feb 11 '16 at 07:54
  • For my knowledge could you explain when that might be wrong ? – Bogdan Daniel Feb 11 '16 at 09:59
  • This might be a wrong approach for simple changes, for eg. setting a drawable based on checked state. I would rather use a toggle box and set the drawables using an xml without writing code. So, basically one should aim to keep the view hierarchy as flat as possible or the code as convenient as possible. – Vaibhav Sharma Feb 11 '16 at 13:25