Change how Spinner looks - android

first please check this image:
It shows an Spinner beautiful and nice, my Spinner looks like that:
Here is all my source code.
Activity xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="amaz1ngc0de.com.br.spinnertest.MainActivity">
<Spinner
android:id="#+id/sp_paymentType"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
</Spinner>
</RelativeLayout>
My question is: How can I achieve the same layout showed at tutorial?
PS: I have checked this topic: Correct usage of a Spinner, following material design guidelines it says something about themes, but I can't make it work, and the tutorial I'm following is that one: Spinners

Your tutorial is quite dated, unfortunately. The first screenshot you're showing is in the Holo style. What you've created uses the newer and better Material Design. Good job, you bested the tutorial!
However, if you really wanted to achieve the same effect, you can go backwards to the old look, by setting your activity to use the Holo theme. You can do that in your AndroidManifest.xml:
<activity
android:name="..."
android:theme="#android:style/Theme.Holo.Light" />
Or if you are using your custom theme then set is a parent:
<style name="AppTheme" parent="android:Theme.Holo.Light">
If you want to change the look of just the Spinner, not the whole screen, you can use android:theme on your Spinner:
<Spinner
android:id="#+id/sp_paymentType"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:theme="#android:style/Theme.Holo.Light">

Related

BottomSheetDragHandleView only accessible in material design demo

