Home > Enterprise >  How to Set Text on the Left Side Just Below the Image in Android XML?
How to Set Text on the Left Side Just Below the Image in Android XML?

Time:09-22

I am Learning to create a Instagram Layout and I want to make Story Layout Text after the image But i dont know how to do it Here is Image below i want 'your story' just bottom of my image Please Help

To move Your Story at the bottom i add top margin and when i move to left side i tried to apply gravity but nothing works

[enter image description here][1]

    <LinearLayout
        android:id="@ id/linearLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center|center_horizontal"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@ id/imageView"
            android:layout_width="70dp"
            android:layout_height="70dp"
            app:srcCompat="@drawable/ic_camera_alt" />

        <TextView
            android:id="@ id/textView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:fontFamily="@font/bilbo_swash_caps"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:text="Instagram"
            android:textColor="@color/black"
            android:textSize="40sp" />

        <ImageView
            android:id="@ id/imaggView2"
            android:layout_width="70dp"
            android:layout_height="70dp"
            app:srcCompat="@drawable/ic_message" />
    </LinearLayout>

    <View
        android:id="@ id/view"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/black"
        app:layout_constraintBottom_toTopOf="@ id/horizontalScrollView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@ id/linearLayout"
        app:layout_constraintVertical_bias="0.309" />

    <HorizontalScrollView
        android:id="@ id/horizontalScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="23dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@ id/linearLayout"
        tools:ignore="SpeakableTextPresentCheck">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp">

            <ImageView
                android:id="@ id/imageView1"
                android:layout_width="70dp"
                android:layout_height="70dp"
                app:srcCompat="@drawable/playstore" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="80dp"
                android:text="Your Story"
                />

            <ImageView
                android:id="@ id/imageView2"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/playstore" />


            <ImageView
                android:id="@ id/imageView3"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/playstore" />


            <ImageView
                android:id="@ id/imageVie"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/playstore" />


            <ImageView
                android:id="@ id/imagew4"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/playstore" />


            <ImageView
                android:id="@ id/imad4"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/playstore" />


            <ImageView
                android:id="@ id/imagsdsw4"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/playstore" />

            <ImageView
                android:id="@ id/imadd"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/playstore" />


            <ImageView
                android:id="@ id/imcsew4"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/playstore" />


            <ImageView
                android:id="@ id/imagdd4"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/playstore" />


            <ImageView
                android:id="@ id/f"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/playstore" />


            <ImageView
                android:id="@ id/imagebb4"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/playstore" />

        </LinearLayout>
    </HorizontalScrollView>



  [1]: https://i.stack.imgur.com/7kA9C.png

CodePudding user response:

If I am not mistaken, do you just want to set the textview of 'Your Store' below the imageview1?

Firstly, we should know the characteristics of LinearLayout.

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

            <ImageView
                android:id="@ id/imageView1"
                android:layout_width="70dp"
                android:layout_height="70dp"
                app:srcCompat="@mipmap/ic_launcher_round" />                       

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="80dp"
                android:text="Your Story" />

... ...
 </LinearLayout>

It means that the imageview1 and the textview are side by side. Obviously, the 'Your Story' couldn't be directly below the imageview1

Secondly, if you want to implement the UI, look like this: a Textview is directly below a picture. Simply, you can use Textview contains a drawable with android:drawableTop

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

            <ImageView
                android:id="@ id/imageView1"
                android:layout_width="70dp"
                android:layout_height="70dp"
                app:srcCompat="@mipmap/ic_launcher_round" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableTop="@mipmap/ic_launcher"
                android:gravity="center_horizontal"
                android:drawablePadding="10dp"
                android:text="Your Story" />
......
</LinearLayout>

CodePudding user response:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_margin="5dp"
        android:gravity="center">

               <ImageView
                 android:id="@ id/imageView1"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 app:srcCompat="@mipmap/ic_launcher_round" />

               <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:textColor="@color/black"
                 android:layout_marginTop="2dp"
                 android:text="Your Story" />

</LinearLayout>

You Need To add Just orientation(vertical) And gravity(center) In Your Parent layout...

  • Related