Layout help needed

Layout help needed - android

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>

Related

How to fully fill the image button with images?

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"

Make layout scrollable

I want to make the given layout scrollable, so that the two buttons are fixed and the 4 imageViews can be scrolled. I tried the following code, but it messed up..kindly, help
Layout :
<LinearLayout
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"
android:orientation="horizontal" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="46dp"
android:clickable="true"
android:src="#drawable/no_media" />
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/iv1"
android:clickable="true"
android:src="#drawable/no_media" />
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/iv1"
android:layout_marginTop="26dp"
android:clickable="true"
android:src="#drawable/no_media" />
<ImageView
android:id="#+id/iv4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/iv3"
android:clickable="true"
android:src="#drawable/no_media" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="19dp"
android:layout_marginTop="14dp"
android:text="Click on the four images to take the pic" />
</RelativeLayout>
</ScrollView>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="14dp"
android:text="Button" />
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="Button" />
</LinearLayout>

take this code dude :) best of luck
<RelativeLayout 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="horizontal" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/rel" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="46dp"
android:clickable="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/iv1"
android:clickable="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/iv1"
android:layout_marginTop="26dp"
android:clickable="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/iv4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/iv3"
android:clickable="true"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="19dp"
android:layout_marginTop="14dp"
android:text="Click on the four images to take the pic" />
</RelativeLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/rel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_margin="5dp"
android:text="Button" />
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/button2"
android:layout_margin="5dp"
android:text="Button" />
</RelativeLayout>
</RelativeLayout>

Try this..
<LinearLayout 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"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Click on the four images to take the pic" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/iv2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/iv4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:layout_marginTop="15dp"
android:text="Button" />
</LinearLayout>

put fillviewport inside scrollview like this:
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
>

<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="46dp"
android:clickable="true"
android:src="#drawable/no_media" />.....
Just remove RelativeLayout and put images directly into ScrollVIew

how to horizontally align 4 imageview with textview

I want to show four ImageViews horizontally together with TextViews. This is my screen and sample screen which I want to make. How can I do that?
XML code:
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#CCCCCC"
android:layout_gravity="center"
>
<ImageView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>

This works. I checked.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#CCCCCC"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hai there" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hai there" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hai there " />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hai there" />
</LinearLayout>
</LinearLayout>

You could wrap each ImageView/TextView pair in a LinearLayout like this:
<LinearLayout
android:id="#+id/group1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal>
<ImageView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#strings/my_text" />
</LinearLayout>
Edit: Added gravity attribute to keep everything in line

Use this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1.0f" >
<ImageView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_weight=".25f"
/>
<ImageView
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_weight=".25f"
/>
<ImageView
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_weight=".25f"
/>
<ImageView
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_weight=".25f"
/>
</LinearLayout>

Use TableRow and place all the images in that. Don't forget to give android:layout weight=1.
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</TableRow>

Android: RelativeLayout in ScrollView

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>

Android - TextView does not appear at all

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>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Layout help needed - android

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"

Related

How to fully fill the image button with images?

Make layout scrollable

how to horizontally align 4 imageview with textview

Android: RelativeLayout in ScrollView

Android - TextView does not appear at all

Categories

Resources