android-add top padding to Chip text - android

I'm using Chip component from material library in my android app. It is an action chip which has an icon and a text inside. the point is that I need to add some padding to the top of the text in order to bring it down a little a bit.
I have tried to add textAppearance style to the chip, but can not find any style item to do what i need. how to do that?!
<com.google.android.material.chip.Chip
android:id="#+id/chip"
android:layout_width="wrap_content"
app:chipIcon="#drawable/satisfied"
app:chipIconTint="#444"
android:layout_height="wrap_content"
android:text="my text!"
android:textAppearance="#style/Widget.App.Chip" />
<style name="Widget.App.Chip" parent="Widget.MaterialComponents.Chip.Action">
<item name="android:textSize">14dp</item>
<item name="android:fontFamily">#font/xyz</item>
<item name="android:textStyle">bold</item>
// what item is needed to achieve top padding?!
</style>

simply: you can't. Chip is designed as is and it extends AppCompatCheckBox and further TextView (doc HERE). so these icons on the left and/or right are compound drawables, not separated Views (e.g. ImageViews), so every padding you will set to Chip will add padding to text and all icons (as this is one View). for your purposes you must create own custom View, easiest way would be probably to create horizontal LinearLayout with childs: TextView and ImageViews on left and right to it, and then you can set additional padding only for text

Related

Two textviews with different colors using one theme?

