How to get this layout in a scrollview? - android

So i want to have a layout like on the image :
An image to the left then the title and then below of those the text.
I can't seem to do it while having a scrollview!
So this is my code while NOT using the scrollview :
<?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">
<ImageView
android:id="#+id/imageViewH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/header" />
<TextView
android:id="#+id/textViewIntroText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:text="#string/intro" />
<ImageView
android:id="#+id/imageViewLOGO"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/klein" />
<ImageView
android:id="#+id/imageViewBlock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="19dp"
android:layout_toRightOf="#+id/imageView3"
android:src="#drawable/block" />
<TextView
android:id="#+id/textViewBMWText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView3"
android:text="#string/bmwtext" />
<TextView
android:id="#+id/textViewBMWTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textViewIntroText"
android:layout_toRightOf="#+id/imageView2"
android:text="#string/bmw" />
How do i achieve the same results but with a scrollview?
Anyway, thanks for your time! I appreciate every answer/comment!


I dont have my AS near to me but you can try with this please:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_height="match_parent"
android:layout_width="match_parent">
<RelativeLayout
android:layout_height="match_parent"
android:layout_height="match_parent">
//all your xml here
</RelativeLayout>
</ScrollView>


Set the RelativeLayout to wrap_content. If the child view is the same size as the ScrollView, obviously it will not scroll.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</RelativeLayout>
</ScrollView>

Related

How do I center a button inside of a LinearLayout, contained by a RelativeLayout?

This is the code I have now. My button at the bottom is what is giving me problems. I have tried some options online but have not had any success. Knowing me it is probably some thing simple. Online examples work but do not accommodate my situating at hand.
```
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity">
<VideoView
android:id="#+id/videoView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="false"
android:layout_alignParentTop="true"
android:layout_alignParentRight="false"
android:layout_alignParentBottom="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginTop="2dp"
android:background="#61414440"
android:orientation="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="60dp"
android:gravity="center_horizontal"
android:text="Amaquiz"
android:textColor="#fff"
android:textSize="50sp"
android:textStyle="bold"
app:fontFamily="cursive" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal|center_vertical"
android:gravity="center|center_horizontal"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
```

layout_below not working in RelativeLayout

I have a Relative Layout with 3 children.
1st is ImageView cover.
2nd is ImageView avatar center in parent and
3rd is TextView app name below avatar and center horizontal.
As in theory it should work but my layout not place text below avatar. What's wrong with RelativeLayout?
P/S: I've tried both android:layout_below="#+id/logo2" and android:layout_below="#id/logo2" but still didn't work!
Thank you!
Here is my xml layout.
<?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="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/android_apple"/>
<ImageView
android:id="#+id/logo2"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:src="#drawable/default_avatar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/logo2"
android:layout_centerHorizontal="true"
android:text="AAAAAAA"
android:textStyle="bold"/>
</RelativeLayout>
And the result:

Change the parent Relative Layout height to match parent. It will work.
Like this
<?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">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/android_apple"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
/>
<ImageView
android:id="#+id/logo2"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:src="#drawable/default_avatar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/logo2"
android:layout_centerHorizontal="true"
android:text="AAAAAAA"
android:textStyle="bold"/>
</RelativeLayout>

try below code
<?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="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/android_apple"/>
<ImageView
android:id="#+id/logo"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:src="#drawable/default_avatar"
android:layout_margin="5dp"/>
<RelativeLayout
android:id="#+id/profile_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/logo"
android:elevation="4dp"
android:layout_marginTop="64dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAAAA"
android:textStyle="bold"
android:layout_margin="10dp"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</RelativeLayout>

Try this.
<?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">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="10dp"
android:adjustViewBounds="true"
android:src="#drawable/android_apple" />
<ImageView
android:id="#+id/logo2"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:src="#drawable/default_avatar" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/logo2"
android:layout_below="#+id/logo2"
android:text="AAAAAAA"
android:textStyle="bold" />
</RelativeLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/logo2"
android:layout_centerHorizontal="true"
android:text="AAAAAAA"
android:textStyle="bold"/>
You are using layout_below="#+id/logo2". Use layout_below="#id/logo2", It will work.

Horizontally center TextView inside ImageView

How to horizontally center TextView inside ImageView?
Currently is positioned in the lower right corner of ImageView.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:background="#drawable/img" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_alignBottom="#+id/imageView"
android:layout_alignRight="#+id/imageView"
android:layout_alignEnd="#+id/imageView" />
</RelativeLayout>

