I built a screen that looks like this:
but if login fails the screen turns out to look like this:
I used EditText and the code looks like this:
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="email"></TextView>
<EditText
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/username"
android:hint=""
android:textStyle="normal"
android:singleLine="true"
android:inputType="textEmailAddress">
</EditText>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="password">
</TextView>
<EditText
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/uc_txt_password"
android:hint=""
android:textStyle="normal"
android:singleLine="true"
android:inputType="textPassword">
</EditText>
Any ideas?
Update:
It seems that the bogus display is the way it displays on Ice-cream-sandwich by default. I am using an older version of android (2.2) on which the display looks like the first attached pic.
ICS Introduces a more "open" text layout (look at the gmail app) where edit text's default style lack borders. You should more rigidly define your style to be how you want it on all devices if you don't want it to look like how the device sets it. Perhaps use some 9 patch images and state selector xml files. So if you're setting the background to something like white and not defining any other styles it might be inheriting from Holo.Dark and using this as the edit text bg: https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable-hdpi/textfield_default_holo_dark.9.png
Thus, no visible text. Define your style more rigidly, or set your themes better and don't override the other backgrounds.
try to use android selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/editbox_dropdown_background" android:state_focused="false"/>
<item android:drawable="#drawable/editbox_background_focus_yellow" android:state_focused="true"/>
/>
</selector>
Related
I'm building a password field using TextInputLayout in Android (Kotlin) and when I use the endIconMode attribute the icon in the end is enabled (more to say it shows the visible eye icon) and whenever I click on it for the password to be visible, on the end it shows the visibility off icon even though the password is visible. How can I solve this?
This is my XML code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/password_field"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/password"
android:layout_marginHorizontal="30dp"
android:layout_marginTop="5dp"
android:hint="Enter your password"
app:boxBackgroundColor="#1AC4C4C4"
app:boxCornerRadiusBottomEnd="20dp"
app:boxCornerRadiusBottomStart="20dp"
app:boxCornerRadiusTopEnd="20dp"
app:boxCornerRadiusTopStart="20dp"
app:boxStrokeColor="#color/text_field_stroke"
app:boxStrokeWidth="0.5dp"
app:endIconMode="password_toggle">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
The solution I found for it is that you should make an endIconDrawable as a custom one and custom it this way:
**password_icon.xml**
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_visibile" android:state_checked="true"/>
<item android:drawable="#drawable/ic_visibility_off"/>
</selector>
and add it this way on the TestInputLayout:
app:endIconDrawable="#drawable/password_icon"
I am trying just to set the left and right space for Checkbox, to increase the tap area range.
Unfortunately, when I am trying to set the paddingStart in xml layout it does the wrong change and make the checkbox right padding. WTF, is there a bug in Android API or something?
<?xml version="1.0" encoding="utf-8"?>
<merge 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="wrap_content"
tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout">
<CheckBox
android:id="#+id/cc_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingStart="16dp"
android:paddingEnd="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</merge>
Preview from Android Studio:
is there a bug in Android API or something?
Not really. The reason why you saw the padding on the right even though you set it to the left is because the paddingStart is applied to the text the checkbox contains. Therefore, you could not see the expected padding on the left of the box.
As long as you use android:text (not a TextView aligned right next to the box), clicking on either the box or the text will activate the checkbox, meaning that it gives you what you want in terms of the click area.
However, I suppose you meant the area on the left of the box. One thing to achieve that is to create a new drawable resource file and use it in the checkbox's android:drawableStart.
Supposing that you named your drawable file checkbox_selector, the file should look like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/ic_checkbox_default"
android:state_checked="false"/>
<item android:drawable="#drawable/ic_checkbox_checked"
android:state_checked="true"/>
<item android:drawable="#drawable/ic_checkbox_default"/>
</selector>
Then you need to remove the default box to apply the selector above as a drawable resource. For that:
android:button="#null"
Right after that, you need to call android:drawableStart to use the drawable you just created, and set the padding as you would like.
android:drawableStart="#drawable/checkbox_selector"
android:drawablePadding="10dp"
android:paddingStart="20dp"
The final code should look like this:
<CheckBox
android:id="#+id/cc_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:button="#null"
android:drawableStart="#drawable/checkbox_selector"
android:text="#string/app_name"
android:drawablePadding="10dp"
android:paddingStart="20dp"
android:background="#android:color/white"
tools:ignore="RtlSymmetry" />
Android default Button class provides a really big button.
There is a lot of wasted space around. Now I want to create really small buttons, that are only slightly bigger than the text/caption. How to do this from code?
So far I found the following method, but it is still providing too big buttons and wasting too much space:
A. Create an XML (smallbutton.xml) in the res/layout:
<?xml version="1.0" encoding="utf-8"?>
style="?android:attr/buttonStyleSmall"
android:text="color"
android:padding="0dp"
android:layout_margin="0dp"
android:textSize="8dp"
android:maxHeight="2dp"
android:maxWidth="2dp"
/>
B. From your code inflate this and add to the view:
Button pickBackColor = (Button) this.getLayoutInflater().inflate(R.layout.smalbutton,null);
...
LinearLayout linLayout = new LinearLayout(this);
linLayout.addView(pickBackColor);
Now the problem is that the button is still too big, it uses too much space around (on the left, right, above, under) of the text.
Any hint how to decrease the size of the button further?
Buttons have a minimal height and width (typically of 48dp respectively 64dp by default). So add
android:minHeight="0dp"
android:minWidth="0dp"
to get really small buttons:
For your information there is also the default style provided by Android that defines smaller buttons:
style="?android:attr/buttonStyleSmall"
You can also if necessary modify this default style and define custom attributes in your file styles.xml. Here is an example with the modifications described in the question:
<style name="MyButtonStyleSmall" parent="android:Widget.Button.Small">
<!-- Customizations -->
<item name="android:minHeight">0dp</item>
<item name="android:minWidth">0dp</item>
</style>
Then you just need to call it in the XML:
<Button
android:id="#+id/small_button"
android:text="#string/example"
android:contentDescription="#string/example_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyButtonStyleSmall" />
in .xml file...
you need to pass small value to layout_height and layout_width in xml file...... try this.
android:layout_width="50dp" android:layout_height="50dp"
Change value as per your requirement...
try this in your code:
pickBackColor.setWidth(VALUE);
pickBackColor.setHeight(VALUE);
<com.google.android.material.button.MaterialButton
android:id="#+id/food_item_minus_button"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/custom_small_button_bg"
android:drawableLeft="#drawable/ic_minus"
android:paddingStart="6dp"
android:paddingLeft="6dp" />
I searched a lot but I didn't find how to remove the background color from the button which is appearing on the right and left side of button. Can anybody help?
My screen looks like
No matter what I try I am not able to remove the black portion.
Code:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_base"
android:text="#string/base"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"/>
<Button
android:id="#+id/btn_care"
android:text="#string/care"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_daily_prize"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"
android:text="#string/daily_prize" />
<Button
android:id="#+id/btn_winner"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"
android:text="#string/winner" />
</LinearLayout>
</LinearLayout>
#Drawable/selector_button
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true"
android:drawable="#drawable/pressed"> </item>
<item android:state_focused="true"
android:drawable="#drawable/focused"/>
<item android:drawable="#drawable/change"></item>
</selector>
this is the image used with name change.9.png
according to your scenario i can surely say that either you are not using a 9-patch image (an image with extension like .9.png ) or the 1 pixel borders of 9-patch at left and top are not drawn in correct manner. thats why the edges and the side border shade get expanded with the button with long width. either you should show what 9-patch button background you have used or try some correct 9-patch and check results for that.
Why don't you use some other control element like TextView instead of buttons? I just saw that TextView has onClickListner and so you can use it as sort-of button, though I have not done it; button is meant to aid you defining your layout, but as this seems to only be a problem for you, just do not use it).
By the way I seriously recommend you to use android styles, as you copy-paste a lot of attributes. If you use Eclipse for development, open your layout xml, select the item you want to extract the style of, press ctrl + 1 and then select extract style. That way you should avoid copy-pasting all these style attributes.
Try removing the android:textColor attribute. These can be misleading and sometimes alter the colour of more than just the text. If the text is supposed to be black then you don't need it.
This is the dialog on the emulator:
And this is on my phone:
I tried setting background to my layout but then the title space and bottom space would still be this white color. How do I "repair" it?
If it matters, the second picture is from MIUI ROM.
//EDIT:
Here is my layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<Spinner
android:id="#+id/spinner_minutes"
android:layout_width="170dip"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:entries="#array/timer_values"/>
<TextView
android:id="#+id/text_timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:visibility="gone"/>
<LinearLayout
android:id="#+id/button_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/spinner_minutes"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dip">
<Button
android:id="#+id/button_set"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:text="Set"
android:layout_marginLeft="10dip"
android:layout_marginBottom="5dip" />
<Button
android:id="#+id/button_cancel"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:text="Cancel"
android:layout_marginRight="10dip"
android:layout_marginBottom="5dip" />
</LinearLayout>
<LinearLayout
android:id="#+id/button_holder2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/text_timer"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dip"
android:visibility="gone">
<Button
android:id="#+id/button_close"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:text="Close"/>
<Button
android:id="#+id/button_cancel2"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:text="Cancel"/>
</LinearLayout>
</RelativeLayout>
I am creating the dialog this way:
about_dlg=new Dialog(SoundRelaxerActivity.this);
about_dlg.requestWindowFeature(Window.FEATURE_NO_TITLE);
about_dlg.setContentView(R.layout.about_dialog);
about_dlg.show();
This call:
about_dlg=new Dialog(SoundRelaxerActivity.this);
will use the system default theme. Every hardware manufacture develops their own custom system default themes. For example, the default Button might look different on Motorola Blur than it does on HTC Sense. If you want to build a dialog, with a custom theme, use this call instead:
about_dlg = new Dialog(context, android.R.style.Theme);
BUT android.R.style.Theme might not be what you want. Look at http://developer.android.com/reference/android/R.style.html
and check out any of the values defined as Theme_
AND A HEADS UP:
This might not work out of the box. You are going to have to modify your layout xml file to have the appropriate styles relevant to the theme you choose. For example, Android.R.style.Theme defaults to a solid black background.
And lastly,
this might not be worth the effort. While Android Fragmentation is a pain in the butt, sometimes we have to embrace it. The user is used to the default settings of the device-- for example if every dialogue on their phone is white but yours is black, they might be jarred by this. That is a weak example, but hopefully you get the point.
Make sure you are setting the background of the top overall layout (in this case the relative layout)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#c0c0c0">
The emulator is just using a different default color than your phone. Change #c0c0c0 to whatever color you want
I know on Android 4 you can ask for the default Holo theme for your application which eliminates this possibility as Holo HAS to be present on an Android 4 system. Prior to that, all you've got is the default theme which could be anything at all.
The question is, why is your text white on white on MIUI? Are you setting that explicitly? If you aren't, then I would consider that you're seeing a bug in the theme rather than your app because if the theme author has made these dialogs white then the default text colour should surely be dark or else every app would suffer the same problem.