Add rounded corners when having android:drawableLeft with png

android imageview rounded corners
android imageview rounded corners xml
android imageview rounded top corners
android imageview rounded corners programmatically
android rounded corners only top
rounded corner imageview android library
android cardview rounded corners image
picasso rounded corners

To make it short, this is what I would like to add a custom button that looks like this:

IMG is a .png file in my mipmap folders and SOME TEXT is just a string value. What the dashed line is added just as a separator in the image, not in the button. The issue is that the rounded edges don't appear where the image is added. It looks like this:

My questions are the following:

  1. Can this be achieved?
  2. Is there a way to override the <solid /> attribute in <shape />? I will have to create 10 of these buttons each with different colors and if I add android:color with a different value, the color does not change
  3. When adding the image, it makes me choose only one (e.g. the mdpi one). If this will be displayed on larger screens, will it take a different .png image based on the size?
  4. Is there a specific type of button I should use? I would like to revert the colors when the button is pressed and stay as pressed. I have a vague idea about how this can be achieved, but is there a way to do this for the .png files as well or do I need to import into the project others with the colors already inverted and just switch them?

custom_button.xml

<shape 
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<corners
    android:topLeftRadius="250px"
    android:bottomLeftRadius="250px"
    android:topRightRadius="50px"
    android:bottomRightRadius="50px" />
<solid
    android:color="@color/YellowPrimary"/>
</shape>

button_styles.xml

<resources>

<style name="CategoryToggle">
    <item name="android:background">@drawable/custom_button</item>
    <item name="android:textAllCaps">true</item>
</style>

<style name="CategoryToggle.First">
    <item name="android:color">@color/bluePrimary</item> // Does not override <solid>
    <item name="android:drawableLeft">@mipmap/icon_48mdpi</item>
    <item name="android:text">@string/first_cat</item>
</style>
</resources>

button_layout.xml

<android.support.constraint.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent">

<Button
    style="@style/CategoryToggle.History"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

I have no java code at the moment as I just started and trying to implement this weird button format.

This is how it looks at my end:

  1. Absolutely. As I mentioned in the comments, either make sure your drawable has a transparent background, or create a custom button to mask the drawable.
  2. You'll want to use a style attribute apply a different style to each button. By this I mean the color defined in your custom_button.xml should reference a color attribute (something like colorAccent should work in your case), instead of a static color.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="?attr/colorAccent"/>
</shape>

Then change this color in your button styles instead of android:color.

<style name="CategoryToggle">
    <item name="colorAccent">@color/YellowPrimary</item>
</style>

Make sure you have the support library dependency added, or colorAccent will not be available.

Use the android:theme attribute, instead of the style attribute to apply the button theme.

<Button
    android:width="wrap_content"
    android:height="wrap_content"
    android:theme="@style/CategoryToggle"/>
  1. It looks like your drawables are not using resource qualifiers. You'll need to make sure each alternative resource has the exact same name as the original (i.e. your icon_48mdpi.png should instead be called icon_48dp.png for all configurations) and is placed in the corresponding drawable folder for its density. Your drawable resources should look like the following (in the Project view structure, not the Android view structure).
res/
|-- drawable/
|   +-- custom_button.xml
|-- drawable-hdpi/
|   +-- icon_48dp.png
|-- drawable-mdpi/
|   +-- icon_48dp.png
|-- drawable-xhdpi/
|   +-- icon_48dp.png
|-- drawable-xxhdpi/
|   +-- icon_48dp.png
|-- drawable-xxxhpdi/
|   +-- icon_48dp.png
~
  1. To change the color of a drawable based on state, you will need to abstract your color one step further and create a color state list.

res/color/button_color_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/pressed_color" android:state_pressed="true"/>
    <item android:color="@color/focused_color" android:state_focused="true"/>
    <item android:color="@color/state_hovered" android:state_hovered="true"/>
    <item android:color="?attr/colorAccent"/>
</selector>

Then you can use this color resource in your shape drawable instead of colorAccent.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/button_color_selector"/>
</shape>

You can also make each of the colors in your color state list a styleable attribute by defining custom attributes and referencing those attributes in your styles. I won't go into that further for the sake of brevity though.

You can do this for drawables similarly by creating a state list drawable.


Lastly, you'll want to get into the habit of using dp instead of px unless you are absolutely certain you want to use px. This will prevent strange appearances at different screen densities.

Pro tip: Round corners on an Android ImageView with this hack , Android ImageViews by default don't have an option to set a corner radius. 1024px-logoandroid051614.png There are lots of posts on how to extend the ImageView.class, add your own attributes, modify the You have other choices to manage cookies and other tracking technologies on the internet� Is there any way to define the clip region of a ViewGroup in android (Honeycomb)? For example, I have a ListView with an image background that has rounded corners. As I scroll through the list, the

On 4 "is there a way to (revert colors when pressed) for the .png files".. yes there are ways.

The by-the-book option is to use xml styles to specify different drawables for different button states. Consider ImageButton which has an example of this in its docs: https://developer.android.com/reference/android/widget/ImageButton.html

Another option is to apply tints or other filters to the drawable in your own code in button interaction callbacks. Compared to using different drawables, in this approach you add custom code instead of leveraging builtin resources, so you may wind up testing and debugging more on different devices, and you get full control so you can do custom animations and other elaborate things that may not fit well into Android resource tooling. Can checkout setColorFilter for starters: https://developer.android.com/reference/android/widget/ImageView.html#setColorFilter(int,%20android.graphics.PorterDuff.Mode)

Thanks for adding some code and images or your problem, helps in understanding it.

