I have one horizontal scroll view in that there are images if user scroll and further images are available than I need to display right side right arrow to indicate user to scroll it again and see other images.
Thanks in advance.
I've just came across this problem and I realized, that you can use scrollview fade function for this purpose. Simply use relative layout in which you have 3 view: leftarrow, rightarrow, horizontalscroll. Set fadingEdgeLength to sufficient length, so when the scrollview fades out, arrow will appear.
Example:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView android:src="#drawable/arrow_l"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" />
<ImageView android:src="#drawable/arrow_r"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
<HorizontalScrollView android:id="#+id/horizontalScroll"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="none"
android:fadingEdgeLength="20dp">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/harokLayout"
android:background="#EEEEEE"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:src="#drawable/icon" android:layout_height="wrap_content" android:layout_width="wrap_content" />
<ImageView android:src="#drawable/icon" android:layout_height="wrap_content" android:layout_width="wrap_content" />
<ImageView android:src="#drawable/icon" android:layout_height="wrap_content" android:layout_width="wrap_content" />
<ImageView android:src="#drawable/icon" android:layout_height="wrap_content" android:layout_width="wrap_content" />
<ImageView android:src="#drawable/icon" android:layout_height="wrap_content" android:layout_width="wrap_content" />
<ImageView android:src="#drawable/icon" android:layout_height="wrap_content" android:layout_width="wrap_content" />
<ImageView android:src="#drawable/icon" android:layout_height="wrap_content" android:layout_width="wrap_content" />
<ImageView android:src="#drawable/icon" android:layout_height="wrap_content" android:layout_width="wrap_content" />
<ImageView android:src="#drawable/icon" android:layout_height="wrap_content" android:layout_width="wrap_content" />
<ImageView android:src="#drawable/icon" android:layout_height="wrap_content" android:layout_width="wrap_content" />
</LinearLayout>
</HorizontalScrollView>
</RelativeLayout>
Related
I have an image (.png) that is sliced into 3 pieces top, middle, bottom.
(The pieces mentioned are not of the same size).
What I am trying to achieve is to have a layout where the original image is assembled from the above 3 pieces - but the middle piece should also display a textview over it.
In a sense, I have managed the most of the above, however with my current layout - when the text of the textview exceeds some length (horizontally or vertically) the image is then broken, as then there is a gap between middle and bottom part (vertical excess) or the middle part is shifted related to the top and the bottom (horizontal excess).
Actually what I want to achieve is that the textview will always remain the same size as the underlying middle imageview.
My layout code is as follows (The code will be used for android 4.0 +):
<?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"
android:background="#88666666"
android:id="#+id/top_layout">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="25dp" >
<ImageView
android:id="#+id/ivTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotetops" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivMiddle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotemiddles" />
<TextView
android:id="#+id/mytext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:text="ajsdhaj\n\n\n\n\n\n\nhdjajhsdjfhsdjdfjsdjfksdjfkjkfj\ndkfjkdjfkj"
/>
</RelativeLayout>
<ImageView
android:id="#+id/ivBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotebottoms" />
</LinearLayout>
</RelativeLayout>
Thanks.
do this for all three children of LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:weight="1dp"
for middle element do this for children of RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
Also you can ditch top RelativeLayout as it is redundant. Your final layout file should look like this
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="25dp"
android:background="#88666666"
android:id="#+id/top_layout">
<ImageView
android:id="#+id/ivTop"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="0dp"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotetops" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="0dp">
<ImageView
android:id="#+id/ivMiddle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotemiddles" />
<TextView
android:id="#+id/mytext"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:text="ajsdhaj\n\n\n\n\n\n\nhdjajhsdjfhsdjdfjsdjfksdjfkjkfj\ndkfjkdjfkj"
/>
</FrameLayout>
<ImageView
android:id="#+id/ivBottom"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="0dp"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotebottoms" />
</LinearLayout>
Finally, solved it by using android:layout_align... and referencing the middle imageview.
(I also, removed the unnecessary android:layout_alignParentRight="true" from middle imageview - but that was not the main problem here)
So, the final layout became:
<?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"
android:background="#88666666"
android:id="#+id/top_layout">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="25dp" >
<ImageView
android:id="#+id/ivTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotetops" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivMiddle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotemiddles" />
<TextView
android:id="#+id/mytext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:text="ajsdhaj\n\n\n\n\n\n\nhdjajhsdjfhsdjdfjsdjfksdjfkjkfj\ndkfjkdjfkj"
android:layout_alignLeft="#+id/ivMiddle"
android:layout_alignRight="#+id/ivMiddle"
android:layout_alignTop="#+id/ivMiddle"
android:layout_alignBottom="#+id/ivMiddle"
/>
</RelativeLayout>
<ImageView
android:id="#+id/ivBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotebottoms" />
</LinearLayout>
</RelativeLayout>
I have a gridLayout form 3 by 3. with in there imagebuttons.
the grid is working, but i want the images to fill the weight of the parent.
this is the code i have:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.tict.MainActivity"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<GridLayout
android:id="#+id/mygrid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:columnCount="3"
android:rowCount="3" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageButton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<ImageButton
android:id="#+id/imageButton6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<ImageButton
android:id="#+id/imageButton7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageButton8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageButton9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</GridLayout>
I want to keep the gridLayout if that is posible.
EDIT: I want 3 image buttons at the top row. All 3 being 1/3 weight of the parent.
You are using layout_width and layout_height properties with
wrap_content : , which means that the view wants to be just big enough to enclose its content (plus padding)
change to:
match_parent : which means that the view wants to be as big as its parent (minus padding)
I could't find a solution, so made a nested LiniarLayout.
Part of the new code is now:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/TG" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/ib_1"
android:layout_width="0dp"
android:layout_height="120dp"
android:layout_weight=".30"
android:background="#android:color/white"
android:contentDescription="#string/btn"
android:onClick="onClick"
android:scaleType="fitXY"
android:layout_margin="5dp"
/>
So i have layout like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/advantage_1" />
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/advantage_2" />
</RelativeLayout>
<ImageView
android:id="#+id/lower_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/line" />
</LinearLayout>
Because of aligning views inside the RelativeLayout it fills all the screen. How to set RelativeLayout's width same as lower ImageView(lower_image_view)?
Try like this. The main idea is you put your RelativeLayout and the ImageView inside another RelativeLayout. Then set android:layout_alignLeft="#+id/lower_image_view" and android:layout_alignRight="#+id/lower_image_view" of the child RelativeLayout. This will achieve the width of the ImageView. You may want to modify this to achieve your desired result, but you get the idea :)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<RelativeLayout
android:id="#+id/parentRelativeLayout"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignLeft="#+id/lower_image_view"
android:layout_alignRight="#+id/lower_image_view"
android:orientation="horizontal">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
<ImageView
android:id="#+id/lower_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
</RelativeLayout>
</LinearLayout>
I want to show three ImageViews at the bottom of the screen with equal weight. But the size of the images is not fixed. I want to show 2 images and one should be hidden, what should I do?
How to adjust the space in between three ImageViews which should be side by side of each other, and the 3rd ImageView should not overlap the two ImageViews which are visible on the screen?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/main_imge_1"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F9F939"
android:src="#drawable/ic_launcher"
android:layout_toLeftOf ="#+id/imageView6"
android:layout_alignParentBottom="true"
android:padding="15dp" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#54F71D"
android:src="#drawable/ic_launcher"
android:layout_alignParentBottom="true"
android:padding="15dp"
android:layout_margin="10dp" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#1DF7AB"
android:src="#drawable/ic_launcher"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/imageView6"
android:padding="15dp" />
</RelativeLayout>
Try this way
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center|bottom" >
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#F9F939"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#54F71D"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#1DF7AB"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Output
From what I was able to decrypt, you're probably trying to achieve this:
<?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="fill_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal">
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F9F939"
android:src="#drawable/ic_launcher"
android:padding="15dp"
android:layout_weight="1"
/>
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F9F939"
android:src="#drawable/ic_launcher"
android:padding="15dp"
android:layout_weight="1"
/>
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F9F939"
android:src="#drawable/ic_launcher"
android:padding="15dp"
android:layout_weight="1"
/>
</LinearLayout>
</RelativeLayout>
The result:
The key is to use an enclosing LinearLayout to hold your ImageViews and having that LinearLayout aligned to Bottom in your RelativeLayout.
Use android:layout_weight="1" for each ImageView. And replace your RelativeLayout to Linearlayout.
I have following layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" >
<ImageView
android:id="#+id/personal_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/dom_logo_new" />
<ImageView
android:id="#+id/round_corner_top_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/corner_white_left_top" />
<ImageView
android:id="#+id/round_corner_top_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/corner_white_right_top" />
<ImageView
android:id="#+id/round_corner_bottom_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:src="#drawable/corner_white_left_bottom" />
<ImageView
android:id="#+id/round_corner_bottom_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/corner_white_right_bottom" />
</RelativeLayout>
There is 1 main image (personal_image) and 4 small images.
I need display main image (personal_image) at center horizontal of the screen with 4 images at its each corner (top left, top right, bottom left, bottom right). but RelativeLayout has width and height of all screen.
How can I set the width and the height of RelativeLayout the same width and height of personal_image??
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" >
<ImageView
android:id="#+id/personal_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/round_corner_top_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/round_corner_top_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/round_corner_bottom_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/round_corner_bottom_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/round_corner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</LinearLayout>
As you are using wrap content you donot have to worry about different screen sizes.it will manage by its own.
I suggest you use a 9-patch instead of corner images which is the Android way to solve such issues.