RelataiveLayout positioning - java

Im trying to achieve a layout using Android XML Layout template:
Layout Diagram
I have XML currently:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:layout_marginTop="0dp"
android:background="#color/grey"
android:clickable="true"
android:orientation="horizontal"
android:padding="0dp">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="false"
android:layout_centerVertical="true"
android:layout_marginBottom="0dp"
android:duplicateParentState="true"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:paddingTop="#dimen/schedule_row_paddingtop">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="#dimen/home_row_teamLogoHeight"
android:layout_centerInParent="false"
android:layout_centerVertical="true"
android:layout_marginBottom="0dp"
android:duplicateParentState="true"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:paddingTop="6dp">
<ImageView
android:id="#+id/teamALogo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/france_logo"
android:visibility="visible" />
</RelativeLayout>
<TextView
android:id="#+id/programmeSport"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="sport"
android:gravity="center_horizontal"
android:textColor="#color/yellow"
android:textAllCaps="true"
android:textSize="#dimen/home_row_league_title"
android:textStyle="bold" />
<TextView
android:id="#+id/programmeTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/programmeSport"
android:ellipsize="end"
android:gravity="center_horizontal"
android:maxLines="1"
android:text="programme title"
android:textColor="#color/white"
android:layout_marginTop="-4dip"
android:textSize="#dimen/home_row_programmeTitle"
/>
<TextView
android:id="#+id/programmeDay"
android:layout_height="wrap_content"
android:text="2:30 PM"
android:textAllCaps="true"
android:gravity="center_horizontal"
android:layout_marginTop="-6dp"
android:textColor="#color/green"
android:textSize="#dimen/home_row_date"
android:layout_below="#+id/programmeTitle"
android:layout_width="match_parent"
/>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="#dimen/home_row_teamLogoHeight"
android:layout_centerInParent="false"
android:layout_centerVertical="true"
android:layout_marginBottom="0dp"
android:duplicateParentState="true"
android:orientation="horizontal"
android:gravity="right"
android:paddingTop="6dp">
<ImageView
android:id="#+id/teamBLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/italy_logo"
android:layout_alignParentRight="true"
android:gravity="center_horizontal"
android:visibility="visible" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
At the moment it does not look great as there is some overlapping going on, and on larger screens the "Team A Logo" and "Team B Logo" float off (as intended to be floating on the left and right side of the text) to the edges of the screen leaving a huge game besides the text in the middle:
Sample output of the issue in Android device
I need the images which float on the left and right to be in the same position vertically for each fixture and for them to be inline with the "TeamA v TeamB" horizontally.
Any assistance will be appreciated.
Thanks


You should follow either ConstraintLayout or LinearLayout in order to achieve your desired output.
You can do something like the below.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/teamALogo"
android:layout_width="100dp"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_team_a_logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintLeft_toRightOf="#id/teamALogo"
app:layout_constraintRight_toLeftOf="#id/teamBLogo"
app:layout_constraintTop_toTopOf="#id/teamBLogo"
android:layout_marginTop="10dp"
app:layout_constraintBottom_toBottomOf="#id/teamBLogo"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="League"
android:textSize="17sp"
android:textColor="#color/black"
android:gravity="center"
android:textStyle="bold"
android:layout_marginTop="5dp"
android:padding="5dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Team A"
android:textSize="17sp"
android:textColor="#color/black"
android:gravity="start"
android:textStyle="normal"
android:layout_marginTop="5dp"
android:padding="5dp"
/>
<TextView
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:text="Vs"
android:textSize="17sp"
android:textColor="#color/black"
android:gravity="start"
android:textStyle="normal"
android:layout_marginTop="5dp"
android:padding="5dp"
/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Team B"
android:textSize="17sp"
android:textColor="#color/black"
android:gravity="start"
android:textStyle="normal"
android:layout_marginTop="5dp"
android:padding="5dp"
/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Date"
android:textSize="17sp"
android:textColor="#color/black"
android:gravity="center"
android:textStyle="bold"
android:layout_marginTop="5dp"
android:padding="5dp"
/>
</LinearLayout>
<ImageView
android:id="#+id/teamBLogo"
android:layout_width="100dp"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_team_b_logo"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Related

