Develop Reference

How to create a circular Button or ImageButton or ImageView with a bitmap drawable and padding

I can't figure out how to create a Button or ImageButton or ImageView or anything that has:
A bitmap drawable with the icon
A padding
What i have try now is this:
<ImageButton
android:id="#+id/ShowInstructionsImageButton"
android:contentDescription="#string/Common_InformationIconContentDescription"
android:layout_alignParentRight="true"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_margin="14dp"
android:backgroundTint="#color/normalTextColorPrimaryDark"
android:background="#drawable/ic_info_bitmap"
android:layout_centerVertical="true" />
Which works but the clickable area of the ImageButton is 20dp, how i can make the clickable area 48dp?
I have check this discussion here Padding not working on ImageButton but if i use android:src instead of android:background i get a black box in the place of the icon
the icon is this:

You can use a MaterialButton:
<com.google.android.material.button.MaterialButton
android:layout_width="48dp"
android:layout_height="48dp"
style="#style/Widget.App.Button.IconOnly"
app:icon="#drawable/ic_add_24px"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.MyApp.Button.Circle"
/>
with:
<style name="Widget.App.Button.IconOnly" parent="Widget.MaterialComponents.Button.OutlinedButton" >
<item name="iconPadding">0dp</item>
<item name="android:insetTop">0dp</item>
<item name="android:insetBottom">0dp</item>
<item name="android:paddingLeft">12dp</item>
<item name="android:paddingRight">12dp</item>
<item name="android:minWidth">12dp</item>
<item name="android:minHeight">12dp</item>
<item name="iconGravity">textStart</item>
<item name="strokeWidth">3dp</item>
<item name="strokeColor">#color/...</item>
</style>
and a circular shape:
<style name="ShapeAppearanceOverlay.MyApp.Button.Circle" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>

First, try to use androidx.appcompat.widget.AppCompatImageButton or androidx.appcompat.widget.AppCompatImageView instead of ImageButton to gain the advantage of backward compatibility.
After that, to show a drawable using it, you should use app:srcCompat, and not android:background. Now, if you add some padding to the view, it will be applied to the showing drawable.
<androidx.appcompat.widget.AppCompatImageButton
android:id="#+id/ShowInstructionsImageButton"
android:contentDescription="#string/Common_InformationIconContentDescription"
android:layout_alignParentRight="true"
android:layout_width="48dp"
android:layout_height="48dp"
android:padding="14dp"
android:layout_centerVertical="true"
app:tint="#color/normalTextColorPrimaryDark"
app:srcCompat="#drawable/ic_info_bitmap" />

I found a solution that works for me:
<ImageButton
android:id="#+id/ShowInstructionsImageButton"
android:contentDescription="#string/Common_InformationIconContentDescription"
android:layout_alignParentRight="true"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="14dp"
android:backgroundTint="#color/normalTextColorPrimaryDark"
android:background="#drawable/ic_info_layer"
android:layout_centerVertical="true" />
with ic_info_layer.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#drawable/ic_info_bitmap"
android:width="#dimen/IconSize"
android:height="#dimen/IconSize"
android:right="#dimen/ButtonIconPadding"
android:left="#dimen/ButtonIconPadding"
android:top="#dimen/ButtonIconPadding"
android:bottom="#dimen/ButtonIconPadding"
/>
</layer-list >
On API < 23 it is important the ImageButton to have fixed width and height because layer width and height is being ignored.

Refrencing a selector drawable from a style results blank imagebutton

I want to have a ImageButtons changing the image based on its state. (same as "like" button in nine gag and facebook apps).
I have defined a style for each of them that references a selector as a drawable but when I run the program, images doesn't appear. Can you tell me what's wrong with this approach? (sorry for my bad English)
comment_actions_style in values folder:
<style name="LikeStyle">
<item name="android:src">#drawable/like</item>
</style>
<style name="DislikeStyle">
<item name="android:src">#drawable/dislike_normal</item>
</style>
<style name="ReplyStyle">
<item name="android:src">#drawable/reply_normal</item>
</style>
<style name="ShareStyle">
<item name="android:src">#drawable/share</item>
</style>
</resources>
and like drawable in drawable folder: (other buttons are the same)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/like_clicked" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="#drawable/like_focused" android:state_focused="true"/>
<!-- focused -->
<item android:drawable="#drawable/like_normal"/>
<!-- default -->
</selector>
EDIT:
I forgot to mention, I have a list view that its items are user comments and comments have buttons described above.
here is my items layout (part of it)
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/comment_content"
android:orientation="horizontal"
>
<include
android:id="#+id/like"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
layout="#layout/comment_actions"
style="#style/LikeStyle" />
</LinearLayout>
and comment_actions layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/comment_action"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="5dip">
<ImageButton
android:id="#+id/comment_action_img"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#android:color/transparent"
/>
<TextView
android:id="#+id/comment_action_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/comment_action_img"
android:gravity="center"
android:layout_marginLeft="5dip"/>
</RelativeLayout>
These buttons also inherit from a layout if that's matter.

