Implementation of Google design guidelines for Sliders - android

Yesterday I was looking for sliders in Android and found this website with the Google search: https://material.io/guidelines/components/sliders.html#sliders-discrete-slider
I know that I can use a SeekBar in Android to implement sliders. However, Google seems to have very nice examples of discrete sliders but I cannot find any code examples.
I already implemented a normal SeekBar that is looking like this:
How can I make it look like this?
(Difference: When I move my slider, there is no big drop that shows the current value)
I think I might just have missed the code documentation for these design guidelines. Does anyone know where to find it? Or is the design difference because I got Android 5.0.2 on my phone?

sadly google just provided how it should look like, but there seems to be no class provided by the android support libraries :(
but for now you can try this library: https://github.com/AnderWeb/discreteSeekBar
or this for even more material elements:
https://github.com/navasmdc/MaterialDesignLibrary
hopefully google adds this in later releases...

Now you can use the official Slider in Material Components Library.
Just use something like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false">
<com.google.android.material.slider.Slider
android:id="#+id/slider"
android:layout_gravity="center"
app:labelBehavior="withinBounds"
android:value="60"
android:valueFrom="0"
android:valueTo="100"
..../>
</LinearLayout>
NOTE: it requires the version 1.2.0 (currently 1.2.0-beta01) of the library.
If you want to customize the tooltip shape with a circle marker instead of the default label you can use the labelStyle attribute:
<com.google.android.material.slider.Slider
app:labelStyle="#style/tooltip"
with:
<style name="tooltip" parent="Widget.MaterialComponents.Tooltip">
<item name="shapeAppearanceOverlay">#style/tooltipShOverylay</item>
<item name="backgroundTint">#color/....</item>
</style>
<style name="tooltipShOverylay">
<item name="cornerSize">50%</item>
</style>

AnderWeb's discrete seekbar has a few problems. And for the other one(MDL), you may not want to compile the entire material design library just for a descrete seekbar/slider.
But there is a nice github repository you may find useful: BubbleSeekBar
I tried to find a nice solution for the same problem. In my case I was also trying to find a seekbar that will always show the bubble. After two hours of research I found BubbleSeekBar library, which provides every single attribute you can think of. It was hard to find this library since the readme file doesn't even use the word "material".
EDIT:
After six months, now there is another good Discrete Seek Bar repo that you may find useful. IndicatorSeekBar seems to have everything covered, except a few Issues. You can check it here.

Continuous slider
Continuous sliders allow users to make meaningful selections that don’t require a specific value.
<com.google.android.material.slider.Slider
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:layout_gravity="center"
android:value="8.09"
android:valueFrom="0.0"
android:valueTo="11.0" />
Discrete slider
Discrete sliders display a numeric value label upon pressing the thumb, which allows a user to input an exact value.
<com.google.android.material.slider.RangeSlider
android:id="#+id/range_slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:layout_gravity="center"
app:values="#array/initial_slider_values"
android:valueFrom="0.0"
android:valueTo="10.0"
/>
<!--array.xml-->
<array name="initial_slider_values">
<item>4.0</item>
<item>8.0</item>
</array>

Related

How to show slider value above the slider also when we are not sliding using material.slider in Android?

This is how I want to show the value of the slider. Please find the picture
This is currently not supported, the available options in LabelFormatter (which can be applied to sliders with slider.setLabelFormatter(...) are:
LabelFormatter.LABEL_FLOATING: Label visible during interaction only
LabelFormatter.LABEL_WITHIN_BOUNDS: Label visible during interaction only
LabelFormatter.LABEL_GONE: Label never visible
You can find the code here with the extensive javadoc explanation.
You could open a feature request for this on the Material GitHub issues page
You can set the label behaviour "visible" in the XML file. So in the slider XML code, you just need to add
app:labelBehavior="visible"
Below I am attaching a sample XML code for the same.
<com.google.android.material.slider.Slider
android:id="#+id/seek_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:valueFrom="1"
android:valueTo="100"
android:layout_gravity="center"
android:layout_margin="15dp"
app:tickColor="#0000FF"
app:labelStyle="#style/Tooltip"
app:labelBehavior="visible"
/>

When setting text on a TextView it takes way too long to display the text on screen

I'm setting the text on a text view to a String that is 14,000,000 characters long.
This takes anywere from 1 to 5 minutes to load on screen(depending on device). Any Ideas how I can speed this up?
Here is the relevant code:
responseView.text = requestResponsePair.second
.....................
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context="com.salesrabbit.android.sales.universal.features.lumberjack.TextDisplayFragment">
<TextView
android:id="#+id/request_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/request_label_string"
android:textSize="20sp"/>
<TextView
android:id="#+id/text_view_request"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/response_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/response_label_string"
android:textSize="20sp"/>
<TextView
android:id="#+id/text_view_response"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Approach One
Recently, Google announced the PrecomputedText which is available for SDK level 28 and above. Along with that, the PrecomputedTextCompat has been released which is available for SDK 21 to 27. I haven't try it yet but there is a Medium article from Chris Craik called "Prefetch Text Layout in RecyclerView" which explains how to make use of it and how much workload gets off the UI thread without missing any frames.
Snippet from article
Precomputing
val precomputedText : Spannable = PrecomputedTextCompat.create(expensiveText, params)
Set precomputed text to TextView
TextViewCompat.setPrecomputedText(myTextView, precomputedText)
Make sure to read the docs, as some posting to a background thread is required.
Approach Two
Split your text into small chunks or paragraphs. Put it into a list and use a simple RecyclerView to show each item in the list. It's simple and you will get for free good performance as RecyclerView will render and process the items that are visible to the user.
Also, make sure to listen to the Episode 90: Spanspanspanspan of the Android Developers Backstage podcast, it is hosted by developers of the Android Engineering team.
Use PrecomputedText
Using PrecomputedText is one of the best approaches here. Read an answer by Giorgos Neokleous.
Turn off hyphenation
Turn off hyphenation also helps to improve performance significantly. You can do that by setting android:hyphenationFrequency="none" for a specific TextView or overriding that property for the whole application:
<!-- res/values/styles.xml -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- ... -->
<item name="android:textViewStyle">#style/AppTextView</item>
</style>
<style name="AppTextView" parent="BaseAppTextView">
<item name="android:hyphenationFrequency">none</item>
</style>
<style name="BaseAppTextView" parent="android:Widget.TextView"/>
<!-- res/values-21/styles.xml -->
<style name="BaseAppTextView" parent="android:Widget.Material.TextView"/>
Also take a look at few links:
Use Android Text Like a Pro presentation by Siyamed Sinir from the Android Dev Summit '18 where he describes both approaches with some details.
Prefetch Text Layout in RecyclerView article in Android Developers blog that can help make your RecyclerView faster.
That text is far too long. You should divide them by \n (divide into paragraphs) and put each paragraph into a textview in a recyclerview.
Tradeoff is that users cannot select all of the text or in-between paragraphs but i believe at the end it will be a better UX.
Then you should apply Precomputedtext.

How to do forms Material Style

How do you achieve the "Material look" with the different form controls on Android?
I've seen examples with floating label and edittext, but there is little information about how to create Spinners, RadioButtons, section dividers, etc. and in general any kind of form with a Material look.
Make you activity a descendant of AppCompatActivity. Then all the widgets you use will be automatically substituted to their AppCompat implementation.
For AppCompatActivity you should add in build.gradle file of the project:
compile "com.android.support:appcompat-v7:$supportLibVersion"
Currently, the latest supportLibVersion is 25.2.0. Thus,
compile "com.android.support:appcompat-v7:25.2.0"
i guess you got dislikes, because it is a very general question.
I'll help you and like your post,
as for your question
again it's very very general questino
you can do for example for text views to have more "Material Design" look, you can wrap them in a style like this one:
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_email" />
</android.support.design.widget.TextInputLayout>
as for the rest you just have to google how to style each element to fit your specific layout and the google material design guidlines

Prevent word-break in a TextView

I have a TextView with fixed width as follows:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="12sp"
tools:text="Health Department"
android:layout_marginTop="4dp"
android:maxLines="2"
/>
... But it appears like:
|Health Dep-|
| artment |
... While I want it to be:
| Health |
|Department|
What XML attribute can I use to do this?
From api 23 you can choose the break strategy and that should fix your issue.
By default android for TextView use BREAK_STRATEGY_HIGH_QUALITY and that is causing the words breaking using hyphens.
If you want to avoid that, you can set the break strategy to BREAK_STRATEGY_SIMPLE.
You can find more information in the api doc.
I hope that helps you.
Try using this in TextView, this works for me
android:breakStrategy="simple"
This is a new thing in android 6 version(Marshmallow).
Try adding the code below to your TextView in xml layout
android:hyphenationFrequency="none"
I wanted to apply the break strategy mentioned in this answer for all my textviews throughout the app and added a new v23/styles.xml containing:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Base.Widget.TextView" parent="android:Widget.TextView">
<item name="android:breakStrategy">simple</item>
</style>
</resources>
And I put the following in my themes.xml
<item name="android:textViewStyle">#style/Base.Widget.TextView</item>
This answer is for those wanting to prevent text being broken into individual words before truncation to fit the available space.
(This was how I interpreted the actual question before reading further.) Suppose:
textView.setText("word1 word2") // User sees 'word1 word2'
textView.setText("word1 word2islonger ") // User sees only 'word1'
In the latter case, if you are wondering why you see only 'word1' instead of (perhaps) 'word1 word2islo' then the peculiarly-named ellipsize attribute is probably the culprit.
In your TextView XML, for example, try specifying
android:ellipsize="marquee"
You will then at least see as much of the intended text as will actually fit the available space.

How to get favorites star

I would like to add a favorites star like the one in the contacts list on android. Is there any way we can get that star or will I have to write my own? I can't seem to find any standard GUI Elements from android other than the options menu icons. Are there any more that I have not found?
Look at the one the right next to George Anderson. When you click it it turns yellow.
(source: mail2web.com)
The source code to the Contacts application is available online, since Android is open source.
Some poking around in there will lead you to the contact_header.xml file, found in your SDK installation. It indicates that the star is implemented via a CheckBox:
<CheckBox
android:id="#+id/star"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:visibility="gone"
android:contentDescription="#string/description_star"
style="?android:attr/starStyle" />
That, in turn, routes you to an entry in a theme:
<item name="starStyle">#android:style/Widget.CompoundButton.Star</item>
which in turn resolves to:
<style name="Widget.CompoundButton.Star">
<item name="android:background">#android:drawable/btn_star_label_background</item>
<item name="android:button">#android:drawable/btn_star</item>
</style>
So, use those images with a CheckBox, and you should get the same behavior. Those images are also available in your SDK installation.
Some standard android images are available from the android sdk, which you can either browse on your computer on online here. (As CommonsWare said).
I also find this website super handy, as it shows me what each image looks like and tells me the name of the image so I can find it in the android sdk.
#android:drawable/btn_star (this one turns yellow)
#android:drawable/star_off
and variations on those (big, on, off)

Categories

Resources