If you want the TextView to fit always the ImageView size independently where it is positioned on the RelativeLayout you should try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:background="#drawable/img" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/textView"
android:text="hsjsdjhf"
android:gravity="center"
android:layout_alignTop="#id/imageView"
android:layout_alignBottom="#id/imageView"
android:layout_alignLeft="#id/imageView"
android:layout_alignRight="#id/imageView" />
</RelativeLayout>

Try FrameLayout instead of RelativeLayout and set gravity="center".
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:background="#drawable/img" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView" />
</FrameLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:background="#drawable/texts" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:text="hello world"
android:layout_centerInParent="true"/>
</RelativeLayout>
</RelativeLayout>

Try this...
To align the elements on the top of each other you should use frame layout
<?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" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/img" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
</RelativeLayout>

Try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:background="#drawable/img" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:text="hsjsdjhf"
android:layout_centerInParent="true" />
</RelativeLayout>

How to align image and text exactly equal when using in gridview android?

Hi I am using Gridview to display images with text below by using custom adapter. But problem is when I fetch image and display, align gets changing and it's not proper.Here is my code:
<?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">
<GridView
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:numColumns="3" />
</RelativeLayout>
gridview.row:
<?xml version="1.0" encoding="utf-8"?>
<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" >
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/brand_picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<TextView
android:id="#+id/brand_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/brand_picture"
android:gravity="center_vertical"
android:text="TextView"
android:background="#color/blue"
android:textColor="#FFFFFF" />
How to achieve the expected output with same image size and text below that.
Expected output is:
But my output looks like this.
Thanks.

try this..hope it works for u..
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/brand_picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/brand_name"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/brand_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/brand_picture"
android:background="#color/blue"
android:gravity="center_vertical"
android:text="TextView"
android:textColor="#ffffff" />

On setting Wrap content the widget adjusts its height/width parameters to the given content size.so
change width of image view and text view from wrap content and set same width for both image view and text view.
eg:android:layout_width="70dp"
To get text in cente of text view you have to set
android:gravity="center"
xml:ROW
<?xml version="1.0" encoding="utf-8"?>
<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" >
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#333333">
<ImageView
android:id="#+id/brand_picture"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:background="#499999"
android:src="#drawable/ic_launcher"/>
<TextView
android:id="#+id/brand_name"
android:layout_width="90dp"
android:layout_below="#+id/brand_picture"
android:gravity="center"
android:text="AQUA LUNG"
android:background="#445657"
android:textColor="#FFFFFF" />

Add property,
android:layout_centerHorizontal="true"
to your ImageView as well as TextView. It will work.

You can try this layout:
Actually i have replaced your relative layout with linear layout, but it works just like what you want.
<LinearLayout
android:id="#+id/RelativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/brand_picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_gravity="center" />
<TextView
android:id="#+id/brand_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blue"
android:text="TextView"
android:textColor="#FFFFFF" />
</LinearLayout>
Hope this resolves your issue....

<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000">
<ImageView
android:id="#+id/brand_picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<TextView
android:id="#+id/brand_name"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/brand_picture"
android:layout_alignRight="#+id/brand_picture"
android:layout_below="#+id/brand_picture"
android:background="#445657"
android:gravity="center"
android:text="WHATEVER"
android:textColor="#FFFFFF" />
</RelativeLayout>
Or You can try
<?xml version="1.0" encoding="utf-8"?>
<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" >
<LinearLayout
android:id="#+id/RelativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/brand_picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_gravity="center" />
<TextView
android:id="#+id/brand_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:text="TextView"
android:textColor="#FFFFFF" />
</LinearLayout>
</LinearLayout>
Hopw this helps you

Why are widgets overlapping in the RelativeLayout which is placed inside a Scrollview?

I am trying to do the following in an xml layout. My parent Layout is a Relative Layout.
I want to make a child Relative Layout scrollable.
I have another child Relative Layout and I don't want to make it scrollable.
My xml file is below but the problem is that I whichever new widget(in this case the textview with text taskname) I am adding is getting displayed on the ImageView on the Relative Layout. I am not able to move it. Please guide me.
<?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"
>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/propic" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/imageView1"
android:text="Jack Reacher" />
<View
android:id="#+id/View02"
android:layout_width="fill_parent"
android:layout_height="0.3dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#android:color/darker_gray" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Task Name :" />
</RelativeLayout>
</ScrollView>

Your layout should be defined as
1- <ScrollView>
2- <LinearLayout>
3- <RelativeLayout>

// Try this way,hope this will help you to solve your problem...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/white">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/propic" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/imageView1"
android:text="Jack Reacher" />
<View
android:id="#+id/View02"
android:layout_width="match_parent"
android:layout_height="0.3dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#android:color/darker_gray" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Task Name :" />
</RelativeLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</RelativeLayout>
</LinearLayout>

Categories

Resources