Here, your are setting style for comment_actions layout, and it is a Relative Layout, which won't be abled to response to your "android:src" attribute.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/comment_content"
android:orientation="horizontal"
>
<include
android:id="#+id/like"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
layout="#layout/comment_actions"
style="#style/LikeStyle" /> <!--here,you are setting a style for the RelativeLayout -->
</LinearLayout>

Using selectors for image view in android

I have around 6 images which i am using as tabs in my application.Its just images and they aren't the tabs that android provides.
So my question is that when i click on a image i want replace the image with a another image so that it can let user know that which tab is selected.
What i am did was creating different xml for this it in my layout.But its tedious to do so since I can't be creating different xml's for every image.
What i am trying to do now is using for this but not getting the result.
How is it possible to use for this ?

Its quite simple.You dont have to make different xml for each image/tab.you just have to make one xml and include this xml in every xml which needs these images..in the xml set only one image as selected and the rest unselected.Suppose for the image1 keep image1 selected and the rest unselected.by clicking image2 will redirect to activity2.In activity2 set image2 selected and the rest unselected and the same for the remaining activities.This way will be the easiest way.Trust me i have implemented this and will help you too.any sort of queries you can ask me.
i have done with 4 images but in your case there will be 6.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/btn1"
style="#style/toolButton"
android:background="#drawable/image1"
android:gravity="center"
/>
<Button
android:id="#+id/btn2"
style="#style/toolButton"
android:background="#drawable/image2"
android:gravity="center"
/>
<Button
android:id="#+id/btn3"
style="#style/toolButton"
android:background="#drawable/image3"
android:gravity="center"/>
<Button
android:id="#+id/btn4"
style="#style/toolButton"
android:background="#drawable/image4"
android:gravity="center"
/>
</LinearLayout>
</RelativeLayout>
And here is style.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="toolButton">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">45dip</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:layout_gravity">center_vertical</item>
<item name="android:layout_weight">5</item>
<item name="android:layout_marginBottom">0dip</item>
<item name="android:layout_marginTop">0dip</item>
</style>
</resources>

dynamic layout with two buttons problem

how can I set my buttons in a linearLayout dynamically? So I want that all android mobiles with different display sizes can use my app.
Code
<LinearLayout android:id="#+id/linear_layout_main2" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal">
<Button android:id="#+id/bt1" android:text="GO"
style="#style/button_font" android:clickable="false"
android:background="#drawable/box1"
android:layout_marginLeft="6px" />
<Button android:id="#+id/bt2" android:text="ON"
style="#style/button_font" android:clickable="false"
android:background="#drawable/box1"
android:layout_marginLeft="6px" />
</LinearLayout>
Style-Code
<style name="button_font" parent="#android:style/TextAppearance.Medium">
<item name="android:layout_width">44px</item>
<item name="android:layout_height">39px</item>
<item name="android:textColor">#ffffffff</item>
<item name="android:textSize">18px</item>
<item name="android:layout_gravity">center_vertical</item>
</style>

You can use android:layout_weight = "1" for two button, then it take same screen ratio.
Means 1:1 ratio is put for the two buttons. So it works in all screen sizes.

Android: Theme.Dialog layout - dynamically visible content being cut-off

