I have a RelativeLayout with multiple ImageViews and when I turn around the screen, the ImageViews become disordered. So I decided to wrap it into a ScrollView. But the ScrollView doesn't work!
Can any one help me with that? I know that the right way is to design a GridView or ListView, but since I had some questions and no one answered me, I decided to go this way.
Here is my xml code :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="none" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/continuePizza"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="continue" />
<Button
android:id="#+id/finishP"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/continuePizza"
android:layout_alignParentLeft="true"
android:text="finish" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="16dp"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="18dp"
android:layout_toRightOf="#+id/imageView1"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_marginTop="18dp"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView3"
android:layout_centerVertical="true"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView3"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView5"
android:layout_marginTop="17dp"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView2"
android:layout_alignTop="#+id/imageView5"
android:layout_marginLeft="10dp"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView7"
android:layout_alignTop="#+id/imageView3"
android:src="#drawable/download" />
</RelativeLayout>
</ScrollView>
Simple Solution, just add android:fillViewport="true" to Scrollview like :
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout ....... />
</ScrollView>
I experienced same problem with Relative Layout within Scroll View to overcome this i wrapped around my relative layout with a linear layout , try like this and also remove orientation from relative layout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="none" >
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="#+id/continuePizza"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="continue" />
<Button
android:id="#+id/finishP"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/continuePizza"
android:layout_alignParentLeft="true"
android:text="finish" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="16dp"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="18dp"
android:layout_toRightOf="#+id/imageView1"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_marginTop="18dp"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView3"
android:layout_centerVertical="true"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView3"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView5"
android:layout_marginTop="17dp"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView2"
android:layout_alignTop="#+id/imageView5"
android:layout_marginLeft="10dp"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView7"
android:layout_alignTop="#+id/imageView3"
android:src="#drawable/download" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
When you use the ScrollView, you should know that you only can scroll when height of ScrollView smaller than height of ScrollView's child.
To solve this problem, you can define the Height of LinearLayout to match_parent, which is the only child of ScrollView. Then define the Height of ScrollView in the Java code, like scrollView.getChildAt(0).getHeight() - 1; to make sure the height of ScrollView smaller than height of ScrollView's child.
For your own answer, it's not a good way to use magic numbers in your code, like 427dp and 548dp.
I could solve my question with help of dear Ravi and a little bit change :
the code goes like that :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="none" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="427dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="548dp" >
<Button
android:id="#+id/continuePizza"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="continue" />
<Button
android:id="#+id/finishP"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/continuePizza"
android:layout_alignParentLeft="true"
android:text="finish" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="16dp"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="18dp"
android:layout_toRightOf="#+id/imageView1"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_marginTop="18dp"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView3"
android:layout_centerVertical="true"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView3"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView5"
android:layout_marginTop="17dp"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView2"
android:layout_alignTop="#+id/imageView5"
android:layout_marginLeft="10dp"
android:src="#drawable/download" />
<ImageView
android:id="#+id/imageView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView7"
android:layout_alignTop="#+id/imageView3"
android:src="#drawable/download" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
Related
I have these image buttons, the image for the image button are store in the
drawable file. However, i just cannot fill the image button with the image.
There will still be some empty space left which make it not that beautiful.
Is there any way to make the image button fully fill with image? Here shows
my image button xml code.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/RelativeLayout01"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/homepage"
android:layout_marginLeft="80dp"/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="85dp"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/buttonSignUP"
android:layout_gravity="right"
android:layout_marginLeft="40dp"/>
</LinearLayout>
<SearchView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/searchView"
android:layout_below="#+id/viewFlipper"
android:layout_alignParentStart="true"
android:text="Search a product"
android:layout_alignParentEnd="true"
android:layout_marginTop="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Featured promotion"
android:id="#+id/textView"
android:layout_below="#+id/searchView"
android:layout_alignParentStart="true"
android:layout_marginTop="20dp" />
<ViewFlipper
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/view_flipper"
android:layout_alignEnd="#+id/imageButton2"
android:layout_marginTop="20dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/banner5" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/banner6" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/banner7" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/banner8" />
</RelativeLayout>
</ViewFlipper>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Categories"
android:id="#+id/textView2"
android:layout_below="#+id/textView"
android:layout_marginTop="40dp" />
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton"
android:layout_below="#+id/textView2"
android:src="#drawable/fashion"
android:layout_toStartOf="#+id/imageButton3" />
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton2"
android:layout_alignParentEnd="true"
android:layout_below="#+id/textView2"
android:src="#drawable/book"
android:layout_above="#+id/imageButton5"
android:layout_gravity="center_vertical"
android:layout_marginLeft="40dp"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton3"
android:src="#drawable/sport"
android:layout_alignTop="#+id/imageButton2"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/imageButton2"
android:layout_gravity="center_vertical" />
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton4"
android:layout_below="#+id/imageButton"
android:layout_alignParentStart="true"
android:src="#drawable/healthcare"
android:layout_marginLeft="40dp"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton5"
android:layout_alignTop="#+id/imageButton4"
android:layout_alignEnd="#+id/imageButton2"
android:src="#drawable/computer"
android:layout_alignBottom="#+id/imageButton4"
android:layout_alignStart="#+id/imageButton2" />
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton6"
android:layout_alignBottom="#+id/imageButton4"
android:src="#drawable/phone"
android:layout_alignTop="#+id/imageButton4"
android:layout_alignEnd="#+id/imageButton3"
android:layout_toEndOf="#+id/imageButton4"
android:layout_marginLeft="40dp"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton7"
android:src="#drawable/stationary"
android:layout_below="#+id/imageButton4"
android:layout_alignParentStart="true" />
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton8"
android:src="#drawable/others"
android:layout_below="#+id/imageButton5"
android:layout_alignStart="#+id/imageButton6"
android:layout_alignEnd="#+id/imageButton6"
android:layout_marginLeft="40dp"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>
Yes you can use android:scaleType="fitXY"
OR
android:scaleType="fitCenter"
For eg.
<ImageButton
android:id="#+id/imageButton"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_below="#+id/textView2"
android:adjustViewBounds="true"
android:background="#null"
android:src="#drawable/fashion"
android:scaleType="fitCenter" />
Well you can use the android:scaleType attribute to fill the ImageButton. I generally use fitXY or fitCenter to cover the ImageButton with the image. To remove gray background, use android:background="#null". For example -
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton2"
android:layout_alignParentEnd="true"
android:layout_below="#+id/textView2"
android:src="#drawable/book"
android:layout_above="#+id/imageButton5"
android:layout_gravity="center_vertical"
android:layout_marginLeft="40dp"
android:scaleType="fitXY"
android:background="#null" />
Add ScaleType
android:scaleType="fitXY"
and Background as null to remove grey background
android:background="#null"
you can use android:scaleType="fitXY"
I have a Horizontal LinearLayout that have ImageView arrow left, HorizontalScrollView and ImageView arrow right. HorizontalScrollView have some ImageViews and I think it pushes the right arrow off the screen.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/arrowLeft
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrowLeft"
android:layout_marginTop="30dp"
android:layout_marginLeft="20dp"/>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="55dp"
android:layout_marginTop="20dp"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/buttonToDoor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_todoor" />
<ImageView
android:id="#+id/buttonWomen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_women" />
<ImageView
android:id="#+id/buttonCommerce"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_commerce" />
<ImageView
android:id="#+id/buttonPause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_pause" />
<ImageView
android:id="#+id/buttonTrunk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_trunk" />
<ImageView
android:id="#+id/buttonSnack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_snack" />
<ImageView
android:id="#+id/buttonSmoke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_smoke" />
<ImageView
android:id="#+id/buttonWifi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_wifi" />
<ImageView
android:id="#+id/buttonPackage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_package" />
</LinearLayout>
</HorizontalScrollView>
<ImageView
android:id="#+id/arrowRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rightArrow"
android:layout_marginTop="30dp"/>
</LinearLayout>
Image:
How could I show the right arrow?
Change the width of the HorizontalScrollView to 0dip and add to the attribute weight with value of 1
<HorizontalScrollView
android:layout_width="0dip"
android?layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="55dp"
android:layout_marginTop="20dp"
android:scrollbars="none">
This will make it fill all space available not ocuppied by other views (the arrows)
You can also achieve it by using Relative layout as a parent layout instead of Linear Layout , update your code as following:-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/arrowLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrowLeft"
android:layout_marginTop="30dp"
android:layout_marginLeft="20dp"/>
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/arrowLeft"
android:layout_toLeftOf="#+id/arrowRight"
android:layout_marginTop="20dp"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/buttonToDoor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_todoor" />
<ImageView
android:id="#+id/buttonWomen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_women" />
<ImageView
android:id="#+id/buttonCommerce"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_commerce" />
<ImageView
android:id="#+id/buttonPause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_pause" />
<ImageView
android:id="#+id/buttonTrunk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_trunk" />
<ImageView
android:id="#+id/buttonSnack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_snack" />
<ImageView
android:id="#+id/buttonSmoke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_smoke" />
<ImageView
android:id="#+id/buttonWifi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_wifi" />
<ImageView
android:id="#+id/buttonPackage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_package" />
</LinearLayout>
</HorizontalScrollView>
<ImageView
android:id="#+id/arrowRight"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrowLeft"
android:layout_marginTop="30dp"
android:layout_marginRight="20dp"/>
</RelativeLayout>
You can use simply weight-property of xml...
just paste this code in your xml....
<?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="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/arrowLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrowLeft" />
<HorizontalScrollView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scrollbars="none" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/buttonToDoor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonWomen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonCommerce"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonPause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonTrunk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonSnack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonSmoke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonWifi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonPackage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</HorizontalScrollView>
<ImageView
android:id="#+id/arrowRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rightArrow" />
</LinearLayout>
</LinearLayout>
I'm trying to create two number pickers in android. However i try to center them both at the bottom. I tried to mix up relative and linear layout, but i was not able to fix it.
The images shows how the buttons are placed at the moment. The red squares show how i want the buttons to be displayed.
Hope you can help me.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.pvdl.ndwatch.NDwatchActivity$PlaceholderFragment" >
<ImageView
android:id="#+id/background"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:scaleType="centerCrop"
android:src="#drawable/background" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/nd_text"
android:textColor="#color/red"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="#drawable/ic_launcher" />
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_marginLeft="150dp"
android:layout_marginTop="90dp"
android:background="#00ABCC" />
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="20dp"
android:text="#string/title"
android:textColor="#404041"
android:textSize="60sp" />
<TextView
android:id="#+id/title2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="200dp"
android:layout_marginTop="30dp"
android:text="#string/title2"
android:textColor="#404041"
android:textSize="50sp" />
<RelativeLayout
android:id="#+id/frame"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true" >
</RelativeLayout>
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="270dp"
android:layout_height="270dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#android:color/transparent"
android:indeterminate="false"
android:max="100"
android:progress="0"
android:progressDrawable="#drawable/circular_progress_bar" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignBottom="#+id/background"
android:layout_centerHorizontal="true"
android:layout_marginBottom="60dp"
android:background="#android:color/transparent"
android:onClick="onNDstart"
android:scaleType="fitXY"
android:src="#drawable/custom_button" />
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageButton1"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:background="#android:color/transparent"
android:text="Chronometer"
android:textColor="#000000"
android:textSize="70sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/background"
android:layout_marginBottom="40dp"
android:layout_centerHorizontal="true"
android:text="#string/start"
android:textColor="#color/red"
android:textStyle="bold" />
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_weight="1"
android:entries="#array/shutter_times"
/>
<NumberPicker
android:id="#+id/numberPicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:entries="#array/nd_values"
android:gravity="bottom" />
</RelativeLayout>
Change your xml to this:
<RelativeLayout ...>
....
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:weightSum="2" >
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/shutter_times" />
<NumberPicker
android:id="#+id/numberPicker1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/nd_values" />
</LinearLayout>
</RelativeLayout>
If you want a space between the buttons just add a paddingRight to the left button and the same value to the paddingLeft of the right button.
Hope this helps.
In the below linear layout, how can I get the image for the first ImageView to be aligned to the left...
<LinearLayout
android:id="#+id/id1"
android:layout_width="match_parent"
android:orientation="horizontal"
android:background="#ABABAB"
android:weightSum="3"
android:gravity="center_vertical"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="2"
android:clickable="false"
android:contentDescription="Button"
android:src="#drawable/ic_launcher1" />
<ImageView
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:contentDescription="Button"
android:src="#drawable/ic_action_refresh"
/>
<ImageView
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="Button"
android:src="#drawable/ic_action_settings"
/>
</LinearLayout>
Have tried to do it various ways, but no success so far. Any help is appreciated.
My guess is that the scaleType is causing your images to be centered, even though the views may line up. To fix this, Just set the scaleType attribute for both:
android:scaleType="fitStart"
How about this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" >
</ImageView>
<ImageView
android:id="#+id/imageView1"
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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/imageView1"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
try this code instead of :take relative layout for it
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/id1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ABABAB"
android:gravity="center_vertical"
android:orientation="horizontal"
android:weightSum="3" >
<ImageView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:contentDescription="Button"
android:gravity="left"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button3"
android:contentDescription="Button"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:contentDescription="Button"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
I want each TextView appear under each ImageButton but the TextView in my case does not appear at all and I don't understand why. Thank you for helping.
This is my activity.xml :
<ImageView
android:id="#+id/imageView1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:src="#drawable/logo" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/imageButtonProjet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/projet" />
<ImageButton
android:id="#+id/imageButtonWorkitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/workitem" />
<ImageButton
android:id="#+id/imageButtonUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/user" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageButtonProjet"
android:layout_marginLeft="32dp"
android:text="Projects"
android:textColor="#color/text_color" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageButtonWorkitem"
android:layout_marginLeft="62dp"
android:text="WorkItem"
android:textColor="#color/text_color" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageButtonUser"
android:layout_marginBottom="28dp"
android:layout_marginLeft="65dp"
android:text="Users"
android:textColor="#color/text_color" >
</TextView>
</LinearLayout>
I would greatly appreciate your help.Thanks in advance
layout_below works only for relative layouts.If you still want to do using LinearLayout then here is how.You are just using one LinearLayout that has a horizontal orientation. All this does it arrange the items horizontally and so the textviews go out of the screen. You need a 2 child LinearLayouts that has orientation set to horizontal and the parent with orientation vertical.
<ImageView
android:id="#+id/imageView1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:src="#drawable/logo" />
<LinearLayout
android:id="#+id/linearLayout_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/imageButtonProjet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/projet" />
<ImageButton
android:id="#+id/imageButtonWorkitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/workitem" />
<ImageButton
android:id="#+id/imageButtonUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/user" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:text="Projects"
android:textColor="#color/text_color" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="62dp"
android:text="WorkItem"
android:textColor="#color/text_color" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="28dp"
android:layout_marginLeft="65dp"
android:text="Users"
android:textColor="#color/text_color" >
</TextView>
</LinearLayout>
</LinearLayout>
android:layout_below
Doesn't apply to LinearLayout. You should be using RelativeLayout to force items to appear in positions in relation to each other.
Depending on where you want your ImageButtons to appear, you might need to add something like
<ImageButton
android:id="#+id/imageButtonWorkitem"
android:layout_below="#id/imageButtonWorkitem"
or
<ImageButton
android:id="#+id/imageButtonWorkitem"
android:layout_toRightOf="#id/imageButtonWorkitem"
You need to alternate between your imageviews within the linear layout. Also, you might not be seeing the textviews at all because the overall layout might be too tall.
<ImageView
android:id="#+id/imageView1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:src="#drawable/logo" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/imageButtonProjet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/projet" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageButtonProjet"
android:layout_marginLeft="32dp"
android:text="Projects"
android:textColor="#color/text_color" >
</TextView>
<ImageButton
android:id="#+id/imageButtonWorkitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/workitem" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageButtonWorkitem"
android:layout_marginLeft="62dp"
android:text="WorkItem"
android:textColor="#color/text_color" >
</TextView>
<ImageButton
android:id="#+id/imageButtonUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/user" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageButtonUser"
android:layout_marginBottom="28dp"
android:layout_marginLeft="65dp"
android:text="Users"
android:textColor="#color/text_color" >
</TextView>
</LinearLayout>