I have a list view with logos of supermarkets as images. Currently, they are not centered perfectly and are distorted. Please look at the
Here is my layout of row item
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/highlight_selector">
<ImageView
style="#style/imgPriceStoreLogoSmall"
android:id="#+id/imgStoreLogo"
android:src="#drawable/panda_logo"
/>
<LinearLayout
android:id="#+id/layoutPriceInfo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/lblStoreName"
style="#style/lblRowProductName"
android:layout_marginTop="5dp"
android:textColor="#color/black"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:text="Store Full Name"/>
<TextView
android:id="#+id/lblPrice"
style="#style/lblRowOriginalPrice"
android:textSize="20sp"
android:textColor="#color/black"
android:layout_marginTop="5dp"
android:text="SAR 16.95"/>
</LinearLayout>
<ImageView style="#style/imgRowArrowIcon" />
</LinearLayout>
and my style
<style name="imgPriceStoreLogoSmall">
<item name="android:layout_width">80dp</item>
<item name="android:layout_height">80dp</item>
<item name="android:layout_gravity">start</item>
<item name="android:padding">5dp</item>
<item name="android:scaleType">fitXY</item>
<item name="android:contentDescription">#string/app_name</item>
<item name="android:src">#drawable/no_image</item>
</style>
I do not know the actual sizes of the logo images but want to resize to fit in imageview nicely. Any help is appreciated.
Thanks,
Noorul
The following code fits the image to yoursampleimage if the server image is so big
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/yousampleimagesizeimage" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:maxHeight="?android:attr/listPreferredItemHeight"
android:maxWidth="?android:attr/listPreferredItemHeight"
android:scaleType="centerCrop"
android:src="#drawable/serverorDynamicimage" />
</LinearLayout>
(or)
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:scaleType="centerCrop"
android:id="#+id/actualimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/sampleimage"
android:layout_alignLeft="#+id/sampleimage"
android:layout_alignRight="#+id/sampleimage"
android:layout_alignTop="#+id/sampleimage"
android:src="#drawable/actualimage" />
<ImageView
android:visibility="invisible"
android:id="#+id/sampleimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sampleactualimage" />
</RelativeLayout>
ImageView.ScaleType
use:
<item name="android:scaleType">centerCrop</item>
You have used width & height as 80dp. If image smaller that this height and width, it will be streached to fit in this area. If it is large, it will be scaled down to fit this area. I recommend using images multiple of 80x80 size e.g. 160x160, 40x40, etc.
layout_gravity = start means "Push object to the beginning of its container, not changing its size."
Whereas
center_vertical Place object in the vertical center of its container, not changing its size.
You can use "center_vertical" to put your image in vertically center.
Related
I've used "com.google.android.material.switchmaterial.SwitchMaterial" in that left margin having some space. How to reduce that?
I've need align straight of the everyone text. I'm not add end margin or padding of the switch, Parent layout margin only I've set. Below my XML code and styles. Please provide your suggestion to reduce that margin, Thanks.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp">
<RelativeLayout
android:id="#+id/who_can"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<com.google.android.material.textview.MaterialTextView
style="#style/TextBlackRegular"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_toStartOf="#+id/video_view_result"
android:singleLine="true"
android:text="#string/who_can_view"
android:textSize="#dimen/text_small"
android:visibility="visible" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/video_view_result"
style="#style/TextBlackRegular"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:singleLine="true"
android:text="Everyone"
android:textSize="#dimen/text_small" />
</RelativeLayout>
<com.google.android.material.switchmaterial.SwitchMaterial
android:id="#+id/save_switch"
style="#style/SwitchButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/who_can"
android:checked="true"
android:text="#string/save_gallery"
android:textSize="#dimen/text_small"
app:trackTint="#color/colorSecondaryText" />
</RelativeLayout>
<style name="SwitchButtonStyle" parent="Widget.MaterialComponents.CompoundButton.Switch">
<item name="thumbTint">#drawable/switch_selector</item>
<item name="android:fontFamily">#font/font_regular</item>
<item name="android:textColor">#color/colorBlack</item>
</style>
In your relativeLayout/topRelativeLayout, You added margin. Which means you want to margin from every side. That's why It's happening
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp">
remove the android:layout_margin="10dp". Add margin_top, margin_right what you wanna do.
You should give wrap content for switch width , or make it inside a new Relative layout
if your end margin is showing after removing from
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp">
then
<com.google.android.material.switchmaterial.SwitchMaterial
android:id="#+id/save_switch"
style="#style/SwitchButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/who_can"
android:checked="true"
android:text="#string/save_gallery"
android:textSize="#dimen/text_small"
app:trackTint="#color/colorSecondaryText" />
change in SwitchButtonStyle it gives you some default value we are happy if you share whole file
you can see that default drawables (thumb and track) from a theme have this paddings
so the way is try to use your custom drawables (but this may affect their appearance)
app:track="#drawable/track"
android:thumb="#drawable/thumb"
I am trying to place two image buttons and some text on a single line. Here is the XML for the layout:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="28dp"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>
The selector XML for each of the buttons in drawable:
button_delete.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/delete_button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/delete_button"
android:state_focused="true" />
<item android:drawable="#drawable/delete_button" />
</selector>
button_add.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_add_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/button_add_normal"
android:state_focused="true" />
<item android:drawable="#drawable/button_add_normal" />
</selector>
In the builder all looks well:
But in the application the gray background is lost and the edges of the image (which are transparent) are shown, but only for the first image:
Strangely, the first image button is not recognizing the transparent background of the image. Additionally I needed to mess with the width and height of the RelativeLayout and the first ImageButton to even get it close to the right size. With the 2nd I did not have to do anything. There is nothing special with the first image.
Here are the images from the directory:
One last issue - How do you make the text wrap before the 2nd image if it is too long for the space? Right now it writes under the 2nd image before wrapping:
Here are all the delete images. Seem to have transparent backgrounds, but I am far from a Gimp expert. Also not sure if StackOverflow keeps the original..
Update
I have verified the images are transparent. The image still has the white background. I have also updated the XML to look like this:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toEndOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>
You should use:
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete"
android:background="#android:color/transparent"/>
Use "#null" like background on ImageButton:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/bkash"
android:id="#+id/bid1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#null" />
You haven't included the actual PNG file you are using as an icon for your delete button (screenshot from Windows's Explorer showing this file on your disk isn't quite enough), but I am almost sure that this file lacks an alpha channel. Instead, there is a white color on every pixel you'd like to be set with zero alpha channel value.
Opening your graphic in some image editor and changing these white pixels to transparent will solve your problem, but as for the reason why your layout "looks different" in builder than on your device, it's because there is a default theme applied by the system to every app, you can read more about it here: https://developer.android.com/guide/topics/ui/look-and-feel/themes.html
This default, OS and device specific set of values determines things that aren't determined by app's authors.
In the case of your device, its OS determined app's background color to be gray, which wasn't the case with your builder. Your builder chose the background to be white. Your delete button's graphic never was transparent, but on the white background of your builder it looked like it was.
To make it look like on builder, you need to specifically apply the background by yourself to the root of your view. In this case, it's a LinearLayout which should look like this:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">
1) #DimDim had the right solution, if it didn't work, the delete button may have white background in the image, cross check with a png viewer.
2) To prevent overflow of text, try this
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
And put the sectionAdd Image button above this textview in the XML as this textview needs reference to the sectionAdd.
I'm working on this app and I have implemented a photo slider through ViewPager. There is an imported circle page slider indicator, a project on github. It looks like this: (Sorry for the blured text, I'm not able to share the content until release. The app will be free)
My problem is that thin blue line on the top of the screen. Blue color comes from the background and it is set in the root layout of the activity. No matter what I do to the any of the layouts (changing margins or padding to negative values) this line remains there.
So I figured that it has to do with the chosen theme for the screen. Theme is set to a custom theme which has Theme.NoTitleBar as it's parent. The code is below:
This is the style file. Taken from http://viewpagerindicator.com/ by Jake Wharton.
<style name="Theme.PageIndicatorDefaults" parent="android:Theme.NoTitleBar">
<!--<item name="vpiIconPageIndicatorStyle">#style/Widget.IconPageIndicator</item>
<item name="vpiTabPageIndicatorStyle">#style/Widget.TabPageIndicator</item>-->
<item name="vpiCirclePageIndicatorStyle">#style/Widget.CirclePageIndicator</item>
</style>
This is my activity layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/accountRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradientbg"
android:orientation="vertical"
android:gravity="bottom">
<RelativeLayout
android:id="#+id/titleBar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="visible"
>
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
/>
<io.colomb.android.colombio.customviews.CirclePageIndicator
android:id="#+id/slideIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#id/viewPagerSlider"
android:layout_marginBottom="20dp"
android:paddingRight="5dp"
android:paddingLeft="5dp"
/>
</RelativeLayout>
<ImageView
android:id="#+id/ivSoftboardLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/logosoftboard"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/app_name"
android:layout_marginTop="10dp"
android:visibility="gone"
android:layout_marginBottom="15dp"
/>
<LinearLayout
android:id="#+id/InputFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="0.001"
android:layout_marginTop="-15dp"
>
</LinearLayout>
Any thoughts are appreciated.
OK solved. The thing that was bothering the adapter was the line gravity="bottom"in the root element. Also the pictures needed to be cropped more
Hi guys I want to resize an Image background of a Style, I have an Image View that uses the style and shows the background image
Style:
<style name="Background">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">50dp</item>
<item name="android:orientation">horizontal</item>
<item name="android:background">#drawable/img_background</item>
</style>
So I have the "img_background", and it's size it's about 1920*1080, I want to resize it pefectly so it fits all devices sizes, How can make it resize automatically depending on the screen sizes?, Beacuse It doesn't work
It doesn't show the image properly is way off and is not resized properly to fit the screen.
I have a LinearLayout that has the style and then the Image view inside it. It doesn't fit the 1920*1080 properly, for example in a 800*480 resolution it is cropped off and not neatly resized
<LinearLayout
style="#style/Background"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:contentDescription="#null"
android:layout_marginBottom="8dip"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dip"
android:layout_marginTop="8dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:paddingLeft="15dip"
android:src="#drawable/img_background"
/>
</LinearLayout>
Thanks
Change layout_width and layout_height your xml
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>
Remove the style from the LinearLayout
Put this as your imageView:
<ImageView
android:contentDescription="#null"
android:layout_marginBottom="8dip"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dip"
android:layout_marginTop="8dip"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:clickable="false"
android:paddingLeft="15dip"
android:scaleType="centerInside"
android:src="#drawable/img_background" />
I m not satisfied with the result of my layout whenever I test it in landscape mode on different screen size devices.
In portrait I like the margin of the textview. Since my current image size of the imageview will not fill the full width of some devices out there in landscape there is some whitespace left and right to it, which is fine.
however, the margin of the textview should also take this whitespace into account and add it somehow. I know i can create a different xml style for landscape modes, but any fixed margin wont help here... thanks for any help in advance
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:src="#drawable/start1_8" />
<TextView
style="#style/DescriptionTitle"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"
android:text="Test Titelzeile" />
<style name="DescriptionTitle" parent="#android:style/TextAppearance">
<item name="android:textColor">#0099cc</item>
<item name="android:textStyle">bold|italic</item>
<item name="android:textSize">20sp</item>
<item name="android:layout_gravity">center_vertical|left</item>
<item name="android:gravity">top|left</item>
<item name="android:layout_marginLeft">15dp</item>
<item name="android:layout_marginRight">15dp</item>
<item name="android:layout_marginTop">5dp</item>
</style>
I would put it in a Relative Layout like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:src="#drawable/Untitled-1" />
<TextView
style="#style/DescriptionTitle"
android:id="#+id/textView1"
android:layout_alignLeft="#id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"
android:text="Test Titelzeile" />
</RelativeLayout>
Then it will be in the correct relative position regardless of view size or orientation.
resize the view in runtime and use(like screenwidth/4 ) a ratio hor image width and position.
use LayoutParams to do it.