I have a 'dialog' Activity based on the built-in Android theme Theme.Dialog:
<style name="Theme.Dialog">
<item name="android:windowFrame">#null</item>
<item name="android:windowTitleStyle">#android:style/DialogWindowTitle</item>
<item name="android:windowBackground">#android:drawable/panel_background</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="textAppearance">#android:style/TextAppearance</item>
<item name="textAppearanceInverse">#android:style/TextAppearance.Inverse</item>
<item name="textColorPrimary">#android:color/primary_text_dark</item>
<item name="textColorSecondary">#android:color/secondary_text_dark</item>
<item name="textColorTertiary">#android:color/tertiary_text_dark</item>
<item name="textColorPrimaryInverse">#android:color/primary_text_light</item>
<item name="textColorSecondaryInverse">#android:color/secondary_text_light</item>
<item name="textColorTertiaryInverse">#android:color/tertiary_text_light</item>
<item name="textColorPrimaryDisableOnly">#android:color/primary_text_dark_disable_only</item>
<item name="textColorPrimaryInverseDisableOnly">#android:color/primary_text_light_disable_only</item>
<item name="textColorPrimaryNoDisable">#android:color/primary_text_dark_nodisable</item>
<item name="textColorSecondaryNoDisable">#android:color/secondary_text_dark_nodisable</item>
<item name="textColorPrimaryInverseNoDisable">#android:color/primary_text_light_nodisable</item>
<item name="textColorSecondaryInverseNoDisable">#android:color/secondary_text_light_nodisable</item>
<item name="textColorHint">#android:color/hint_foreground_dark</item>
<item name="textColorHintInverse">#android:color/hint_foreground_light</item>
<item name="textColorSearchUrl">#android:color/search_url_text</item>
<item name="textAppearanceLarge">#android:style/TextAppearance.Large</item>
<item name="textAppearanceMedium">#android:style/TextAppearance.Medium</item>
<item name="textAppearanceSmall">#android:style/TextAppearance.Small</item>
<item name="textAppearanceLargeInverse">#android:style/TextAppearance.Large.Inverse</item>
<item name="textAppearanceMediumInverse">#android:style/TextAppearance.Medium.Inverse</item>
<item name="textAppearanceSmallInverse">#android:style/TextAppearance.Small.Inverse</item>
</style>
My layout for the Activity, I have a single EditText, a single Button and an invisible TextView I use to display messages to the user based on the validity of the EditText content:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingBottom="6dp">
<TextView
style="#style/DialogMessage"
android:id="#+id/error"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:visiblity="gone" />
<EditText
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text|textCapWords"
android:maxLength="100"
android:maxLines="1"
android:ems="20"
android:scrollHorizontally="true" />
<Button
android:id="#+id/rename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right" />
</LinearLayout>
When the user is in portrait mode, and they enter some 'bad' text in the EditText, I make the TextView visible, and populate it with an appropriate error message. This works fine, as everything shifts down, and the TextView is displayed great, even if the content spans multiple lines. Now, in landscape, when I do the same, the TextView displays fine, but the bottom element (in this case the Button) is compressed to about half it's normal height. Moving the elements around, if I put the EditText at the bottom, when the TextView is made visible, it too is compressed, and puttint the TextView at the bottom results in anything more than a single line of text being cut off.
I have tried forcing the issue after the TextView is populated by re-setting the sizes of the LinearLayout via:
LinearLayout dialog = (LinearLayout) findViewById(R.id.dialog);
dialog.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
And I have tried re-drawing the LinearLayout after the TextView is populated by calling:
LinearLayout dialog = (LinearLayout) findViewById(R.id.dialog);
dialog.invalidate();
Neither worked. Any ideas what is going on here?
Thanks,
Paul
Edit:
There is ample screen real-estate to show all three components fully... as a fully inflated TextView with the same content as I am dynamically inflating, and everything displayed fully.

Didn't figure out why this was happening, but figured out a work-around. Switching the layout to a RelativeLayout solved the issue, and everything is now displayed properly using the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingBottom="6dp">
<EditText
android:id="#+id/inpt_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text|textCapWords"
android:maxLength="100"
android:maxLines="1"
android:ems="20"
android:scrollHorizontally="true" />
<Button
android:id="#+id/btn_rename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/inpt_title"
android:layout_below="#id/inpt_title" />
<TextView
style="#style/DialogMessage"
android:id="#+id/error"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#id/btn_rename"
android:layout_alignLeft="#id/inpt_title"
android:layout_alignRight="#id/inpt_title" />
</RelativeLayout>