Button Border Not Showing - java

I try to put a border for a button in android but unfortunately I can't see the button border.
Drawable File 👇
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="12dp" />
<stroke android:width="3px" android:color="#7E8082" />
</shape>
</item>
</selector>
XML 👇
<Button
android:id="#+id/btn_signup"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="122dp"
android:background="#drawable/bg_signup"
android:fontFamily="#font/poppins_semibold"
android:text="Create an Account"
android:textAllCaps="false"
android:textColor="#color/black"
app:layout_constraintTop_toBottomOf="#+id/btn_login" />

You don't need to use a custom drawable, just use a MaterialButton:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:strokeColor="#7E8082"
app:strokeWidth="1dp"
app:cornerRadius="12dp"/>

Don't use a selector for single option use shape directly
bg_signup
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#cdcdcd"/>
<corners
android:radius="4dp"
/>
<stroke
android:width="1dp"
android:color="#000"
/>
</shape>

use Style attribute instead of android:background="#drawable/bg_signup"
make a custom style then call it android:style="#style/bg_signup"

Related

How to add margin to scrollbar in edit text

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>

How to create custom shadow for view?

I wanna to create custom shadow for view which i customize as like as my plan.
Custom Shadow looks like Card View elevation.
I need this type of shadow
Hm. This one is extremely simple and producing very similar (imo) result to what you requested. Obviously params like elevation, corner radius etc can/should be tweaked.
<?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:padding="16dp"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<androidx.cardview.widget.CardView
android:id="#+id/textview_first"
android:layout_width="300dp"
android:layout_height="100dp"
app:cardCornerRadius="20dp"
app:cardElevation="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Check this one. This works for me.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#d8d8d8" />
<corners android:radius="7dp" />
</shape>
</item>
<!-- White Top color -->
<item android:bottom="3px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="7dp" />
</shape>
</item>

change the appearance of button into round button

I want to made the present rectangular button into round shape and add the picture of share button in it. I mean the button should be of round share and it should have only image(fit) of "share"
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginTop="8dp"
android:text="03"
android:textStyle="bold"/>
Create drawable file as bg_share.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/colorPrimaryDark">
</solid>
<corners
android:radius="500dp">
</corners>
<padding
android:top="0dp"
android:right="10dp"
android:left="10dp"
android:bottom="0dp">
</padding>
</shape>
And in your main.xml create imageview instead of button like
<ImageView
android:id="#+id/share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bcshare"
android:padding="10dp"
android:src="#drawable/ic_share_black_24dp" />
In MainActivity.java do something like this
share.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//Your code...
}
});
You can find the answer Here
create a resource drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="1dp" android:color="#FF404040" />
<corners android:radius="6dp" />
<gradient android:startColor="#FF6800" android:centerColor="#FF8000" android:endColor="#FF9700" android:angle="90" />
</shape>
then set to the button background .
android:background="#drawable/button_background"
you can create a separate drawable and implement round shape. Then set the drawable to the background of the button as below
Create a drawable file as circle_button.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#008577"/>
<size
android:width="120dp"
android:height="120dp"/>
</shape>
Then change the layout as follows
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_button"
android:text="Button"/>
Create an xml in drawable folder and name it like: "round.xml" and use this xml in your given button background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#eeffffff" />
<corners android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp"
android:topRightRadius="8dp"
android:topLeftRadius="8dp"/>
</shape>
and to your button in layout xml you can use the last line to set background
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginTop="8dp"
android:text="03"
android:textStyle="bold"
android:background="#drawable/round"/>
You can use the standard MaterialButton with the Widget.MaterialComponents.Button.Icon style.
Something like:
<com.google.android.material.button.MaterialButton
android:layout_width="48dp"
android:layout_height="48dp"
style="#style/Widget.MaterialComponents.Button.Icon"
app:icon="#drawable/ic_share"
app:iconSize="24dp"
app:iconPadding="0dp"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
/>
Use the app:shapeAppearanceOverlay to get rounded corners. In this way you will have a circle.
<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">32dp</item>
</style>

I'm developing a keyboard for android. How to change the text color of the keys?

How to change the text color of the keys?
Here is my keyboard layout.
<?xml version="1.0" encoding="UTF-8"?>
<android.inputmethodservice.KeyboardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keyboard"
android:keyBackground="#drawable/key_background"
android:background="#color/keyboard_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:keyPreviewLayout="#layout/preview" />
key_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Bottom 2dp Shadow -->
<item android:top="4dp"
android:left="2dp"
android:right="2dp">
<shape android:shape="rectangle" >
<solid android:color="#color/key_shadow" />
<corners android:radius="4dp"/>
</shape>
</item>
<!-- White Top color -->
<item android:bottom="4px"
android:top="4dp"
android:left="2dp"
android:right="2dp">
<shape android:shape="rectangle" >
<solid android:color="#color/white" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
Please look into this you will get an idea for your problem.
http://developer.android.com/reference/android/inputmethodservice/KeyboardView.html
android:keyTextColor="your color code"
U can use android:keyTextColor attribute: like
android:keyTextColor="#android:color/black"

different drawables with layer-list for ToggleButton states

In my app i need to display toggle button that looks like this (this one is for checked state) http://s58.radikal.ru/i159/1308/dc/e3cb45e9a71f.jpg, dark color is parent view background.
It must be just a colored circle with 50x50 size, but for checked state it must include that blue border outside. The whole button must be always 70x70, so it has enough space for border. I guess i have to use simple shape drawable for default state and layer-list drawable for checked state, but it doesnt work for me, it just creates some kind of stretched oval and without any border(like this http://s019.radikal.ru/i619/1308/50/0f02f9ab2ea4.jpg). Here is the code i'm using for ToggleButton background:
first_board_color_dot.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true" android:drawable="#drawable/first_board_color_dot_checked"></item>
<item android:drawable="#drawable/first_board_color_dot_default"></item>
</selector>
first_board_color_dot_checked.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:innerRadius="34dp"
android:shape="ring"
android:thickness="2dp" >
<solid android:color="#color/first_player_dot_color" />
</shape>
</item>
<item>
<shape android:shape="oval" android:gravity="center">
<solid android:color="#color/first_board_color" />
<size
android:height="50dp"
android:width="50dp" />
</shape>
</item>
</layer-list>
first_board_color_dot_default.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval" android:gravity="center">
<solid android:color="#color/first_board_color" />
<size
android:height="50dp"
android:width="50dp" />
</shape>
</item>
</layer-list>
this is how i'm setting up button
<ToggleButton
android:id="#+id/board_color_button1"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:layout_marginRight="30dp"
android:text=""
android:textOn=""
android:textOff=""
android:background="#drawable/first_board_color_dot"
android:checked="true"
android:onClick="boardColorButtonClicked"/>
i cannot understand what im doing wrong...

Categories