How to display ImageView below TextView in LinearLayout

I'm writing a sports app and I want to place the text exactly under the picture, but I can't get it aligned. If there is a large text somewhere, then the picture is not in the middle. how to make sure that the text is always exactly under the picture, or the picture is always exactly under the text?
<ScrollView 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#drawable/shadow_matches_background"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="190dp">
<LinearLayout
android:id="#+id/title_team_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:weightSum="2">
<TextView
android:id="#+id/title_team_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="35dp"
android:layout_weight="1"
android:fontFamily="#font/roboto_medium"
android:text="Chelsea"
android:textColor="#color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/title_team_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="25dp"
android:layout_weight="1"
android:fontFamily="#font/roboto_medium"
android:text="Manchester City"
android:textColor="#color/black"
android:textSize="20sp" />
</LinearLayout>
<RelativeLayout
android:id="#+id/image_team_list"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img_team_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title_team_1"
android:src="#drawable/image_3" />
<ImageView
android:id="#+id/img_team_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image_5"
tools:ignore="DuplicateIds" />
</RelativeLayout>
<TextView
android:id="#+id/date_team_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/image_team_list"
android:layout_marginTop="5dp"
android:fontFamily="#font/roboto"
android:text="25 сентября 2021 года"
android:textAlignment="center"
android:textSize="15sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/date_team_list">
<Button
android:id="#+id/btn_subscribe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#00000000"
android:text="#string/btn_subscribe"
android:textColor="#color/colorMatchesBtn" />
<Button
android:id="#+id/btn_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#00000000"
android:text="#string/btn_detail"
android:textColor="#color/colorMatchesBtn" />
</LinearLayout>
</RelativeLayout>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="190dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp">
<LinearLayout
android:id="#+id/title_team_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
tools:ignore="DuplicateIds">
<TextView
android:id="#+id/title_team_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="35dp"
android:layout_weight="1"
android:fontFamily="#font/roboto_medium"
android:text="Everton"
android:textColor="#color/black"
android:textSize="20sp"
tools:ignore="DuplicateIds" />
<TextView
android:id="#+id/title_team_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="25dp"
android:layout_weight="1"
android:fontFamily="#font/roboto_medium"
android:text="Norvich City"
android:textColor="#color/black"
android:textSize="20sp"
tools:ignore="DuplicateIds" />
</LinearLayout>
<LinearLayout
android:id="#+id/image_team_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title_team_list"
android:layout_marginTop="5dp"
tools:ignore="DuplicateIds">
<ImageView
android:id="#+id/img_team_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/image_3"
tools:ignore="DuplicateIds" />
<ImageView
android:id="#+id/img_team_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/image_5"
tools:ignore="DuplicateIds" />
</LinearLayout>
<TextView
android:id="#+id/date_team_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/image_team_list"
android:layout_marginTop="5dp"
android:fontFamily="#font/roboto"
android:text="25 сентября 2021 года"
android:textAlignment="center"
android:textSize="15sp"
tools:ignore="DuplicateIds" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/date_team_list">
<Button
android:id="#+id/btn_subscribe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#00000000"
android:text="#string/btn_subscribe"
android:textColor="#color/colorMatchesBtn"
tools:ignore="DuplicateIds" />
<Button
android:id="#+id/btn_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#00000000"
android:text="#string/btn_detail"
android:textColor="#color/colorMatchesBtn"
tools:ignore="DuplicateIds" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>

you should follow Constraint layout, for your desired output I have attached some code. I hope, it helps.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#id/ivPic"
app:layout_constraintRight_toRightOf="#id/ivPic"
app:layout_constraintBottom_toTopOf="#id/ivPic"
android:text="Your desired text"
android:textColor="#color/black"
android:textSize="15sp"
android:singleLine="true"
android:marqueeRepeatLimit="marquee_forever"
/>
<ImageView
android:id="#+id/ivPic"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvTitle"
android:src="#drawable/yourImage"
android:scaleType="centerCrop"
android:padding="2dp"
/>
<TextView
android:id="#+id/tvClubName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#id/ivPic"
app:layout_constraintRight_toRightOf="#id/ivPic"
app:layout_constraintTop_toBottomOf="#id/ivPic"
android:text="Liverpool"
android:textColor="#color/black"
android:textSize="15sp"
android:singleLine="true"
android:padding="3dp"
android:gravity="center_vertical|center"
android:marqueeRepeatLimit="marquee_forever"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

