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>
Related
I know this is common to ask but I'm having a trouble on how can I place the change password button beside edit button like the example image below, I tried app:layout_constraintLeft_toLeftOf="id" but it doesn't work, Is there anyway how can I manage in layout, I've keep searching till yet not found the answer, need help
**activity_main.xml **
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/activity_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".EditProfile">
<ScrollView
android:id="#+id/scrolView_account"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/linear_account"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="50dp"
android:background="#color/primary" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="100dp"
android:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginTop="50dp"
android:layout_marginRight="10dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:padding="10dp"
android:id="#+id/txtProfileDetails"
android:text="Profile Details"
android:textStyle="bold" />
<Button
android:layout_width="45dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
app:layout_constraintLeft_toLeftOf="parent"
android:padding="10dp"
android:layout_marginRight="10dp"
android:id="#+id/editProfile"
android:drawableLeft="#drawable/ic_edit"
android:textStyle="bold" />
<Button
android:layout_width="205dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
app:layout_constraintLeft_toLeftOf="parent"
android:padding="10dp"
android:layout_marginRight="10dp"
android:id="#+id/editPassword"
android:text="Change Password"
android:textStyle="bold" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/cc_idno"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:helperText="Mandatory"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
app:helperTextTextColor="#color/validation"
app:startIconDrawable="#drawable/ic_series"
android:layout_below="#+id/txtProfileDetails"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="ID number"
android:id="#+id/edt_idno"
android:inputType="text"
android:layout_below="#id/edtFirstname"/>
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="30dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imageview_account_profile"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/user_logo"
app:civ_border_color="#FFFFFF"
app:civ_border_width="2dp" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/imageview_account_profile"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Wrap your both the concerned buttons inside a linearlayout and it will work. with horizontal orientation .
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right">
<Button
android:id="#+id/editPassword"
android:layout_width="205dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:padding="10dp"
android:text="Change Password"
android:textStyle="bold"
/>
<Button
android:id="#+id/editProfile"
android:layout_width="45dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:padding="10dp"
android:textStyle="bold"
/>
</LinearLayout>
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>
Why my app display is varying from device to device
This is output I,m getting in some devices
This is output from some devices, where you can clearly see the right side is cutting
Please help me to get my app UI fixed from every side in different devices like the image 1.
My XML code
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:background="#drawable/bg_pic"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="33dp"
android:layout_height="27dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
app:srcCompat="#drawable/close_btn" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="135dp"
android:layout_marginTop="5dp"
android:gravity="center">
<TextView
android:id="#+id/imageView2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/timer"
android:gravity="center"
android:text="15s"
android:textSize="20dp"
android:textColor="#3B3B3B"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:id="#+id/textView"
android:layout_width="97dp"
android:layout_height="40dp"
android:layout_marginLeft="80dp"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="Score: 430"
android:textColor="#000"
android:textSize="18dp" />
</LinearLayout>
</RelativeLayout>
you can fix your view with only RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/imageView"
android:layout_width="33dp"
android:layout_height="27dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_alignParentStart="true"
app:srcCompat="#drawable/ic_round_close" />
<TextView
android:layout_marginTop="16dp"
android:id="#+id/imageView2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/timer"
android:layout_centerHorizontal="true"
android:text="15s"
android:textSize="20sp"
android:textColor="#3B3B3B"
android:textStyle="bold" />
<TextView
android:layout_alignParentEnd="true"
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:gravity="center"
android:text="Score: 430"
android:textColor="#000"
android:textSize="18sp" />
</RelativeLayout>
you can achive this as below by using weightSum as below
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight=".2"
app:srcCompat="#drawable/close_btn" />
<TextView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".4"
android:background="#drawable/timer"
android:gravity="center"
android:text="15s"
android:textColor="#3B3B3B"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".4"
android:gravity="center"
android:text="Score: 430"
android:textColor="#000"
android:textSize="18dp" />
</LinearLayout>
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
I have a few button in cardview but i can't drag it to anywhere i want.
in fact i want set , "next" button of media player to right of "play" button .
this is my xml code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="90dp"
app:cardBackgroundColor="?attr/colorPrimaryDark"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
app:cardCornerRadius="0dp"
app:cardElevation="12dp">
<Button
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_horizontal|center_vertical"
android:background="#mipmap/play" />
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#mipmap/next"
android:layout_gravity="center_vertical|end"/>
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#mipmap/previous"
android:layout_gravity="center_vertical|start"/>
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBar2"
android:max="100"/>
</android.support.v7.widget.CardView>
</RelativeLayout>
it's result :
pic result
and what i want is :
what i want image
use this one:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="90dp"
app:cardBackgroundColor="?attr/colorPrimaryDark"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
app:cardCornerRadius="0dp"
app:cardElevation="12dp">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="140dp"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="1"
android:background="#mipmap/next"/>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="30dp"
android:background="#mipmap/play" />
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="30dp"
android:background="#mipmap/previous"/>
</LinearLayout>
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBar2"
android:max="100"/>
</android.support.v7.widget.CardView>
I'm late to the party. Alternatively, you can try GridLayout. Here is an example of using GridLayout which I used in my example.
android:layout_row defines which row should it be. Row number starts from top to bottom.
android:layout_column defines which column the object should be. Left to right ordering.
android:layout_columnSpan defines how many columns should the object be.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/card_margin"
android:layout_marginBottom="#dimen/card_marginBottom">
<GridLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sample"
android:layout_row="0"
android:layout_column="0" />
<TextView
android:id="#+id/txtVw_RestName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_row="0"
android:layout_column="1"
android:layout_columnSpan="2"/>
<TextView
android:id="#+id/txtVw_RestLot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="-40dp"
android:layout_row="1"
android:layout_column="1"
android:layout_columnSpan="2"/>
<TextView
android:id="#+id/txtVw_DescProgBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vacancy"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_row="2"
android:layout_column="1" />
<ProgressBar
android:id="#+id/progBar"
android:layout_width="150dp"
android:minHeight="5dp"
android:max="100"
style="?android:attr/progressBarStyleHorizontal"
android:layout_marginTop="3dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_row="2"
android:layout_column="2"/>
</GridLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Add any type of layout in your cardview and then add your elements (Button, TextView...) in the layout.
Design appearance of following xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/cardview_provider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="8dp">
<!--
//Layout within the cardview in which you have to add your components
//(Button, TextView...)
//could be other type of layout (I usually use ConstraintLayout)
-->
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/provider_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"/>
<TextView
android:id="#+id/provider_name"
android:text="Google"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toEndOf="#+id/provider_icon"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/provider_uri"
android:text="https://www.google.com"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
app:layout_constraintStart_toEndOf="#+id/provider_icon"
app:layout_constraintTop_toBottomOf="#+id/provider_name"/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>