I'm new to android and I have been trying to find out an answer to this. I have a layout file .xml for listview that has two textviews, one is for heading with a greater size and other below is for description. What I want is that heading textview's text stays white and description textview's text stays grey in my current theme. That is dark theme. But user has the option to change the theme, so when user selects Light theme I want my heading textview's text (that is within layout that I have for listview's rows) to become black and also the description textview's text to become black.
Please help and thanks in advance.
you can set the text color programmatically using the method textView.setTextColor(int color), or via XML using the attribute android:textColor="#yourhexcolor"
You can change theme programmatically. There is one guy asked this hours ago. Can you check this: how-to-change-colour-when-user-wants-another-colour-in-the-app
Also if you want to use diferent themes for different TextViews you can try like :
textView.setTextAppearance(context, android.R.style.TextAppearance_Small);
How can i create custom themes for TextViews
in your styles.xml create different styles :
<style name="MyBlueTextTheme" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">18sp</item>
<item name="android:textColor">#123456</item>
<item name="android:textStyle">bold</item>
</style>
Then use it like :
<TextView
android:id="#+id/textBlue"
android:text="This is a blue styled text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/MyBlueTextTheme" />
Or use it like: textView.setTextAppearance(context,R.style.MyBlueTextTheme);
but its deprecated and you can use textView.setTextAppearance(R.style.MyBlueTextTheme); but this can be used Api23 or higher

Issues changing the color of views

So I am trying to change my app color to blue and some of most the views I have are not willing to cooperate with me.
Here is the image:
Here I want to change the color of the green parts on the spinner, edittext and checkbox views (which are green) to black or blue.
I've looked all over Stack Overflow and I can't find the solution!
Thank you very much, If possible I would like to have a XML solution but I wouldn't mind a programmatic solution!
Add these to your base theme in styles.xml
<item name="colorControlNormal">#color/YOUR_COLOR</item>
<item name="colorControlActivated">#color/YOUR_COLOR</item>
<item name="colorControlHighlight">#color/YOUR_COLOR</item>
Note: The above change will affect the EditTexts and other views probably throughout the application.
If not, and if you are using the AppCompat v22 support library, you can specify the theme in the EditText like: android:theme="#style/Theme.App.Base.
This will ensure the style won't also affect other views in your layouts that you don't want to change
Also if you want to change the above solution, just add another Theme specific to EditTexts and Spinners and apply it to all Spinners if you want
<style name="MyWidgetTheme">
<item name="colorControlNormal">#color/YOUR_COLOR</item>
<item name="colorControlActivated">#color/YOUR_COLOR</item>
<item name="colorControlHighlight">#color/YOUR_COLOR</item>
</style>
and in your EditText, Spinner or any other View, just assign this theme:
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Demo"
android:lines="1"
android:theme="#style/MyWidgetTheme"
/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/MyWidgetTheme"></Spinner>
Take a look to this resource generator.
Choose your color, the widgets you want to generate and voila! You copy them to your project and reference them in your xmls.

Smaller Custom RatingBar: Material Design

I am building an app which uses a non-clickable (indicator) ratingbar. Now, when the ratingbar IS clickable, it has two different modes. When clicked the icons turn red (red is the accentColor in my styles). When not clicked, the stars are an ugly gray with a black outline. When a rating bar is set to unclickable (indicator), the stars are permanently black-and-gray.
Additionally, I would like to make the stars smaller. Can I do both of the above things without defining custom drawables? If I must define custom drawables, how can I access the preexisting "clicked star" drawable, so that I do not need to create my own?
Thanks
<RatingBar
style="#style/RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:rating="3.5"
android:stepSize="0.5" />
and add this in your styles xml file
<style name="RatingBar"
parent="android:style/Widget.Material.RatingBar.Small">
<item name="colorControlNormal">#color/primary_light</item>
<item name="colorControlActivated">#color/primary_dark</item>
</style>
visit my Blog Post and see working example. This way you dont need to customise ratingBar.

Customize fastScrollOverlay?

I'm trying to customize the letter popup that appears during scroll. I was able to change it's colors and the position from my styles, but I need to make the text and the whole element bigger as well as move it closer to the vertical center of the screen. Is any of these things possible? How can I do them?
This is my current code from my style.xml file:
<item name="android:fastScrollOverlayPosition">floating</item>
<item name="android:fastScrollTextColor">#000000</item>
<item name="android:fastScrollPreviewBackgroundLeft">#drawable/square</item>
<item name="android:fastScrollPreviewBackgroundRight">#drawable/square</item>
I don't have any info about further customization of the default overlay.
There's a more flexible alternative, though. You could add a TextView to your layout which only appears when the user is scrolling, and show the letter returned from your SectionIndexer's getPositionForSection method. You could then style this view exactly to your liking, and center it in a full-screen RelativeLayout.

Android UI widget vertical alignment issue

I am trying to create a layout (using eclipse) in which I need to vertically align various controls like TextView and Button. I am trying to keep all the widgets perfectly left aligned. Even if I specify the same left margins/paddings for the controls, still a difference of 1-2 pixels can be seen between different types of controls.
The problem is that the distance between widget’s border (blue rectangle in eclipse) and widget’s content/graphics varies across widgets (say TextView and Button).
I can apply workarounds by either specifying left padding for TextView or by reducing the left margin of the button container. But I am looking for cleaner solution. I am unable to find any attribute which controls the difference between widget's border and content.
Any pointers on how I can control this gap ?
Snapshot demonstrating the problem is below. Here is the layout XML that I am using for this problem:-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dummy Button" />
</LinearLayout>
The images below show the snapshot of the dummy application. Please note the difference between left side margin of "Hello World" TextView and "Dummy Button".
The second pic shows the button widget when selected in Eclipse. The blue rectangle indicates the widget boundary/border. Is the difference between button's border (blue rectangle) and content (greyed rectangle) controllable by some property ?
This is a tough one the TextView and other Android widgets may have some intrinsic styles of their own (android version dependant as well).
Therefore to get around this you would have to create your own style.
In creating your own style always reference the android source code on this subject:
https://github.com/android/platform_frameworks_base/tree/master/core/res/res/values
https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/themes.xml
https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml
There are multiple ways to create your own style.
One way is to theme your activity in your manifest.
First you need a styles.xml file, in your /values/ folder.
In here you would declare your new style:
<style name="Theme.MyTheme.Dark" parent="#android:style/Theme.NoTitleBar">
<item name="android:textViewStyle">#style/Widget.TextView.Black</item>
</style>
<style name="Theme.MyTheme.Light" parent="#android:style/Theme.NoTitleBar">
<item name="android:textViewStyle">#style/Widget.TextView.White</item>
</style>
The style above it inheriting from the Android style that hides the title bar, you can inherit from something else.
In this theme we then override the textViewStyle, this allows us to set custom values for our TextView's and override some of the intrinsic values.
<style name="Widget.TextView.White" parent="#android:style/Widget.TextView">
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="Widget.TextView.Black" parent="#android:style/Widget.TextView">
<item name="android:textColor">#000000</item>
</style>
Finally you theme your activity in the AndroidManifest.xml:
<activity
android:name=".ui.phone.FirstActivity"
android:theme="#style/Theme.MyTheme.Dark" />
<activity
android:name=".ui.phone.SecondActivity"
android:theme="#style/Theme.MyTheme.Light" />
Now when you use a TextView in the FirstActivity it's text will be Black by default and in the second activity it will be white.
For your specific question:
You would have to go look in the source code files I linked at the top and see if there is any padding or minWidth or size attributes that are affecting your widgets and your layout.

Categories

Resources