Develop Reference

drawableStart not showing drawable

I am learning android, and one of the challenges in the book said to add the previous button on my own. I did, and asked a friend for help putting the arrow on the left side, and he did, but he couldn’t figure out why drawableStart didn’t work. (drawableLeft did work)
Anyone know why drawableStart didn’t work? Or better yet: how to fix it?
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/previous_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/arrow_left"
android:text="#string/previous_button"
android:drawablePadding="4dp"/>
<Button
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/arrow_right"
android:drawablePadding="4dp"
android:text="#string/next_button"/>
</LinearLayout>
The code under themes.xml :
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.GeoQuiz" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>

It seems that you're using Material design buttons, so use android:icon instead of android:drawableStart
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/previous_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="#drawable/arrow_left"
android:text="#string/previous_button"
android:drawablePadding="4dp" />
<Button
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="wrap_content"
android:icon="#drawable/arrow_right"
android:drawablePadding="4dp"
android:text="#string/next_button"/>
</LinearLayout>
Update:
Didn't work. Now it doesn't show either arrow. And the program doesn't run in the emulator anymore
Appears to be a compatibility issue with android directive so, change it to app directive instead and added a style of Widget.MaterialComponents.Button.TextButton.Dialog as you use
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="#+id/previous_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="#drawable/arrow_left"
android:text="#string/previous_button"
style="#style/Widget.MaterialComponents.Button.TextButton.Dialog"
android:drawablePadding="4dp" />
<Button
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="wrap_content"
app:icon="#drawable/arrow_right"
android:drawablePadding="4dp"
android:text="#string/next_button"/>
style="#style/Widget.MaterialComponents.Button.TextButton.Dialog"
</LinearLayout>

After a whole lot of searching I finally figured out how to make it work
android:drawableStart not working seems to be an issue and here is the link to the issue and fix https://github.com/material-components/material-components-android/issues/1174
Here's the fix
<Button
android:id="#+id/previous_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="#drawable/arrow_left"
app:iconGravity="textStart"
app:iconTint="#android:color/white"
android:text="#string/previous_button"
android:drawablePadding="4dp"/>
Instead of using drawableBottom|Top|Left|... use MaterialButton's attributes app:icon, app:iconGravity and app:iconTint
Note drawableStart seems to be the only one with the issue the others work
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="#string/your_text"
android:drawableEnd="#drawable/your_image"/>
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="#string/your_text"
android:drawableTop="#drawable/your_image"/>
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="#string/your_text"
android:drawableBottom="#drawable/your_image"/>
Then for Left
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="#string/your_text"
app:icon="#drawable/arrow_left"
app:iconGravity="textStart"
app:iconTint="#android:color/white"/>

Spinner arrow color not changed

I have created a custom toolbar which has a spinner. I am trying to set a custom colour for the spinner arrow - currently the default is white, but it's not working, any ideas?
This is my Toolbar layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/newToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:elevation="0dp"
android:windowContentOverlay="#null"
android:orientation="horizontal">
<ImageView
android:id="#+id/strLogo"
android:layout_width="45dp"
android:layout_height="40dp"
android:layout_marginTop="13dp"
android:scaleType="fitCenter"
android:visibility="gone"
android:background="#ffffff"
android:src="#mipmap/logo"/>
<TextView
android:id="#+id/updateName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:layout_toRightOf="#+id/strLogo"
android:layout_centerVertical="true"
android:text="Test"
android:visibility="visible"
android:textColor="#ffffff"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="normal" />
<Spinner
android:id="#+id/spinner_nav"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
style="#style/customSpinnerTheme"
android:visibility="visible"/>
</RelativeLayout>
This my style xml for the spinner:
<style name="customSpinnerTheme" parent="ThemeOverlay.AppCompat">
<item name="colorControlActivated">#FFFFFF</item>
<item name="colorControlHighlight">#FFFFFF</item>
</style>

You can add this type of style in your spinner style and add your colors which you want to use as your drawable:
<style name="SpinnerAppTheme" parent="android:Widget.Spinner">
<item name="android:background">#drawable/apptheme_spinner_background_holo_light</item>
<item name="android:dropDownSelector">#drawable/apptheme_list_selector_holo_light</item>
</style>

Changing navigationView header text color

How do you change the header text colors in navigation Drawer. I am using the latest support design library. Image is attached below.

