I'm trying to achieve a Apple Music like slider button:
I have the style for the button that is checked and for the one that is unchecked:
<style name="Theme.My.Buttons.Outlined" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="android:textColor">#android:color/darker_gray</item>
<item name="android:textSize">11dp</item>
<item name="android:textAppearance">#style/Widget.AppCompat.Button.Small</item>
</style>
<style name="Theme.My.Buttons.Active" parent="Widget.MaterialComponents.Button">
<item name="android:textColor">#color/white</item>
<item name="android:backgroundTint">#android:color/darker_gray</item>
<item name="android:textSize">11dp</item>
<item name="android:textAppearance">#style/Widget.AppCompat.Button.Small</item>
</style>
This is my xml file with the buttons, currently I used the styles manually:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
tools:context=".fragments.SearchFragment">
<com.google.android.material.button.MaterialButtonToggleGroup
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="#+id/button"
style="#style/Theme.My.Buttons.Outlined"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
style="#style/Theme.My.Buttons.Active"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_weight="1"
android:text="Button"
/>
</com.google.android.material.button.MaterialButtonToggleGroup>
</LinearLayout>
How can I set the checked style when the button is checked and unchecked style when it is unchecked? Also, is it possible for me to do a slide like animation?
I tried using a drawable file setting the style to when it is checked and when it is unchecked, but in the field style I can't put a drawable resource file
I found out how to do it!
You have to create a xml file with the color for when the button is checked or not. I used here 4 files for the background, because I wanted to have the outside corners rounded but the inside not, so I had to create 2 backgrounds for each side, one for when it is checked and one to when it isn't checked.
If I used the same background file there would be a problem with the single side rounded corner as on the left side the outside corner is the left and on the right side it is the right
These are thef files:
These to define the backgrounds from when it is checked and when it isn't:
Selected right:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:topLeftRadius="0dp"
android:bottomRightRadius="#dimen/slider_button_corner_size"
android:topRightRadius="#dimen/slider_button_corner_size"
/>
<solid android:color="#color/android_darker_gray" />
</shape>
regular right:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:topLeftRadius="0dp"
android:bottomRightRadius="#dimen/slider_button_corner_size"
android:topRightRadius="#dimen/slider_button_corner_size"
/>
<solid android:color="#color/white" />
<stroke
android:width="0.5dp"
android:color="#color/slider_button_outline_color_unchecked" />
</shape>
regular left:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="#dimen/slider_button_corner_size"
android:topLeftRadius="#dimen/slider_button_corner_size"
android:bottomRightRadius="0dp"
android:topRightRadius="0dp"
/>
<solid android:color="#color/white" />
<stroke
android:width="0.5dp"
android:color="#color/slider_button_outline_color_unchecked" />
</shape>
selected left:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="#dimen/slider_button_corner_size"
android:topLeftRadius="#dimen/slider_button_corner_size"
android:bottomRightRadius="0dp"
android:topRightRadius="0dp"
/>
<solid android:color="#color/android_darker_gray" />
</shape>
These to define what background will be used when it is checked and when it isnt:
Definer Right:
definer left:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radio_background_selected_left" android:state_checked="true" />
<item android:drawable="#drawable/radio_background_regular_left" />
</selector>
Then on the layout where you want to use it put:
<RadioGroup
android:id="#+id/radioGroupSliderSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:checkedButton="#id/radioButtonMyMaterialsSearch"
android:gravity="center_horizontal"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="#+id/radioButtonMyMaterialsSearch"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_weight="1"
android:background="#drawable/radio_button_background_definer_left"
android:button="#android:color/transparent"
android:checked="true"
android:clickable="true"
android:gravity="center"
android:text="Meus Materiais"
android:textColor="#color/radio_button_text_definer"
android:textSize="10sp" />
<RadioButton
android:id="#+id/radioButtonEdugatherSearch"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_weight="1"
android:background="#drawable/radio_button_background_definer_right"
android:button="#android:color/transparent"
android:checked="false"
android:clickable="true"
android:gravity="center"
android:text="EduGather"
android:textColor="#color/radio_button_text_definer"
android:textSize="10sp" />
</RadioGroup>
And that's it!
Related
I have 3 ToggleButtons in a row as you can see in the screenshot:
I would like to have the following layout modifications:
There should be rims separating the Toggle Buttons
The fill in color of the unchecked Toggle Buttons should be white while the fill in color of the checked Toggle Button should be green sucht that you can see which of those is checked (I will make sure programatically that only one of those can be checked)
Here is my XML layout for the Toggle Buttons inside a Liner Layout:
<LinearLayout
android:id ="#+id/linearLayoutForButtons"
android:layout_width="0dp"
android:layout_height="#dimen/_25sdp"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
>
<ToggleButton
android:id="#+id/button_1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textAllCaps="false"
android:background="#95f9ad"
android:layout_weight="1"
android:checked="true"
android:textOn="Button 1"
android:textOff="Button 1"
android:textSize="#dimen/_8ssp"
app:layout_constraintTop_toTopOf="parent" />
<ToggleButton
android:id="#+id/button_2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#95f9ad"
android:layout_weight="1"
android:textAllCaps="false"
android:checked="false"
android:textSize="#dimen/_8ssp"
android:textOn="Button 2"
android:textOff="Button 2" />
<ToggleButton
android:id="#+id/button_3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#95f9ad"
android:textAllCaps="false"
android:layout_weight="1"
android:checked="false"
android:textSize="#dimen/_8ssp"
android:textOn="Button 3"
android:textOff="Button 3"/>
</LinearLayout>
Any idea how I can do that? It should actually look similar to the ToggleButtons used hereenter link description here
Reminder: Does anyone have an idea how to do that? I'll appreciate every comment.
We can also create it like this
Perhaps this is more of what you are looking for. This does require some changes.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/root_view_background"
android:padding="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ToggleButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_1_selector"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ToggleButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_2_selector"
app:layout_constraintStart_toEndOf="#id/button1"
app:layout_constraintTop_toTopOf="#id/button1" />
<ToggleButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_3_selector"
app:layout_constraintStart_toEndOf="#id/button2"
app:layout_constraintTop_toTopOf="#id/button1" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Drawable root_view_background.xml (This is the black outlining)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="#color/black" android:width="1dp" />
<corners android:radius="3dp" />
</shape>
Drawable button_1_background_checked (This is the green background for the left button)
<?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/holo_green_light" />
<corners android:topLeftRadius="3dp" android:bottomLeftRadius="3dp" />
</shape>
Drawable button_2_background_checked (This is the green background for the middle button)
<?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/holo_green_light" />
</shape>
Drawable button_3_background checked (This is the green background for the right button)
<?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/holo_green_light" />
<corners android:topRightRadius="3dp" android:bottomRightRadius="3dp" />
</shape>
Drawable button_1_selector (This changes the background of the first button when it's checked or not)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_1_background_checked" android:state_checked="true" />
<item android:drawable="#color/white" android:state_checked="false" />
</selector>
Drawable button_2_selector (This changes the background of the second button when it's checked or not)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_2_background_checked" android:state_checked="true" />
<item android:drawable="#color/white" android:state_checked="false" />
</selector>
Drawable button_3_selector (This changes the background of the last button when it's checked or not)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_3_background_checked" android:state_checked="true" />
<item android:drawable="#color/white" android:state_checked="false" />
</selector>
I want to change background color to my CardView in Android Studio, I want to use selector, but I dont know what I do
This in my code:
<androidx.cardview.widget.CardView
android:id="#+id/card_ordina"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
app:cardBackgroundColor="#color/orange"
app:cardCornerRadius="20dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="30dp"
android:layout_marginTop="20dp"
android:layout_marginRight="30dp"
android:layout_marginBottom="40dp"
android:background="#drawable/options"
android:backgroundTint="#F44336"
android:padding="10dp"
android:src="#drawable/carrello"
android:tint="#color/background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="5dp"
android:fontFamily="#font/title"
android:text="ORDINA"
android:textColor="#color/background"
android:textSize="18sp" />
</androidx.cardview.widget.CardView>
You need to make a selector and set the following attributes to your CardView.
android:foreground="#drawable/card_foreground"
android:clickable="true"
android:focusable="true"
Here is the code for card_foreground.xml, add it in your project's drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#e0F5AD6E"/>
<corners android:radius="2dp" />
</shape>
</item>
<item android:state_focused="true" android:state_enabled="true">
<shape android:shape="rectangle">
<solid android:color="#0f000000"/>
<corners android:radius="2dp" />
</shape>
</item>
</selector>
You can change the state colors and radius according to your requirements. Now, when you click on the CardView the color will get changed.
This is my issue I can't seem to round the edges on the bottom of my listview.
I've tried a couple of methods where you create a shape for the backgroup resource, tried it programmatic ally and in the layout xml's but it does not do anything at all.
Like I either did it wrong which I doubt since I am familiar with shapes, or something else interferes with my attempts.
Either way I need help is what I'm getting at.
Here's some of the xml's that make up what you're looking at.
This makes up the actual dialog. (settings_dialog.xml)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BB000000"
android:gravity="center">
<ImageView
style="#style/CloseButtonStyle"
android:id="#+id/ivCancel_SD"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_above="#+id/rlContainer_SD"
android:layout_toRightOf="#+id/rlContainer_SD"
android:layout_toEndOf="#+id/rlContainer_SD"/>
<RelativeLayout
style="#style/SettingsDialogStyle"
android:id="#+id/rlContainer_SD"
android:layout_width="800dp"
android:layout_height="600dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
style="#style/SettingsHeaderStyle"
android:id="#+id/tvSettingsLabel_SD"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="#string/sd_header_label"/>
<ListView
style="#style/SettingsListStyle"
android:id="#+id/lvOptions_SD"
android:background="#drawable/bg_listview_corners"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tvSettingsLabel_SD"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
</RelativeLayout>
</RelativeLayout>
This is located in my styles.xml with a bunch of other stuff that has no relation to this.
<style name="SettingsListStyle">
<item name="android:divider">#color/table_divider_color</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:paddingTop">40dp</item>
<item name="android:paddingLeft">6dp</item>
<item name="android:paddingRight">6dp</item>
<item name="android:paddingBottom">2dp</item>
</style>
And this makes up a list_item. (settings_list_item.xml)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="80dp"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
style="#style/SettingsOptionNameStyle"
android:id="#+id/tvOptionName_SLI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
style="#style/SettingsOptionDescStyle"
android:id="#+id/tvOptionDesc_SLI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</RelativeLayout>
And here is the shape I used to try and round the edges.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bg_listview_corners" android:shape="rectangle">
<corners android:radius="30dp" />
</shape>
I've also tried this piece for the shape.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bg_listview_corners" android:shape="rectangle">
<corners
android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp" />
</shape>
This is all the information I think you'll need to help me on my way.
In case I missed some information or you just have questions don't hesitate to ask.
Update 1:
I figured out it somehow only shapes the container of the listview but not the listview itself.
Any ideas?
you can increase the padding (paddingRight, paddingLeft, and paddingBottom)
<style name="SettingsListStyle">
<item name="android:divider">#color/table_divider_color</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:paddingTop">40dp</item>
<item name="android:paddingLeft">7dp</item>
<item name="android:paddingRight">7dp</item>
<item name="android:paddingBottom">3dp</item>
or use mask background over the listview (like this Post which use 9-Patch as mask, or you can use your "bg_listview_corners.xml" background for the mask)
You can create a custom background drawable selector file called custom_list.xml in your drawable folder with this code in it
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/list_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/list_focused" android:state_focused="true"/>
<item android:drawable="#drawable/list_default"/>
</selector>
then create another file list_default.xml in your drawable folder with this code in it
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#1c95a0"
android:startColor="#1c95a0" />
<corners android:radius="5dip" />
</shape>
finally set the background property of the list view to
android:background="#drawable/custom_list"
Ended up using a mask as suggested by #Sally here is how I changed it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BB000000"
android:gravity="center">
<ImageView
style="#style/CloseButtonStyle"
android:id="#+id/ivCancel_SD"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_above="#+id/rlContainer_SD"
android:layout_toRightOf="#+id/rlContainer_SD"
android:layout_toEndOf="#+id/rlContainer_SD"/>
<RelativeLayout
style="#style/SettingsDialogStyle"
android:id="#+id/rlContainer_SD"
android:layout_width="800dp"
android:layout_height="600dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
style="#style/SettingsHeaderStyle"
android:id="#+id/tvSettingsLabel_SD"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="#string/sd_header_label"/>
<ListView
style="#style/SettingsListStyle"
android:id="#+id/lvOptions_SD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tvSettingsLabel_SD"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
</RelativeLayout>
<ImageView
android:layout_width="800dp"
android:layout_height="600dp"
android:layout_centerVertical="true"
android:background="#drawable/bg_listview_corners"/>
</RelativeLayout>
I added an ImageView on top of the relative layout matching the container.
This is the drawable I used for masking the layout.(bg_listview_corners.xml)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<stroke
android:width="12dp"
android:color="#color/app_night_sky_color" />
<padding android:left="6px"
android:top="6px"
android:right="6px"
android:bottom="6px"/>
<corners android:radius="30dp" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="6dp"
android:color="#color/popup_bg_color" />
<corners android:radius="30dp" />
</shape>
</item>
</layer-list>
Im trying to make custom Radio buttons. Found an article which looked great (Article) but when i try doing what is said here, it doesnt update at all. Would a base theme prevent me from making custom radio buttons? My code below:
Layout xml
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:id="#+id/radioGroup"
android:background="#drawable/country_select_radio_button">
<RadioButton
android:id="#+id/ke_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/SouthAfrica"
android:layout_alignStart="#+id/SouthAfrica"
android:layout_alignTop="#+id/SouthAfrica"
android:layout_marginTop="35dp"
android:background="#drawable/country_select_radio_button"
android:text="Kenya"
android:layout_gravity="center_horizontal"
android:checked="false" />
<RadioButton
android:id="#+id/za_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btn_za"
android:layout_centerHorizontal="true"
android:layout_marginBottom="125dp"
android:text="South Africa"
android:checked="true"
android:layout_gravity="center_horizontal" />
</RadioGroup>
button style xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/b"
android:state_checked="true"
android:state_pressed="true" />
<item
android:drawable="#drawable/a"
android:state_pressed="true" />
<item
android:drawable="#drawable/a"
android:state_checked="true" />
<item
android:drawable="#drawable/b" />
a.xml
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#fff" />
<stroke
android:width="2dp"
android:color="#FF0000" />
b.xml
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#FF0000" />
<stroke
android:width="2dp"
android:color="#555555" />
no matter what i change, the style of the button stays the default?
what am i doing wrong?
u need to set the android button property in your xml
<RadioButton
android:id="#+id/ke_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/radio_button_selector"
android:padding="#dimen/text_padding"
android:paddingLeft="10dp"
/>
wher radio_button selector is your custom xml file for radio button
please use below selector xml file
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radiobutton1" android:state_checked="false"/>
<item android:drawable="#drawable/radiobutton2" android:state_checked="true"/>
<item android:drawable="#drawable/radiobutton1"/>
</selector>
put 2 images for testing as radiobutton1 and radiobutton2 and test
I try to make a design for my application. I order to attract user's attention I tried to imagine something interesting.
My plan is obtaining a design like below:
Visual elements:
red areas are buttons
thin circles are images i will out later...
My goals:
On creation of the activity, buttons will com into screen, from out
bounds of the screen. (they can come one by one in an order, because
I do not want to get crazy with asynctasks, handlers and etc. )
2 corners of each button will be rounded smoothly
The Important and last one: when I click on a button, I want it to
hide out of the screen with reverse action as it came to screen.
At the first second I have faced with a problem already. Here it is:
As you see there is some space between button and layout.
Current xml layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="22dp"
android:text="Button" />
</RelativeLayout>
How can I solve this problem?
And I will be very happy to here suggestions about how to achieve my suggestions.
Ok, try that:
drawable/corners.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
<solid android:color="#888888" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle">
<corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
<solid android:color="#888888" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
<solid android:color="#BBBBBB" />
</shape>
</item>
</selector>
with that:
layout/button.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="22dp"
android:background="#drawable/corners"
android:text="Button" />
</RelativeLayout>
Here is the version with text and picture:
drawable/corner.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
<solid android:color="#BBBBBB"/>
</shape>
</item>
</selector>
drawable/corner_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
<solid android:color="#888888"/>
</shape>
</item>
</selector>
drawable/states.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/corner_pressed" />
<item android:drawable="#drawable/corner" />
</selector>
and the main layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="22dp"
android:background="#drawable/states"
android:clickable="true">
<TextView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_toRightOf="#id/button1"
/>
</RelativeLayout>
</RelativeLayout>