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>
Related
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="96dp"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingStart="24dp"
android:paddingBottom="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/pushIcon"
android:layout_width="16dp"
android:layout_height="16dp"
app:srcCompat="#drawable/push_icon" />
<TextView
android:id="#+id/textView23"
style="#style/TextAppearance.Compat.Notification.Info.Media"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:text="YOLOL"
android:textColor="#color/browser_actions_title_color" />
</LinearLayout>
<TextView
android:id="#+id/text_view_collapsed_1"
style="#style/TextAppearance.Compat.Notification.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="New Message!"
android:textColor="#color/colorPrimary" />
<TextView
android:id="#+id/text_view_collapsed_2"
style="#style/TextAppearance.Compat.Notification.Info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Expand to show!" />
</LinearLayout>
<ImageView
android:id="#+id/notifPreviewImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
app:srcCompat="#drawable/bb" />
</LinearLayout>
The pushIcon ImageView takes the place but is invisible, any idea why?
A quick tip that always helps in the debug process - add a background color to the view in question (also helps to set a specific Width and Height as well for testing) - it will enable you to see if the view is being rendered at all or not. If you see the background color, then the view is being rendered properly, but the image is not loading correctly. Without knowing this, it could be any combination of those issues.
With that aside, if you are dynamically changing the icon at runtime, I would look at your code there. If this is a static image then I would check that your resource file is a Vector drawable as that is only allowed when using app:srcCompat="#drawable/push_icon"
If your file is a non-vector drawable, then use android:src="#drawable/push_icon"
Here's a discussion that elaborates on this in more detail.
I want to have a button like this.
It's basically a Text: NEXT with a Chevron on the right side.
I already tried a button with transparent background and android:drawableRight, but the padding of the drawable was looking weird.
How can I achieve the wanted look?
What I have so far:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next"
android:textColor="#color/colorAccent"
android:drawableRight="#drawable/chevron_right"
android:background="#00000000"/>
/Sorry for posting a link and not the photo directly, but my reputations aren't high enough./
You can do it using a FrameLayout/RelativeLayout containing the ImageButton and an horizontal LinearLayout/RelativeLayout which contains the text and the chevron image aligned to the right. Something like this:
<FrameLayout
android:id="#+id/fl_btn_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/imbtn_btn_bg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:src="#drawable/white_drawable" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<TextView
android:id="#+id/tv_btn_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginRight="10dp"
android:gravity="center_horizontal"
android:text="#string/next" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/tv_btn_text"
android:src="#drawable/chevron" />
</RelativeLayout>
</FrameLayout>
This example is from my app, probably you'll need to adapt it.
Have you tried setting the spaces between the views of chevron and borders with negative values of dp .
I had a similar problem last year and a proper combination of positive and negative dp fixed it
You can use android:drawablePadding="8dp" to set the padding between the text and the drawable.
I'm not sure what you want but that's how I will do the button you attached
<RelativeLayout
android:layout_width="80dp"
android:background="#color/colorAccent"
android:layout_height="40dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NEXT"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/arrow_up_float"/>
</LinearLayout>
</RelativeLayout>
I need to put two images one below the other in the center of the screen. They need to be in the center. the images will keep changing depending on the code so how do i get the images to work on all screens without moving or the size increasing or decreasing?
I tried using grid view but it seems too much code for two images. it works but is there anything more efficient?
For this type of design i always create a center point on screen,check below code -
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_centerHorizontal="true"
android:layout_above="#+id/center_point" />
<View
android:id="#+id/center_point"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<ImageView
android:id="#+id/image2"
android:src="#drawable/ic_launcher"
android:layout_below="#+id/center_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
it will surely works.
All the best
If u have always only 2 images, you can set it in xml file like that:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
First image centers in parent and the second one centers horizontal and also aligns bottom of the screen.
Good luck.
Here this code may help you.You must create one LinearLayout and set him vertical orientation and layout_gravity = center horizontal.After that create two image views which are automatic position in center of the screen one below other.I hope this will help you.Happy coding :)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/image_view_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/image_view_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Make a vertical Linear-layout that contains both of your ImageViews and then set an equal layout_weight for both of them. Set the layout_centerInParent true for your Linear_layout
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/lock_layout_keypad"
android:orientation="vertical"
android:layout_centerInParent="true"
android:layout_marginBottom="4dp">
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</LinearLayout>
You can remove android:layout_weight.
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'm new to Android and everything went well until now I have to deal with the layout.
What I want is this layout:
Layout how it should be:
The image should be properly scaled and keep its ratio.
That's why I tried this XML code, but it doesn't work the way I want. The image keeps its ratio but the left and right side are out of the screen when vertical and cut at the top and bottom when horizontal:
Layout how it is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:background="#color/background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:src="#drawable/logo"
android:gravity="center"
android:scaleType="centerCrop"
android:contentDescription="#string/app_logo"
android:layout_weight="2.5" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="center">
<Button
android:id="#+id/id1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="20dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/text1"
android:textSize="40sp"
/>
<Button
android:id="#+id/id2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/text2"
/>
<Button
android:id="#+id/id3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_gravity="center"
android:text="#string/text3" />
</LinearLayout>
</LinearLayout>
I googled a lot but just could not find what I was looking for.
Please help!
It looks like android:scaleType="fitCenter" is what you are looking for
you have to design 2 layout for you vertical state and horizontal state and put them in two different folder in your android project:
while you put your regular layout in the layout folder you should put the landscape layout in the layout-land folder.
Try setting android:scaleType="fitXY" to your ImageView.