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 ima
Solution 1:
Check this.. It will creates layout view hows you want.
<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical"><LinearLayoutandroid:id="@+id/vly"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingTop="20px"android:weightSum="3"><ImageViewandroid:id="@+id/imageView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:src="@drawable/add" /><LinearLayoutandroid:id="@+id/ly"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="2"android:orientation="vertical"><LinearLayoutandroid:id="@+id/ly1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid: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><LinearLayoutandroid: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"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="20px"android:layout_weight="1"android:text="Exercise Name:" /><TextViewandroid:id="@+id/en1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="20px"android:layout_weight="1" /></LinearLayout><LinearLayoutandroid: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"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="10px"android:layout_weight="1"android:text="Speed: " /><TextViewandroid:id="@+id/es1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="10px"android:layout_weight="1" /></LinearLayout><LinearLayoutandroid: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"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="10px"android:layout_weight="1"android:text="Repetition: " /><TextViewandroid:id="@+id/erep1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="10px"android:layout_weight="1"android:textDirection="ltr" /><TextViewandroid:id="@+id/erep2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="10px"android:layout_weight="1"android:textColor="#ffffff" /><TextViewandroid:id="@+id/erep3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="10px"android:layout_weight="1" /></LinearLayout><LinearLayoutandroid: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"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="10px"android:layout_weight="1"android:text="Weight: " /><TextViewandroid: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>Solution 2:
you can't use ConstraintLayout in this way, follow the this code;
<LinearLayoutandroid:weightSum="2"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"/></LinearLayout>Solution 3:
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
Solution 4:
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.ConstraintLayoutxmlns: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"
><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical"android:background="@color/colorBackground"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/imageView"android:src="@drawable/gym_logo1"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:paddingTop="20px"android:layout_toRightOf="@+id/imageView"android:id="@+id/vly"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"android:id="@+id/ly1"><TextViewandroid: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><LinearLayoutandroid: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"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Exercise Name:"android:textColor="#ffffff"android:layout_marginTop="20px"android:layout_weight="1"/><TextViewandroid: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><LinearLayoutandroid: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"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Speed: "android:textColor="#ffffff"android:layout_marginTop="10px"android:layout_weight="1"/><TextViewandroid: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><LinearLayoutandroid: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"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Repetition: "android:textColor="#ffffff"android:layout_marginTop="10px"android:layout_weight="1"/><TextViewandroid: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" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/erep2"android:textColor="#ffffff"android:layout_marginTop="10px"android:layout_weight="1"/><TextViewandroid: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><LinearLayoutandroid: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"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Weight: "android:textColor="#ffffff"android:layout_marginTop="10px"android:layout_weight="1"/><TextViewandroid: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>Solution 5:
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.ConstraintLayoutxmlns: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"><TextViewandroid: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.
Post a Comment for "Want To Show Image And Text Side By Side In Android"