I had a similar problem with group title color and I found the solution.
Just put it into style.xml main theme.
<item name="android:textColorSecondary">#FFFFFF</item>
No need to modify your parent theme.

Just changing the parent theme from Theme.Appcombat.Light.ActionBar to Theme.AppCombat solves it.

Assuming you created it with a separate header xml file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="178dp"
android:background="#drawable/background_poly"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:textColor="#ffffff"
android:text="Akash Bangad"
android:textSize="14sp"
android:textStyle="bold"
/>
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_marginLeft="16dp"
android:layout_marginTop="5dp"
android:text="akash.bangad93#gmail.com"
android:textSize="14sp"
android:textStyle="normal"
/>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/aka"
android:layout_marginLeft="16dp"
android:layout_marginTop="38dp"
android:id="#+id/circleView"
/>
</RelativeLayout>
Just Change the background color of the relative layout
Here is the link I used
http://www.android4devs.com/2014/12/how-to-make-material-design-navigation-drawer.html?m=1

Currently in the Material Components Library it is based on the android:textColorSecondary color.
You can override this color only in the NavigationView using:
<com.google.android.material.navigation.NavigationView
android:theme="#style/ThemeOverlay.myCustomTitle"
..>
with:
<style name="ThemeOverlay.myCustomTitle" parent="">
<item name="android:textColorSecondary">#color/....</item>
</style>
Final result:

How to center a RatingBar in Android

I have created a custom RatingBar as described in one of the tutorials given here on stack-overflow and it's looking great, the problem is with the centering of the image. here is what I've got:
As you can see the TextView is centered vertically in the LinearLayout, but the RatingBar is at the top of it. Here is my xml code of this image:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:foregroundGravity="center" >
<LinearLayout
android:layout_width="320dp"
android:layout_height="match_parent"
android:gravity="center" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<RatingBar
android:id="#+id/ratingBar1"
style="#style/starsRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:numStars="5"
android:rating="2.3"
android:stepSize="1" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</ScrollView>
Here is the code of the styling:
<style name="starsRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/star_ratingbar_full</item>
<item name="android:minHeight">36dip</item>
<item name="android:maxHeight">36dip</item>
</style>
Any ideas in the RatingBar would be apprisiated!
THANKS

Ok, I think I've got it.
The key issue is the ScrollView: it automatically makes things compact, unless you specifically tell it otherwise. In the scroll view, set
android:fillViewport="true"
to make it use the space available.

Hello to get all items at top you have to put:
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="TextView" />
instead of:
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
if you just want the rating bar centred:
just remove style="#style/starsRatingBar"
EDIT:
forget any think I said befor, it seems to work better when I changed the style to : (adjust your min/max height to get "perfect result" )
<style name="starsRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#android:drawable/star_on</item>
<item name="android:minHeight">26dip</item>
<item name="android:maxHeight">26dip</item>
</style>

ActionBarSherlock in the bottom of screen

I have searched a lot how to position ActionBarSherlock to the bottom of the screen and Thanks God it works using this code
<activity
android:name=".MyActivity"
android:uiOptions="splitActionBarWhenNarrow" >
</activity>
but with a small problem that the header is still there and I want to remove it also, so can any one please help me remove the header of ActionBarSherlock
Thanks in Advance

splitActionBarWhenNarrow means that it will be split, not moved anywhere and only when narrow. Thus if you are in portrait or wide screen the menu options will always appear at the top. You cannot force ActionBar to be drawn at the bottom. Instead you might want to disable ActionBar completely and putting your own custom view at the bottom with ImageButtons with actionButtonStyle
<style name="NoActionBar" parent="#android:style/Theme.Holo.Light">
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/buttons_holder"
android:ellipsize="end"
style="#style/TextAppearance.Sherlock.Widget.ActionBar.Title"/>
<LinearLayout
android:id="#+id/buttons_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true" >
<ImageButton
android:id="#+id/acion_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/menu_label_add"
style="?attr/actionButtonStyle" />
<ImageButton
android:id="#+id/action_prev"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/menu_label_prev"
style="?attr/actionButtonStyle" />
<ImageButton
android:id="#+id/action_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/menu_label_next"
style="?attr/actionButtonStyle" />
</LinearLayout>
</RelativeLayout>