I develop a photo album app. I would like to place photos on screen like the following layout :
For this purpose, I decided to place a vertical linear layout at outside of all. Then place RelativeLayouts for each row. In each RelativeLayouts in a row, I put two relative layouts to contain the ImageViews. In each RelativeLayout I size them with proper "dp" as I draw at the image above.
My question is, can it be the same view in different phones with different resolutions ? If so, what would be the proper approach to have the view that I show above ?
Thanks
Use linear layout completely and make sure you know what layout_weight does.
refer the following
http://developer.android.com/guide/topics/ui/declaring-layout.html#CommonLayouts
http://developer.android.com/guide/topics/ui/layout/linear.html#Weight
Try this...its only for 1 row, but you get the idea..this is inside vertical linear layout..
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:src="#drawable/ic_launcher"
android:layout_weight="1"
android:layout_gravity="center_horizontal"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Related
I've tried several things but my image always appears as a proportionally scaled down version of itself. I want it to take up the full width available to it and for it to bleed over the image boundaries height-wise.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/messageImageLayout"
android:layout_width="match_parent"
android:layout_height="150dp"
android:gravity="center_horizontal|center_vertical">
<ImageView
android:id="#+id/messageImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/test"
android:visibility="gone" />
</LinearLayout>
How it looks now:
What I want:
Replace android:scaleType="fitXY" with android:scaleType="centerCrop" instead
I dont understand Why nothing appears on the display. I can see the Button and the ImageView (zauberer) but otherwise nothing.. can someone help me?
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/halbtransparent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/dialoghintergrund"
android:id="#+id/willdialog"
android:layout_margin="20dp" />
<ImageView
android:scaleType="fitXY"
android:id="#+id/zauberer"
android:layout_marginTop="40dp"
android:layout_marginLeft="50dp"
android:layout_marginStart="50dp"
app:srcCompat="#drawable/zaubererdialoghg"
android:layout_height="55dp"
android:layout_width="43dp" />
<ImageButton
android:id="#+id/btn_verstanden"
android:scaleType="fitXY"
android:layout_width="130dp"
android:layout_marginTop="410dp"
android:layout_gravity="center_horizontal"
android:background="#00000000"
android:layout_height="50dp"
app:srcCompat="#drawable/btn_verstanden"/>
Couple of suggestion:
fill_parent is deprecated use match_parent
use android:src instead of app:srcCompat
you are using static Dp values android:layout_marginTop="410dp" which will be varied in different devices according to pixel density.
use layout_weight , weightSum , adJustViewBounds , Gravity to align your views..
Best practice to use different size drawable iamges in your mdpi , hdpi , xhdpi etc folder.
Try this:
<LinearLayout 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"
android:background="#color/colorPrimary"
android:orientation="vertical">
<ImageView
android:id="#+id/willdialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/zauberer"
android:layout_width="43dp"
android:layout_height="55dp"
android:layout_marginLeft="50dp"
android:layout_marginStart="50dp"
android:layout_marginTop="40dp"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
<ImageButton
android:id="#+id/btn_verstanden"
android:layout_width="130dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="100dp"
android:background="#00000000"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
Nothing is displayed in Activity or Android Studio? Have you closed the Framelayout tag? try to use Relativelayout. Make sure you have setContentView in your Activity.
This happens because child layouts in FrameLayout overlap each other and the child written at the bottom is drawn over the others. Use LinearLayout with orientation set to vertical to resolve the problem.
I got such issue with my RecyclerView
I need to present to user images that I downloaded with help of picasso lib from web to my RecyclerView. Eventually it looks like this
As you can see I need to scratch my images, but in proper aspect ratio of course.
I went to my XML file and set attribute in my ImageView android:scaleType="fitXY"
now my ImageView looks like this
<ImageView
android:id="#+id/imageViewMainCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
/>
and here is result that I got
as you can see now image fill all available space, but them doesn't scratch with propriety aspect ratio. Images scratch width more than height and does't looks nice...
Also here is my XML file
<?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="wrap_content"
android:paddingBottom="3dp"
android:paddingEnd="3dp"
android:paddingStart="3dp"
android:paddingTop="3dp"
>
<LinearLayout
android:id="#+id/cardMainActivityLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<com.balysv.materialripple.MaterialRippleLayout
android:id="#+id/rippleInbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mrl_rippleColor="#color/ntz_background_light_grey"
app:mrl_rippleOverlay="true"
>
<ImageView
android:id="#+id/imageViewMainCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
/>
</com.balysv.materialripple.MaterialRippleLayout>
<RelativeLayout
android:id="#+id/rlCardMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:padding="4dp"
>
<TextView
android:id="#+id/tvBrandName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<TextView
android:id="#+id/tvItemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvBrandName"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<TextView
android:id="#+id/tvPreviousPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvItemName"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<TextView
android:id="#+id/tvDivider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvPreviousPrice"
android:layout_toEndOf="#+id/tvPreviousPrice"
android:text=" / "
android:textSize="10dp"
android:visibility="gone"
/>
<TextView
android:id="#+id/tvPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvDivider"
android:layout_toEndOf="#+id/tvDivider"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<Button
android:id="#+id/bAction"
android:layout_width="70dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:textSize="8dp"
/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
What am I doing wrong?
Edit1
There is a result of android:scaleType="centerCrop" attributes
It is also not so nice when women don't have head))
Edit2
There is result of android:scaleType="centerInside"
To answer your question, please use centerCrop to center the image absolute to it's parent. Also add this attribute, android:adjustViewBounds="true". With this the aspect ratio of the image will be preserved.
fitXY uses FILL which is described as "Scale in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src" in the Android Documentation.
You should use centerInside to center, fit and scale while keeping the aspect ratio
Alright the problem is that your layout does not respect the bounds of your image.To remedy this, wrap the image-view in a separate parent layout , add a parent weight to the layout it self with layout_weight="1".Then set the width relative to the layout with android:layout_width="0px", to avoid tearing and proper bounds coordination set android:adjustViewBounds="true". To center and crop the image at it's center use android:scaleType="centerCrop".
Please I have problem with size in textView
I have .xml code, where I use linear/horizontal/frame layout and I have in layout some object (textview) and have same text in textviews.
I need switch text size according to Phone display.
but if I put 130dp is not good for small display.
little of my code
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2">
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="88"
android:id="#+id/hlc"
android:textSize="130dp"
android:textIsSelectable="false"
android:gravity="end"
android:textStyle="bold" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingTop="0dp"
android:layout_weight="10">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="°"
android:id="#+id/textView15"
android:textSize="#android:dimen/notification_large_icon_width"
android:textIsSelectable="false"
android:textStyle="bold"
android:layout_weight="9"
android:textAlignment="viewStart" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="8"
android:id="#+id/hld"
android:textSize= "#android:dimen/notification_large_icon_width"
android:textStyle="bold"
android:textAlignment="viewStart"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
if i use #android:dimen/thumbnail_width it's too big for my formated display
I need to fill in framelayput with text in textview.
I can't put image here :(
... and how are used values-small, values-large, etc ? example please. example declarate and example use in xml.
Thanks.
What you can do is create different dimension folder for different size with different sp (better to use sp than dp for text size).
check this documentation for better understatement
and also check this
I know a ton of questions on this topic have been asked but none seem to work for me. I have a linear layout with an an edit text and icons below but when the keyboard pops up it covers the icons and half the edit text.
My Manifest File:
<activity
android:name="com.social.pages.Post"
android:windowSoftInputMode="stateVisible|adjustResize"
android:screenOrientation="portrait" >
</activity>
My Layout File:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/feed_bg" >
<LinearLayout
android:id="#+id/stories_post_entire"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/story_post"
android:layout_centerHorizontal="true"
android:background="#drawable/bg_parent_rounded_corner"
android:orientation="vertical"
android:paddingBottom="#dimen/feed_item_padding_top_bottom"
android:paddingTop="#dimen/feed_item_padding_top_bottom" >
<!--
<LinearLayout
android:id="#+id/stories_post_text"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_marginTop="15dp"
android:orientation="horizontal"
android:paddingBottom="#dimen/feed_item_padding_top_bottom"
android:paddingLeft="#dimen/feed_item_padding_left_right"
android:paddingRight="#dimen/feed_item_padding_left_right" >
-->
<EditText
android:id="#+id/stories_post_story"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:background="#drawable/bg_parent_rounded_corner"
android:ems="10"
android:gravity="top"
android:hint="Tell Your Story..."
android:padding="10dp"
android:paddingLeft="10dp"
android:scrollbars="vertical"
android:typeface="serif" />
<LinearLayout
android:id="#+id/stories_post_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:paddingLeft="#dimen/feed_item_padding_left_right"
android:paddingRight="#dimen/feed_item_padding_left_right" >
<ImageView
android:id="#+id/stories_post_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/tag" />
<ImageView
android:id="#+id/stories_post_take_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:scaleType="fitCenter"
android:src="#drawable/take_pic" />
</LinearLayout>
</LinearLayout>
<!-- </LinearLayout> -->
<Button
android:id="#+id/story_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Post" />
</RelativeLayout>
No Java code has been written yet.
You're setting the EditText element to 300dp height which prevents anything from moving up. I was able to fix this by wrapping the EditText and following LinearLayout (that houses your images) in a RelativeLayout. By doing this, you can set the image-housing LinearLayout to alignParentBottom="true". I believe this is your desired effect.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/stories_post_entire"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/story_post"
android:layout_centerHorizontal="true"
android:orientation="vertical" >
<!-- ADDITION -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/stories_post_story"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:ems="10"
android:gravity="top"
android:hint="Tell Your Story..."
android:padding="10dp"
android:paddingLeft="10dp"
android:scrollbars="vertical"
android:typeface="serif" />
<LinearLayout
android:id="#+id/stories_post_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_marginTop="10dp" >
<!-- ADDITION ^^^ alignParentBottom-->
<ImageView
android:id="#+id/stories_post_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/osumu_blur"/>
<ImageView
android:id="#+id/stories_post_take_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:scaleType="fitCenter"
android:src="#drawable/osumu_blur"/>
</LinearLayout>
<!-- ADDITION -->
</RelativeLayout>
</LinearLayout>
<!-- </LinearLayout> -->
<Button
android:id="#+id/story_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Post" />
</RelativeLayout>
NOTE: I replaced your drawable src with "dummy_image"
THe only thing you can do about the soft keyboard is to set the android:windowSoftInputMode in the manifest (or to change it on the fly programatically). The allowed modes are basically nothing (just let the keyboard pop up and cover whatever), pan (scrolls the app such that the cursor is on the screen), and resize (resizes your app to lay out completely above the keyboard).
You obviously want resize. However to make that work, your layout needs to be resizable- there needs to be some element that can be shrunk and still fit your app in the smaller size, or there needs to be empty space that can be shrunk. If you have to much on screen, that won't work. And in that case Android will still ensure that the cursor is on screen, but will not do anything else.
Looking at your layout- I don't see anything that can shrink. You may be able to refactor it to make the edit text use fill_parent so it can be shrunk, but that would require making it (or its direct parent) layout_above and layout_below two other elements so it is sized to be the remaining space between them. That's about all I can see for you to do, other than remove elements.