And take a look at ConstrainsLayout It will help you out build more complex layouts easily.Also your list of teams is completely hardcoded you should definetely switch to RecyclerView.

How to prevent overlapping in view?

I want to create a view like this.
The problem is, that when the TextView size is bigger, it looks like this.
So it overlaps "View all (35)" TextView. How to prevent the overlapping? The ImageView should be right of TextView, but it has not to overlap "View all (35)". I think you understand. Thank you.
Here's the xml file.
<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="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:fontFamily="#font/montserrat_semi_bold"
android:maxLines="1"
android:layout_alignParentStart="true"
android:textColor="#color/colorTextDark"
android:textSize="#dimen/text_extra_large"
tools:text="Birthday" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:layout_toEndOf="#+id/textView"
android:src="#drawable/wishlist_public" />
<TextView
android:id="#+id/textViewAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/montserrat_semi_bold"
android:text="View all (35)"
android:layout_alignParentEnd="true"
android:textColor="#color/colorTextPrimary"
android:textSize="#dimen/text_small" />
</RelativeLayout>

Try to put your imageView to textView's drawableEnd property, after put it in nested linear layout and give to it a weight.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/imageView"
android:layout_marginStart="16dp"
android:maxLines="1"
android:gravity="start|center"
android:textSize="#dimen/text_extra_large"
android:ellipsize="end"
android:text="Your text here" />
<Space
android:layout_width="match_parent"
android:layout_height="match_parent">
</Space>
</LinearLayout>
<TextView
android:id="#+id/textViewAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:gravity="end"
android:layout_gravity="center_vertical"
android:text="View All"
android:textSize="#dimen/text_small" />
</LinearLayout>

