I have few buttons in my app that i have applied circular png images on them but the edges gets pixelated, i don't know how to nine patch a circular image. If anybody knows a different way of doing it
Plzzz help
here is the code
<LinearLayout
android:id="#+id/containerofbluefi"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="30dp"
android:layout_weight="70"
android:gravity="center"
android:orientation="horizontal"
android:padding="5dp"
android:weightSum="100" >
<Button
android:id="#+id/b_Select_blue"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_margin="10dp"
android:background="#drawable/selector_bluetooth"
/>
<ImageView
android:id="#+id/b_Select_wifi"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_margin="10dp"
android:background="#drawable/selector_wifi"
/>
</LinearLayout>
here is the screeshot:-
you can see the upper and lower portion is blured....
Related
Really odd behaviour. I have a simple layout, 4 image views in one column that match up with 4 buttons on next column. I've used a gradient (subtle) background image - going from darker to lighter left to right.
The image view background image displays correctly, in that it has the darker color background as it's the left side of the background image. However the button background image is reversed with gradient going in the opposite direction.
Both the image and button views use the same background image. I can not understand why the background image is flipped on the button. Any ideas?
<androidx.constraintlayout.widget.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"
tools:context=".IndexMenuActivity">
<LinearLayout
android:layout_width="75dp"
android:layout_height="match_parent"
android:layout_marginLeft="0sp"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/redbkg"
app:srcCompat="#drawable/i_ax" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/bluebkg"
app:srcCompat="#drawable/i_mx" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/greenbkg"
app:srcCompat="#drawable/i_ref" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/yellowbkg"
app:srcCompat="#drawable/i_cal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="75dp"
android:orientation="vertical">
<Button
android:id="#+id/imageButton1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/redbkg"
android:onClick="subjectListMx"
android:text="ASSESSMENT"
android:textAppearance="#style/TextAppearance.AppCompat.Title"
android:textColor="#FFFFFF"
android:textSize="34sp" />
<Button
android:id="#+id/imageButton2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/bluebkg"
android:onClick="subjectListMx"
android:text="MANAGEMENT"
android:textColor="#FFFFFF"
android:textSize="34sp" />
<Button
android:id="#+id/imageButton3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/greenbkg"
android:onClick="subjectListRef"
android:text="REFERENCE"
android:textColor="#FFFFFF"
android:textSize="34sp"/>
<Button
android:id="#+id/imageButton4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/yellowbkg"
android:onClick="subjectListCal"
android:text="CALCULATOR"
android:textColor="#FFFFFF"
android:textSize="34sp"/>
</LinearLayout></androidx.constraintlayout.widget.ConstraintLayout>
Using a color meter, it does not appear that there's any flipping going on; the gradient starts with a lighter color on the left and moves to a darker color on the right for both the background of the image and the background of the text.
The problem is that you have two different gradients, so you go from light to dark and then light to dark again. You probably want to apply a single gradient to both views.
I am trying to insert an icon within a circular background image, but I'm having an issue with image sizing. The icon is currently larger than the circle, and I can't seem to resize it without also resizing the circle background. Here is my XML:
<android.support.v7.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/circle_dark_grey"
android:src="#drawable/calendar_icon" />
</android.support.v7.widget.LinearLayoutCompat>
I'm pretty new to android UI, so if there is a better way to do this, or if you know how to solve my issue please let me know!
Cheers
you can go by the following two approaches :
1 set padding for the imageview
<ImageView
android:padding="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/circle_dark_grey"
android:src="#drawable/calendar_icon" />
or
2 you can use framelayout like this
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<View
android:layout_gravity="center"
android:background="#drawable/circle_dark_grey"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:padding="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/calendar_icon" />
</FrameLayout>
I am trying to create a view in which there is a title at the top, an image in the middle, and a row of buttons at the bottom. I would like the image to be overlaid on top of all other views so that when I zoom in on the image, the image can take up the entire screen. I have it mostly working but only on smaller images. The problem I am facing is that when I get a large (tall) image, the image is initialized to the entire height of the view and my title/buttons are hidden behind the image.
How can I allow my image to be zoomed to the entirety of the view but also initialize the image size so that my buttons/title is not covered when a user arrives to this view?
I've tried wrap_content for height of the image and that only limits the size of my zoom image.
Example of image that gives me good results:
Example of image that is too tall that gives bad results:
My layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBgBlackTintDarkest"
android:orientation="vertical"
android:clickable="true"
>
<!-- Submission title/subreddit info -->
<LinearLayout
android:id="#+id/big_display_title_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp">
<TextView
android:id="#+id/big_display_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:gravity="center_horizontal"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Title about something random that we found on reddit while browsing yesterday"
android:textColor="#color/colorWhite"
android:textSize="18sp"
/>
<!--subreddit name-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_weight=".25"
android:orientation="horizontal"
android:paddingEnd="10dp">
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5" />
<TextView
android:id="#+id/big_display_subreddit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight=".5"
android:gravity="end"
android:text="/r/subreddit"
android:textColor="#color/colorWhite"
android:textSize="14sp"
android:textStyle="bold"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/big_display_snack_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/ic_white_chat"
android:id="#+id/big_display_snack_bar_comments"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/ic_white_upvote_medium"
android:id="#+id/big_display_snack_bar_upvote"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/ic_white_downvote_medium"
android:id="#+id/big_display_snack_bar_downvote"/>
<!-- overflow -->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_white_overflow_small"
android:id="#+id/big_display_snack_bar_overflow"/>
</LinearLayout>
<com.github.piasy.biv.view.BigImageView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/big_image_viewer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
/>
</RelativeLayout>
I've been working on an wallpaper app, which fetches some set of wallpapers (through an api of my choice), gives users features of sharing, setting as wallpaper directly (scrollable if it supports) or edit and set the picture.
This edit screen is where I face some bugs/issues.
I need the user to be able to crop/zoom/pan the image to their liking and set it as the wallpaper. Similar to how Nova wallpaper does it, where if the crop selection is reduced, the entire images zooms in accordingly to that selection. All this happens in a single imageview I believe.
But, in my case, I happen to use two imageviews, one for cropping and the other for zooming.
crop library: github-dot-com/edmodo/cropper/
Once, user crops, the second imageview is populated with the bitmap of selection from cropper. This imageview is used for zooming or panning.
zoom/pan library: github-dot-com/jasonpolites/gesture-imageview
Here is layout for that screen:
http://i.stack.imgur.com/wnjcP.jpg
And the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:gesture-image="http://schemas.polites.com/android"
android:id="#+id/scrollview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/mylayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusableInTouchMode="true"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/Button_crop"
style="#style/RoboTheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:text="#string/crop"
android:textColor="#33B5E5"
android:textSize="12sp" />
<ImageButton
android:id="#+id/Button_rotate_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rotate_left" />
<ImageButton
android:id="#+id/Button_rotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rotate_right" />
<Button
android:id="#+id/Button_setother"
style="#style/RoboTheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:text="#string/setother"
android:textColor="#33B5E5"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/checkboxlayout">
<CheckBox
android:id="#+id/scrollable"
style="#style/RoboTheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#33B5E5"
android:textSize="12sp"
android:checked="false"
android:text="Scrollable" />
<Button
android:id="#+id/Button_setwallpaper"
style="#style/RoboTheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:text="#string/setwallpaper"
android:textColor="#33B5E5"
android:textSize="12sp" />
</LinearLayout>
<com.edmodo.cropper.CropImageView
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:id="#+id/CropImageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center"
android:adjustViewBounds="true" />
<com.polites.android.GestureImageView
android:id="#+id/croppedImageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:contentDescription="#string/croppedImageDesc"
gesture-image:max-scale="10.0"
gesture-image:min-scale="0.1"
gesture-image:strict="false" />
</LinearLayout>
</ScrollView>
Whereas, I would like to some assistance in getting this layout efficient. Where I'm not required to scroll in different devices or base it on something similar to Nova Launcher's "Set Wallpaper" screen like:
http://i.stack.imgur.com/WaJRO.png
Any assistance is much appreciated!
Thanks,
Arnab
Nova Launcher's cropping activity is based on the CropImage.java from AOSP Gallery2 https://android.googlesource.com/platform/packages/apps/Gallery2/ . It's a bit of work to bring in all the required dependencies and then fix all the build issues for building against the SDK (like they might use mLeft in a view and you have to replace it with getLeft()).
i am having a problem with my imagebutton it does not align right when i specify the centerinparent.
<LinearLayout
android:layout_width="match_parent" android:layout_marginTop="4dp"
android:layout_marginLeft="4dp" android:layout_marginRight="4dp"
android:layout_height="50dp" android:background="#FF0000">
<RelativeLayout android:layout_height="match_parent"
android:layout_width="40dp" android:background="#0000FF">
<ImageView android:id="#+id/imgType"
android:layout_centerInParent="true" android:layout_width="wrap_content"
android:src="#drawable/type_text" android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout android:layout_height="match_parent"
android:layout_width="match_parent" android:layout_weight="1">
<LinearLayout android:orientation="vertical"
android:layout_height="match_parent" android:layout_width="match_parent">
<TextView android:layout_width="match_parent"
android:textColor="#686a68" android:layout_height="match_parent"
android:textSize="15dp" android:text="Manifest : Text"
android:ellipsize="end" android:singleLine="true"
android:layout_weight="1" />
<TextView android:layout_width="match_parent"
android:textColor="#686a68" android:layout_height="match_parent"
android:textSize="15dp" android:id="#+id/txtTitle" android:text="[TEXT NAME]"
android:layout_weight="1" android:singleLine="true"
android:ellipsize="end" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout android:layout_height="match_parent"
android:layout_width="60dp" android:background="#00FF00">
<ImageButton android:src="#drawable/type_text"
android:layout_height="48dp" android:layout_centerInParent="true"
android:layout_width="48dp" android:id="#+id/butEdit" />
</RelativeLayout>
</LinearLayout>
image
As you can see the vertical alignment of the imagebutton is not right.
why is it doing this.
Have you tried running this on the emulator and using the hierarchyviewer tool (in the "tools" folder of the SDK. Click on your app in the list and select "Load View Hierarchy" ) to inspect the elements in question? Have a look at the margins and padding of both the problem control & its container. Also look at the widths of the various components and it may give you a clue as to where the problem is occurring.
Also check that your drawable in #drawable/type_text does not contain any space around it which could be causing a perceived offset (unlikely, I think).
I have occasionally seen odd problems scaling images, so if #drawable/type_text is not 48x48 pixels, try manually scaling the image to the desired size in Photoshop / GIMP / PSP and see if that makes a difference.
Alternatively try using gravity to try to centre your control:
<LinearLayout android:layout_height="match_parent" android:gravity="center"
android:layout_width="60dp" android:background="#00FF00">
<ImageButton android:src="#drawable/type_text"
android:layout_height="48dp"
android:layout_width="48dp" android:id="#+id/butEdit" />
</LinearLayout>
Or maybe:
<LinearLayout android:layout_height="match_parent" android:gravity="center"
android:layout_width="wrap_content" android:background="#00FF00">
<ImageButton android:src="#drawable/type_text"
android:layout_height="48dp" android:layout_width="48dp"
android:layout_margin="12dp" android:id="#+id/butEdit" />
</LinearLayout>
If all else fails, try tweaking the individual android:layout_margin* attributes of the ImageButton to try and force things.
I hope that some of this helps.