Making Android EditText look the same - android

I'm creating a simple login activity and I am trying to make the edittext look the same on all devices. In Android Studio it looks the same on all APIs but on real devices it looks very different. What can I do to achieve they all look the same?
This is how it looks in Android Studio
And this is how it look on a real device
Any help would be appreciated. I'm still learning Android development.

The background of widgets are API level dependent.
Set this xml to your EditText background attribute.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#4C000000"/>
<corners android:bottomRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
This will have the same look and feel of your EditText on every API.

It totaly depends on the way you use the emulator. The emulator, since the common AVD (used in Eclipse, or that kind of IDEs) until the Android Studio, will gonna use the default skin to show the widgets and components in the development environment.
You can install the manufacturer device skins to simulate your emulator as the original one. Look at that description from the Samsung official website:
The Emulator Skin is a simple way to test your Android application on a simulated GALAXY S2. The emulation does not simulate all features of an actual device, however. The emulation allow you to see how your application’s display scales to the GALAXY S2's screen.
It'd improve your testability in that case, but is also recommended to always test in the real device to get a better result.

Probably it happens because you haven't specified Theme for your application. And according to the documentation android choses theme based on the following rules:
If an app does not explicitly request a theme in its manifest, Android
4.0 will determine the default theme based on the app’s targetSdkVersion to maintain the app’s original expectations: For
values less than 11, #android:style/Theme; between 11 and 13
#android:style/Theme.Holo; and for 14 and higher
#android:style/Theme.DeviceDefault.
You can find more details in the following thread.

In your drawable folder create edittext_style.xml,
<?xml version="1.0" encoding="utf-8"?>
<item><layer-list>
<item><shape>
<gradient android:angle="90" android:endColor="#ffffff" android:startColor="#ffffff" android:type="linear" />
<stroke android:width="1dp" android:color="#CECFCE" />
<corners android:radius="0dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="8dp" android:top="3dp" />
</shape></item>
</layer-list></item>
Define below code in style.xml,
<!-- Edittext Style -->
<style name="edittext_style">
<item name="android:background">#drawable/edittext_style</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:popupBackground">#DFFFFFFF</item>
</style>
And there you go, Just use color code as per your requirement,
<EditText
android:id="#+id/email"
style="#style/edittext_style"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />

Related

How to debug what part of my app is causing it to force close (backward compatibility problem)

This is my first venture into writing any kind of code, let alone an android app. I created the project with the compileSdkVersion of 28, targetSdkVersion of 28 and minSdkVersion of 23. The app will only run on Android Pie and crashes on any previous version I have tried to install it on.
Everything compiles properly and works wonderfully on the emulator and my personal phone (both on Pie). I have read a lot about using the Android Support Library, however, I have not seen any information on how to understand which parts of your code need to use things from the support library versus the framework. Android Studio may have given me warnings along the way about using things from the support library, but being new at this, I did not know what it meant or what my proper choice should be. Now that I understand, I don't know how to attack going back and finding (and then fixing) anything that needs to use the support libraries.
I imported com.android.support:appcompat-v7 and have used AppCompatActivity instead of Activity. In a nutshell, I use textViews, editTexts, spinners and a TabHost (with two tabs). I think that the ActionBar might be a problem as well, but do not know how to see if that is the problem and how to fix it.
The rest of the code is mathematical calculations with a bunch of if/then/else statements and some switch statements.
The app force closes when it is opened after being installed on any OS prior to Android Pie.
Snippet from content_main.xml (layout):
<Spinner
android:id="#+id/spnFromPool"
android:layout_width="176dp"
android:layout_height="34dp"
android:layout_gravity="start"
android:layout_weight="0.3"
android:background="#drawable/bg_spinner"
android:entries="#array/pool_type_array" />
bg_spinner.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/swimToolPrimary"/>
<corners android:radius="10dp" />
<stroke android:color="#000000" android:width="1dp" />
</shape>
</item>
<item android:gravity="center_vertical|right" android:right="8dp">
<layer-list>
<item android:width="12dp" android:height="12dp" android:gravity="center" android:bottom="10dp"
tools:targetApi="m">
<rotate
android:fromDegrees="45"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#color/swimToolSecondary" />
<stroke android:color="#color/swimToolSecondary" android:width="1dp"/>
</shape>
</rotate>
</item>
<item android:width="20dp" android:height="10dp" android:bottom="21dp" android:gravity="center"
tools:targetApi="m">
<shape android:shape="rectangle">
<solid android:color="#color/swimToolPrimary"/>
</shape>
</item>
</layer-list>
</item>
</layer-list>
You can check the problem in log of android studio by selecting "No Filters" in top-right corner in logcat and for filtering the data you can add package name of your app in search bar.