Try this(Please add some of your dimens property that i remove because i didn't had them) :
<?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="horizontal"
android:paddingTop="10dp"
android:weightSum="3">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="16dp"
android:maxLines="1"
android:textSize="20dp"
tools:text="Birthdayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:layout_toRightOf="#id/textView"
android:src="#drawable/wishlist_public"
/>
</LinearLayout>
<TextView
android:id="#+id/textViewAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_weight="2"
android:text="View all (35)"
android:textSize="20dp" />
</LinearLayout>

I think you can use Linearlayout to achieve something like that I use to write this code and I think it can help you achieve this layout design
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="10dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Birthdayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy"
android:layout_weight="1"
android:textSize="20sp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#111"
android:layout_marginStart="10dp" />
</LinearLayout>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View All(35)"
android:textSize="20sp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_weight="1"/>
</LinearLayout>
After that, you will get something like that
Click here to view image

Try to use ContraintLayout and use Barrier constraint or Guidline constraint to achiever you desired layout
I have fixed using guideline contraint
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent"
android:layout_height="match_parent"
android:paddingTop="16dp">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="24sp"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHorizontal_bias="0.095"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.005"
tools:text="Birthday" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_adb_black_24dp"
app:layout_constraintBottom_toBottomOf="#+id/textViewAll"
app:layout_constraintEnd_toStartOf="#+id/textViewAll"
app:layout_constraintHorizontal_bias="0.13"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textViewAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="View all (35)"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="333dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.62" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to stretch Imagview in xml layout and show other button to left of it

I'm using Relativelayout within cardview layout to show the user details. But I want to show the two button at the end with equal width on and everything in the left side of Image which will stretch from Top to bottom.
But I'm not able to do so.
here is my xml code
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_marginBottom="2dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
>
<ImageView
android:id="#+id/contact_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#fff"
android:src="#drawable/binil"
android:padding="1dp" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/top"
android:padding="5dp">
<TextView
android:id="#+id/contact_name"
android:layout_width="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Sagar Rawal"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_mobile"
android:text="9868336847"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_name"
android:layout_alignParentLeft="true"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_address"
android:layout_below="#+id/contact_name"
android:layout_width="wrap_content"
android:text="Jumla"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:textStyle="bold"
android:layout_toRightOf="#+id/contact_mobile" />
<TextView
android:id="#+id/contact_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="searchbbc1881#gmail.com"
android:layout_below="#+id/contact_mobile"
android:layout_alignParentLeft="true"
android:textStyle="bold" />
<ImageButton
android:layout_below="#+id/contact_email"
android:id="#+id/call"
android:background="#drawable/shape_button"
android:layout_width="wrap_content"
android:src="#drawable/ic_call_black_24dp"
android:layout_height="wrap_content" />
<ImageButton
android:layout_toRightOf="#id/call"
android:layout_below="#+id/contact_email"
android:background="#drawable/shape_button"
android:layout_width="wrap_content"
android:src="#drawable/ic_email_black_24dp"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v7.widget.CardView>
My output is
But I want something similar to this
Where two buttons will equally stretch to left side of Image.
Please help

Try using LinearLayout weightSum like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_weight="50"
android:layout_height="wrap_content"
android:text="text1!" />
<TextView
android:layout_width="0dp"
android:layout_weight="50"
android:layout_height="wrap_content"
android:text="text2!" />
</LinearLayout>
Update:
Replace your code with this, it will solve your issue
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:padding="5dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="1">
<RelativeLayout
android:id="#+id/top"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".7"
android:padding="5dp">
<TextView
android:id="#+id/contact_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Sagar Rawal"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_mobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/contact_name"
android:text="9868336847"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_name"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/contact_mobile"
android:text="Jumla"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/contact_mobile"
android:text="searchbbc1881#gmail.com"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_email"
android:weightSum="1">
<ImageButton
android:id="#+id/call"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_email"
android:layout_weight=".5"
android:background="#drawable/shape_button"
android:src="#drawable/ic_email_black_24dp"
/>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_email"
android:layout_toRightOf="#id/call"
android:layout_weight=".5"
android:background="#drawable/shape_button"
android:src="#drawable/ic_email_black_24dp"
/>
</LinearLayout>
</RelativeLayout>
<ImageView
android:id="#+id/contact_profile"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:background="#fff"
android:padding="1dp"
android:src="#drawable/ic_launcher_background" />
</LinearLayout>
</android.support.v7.widget.CardView>

Try to reorganize it this way:

Change design item of GridView, how? - Android

I want to change a design of me item in GridView.
Now is:
I want this item in square shape not like it is now in rectangle.
Also, the IMG (from the screenshot) i want to have above 'Name' and every textview at the center. Is it possible? Here is my XML:
<?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"
android:background="#color/md_brown_100"
android:orientation="vertical"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp" >
<TextView
android:id="#+id/credit_wallet"
android:text="#string/hi"
android:gravity="center"
android:textColor="#color/md_brown_700"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<com.justfashion.Logo
android:text="Fashion Wallet"
android:gravity="center"
android:textColor="#color/md_brown_700"
android:layout_marginTop="25dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<LinearLayout android:id="#+id/list_offer_item_container"
android:layout_marginTop="15dp"
android:layout_below="#id/text"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/shape"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/txtname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="1dp"
android:textColor="#48899f"
android:textSize="#dimen/textsizeearncredit_title"
android:text="Name"
android:textAllCaps="false"
android:textStyle="normal|bold" />
<TextView
android:id="#+id/txtdesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:maxLines="1"
android:textColor="#80869c"
android:textSize="#dimen/textsizeearncredit_desc"
android:text="This is a description of the offer and this is just a demo to show off 3 lines stacking correctly on top of each other"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_gravity="center_vertical">
<TextView android:id="#+id/list_offer_badge_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/list_offer_item_container"
android:textColor="#color/md_amber_700"
android:textSize="12sp"
android:visibility="gone"
android:text=""/>
</LinearLayout>
<ImageView
android:id="#+id/imgcreditcompany"
android:layout_width="42dp"
android:layout_above="#+id/txtname"
android:contentDescription="#string/app_name"
android:gravity="center"
android:layout_height="42dp" />
<ImageView
android:id="#+id/nextArrow"
android:layout_alignParentRight="true"
android:tint="#color/md_grey_300"
android:rotation="180"
android:layout_width="32dp"
android:visibility="gone"
android:layout_marginRight="16dp"
android:layout_gravity="center"
android:layout_centerVertical="true"
android:layout_height="32dp"
android:contentDescription="#string/app_name"
android:padding="#dimen/two" />
</LinearLayout>
</RelativeLayout>
I tried a lot of combination and don't works. Please help me guys! Thanks!
EDIT
The IMG from the screenshot is
<ImageView
android:id="#+id/imgcreditcompany"
android:layout_width="42dp"
android:layout_above="#+id/txtname"
android:contentDescription="#string/app_name"
android:gravity="center"
android:layout_height="42dp" />
In the code above

Android LinearLayout place elements in the middle with landscape and portrait mode

My layout contains three buttons, one EditText field and one button. I want to place the three buttons in one row, but in the center (horizontal) of the screen. The EditText field should be below the buttons and below the EditText field, there should be one button.
Here is my layout:
<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:background="#color/blueAct"
android:orientation="vertical"
android:paddingBottom="100.0dip"
android:paddingLeft="10.0dip"
android:paddingRight="10.0dip"
android:paddingTop="100.0dip" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="4.0dip"
android:paddingLeft="100.0dip"
android:paddingRight="100.0dip"
android:paddingTop="5.0dip" >
<ImageButton
android:id="#+id/buttonGreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="4.0dip"
android:background="#drawable/green_button"
android:contentDescription="#string/green" />
<ImageButton
android:id="#+id/buttonRed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="4.0dip"
android:background="#drawable/red_button"
android:contentDescription="#string/red" />
<ImageButton
android:id="#+id/buttonBlue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="4.0dip"
android:background="#drawable/blue_button"
android:contentDescription="#string/blue" />
</LinearLayout>
<EditText
android:id="#+id/phone_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/phone_code"
android:paddingTop="100.0dip"
android:textColor="#color/white"
android:textColorHint="#color/white" >
<requestFocus />
</EditText>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:background="#color/orangeAct"
android:onClick="searchUsers"
android:paddingTop="100.0dip"
android:text="#string/button_go"
android:textColor="#color/white" />
</LinearLayout>
Now the problem is, that the three buttons are not in the center if the user changes from portrait to landscape mode.
How is it possible to make this 'responsive', without creating a separate layout file for landscape mode?
Any help would be greatly appreciated.

Don't use padding on your horizontal LinearLayout to center the views. Instead you can add views before and after that expand to fill the remaining space.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageButton
android:id="#+id/buttonGreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<ImageButton
android:id="#+id/buttonRed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<ImageButton
android:id="#+id/buttonBlue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="#mipmap/background"
android:orientation="vertical"
android:id="#+id/homemain124"
android:weightSum="3">
<RelativeLayout
android:id="#+id/paneltamrin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="something"
android:textColor="#fff"
android:id="#+id/top1"
android:gravity="center_horizontal"
android:layout_marginTop="10dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="40dp"
android:layout_marginLeft="40dp"
android:padding="8dp"
android:background="#drawable/textcorner"
android:layout_below="#+id/top1"
android:text="something"
android:textSize="20sp"
android:textColor="#fff"
android:id="#+id/top2"
android:fontFamily="monospace"
android:textStyle="bold"
android:gravity="center_horizontal"
android:layout_marginTop="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/top2"
android:text="APPLIED BY"
android:textSize="15sp"
android:id="#+id/top3"
android:textColor="#fff"
android:gravity="center_horizontal"
android:layout_marginTop="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/top3"
android:text="COURT OF JUSTICE IN INDIA"
android:id="#+id/top4"
android:textSize="15sp"
android:textColor="#fff"
android:textStyle="bold"
android:gravity="center_horizontal"
android:layout_marginTop="10dp"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/paneltamrin2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="220dp"
android:layout_height="160dp"
android:src="#mipmap/book1"
android:id="#+id/image1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/paneltamrin3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="READ NOW"
android:textColor="#fff"
android:lineSpacingExtra="10dp"
android:textSize="20sp"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:id="#+id/buttonorder"
android:padding="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/orderbutton"
android:layout_centerHorizontal="true"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#fff"
android:textSize="13sp"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:layout_below="#+id/buttonorder"
android:text="something"/>
</RelativeLayout>
</LinearLayout>
Linear layout added for 3 relative layouts

Categories

Resources