Mandeep Singh
Reputation: 37
Want to Show Image and Text side by side in android
I am new to android development, I am building an app and on that I want to show Imageview and Textview side by side in android layout. Below code is showing textview below the imagview. Here I am using linearlayout.
In this layout I am showing some data from database.
Expected layout design:
Imageview Text1
Text2
Code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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="com.example.spand.krishnasoftwares.Main2Activity">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@color/colorBackground">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="20px"
android:id="@+id/vly">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:src="@drawable/gym_logo1"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/ly1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exercise 1"
android:textAlignment="center"
android:textAllCaps="true"
android:textColor="#ffffff"
android:layout_marginTop="20px"
android:textSize="10dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ly1"
android:paddingLeft="5px"
android:paddingRight="5px"
android:id="@+id/ly2"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exercise Name:"
android:textColor="#ffffff"
android:layout_marginTop="20px"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/en1"
android:textColor="#ffffff"
android:layout_marginTop="20px"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ly2"
android:id="@+id/ly3"
android:paddingLeft="5px"
android:paddingRight="5px"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Speed: "
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/es1"
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ly3"
android:paddingLeft="5px"
android:paddingRight="5px"
android:orientation="horizontal"
android:id="@+id/ly4">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Repetition: "
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:id="@+id/erep1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1"
android:textColor="#ffffff"
android:textDirection="ltr" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/erep2"
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/erep3"
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ly4"
android:paddingLeft="5px"
android:paddingRight="5px"
android:orientation="horizontal"
android:id="@+id/ly5">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Weight: "
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:id="@+id/ew1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1"
android:textColor="#ffffff"
android:textDirection="ltr" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Upvotes: 0
Views: 2777
Answers (6)
Shailesh Bandil
Reputation: 507
Change your .xml to
<android.support.constraint.ConstraintLayout
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">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@color/colorBackground">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="20px"
android:id="@+id/vly">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:src="@drawable/gym_logo1"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/ly1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exercise 1"
android:textAlignment="center"
android:textAllCaps="true"
android:textColor="#ffffff"
android:layout_marginTop="20px"
android:textSize="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exercise Name:"
android:textColor="#ffffff"
android:layout_marginTop="20px"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/en1"
android:textColor="#ffffff"
android:layout_marginTop="20px"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Speed: "
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/es1"
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Repetition: "
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:id="@+id/erep1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1"
android:textColor="#ffffff"
android:textDirection="ltr" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/erep2"
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/erep3"
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Weight: "
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:id="@+id/ew1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1"
android:textColor="#ffffff"
android:textDirection="ltr" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
`
Upvotes: 0
Upendra Shah
Reputation: 2301
Check this.. It will creates layout view hows you want.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/vly"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="20px"
android:weightSum="3">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/add" />
<LinearLayout
android:id="@+id/ly"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical">
<LinearLayout
android:id="@+id/ly1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20px"
android:text="Exercise 1"
android:textAlignment="center"
android:textAllCaps="true"
android:textSize="10dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/ly2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ly1"
android:orientation="horizontal"
android:paddingLeft="5px"
android:paddingRight="5px">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20px"
android:layout_weight="1"
android:text="Exercise Name:" />
<TextView
android:id="@+id/en1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20px"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:id="@+id/ly3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ly2"
android:orientation="horizontal"
android:paddingLeft="5px"
android:paddingRight="5px">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1"
android:text="Speed: " />
<TextView
android:id="@+id/es1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:id="@+id/ly4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ly3"
android:orientation="horizontal"
android:paddingLeft="5px"
android:paddingRight="5px">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1"
android:text="Repetition: " />
<TextView
android:id="@+id/erep1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1"
android:textDirection="ltr" />
<TextView
android:id="@+id/erep2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1"
android:textColor="#ffffff" />
<TextView
android:id="@+id/erep3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:id="@+id/ly5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ly4"
android:orientation="horizontal"
android:paddingLeft="5px"
android:paddingRight="5px">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1"
android:text="Weight: " />
<TextView
android:id="@+id/ew1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1"
android:textDirection="ltr" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Upvotes: 1
DevKRos
Reputation: 432
why don't you use drawable left?
Use drawable left in first text-view and with proper padding between drawable and text you can easily achieve what you intend.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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="com.example.spand.krishnasoftwares.Main2Activity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exercise 1"
android:textAlignment="center"
android:textAllCaps="true"
android:textColor="#ffffff"
android:drawableLeft="@drawable/"
android:layout_marginTop="20px"
android:textSize="10dp"/>
</android.support.constraint.ConstraintLayout>
BENEFITS: You can save extra nesting of multiple view groups. Lesser rendering time in case of recycler view or list view. Recommended by Google developers resource.
Upvotes: 1
Shashank Verma
Reputation: 284
Create your layout like this it'll work for you...but remind one thing search first if you don't get solution then ask...
<android.support.constraint.ConstraintLayout
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"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@color/colorBackground">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:src="@drawable/gym_logo1"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="20px"
android:layout_toRightOf="@+id/imageView"
android:id="@+id/vly">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/ly1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exercise 1"
android:textAlignment="center"
android:textAllCaps="true"
android:textColor="#ffffff"
android:layout_marginTop="20px"
android:textSize="10dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ly1"
android:paddingLeft="5px"
android:paddingRight="5px"
android:id="@+id/ly2"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exercise Name:"
android:textColor="#ffffff"
android:layout_marginTop="20px"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/en1"
android:textColor="#ffffff"
android:layout_marginTop="20px"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ly2"
android:id="@+id/ly3"
android:paddingLeft="5px"
android:paddingRight="5px"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Speed: "
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/es1"
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ly3"
android:paddingLeft="5px"
android:paddingRight="5px"
android:orientation="horizontal"
android:id="@+id/ly4">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Repetition: "
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:id="@+id/erep1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1"
android:textColor="#ffffff"
android:textDirection="ltr" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/erep2"
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/erep3"
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ly4"
android:paddingLeft="5px"
android:paddingRight="5px"
android:orientation="horizontal"
android:id="@+id/ly5">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Weight: "
android:textColor="#ffffff"
android:layout_marginTop="10px"
android:layout_weight="1"/>
<TextView
android:id="@+id/ew1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:layout_weight="1"
android:textColor="#ffffff"
android:textDirection="ltr" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
Upvotes: 0
Mihaly Nagy
Reputation: 41
Looks like @drawable/gym_logo1 is the child of @+id/vly LinearLayout that has android:orientation="vertical". You should try making it the child of @+id/ly1
Upvotes: 0
ali ozkara
Reputation: 5616
you can't use ConstraintLayout in this way, follow the this code;
<LinearLayout
android:weightSum="2"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
Upvotes: 0
Related Questions
- How to set image view and text view side by side?
- How do i make some TextView right next to the ImageView in xml
- Place imageview next to textview
- How to set textview side by side of image view
- Place a image view and a Text view in same line
- Android image and text
- Layout design in android having TextView with image
- How to set ImageView and the textView in a single line inside a LinearLayout
- How can I display two images side by side in Android?
- How to make layout of an image and text left and under it?