Html button icon, Available in PNG, ICO or ICNS icons for Mac for free use ui-button-icon: The In the HTML below, we add a DIV tag for the Button , IMG tag for the Button's You can see other than rounded corners and drop shadows the buttons work Dec 05, 2015 � Image icon can add via android:drawableLeft=”@drawable/your image � Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

Big shout out to Bryan for his insight on this matter. It led me to the paths I needed to follow in order to solve this issue. I am posting this answer so that others with similar cases will know the steps. Although I have quite a number of files, this procedure did the trick perfectly.

  1. I have my custom button as described in the link provided by Bryan.

For the rest I have the following:

Change the text color: button_text_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/redPrimary" android:state_pressed="true"/>
    <item android:color="@color/redDark"/>
</selector>

Change the background: button_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="400dp" android:radius="100dp" android:topLeftRadius="400dp" />
            <solid android:color="@color/redDark" />
        </shape>
    </item>
    <item android:state_enabled="true">
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="400dp" android:radius="100dp" android:topLeftRadius="400dp" />
            <solid android:color="@color/redPrimary" />
        </shape>
    </item>
</selector>

Change the drawable: button_drawable.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_button_inverted" android:state_pressed="true" />
    <item android:drawable="@drawable/ic_button"/>
</selector>

button_style.xml

<style name="MyButtonStyle">
        <item name="android:background">@drawable/button_background</item>
        <item name="android:drawableLeft">@drawable/button_drawable</item>
    <item name="android:text">@string/button_text</item>
    <item name="android:textColor">@color/button_text_color</item>
</style>

Implementing it in main_layout.xml

<packagename.MyCustomButton xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/myButton"
            style="@style/MyBUttonStyle"
            android:layout_marginBottom="8dp" />

Android button style: Customize buttons in Android, In android default shape of button is rectangle, and default colour is grey which need to Like in my case i have place the image name as one.png in drawable folder. In button_menu.xml file you have to write define the condition for button To create a button with round corners you need to create a new xml file in your � Be sure each bitmap is named properly to reflect the button state that they each represent, such as button_default.9.png, button_pressed.9.png, and button_focused.9.png. Create a new XML file in the res/drawable/ directory (name it something like button_custom.xml ).

4.1: Buttons and clickable images � GitBook, A button is usually a rectangle or rounded rectangle with a descriptive caption or icon Add the android:drawableLeft attribute to draw the icon to the left of the For Android apps running on 4.0 and newer, you have the following options: into your Android Studio project, create or save the image in PNG or JPEG format ,� Stack Overflow Public questions and answers; Teams Private questions and answers for your team; Enterprise Private self-hosted questions and answers for your enterprise; Jobs Programming and related technical career opportunities

[PDF] Android icon picture rounded corners, Earlier this month, Google announced that the Play Store on Android and Chrome OS would rectangle so there are situations where we will like to create a circular ImageView or results in png- and jpg-formats is easy and convenient using this application. android:drawableLeft=”@drawable/your image name” tag. How to set the text size, text color and other parameters in one xml and than assign them to the imagebutton in android? I can set the parameters manually for each button, but if there are more than 3 buttons it becomes a nightmare.

Highlighting image pick, you have set background as a border of imageview and u also set image bitmap in src Nope, those are actually png images with a Selector. radio button look) you just add android:drawableLeft="#drawable/your_overlay_image. I want set rounded corners for Relative layout, it's simple Drawable XML may look like� 3. Now we will see how make Corners of button Round. To create a button with round corners you need to create a new xml file in your drawable folder round_corners.xml. And then you have to define now much round corners you want to make in its xml file. Below is the code of round_corner.xml. Listing 4: Code to define rounded corner button

Custom button shape css, If the image is a transparent PNG, then the background would come through. Now open the other forms where you are having issue currently and delete all the In android default shape of button is rectangle, and default colour is grey which We will add a CSS attribute border-radius in our CSS file in order to make our� To align multiple symmetric buttons in Android View, each button having an image in the center and text at bottom, use the following code:

Comments
  • It's hard to figure out what's going wrong without some code.
  • @Bryan I don't have much code to go with as I just started working. I only added the colors, strings, pngs. Nothing else at the moment.
  • Not much code is better than no code, post the XML you use to create the shape and any Java code you use to display it.
  • @Bryan As I said, nothing much. Added what I have. No java for now as I am just trying to create that shape at the moment.
  • Does the icon_48mdpi mipmap have a yellow background?
  • Good advice. I will try and let you know how it went. Some small questions and clarifications before: 1. I presume coding will take up less space than importing a new set of pngs? 2. Can I use any attribute? For example one less relevant here like colorEdgeEffect? 3. Remembered it from a previous project, but forgot to update the question. 4. I used px to test if it has any difference. Forgot to change it back before pasting the code.
  • @Andy 1. That's true. You can even use vector assets instead of png files, and apply a color attribute to the color of the vector to take up even less space. 2. Yes, any attribute would work. I would try to stick to ones that make sense for the use case.
  • After a lot of trial and error I managed to do number 1, but am pretty stuck at #2. The overriding of an ?attr color does not occur even though I did the exact steps. Could you pinpoint the library? I have added about 7 in gradle which seemed relevant, but cannot override the color.
  • @Andy Is ?attr/colorAccent highlighted as an error? (It should appear red, and when you hover over it a dialog will appear stating something like "Cannot resolve symbol '?attr/colorAccent'")
  • There is no error. In my shape I have <solid android:color="?attr/colorAccent"/> which sets the correct color, and in my style applied to my button I have <item name="colorAccent">@color/histYellowPrimary</item> which does not change it to yellow. I still get the one initially set for accent (a pink-ish color). I have the latest app compat dependency as well as others added from the list including implementation 'com.android.support:palette-v7:28.0.0' which is related to colors.