How can I align Text next to an Image Button inside a vertical Scrollview

Question

I want to align some text next to an Imagebutton inside of a vertically oriented Scrollview, but I am out of ideas.

This is an App for my Grandma, to help her understand her phone and the Symbols better.

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageButton
            android:id="@+id/Button1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/SrcBtn1"/>


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:paddingTop="20dp"
                android:text="Button 1"
                android:textSize="40dp"/>

        </LinearLayout>

    </ScrollView>

I can't manage to get the Text next to the Imagebutton

Answer 1

I would suggest to replace LinearLayout with RelativeLayout which is made just for this! here are all of its attributes: link

look for the LEFT_OF and RIGHT_OF attributes.

Answer 2

<ScrollView android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <ImageButton
            android:id="@+id/Button1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/ic_menu_gallery"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:paddingTop="20dp"
            android:text="Button 1"
            android:textSize="40dp"/>
    </LinearLayout>
</LinearLayout>

Answer 3

You Can use ConstraintLayout to make this layout super fast.

Here us an example layout:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:id="@+id/scrollView2"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layoutDirection="ltr"
  android:orientation="vertical">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="some text"
        app:layout_constraintBottom_toTopOf="@+id/button5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:text="some text"
        app:layout_constraintBottom_toTopOf="@+id/button7"
        app:layout_constraintEnd_toEndOf="@+id/button6"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintStart_toStartOf="@+id/button6"
        app:layout_constraintTop_toBottomOf="@+id/button6" />

    <Button
        android:id="@+id/button7"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:text="some text"
        app:layout_constraintBottom_toTopOf="@+id/button8"
        app:layout_constraintEnd_toEndOf="@+id/button6"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintStart_toStartOf="@+id/button6"
        app:layout_constraintTop_toBottomOf="@+id/button5" />

    <Button
        android:id="@+id/button8"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:text="some text"
        app:layout_constraintEnd_toEndOf="@+id/button6"
        app:layout_constraintHeight_percent=".2"
        app:layout_constraintStart_toStartOf="@+id/button6"
        app:layout_constraintTop_toBottomOf="@+id/button7" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="20dp"
        app:layout_constraintGuide_percent=".5" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:visibility="visible"
        app:layout_constraintBottom_toTopOf="@+id/button5"
        app:layout_constraintEnd_toStartOf="@+id/button6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button6"
        android:src="@drawable/ic_launcher_background" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button8"
        android:src="@drawable/wolverine"/>

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button8"
        app:layout_constraintEnd_toStartOf="@+id/button7"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button7"
        app:layout_constraintVertical_bias="1.0"
        android:src="@drawable/shadow" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button7"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button5"
        android:src="@drawable/rose" />


    </android.support.constraint.ConstraintLayout>

</ScrollView>

It will look like this:

---

This will work for your Grandmas phone, but please notice that If you want to make a responsive layout using ConstraintLayout you will have to avoid using fixed sizes on your views and that's because different phones got different screen size so using fixed size value will not look the same on all devices.

You can use ConstraintLayout with guidelines and Chains to support different screen sizes.

Answer 4

To align some text next to an Imagebutton inside of a vertically oriented Scrollview. we can use linear layout with horizontal orientation

Like This

 <ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">


        <ImageButton
            android:id="@+id/Button1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/srcbtn1" />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:paddingTop="20dp"
            android:text="Button 1"
            android:textSize="40dp" />
    </LinearLayout>
</LinearLayout>

</ScrollView>