Seekbar progress drawable not displaying and API 23

I have a custom SeekBar that uses LayerList as progress drawable. On Android device with API <22 it seems to work fine, however on API 22 the progress drawable is not displayed.
Here's my LayerList code:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<corners android:radius="20dp"/>
<gradient android:startColor="#0e0e0f" android:endColor="#373938" android:angle="270"/>
<stroke android:width="10dp"
android:color="#2d3035" />
<size android:height="3dp" android:width="500dp"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="20dp"/>
<solid android:color="#45ab12" />
<stroke android:width="10dp"
android:color="#2d3035" />
<size android:height="3dp" android:width="500dp"/>
</shape>
</clip>
</item>
And here's my Seekbar:
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:splitTrack="false"
android:thumbOffset="5dp"
android:id="#+id/firstAudioPositionSeekBar"
android:thumb="#drawable/seekbar_thumb"
android:progressDrawable="#drawable/seekbar_progress_bg"/>
Here are screen shots of the SeekBar on API 22 and lower:
I'm having similiar issue on API 22 and found your question. Did you find a good solution for that? What I've noticed till now, with many experiments:
1. Without solid on API 22 the progressbar is drawn
2. Stroke values are drawn different on API 22 devices than on all upper APIs, what is very strange, cause it doesn't even take care of screen size.. what the hell?
3. Even when u change stroke to proper one on API 22 - it still is MUCH MUCH different on small resolutions (480/800) and all other screen sizes..
I found a solution thought, but I don't think it is the best one. I created 3 separate drawable files (layer list): one for API 22 with small resolution, one for API 22 with all other resolutions, and one for all API's above 22. I removed stroke from those with API 22 and put inside item values:
<item android:id="#android:id/background" android:top="15dp" android:bottom="15dp">
I have tested it for 10 different phones with different resolutions - it works perfectly, even for big tablets. Still, I think there must be a better solution for this.
Best regards,
Max

Android seekbar discrete, how to remove step indicator

I've just discovered the seekbar discrete widget in android studio, i found it very usefull but i can't figure out how to remove the step indicators, or changing them with more appropriate drawables.
Did someone managed to do it?
Here's a screen of my current seekbar:
I'd like to change all the current step indicators, thank you.
EDIT:
Here's my current progress drawable:
<item android:id="#android:id/background" >
<shape >
<corners android:radius="20dp" />
<gradient
android:startColor="#color/Trasparente"
android:centerColor="#color/Trasparente"
android:centerX="1"
android:endColor="#color/Trasparente"
android:angle="0"
/>
</shape>
</item>
<item android:id="#android:id/progress" >
<clip android:clipOrientation="horizontal" android:gravity="left" >
<shape>
<corners android:radius="20dp" />
<gradient
android:startColor="#color/colorBluClima"
android:centerColor="#color/colorGreenServizi"
android:centerX="0.35"
android:endColor="#color/colorRossoErrore"
android:angle="0"
/>
</shape>
</clip>
</item>
and here's my seekbar in the layout:
<SeekBar
android:maxHeight="12dp"
style="#style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="812dp"
android:layout_height="100dp"
android:max="19"
android:id="#+id/SeekBarStufa220"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="90dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginEnd="90dp"
app:layout_constraintRight_toRightOf="parent"
android:paddingEnd="85dp"
android:paddingStart="85dp"
android:progressDrawable="#drawable/progress_seek_clima"
android:thumb="#drawable/ic_temprature"
app:layout_constraintVertical_bias="0.79"
android:progress="10" />
The thumb is a simple drawable
I solved it creating a new style with SeekBar.Discrete as parent.
<style name="SeekBarWithoutSteps" parent="Base.Widget.AppCompat.SeekBar.Discrete">
<item name="tickMark">#null</item>
</style>
if you want want to use style, you can use below xml attribute for material sliders to hide the dots
app:tickColor="#00000000"
I was searching for same solution, but for Material Design Slider (com.google.android.material.slider.Slider)
.
I don't know since this option is available (currently i'm using 'com.google.android.material:material:1.3.0' ), but if you use code below in your layout XML, ticks will disappear.
app:tickVisible="false"
I was also searching for an answer to this but didn't find anything. I tried some things and found a style included in Android Studio (I am sure it will be also available in Eclipse and other IDEs) within the Discrete SeekBar options which is #android:style/Widget.DeviceDefault.Light.SeekBar.
I tried it with an Android 5.1 device and it worked perfectly, but be careful cause there's one which could seem to be the same (called #android:style/Widget.Material.SeekBar.Discrete) but it leaves the dots.
So I think that if the first one removes the dots from the SeekBar, it's the one you were looking for.