I'm using the github repository project for testing purposes and I stumbled accross BottomSheetDragHandleView which displays a handle bar in the demo license (see link for the code):
The issue I am having is that using the the similar layout structure or almost the same structure in my demo license, the handle bar is not visible.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="#dimen/view_margin_small"
android:paddingBottom="#dimen/view_margin_small">
<com.google.android.material.bottomsheet.BottomSheetDragHandleView
android:id="#+id/handlebar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/setImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/set_image"
app:icon="#drawable/baseline_photo_camera_24"
style="#style/ThemeStyleBottomSheetIconMaterialButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/handlebar"
/>
<com.google.android.material.button.MaterialButton
android:id="#+id/deleteImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/delete_image"
app:icon="#drawable/baseline_no_photography_24"
style="#style/ThemeStyleBottomSheetIconMaterialButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setImage"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Is there anything that must be taken care of in order to display the handle bar?
This seems to be happening when using material 2 themes currently and works as expected when switching to material 3 (tested on material lib version 1.8.0 - seems it won't be addressed in the future).
While BottomSheetDragHandleView seem to have default style defined its not picked up - which results in the view not showing up.
Even if thats fixed this style expect material 3 color attributes for tint color so it needs to be overridden anyway with the color of your choice.
Workaround:
define new style:
<style name="Widget.MaterialComponents.BottomSheet.DragHandle" parent="Widget.Material3.BottomSheet.DragHandle">
<item name="tint">?colorOnSurface</item>
<!--Alpha can be added optionally to achieve nice color blend-->
<item name="android:alpha">0.3</item>
</style>
use it in your theme by adding:
<item name="bottomSheetDragHandleStyle">#style/Widget.MaterialComponents.BottomSheet.DragHandle</item>

Theme.AppCompat.Dialog theme creates empty (dead) space

In my application, I am using an Activity with the theme "Theme.AppCompat.Dialog" to display it as a dialog. That works out well, however, the dialog fills the entire screen height, leaving a lot of space empty. To illustrate my issue, here is a picture of opening the dialog (on an unusually high resolution to demonstrate the issue better):
The higher the resolution, the greater this space.
Here is a code snippet:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools">
<!--This is the yellow box-->
<LinearLayout
android:id="#+id/dialog_button_bar"
android:layout_alignParentBottom="true"
style="?android:buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
[Buttons...]
</LinearLayout>
<!--This is the red box-->
<ScrollView
android:layout_above="#id/dialog_button_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
[LinearLayout containing rows...]
</ScrollView>
If I remove the android:layout_alignParentBottom="true" and the android:layout_above="#id/dialog_button_bar" attributes, the whole layout jumps to the top and now the empty space is below my layout.
What am I doing wrong? :(
It seems like this is some kind of intended behavior. The standard Android app installation dialog seems to behave the same way (leaving a lot of blank space between the permission part and the buttons) so I guess I'll keep it this way...
Create new Style in styles.xml
<style name="MyCustomDialog" parent="Base.Theme.AppCompat.Light.Dialog">
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
Now in AndroidManifest.xml, add android:theme="#style/MyCustomDialog" to your Dialog activity.

Undesired Togglebutton icon when not using a Theme

I'm having an issue with Togglebuttons when not specifying a theme.
If I use any theme they look fine but if I remove the android:theme="#style/AppTheme" tag from AndroidManifest.xml Togglebuttons add an unwanted icon.
Sample image here:
I made a sample project with just a togglebutton with following xml layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
and this is how it looks.
I think I need to define a new theme inheriting from device default theme to override the togglebutton icon but I've had no success so far.

Android Spinner with images finishing

I've got a Customer Spinner with images inside of it. Right now everything is working as intented except for two small things:
The Spinner is not showing except for a small thin line.
The Spinner Items gray border extends a bit.
I've added screenshots of these problems below:
What I want is:
Instead of the small thin line above, I want an empty CheckBox-image like the one below it.
At the right of the images of the Spinner items is a gray part, this should be removed.
I know both of these problems are in the xml files, but I'm kinda new to Android and I'm always a bit confused with which layout_widht/height to use when.
Here are the xml files:
activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.example.testproject.MainActivity$PlaceholderFragment" >
<Spinner
android:id="#+id/spCheckbox"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:drawSelectorOnTop="true" />
<ImageButton
android:id="#+id/ibtnCheckbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:contentDescription="#string/checkbox_content_description"
android:src="#drawable/checkbox_unchecked"
android:background="#drawable/transparent_background" />
</LinearLayout>
spinner_item.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">
<ImageView
android:id="#+id/cbImage"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/transparent_button_background" />
</RelativeLayout>
(transparent_background.xml:)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#android:color/transparent" />
<item android:state_pressed="true" android:drawable="#android:color/transparent" />
<item android:drawable="#android:color/transparent" />
</selector>
So.. Which layout_width / layout_height do I need to change to get the proper results?
Thanks in advance for the responses.
EDIT: I did some research and I started by replacing all fill_parent with match_parent (since it's the same and fill_parent is deprecated after API lvl. 8). For my problem it seems my activity_main layout should be match_parent to be fullscreen and the Spinner, Spinner Item's Layout and Spinner Item's ImageView should all be wrap_content.
Still, if I change it to that, both problems still remain the same. If anyone knows how to display the selected Image of the Spinner and how to remove the gray spacing of the Spinner item, let me know.
The problem of the thin line instead of the Spinner is solved.. It turns out when I was following a tutorial somewhere on the internet they added the line:
spinner.getLayoutParams().width = 3;
Removing this line, obviously, fixed the first problem.. >.> (No idea why they've added this in the first place too be honest, but now that it's gone I see my spinner as normal)
Now I just need to fix the second problem of the gray borders, but I'm sure I'll find a solution eventually..
EDIT: Since I wanted to remove the spinner right-bottom arrow in addition to the gray padding, I decided to remove the Spinner entirely and create a Pop-up with a LineairLayout which has a vertical orientation.
For a reference to the code, I posted it in another question of mine.

EditText/AutoCompleteTextView not observing proper styling when it's in an ActionView

I'm trying to style my EditTexts (and AutoCompleteTextViews) a certain way so that the line is a color that I specify. Normally, this work's just fine by following this answer: How to change the color of the line in ICS styled EditText.
However, it appears as though the style I define for my EditTexts is not observed when the EditText is part of an ActionView in the ActionBar menu.
I.e., I have an action view item in my menu.xml file:
<item
android:title="Search"
android:icon="#drawable/search_icon"
android:showAsAction="always|collapseActionView"
android:actionLayout="#layout/search_layout"
/>
I specify the layout to be used when this is expanded with the actionLayout property, and then I have a search_layout.xml file that looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText
android:inputType="text"
android:hint="Enter Search Term"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
This EditText doesn't take on the styling that I've defined in my styles.xml (and the same thing happens if it's an AutoCompleteTextView instead). How can I customize the style of an EditText/AutoCompleteTextView when it's a part of an ActionView?
As William said in the first comment on my question, the solution is to explicitly set the style on the EditText by adding style="#style/YourStyle" to the EditText in search_layout.xml.

Categories

Resources