I'm trying to create buttons in Android the same way as in Jeepsing application for iPhone using linear layout but without success. Maximum that I get is three separated buttons the same size.
I need three buttons without background, separated only by their borders when two of them have one rounded corner like on the following screenshot:
This is my last try:
<LinearLayout android:id="#+id/LinearLayout02" android:layout_height="wrap_content" android:layout_width="match_parent">
<Button android:id="#+id/Button04" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
<Button android:id="#+id/Button05" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
<Button android:id="#+id/Button06" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
</LinearLayout>
I also tried GridLayout but without success.
just create shapes with corners radius for both pressed/released effects..
<solid android:color="#77000000" />
<corners android:radius="10dip" />
<gradient
android:angle="-90"
android:endColor="#44FF0000"
android:startColor="#CCFF0000" />
<padding
android:bottom="10dip"
android:left="10dip"
android:right="10dip"
android:top="10dip" />
<stroke
android:width="1dip"
android:color="#000000" >
</stroke>
for more info about shapes refer this
After creating shapes for pressed/released effects create a XML file for button selector like following example
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/prs_arrival_fb_btn" /> <!-- pressed -->
<item
android:state_focused="true"
android:drawable="#drawable/prs_arrival_fb_btn" /> <!-- focused -->
<item
android:drawable="#drawable/arrival_fb_content_btn" /> <!-- default -->
</selector>
then set this selector to your button as background.. like the following example..
<Button android:text="Play" android:id="#+id/playBtn"
android:background="#drawable/button_selector"
android:textColor="#ffffff" />
This is how I achieved it:
up_left_button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/up_left_button_shape_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/up_left_button_shape_pressed"
android:state_selected="true" />
<item android:drawable="#drawable/up_left_button_shape_released" />
</selector>
up_left_button_shape_pressed.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#ff0000ff"
android:endColor="#ff0000ff"
android:angle="45"/>
<padding android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
<corners android:radius="8dp"
android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp"
android:topLeftRadius="8dp" android:topRightRadius="0dp"/>
<stroke android:width="2dp" android:color="#ff444444"/>
</shape>
up_center_button_shape_released.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#00000000"
android:endColor="#00000000"
android:angle="45"/>
<padding android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
<corners android:radius="8dp"
android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp"
android:topLeftRadius="8dp" android:topRightRadius="0dp"/>
<stroke android:width="2dp" android:color="#ff444444"/>
</shape>
Center and right button shapes are the same, just need to play with which corners to round.
And finally the view layout:
<TableRow android:id="#+id/buttonsRow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp">
<RelativeLayout android:id="#+id/buttonsRowRelativeLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<Button
android:id="#+id/leftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/save"
android:textColor="#ffffffff"
android:background="#drawable/up_left_button_selector"
android:layout_toLeftOf="#+id/centerButton" />
<Button
android:id="#+id/centerButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/change"
android:textColor="#ffffffff"
android:background="#drawable/up_center_button_selector"
android:layout_centerHorizontal="true"/>
<Button
android:id="#+id/rightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/send"
android:textColor="#ffffffff"
android:background="#drawable/up_right_button_selector"
android:layout_toRightOf="#+id/centerButton" />
</RelativeLayout >
</TableRow>
And it looks pretty good.
Related
I am trying to add some margin to the scrollbar inside of an editText but I am not sure how to do that, given the scrollbar is inside of the editText itself ("scrollbars=horizontal"). The way it comes automatically is too close to the text and I need it to be farther away, is there a way to do that?
I have a custom style for the scrollbar and it already looks the way it does in the picture, except for the distance, maybe there's a way to adjust the margins there? So far, only the right margin works, the top and bottom one make the bar disappear.
It needs to look like this:
XML:
<EditText
android:id="#+id/edit_text"
style="#style/Field"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/size_2"
android:layout_marginTop="#dimen/size_1"
android:layout_marginBottom="#dimen/size_1"
android:autofillHints="#null"
android:clickable="true"
android:duplicateParentState="true"
android:focusable="true"
android:inputType="text"
android:scrollbars="horizontal"
android:scrollbarStyle="outsideOverlay"
android:scrollbarThumbHorizontal="#drawable/scrollbar"
android:scrollbarTrackHorizontal="#drawable/scrollbar_track"
android:gravity="center_vertical"/>
Scrollbar thumb:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="16dp"> <!-- Margin -->
<shape>
<solid android:color="#color/specific_border_2" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
Scrollbar track:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="16dp"> <!-- Margin -->
<shape>
<solid android:color="#E2E0EB" />
<stroke
android:width="1dp"
android:color="#color/specific_background_3" />
<size android:width="15dp" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
You can set android:scrollbarStyle="outsideOverlay" and control the margin of the scrollbar using android:paddingBottom
Demo:
<EditText
android:id="#+id/name_text"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:fadeScrollbars="false"
android:paddingBottom="8dp"
android:scrollbarAlwaysDrawHorizontalTrack="false"
android:scrollbarStyle="outsideOverlay"
android:scrollbarThumbHorizontal="#drawable/scrollview_thumb"
android:scrollbars="horizontal" />
scrollview_thumb.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#C2C3C3" />
<corners android:radius="15dp" />
<size android:width="5dp" />
</shape>
I was working on a project I can create a round button and set the gradient color but when I use it in Button background the color not changed.
rounded_shape.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:startColor="#9bbbc1"
android:centerColor="#456268"
android:endColor="#456268"
android:angle="270" />
<corners
android:radius="25dp" >
</corners>
</shape>
Button in Xml
<Button
android:id="#+id/btn1"
android:layout_below="#+id/edttxt1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:layout_marginTop="2dp"
android:layout_marginRight="80dp"
android:layout_marginBottom="2dp"
android:background="#drawable/rounded_shape"
android:padding="12dp"
android:paddingTop="2dp"
android:paddingEnd="2dp"
android:paddingBottom="4dp"
android:text="Analyse"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="italic"></Button>
Try it in rounded_shape.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:radius="12dip" />
<stroke android:width="1dip" android:color="#333333" />
<gradient android:angle="-90" android:startColor="#333333" android:endColor="#555555" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="12dip" />
<stroke android:width="1dip" android:color="#333333" />
<solid android:color="#58857e"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="12dip" />
<stroke android:width="1dip" android:color="#333333" />
<gradient android:angle="-90" android:startColor="#333333" android:endColor="#555555" />
</shape>
</item>
</selector>
The AppCompat library helps with bringing modern theming to your app on all Android versions, so change Button to androidx.appcompat.widget.AppCompatButton:
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btn1"
android:layout_below="#+id/edttxt1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:layout_marginTop="2dp"
android:layout_marginRight="80dp"
android:layout_marginBottom="2dp"
android:background="#drawable/rounded_shape"
android:padding="12dp"
android:paddingTop="2dp"
android:paddingEnd="2dp"
android:paddingBottom="4dp"
android:text="Analyse"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="italic”/>
I need to get such result as here
I tried do like this :
my bottom_nav_menu_bg
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/home_btn_bg" android:state_checked="true" />
<item android:drawable="#color/gray_900"/>
</selector>
My BottomNavView
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_menu"
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_weight="1"
app:itemBackground="#drawable/bottom_navigation_menu_bg"
android:background="#color/gray_900"
app:menu="#menu/bottom_navigation"
app:itemIconTint="#drawable/tab_color"
app:itemTextColor="#drawable/tab_color"
android:backgroundTint="#null"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
my home_btn_bg for getting gradient color
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#color/black"
android:endColor="#color/light_green_100"
android:angle="90" />
</shape>
but i got smth like that :
I have a button
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="45dp"
android:onClick="loginIsClicked"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="8dp"
android:background="#drawable/button"
android:text="#string/Auth"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16sp"
android:enabled="false" />
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/red"/>
<corners android:radius="10dp"/>
</shape>
How can I add animation to the button used in the default buttons?
Example:
enter image description here
If I understood correctly, what you are looking for is a ripple. Wrap your shape in a ripple as follows and provide your ripple color:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/rippleColor">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/red"/>
<corners android:radius="10dp"/>
</shape>
</item>
</ripple>
Add MaterialButton.
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Button" />
Also do not forget to change theme Theme.AppCompat.Light.DarkActionBar to Theme.MaterialComponents.Light.DarkActionBar in styles.xml file.
This is what I currently have
This is what I want to achieve
Here is the xml layout
<LinearLayout
android:layout_width="wrap_content"
android:id="#+id/contentLayout"
android:orientation="vertical"
android:gravity="top|center"
android:background="#drawable/background_containernav"
android:layout_height="wrap_content"
android:padding="4dip" >
<Spinner
android:id="#+id/spnShapes"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<CheckBox
android:text="Fill"
android:id="#+id/chkFill"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btnPickColor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Color" />
</LinearLayout>
<ImageView
android:clickable="true"
android:id="#+id/slideHandleButton"
android:layout_width="wrap_content"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="#drawable/ic_buttonnav"
android:layout_height="fill_parent"
android:background="#drawable/background_buttonnav"/>
</SlidingDrawer>
Here is the background_containernav.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#878787"/>
</shape>
</item>
<item android:left="4px">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#fefefe"/>
</shape>
</item>
</layer-list>
What should I do to achieve to the latter? Thank you very much.