I can't see all the border of the EditText

I am new at Android and I downloaded some code for a login screen. I cannot see all the border and I only see half of it (the bottom of the edittext). I think the reason is something about the configuration of the layout.
Can anyone help me out?
This is what it looks like:
Below I show you how I would like to have it:
The difference there is based on the different styles of Android. The one you don't like is actually the new type of style that android is running with called Holo. It's a good idea unless you have to change to stick with this theme.
The other EditText is from an older version of android and in fact the EditText will change it's look just based on which android version you run it off.
For example, try making an emulator with android version 2.2 and you'll see the EditText look that you like, while i'm guessing this one you're running is android 4.0 or higher, so therefore has the Holo Theme.
If you really want to make it look like the old style android then have a look at this answer on how to do so: Link
For creating custom dialog, you can try following.
Step 1. Have a dialog.xml in your res/layout/ folder, which can contain how you want your EditText box to look like. Something like following will draw a border around the EditText. You can also describe the colors of the border:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="#000000" />
<solid android:color="#ffffff"/>
<padding android:left="10dp" android:top="7dp"
android:right="10dp" android:bottom="7dp" />
<corners android:radius="2dp" />
</shape>
Step 2 Then in the XML of your edit Text you may define the android:background as that drawable XML file. Something like:
<EditText
android:id="#+id/ed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/dialog"/>
This will give your EditText the look you want. Hope this helps.
<style name="myTheme" parent="android:Theme.Holo">
<item name="editTextStyle">#style/MyWidget.EditText</item>
</style>
<style name="MyWidget.EditText" parent="android:Widget.EditText">
<item name="android:background">#drawable/edit_text</item>
</style>
You can use above code in your Theme style

custom Holo theme for tab

i am trying to create a tab as following which is a Holo Light theme but as i am using android 2.3.6 i got to create it on my own.
the problem i am facing is i am bot be able to create the blue bottom like
here is the code so far in a drawable , can any one tell me how to create the bottom border for the same ?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="63dp">
<shape android:shape="rectangle">
<solid android:color="#898989" />
</shape>
</item>
<item android:top="63dp" android:bottom="3px">
<shape android:shape="rectangle">
<solid android:color="#color/app_background" />
</shape>
</item>
<item android:left="#dimen/tab_space" android:right="#dimen/tab_space">
<shape android:shape="rectangle">
<gradient android:angle="90" android:startColor="#d9d9d9"
android:endColor="#dfdfdf"/>
<!-- this is create a border but on every side -->
<stroke android:width="3px" android:color="#38c0f4" />
</shape>
</item>
</layer-list>
so wht i dont know is to create
1) bottom stroke
2) shadow under each tab
You could just set a 9 patch image as the background image. And this image could contain a stroke.
Even if this is not totally on topic of your question, I suggest to migrate your project to ActionBarSherlock. ActionBarSherlock lets you use all the ICS Actionbar Apis with earlier API-Levels and brings the ICS Actionbar Style to all Devices with at least Android 2.2.
Using this project will make it very easy to move your app to Ice Cream Sandwich compatibility, and solve your current design problem.

Categories

Resources