Specific Layout positioning in Android - java

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>

Related

RelataiveLayout positioning

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>

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 use sliding up panel with bottom navigation view?

I am using this library for sliding up panel. I'm trying to use it with the bottom navigation view, for my music streaming app. I am trying to do something like soundcloud app. But I'm unable to achieve this and it shows like this I have two player views, one is mini player and another is the big player. My miniplayer of the slidingup panel goes below of the
bottom navigation view. I want it stay on top of the bottom navigation view. When I click on the miniplayer, slide up panel expands, mini player is gone the big player is visible and the bottom navigation is also gone.
Sorry for my bad english.
Heres my 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:orientation="vertical"
tools:context=".activity.MainActivity">
<com.example.user.musicstreamingapp.CustomView.SlidingUpPanel.SlidingUpPanelLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
app:umanoPanelHeight="90dp"
app:umanoShadowHeight="4dp"
android:id="#+id/sliding_panel_layout"
android:gravity="bottom"
>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/view_pager"
android:visibility="visible"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg"
android:orientation="vertical"
android:visibility="gone"
android:id="#+id/music_player"
>
<android.support.v7.widget.CardView
android:id="#+id/mini_player"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:visibility="visible"
app:cardBackgroundColor="#color/colorBlue"
app:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.user.musicstreamingapp.CustomView.CircularMusicProgressBar
android:id="#+id/music_round_progress"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:src="#drawable/drake"
app:centercircle_diammterer="1"
app:draw_anticlockwise="false"
app:enable_touch="false"
app:progress_color="#FAC100"
app:progress_startAngle="40" />
<TextView
android:id="#+id/remain_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="#id/music_round_progress"
android:text="1:22"
android:textColor="#color/wh"
android:textSize="12sp" />
<TextView
android:id="#+id/song_name_mini"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="12dp"
android:layout_toRightOf="#id/music_round_progress"
android:text="In My Feelings"
android:textColor="#color/wh"
android:textSize="16sp" />
<TextView
android:id="#+id/artist_name_mini"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/song_name_mini"
android:layout_marginLeft="12dp"
android:layout_toRightOf="#id/music_round_progress"
android:text="Drake"
android:textColor="#FAC100"
android:textSize="12sp" />
<ImageView
android:id="#+id/play_btn_mini"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="12dp"
android:src="#drawable/ic_play" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/big_player"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/bg"
android:minHeight="?attr/actionBarSize"
app:theme="#style/CustomActionBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/arrow_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_arrow_down" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:fontFamily="sans-serif-medium"
android:text="#string/now_playing"
android:textColor="#color/grey"
android:textSize="18sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="8dp"
android:src="#drawable/ic_more" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar_top"
android:layout_marginTop="12dp">
<com.example.user.musicstreamingapp.library.src.main.java.com.yarolegovich.discretescrollview.DiscreteScrollView
android:id="#+id/songs_thumb_rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
/>
<RelativeLayout
android:id="#+id/middle_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/songs_thumb_rv"
android:layout_marginTop="20dp"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<TextView
android:id="#+id/song_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Get Away"
android:textColor="#color/headerTextColor"
android:textSize="18sp" />
<TextView
android:id="#+id/artist_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/song_name"
android:layout_centerHorizontal="true"
android:text="Drake"
android:textColor="#color/colorBlue"
android:textSize="12sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_favorite_border"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_download_border" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/duration_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/middle_view"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="12dp">
<TextView
android:id="#+id/current_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="2.44"
android:textColor="#color/grey"
android:textSize="12sp" />
<SeekBar
android:id="#+id/seek_bar_music"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/total_time"
android:layout_toRightOf="#id/current_time" />
<TextView
android:id="#+id/total_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="5.33" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/player_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/duration_view"
android:padding="30dp">
<ImageView
android:id="#+id/shuffle_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#drawable/ic_shuffle" />
<ImageView
android:id="#+id/prev_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="25dp"
android:layout_toRightOf="#id/shuffle_btn"
android:src="#drawable/ic_prev" />
<ImageView
android:id="#+id/play_btn_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_play_new" />
<ImageView
android:id="#+id/next_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="25dp"
android:layout_toLeftOf="#id/repeat_btn"
android:layout_toRightOf="#id/play_btn_main"
android:src="#drawable/ic_next" />
<ImageView
android:id="#+id/repeat_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_repeat_all" />
</RelativeLayout>
<ImageView
android:id="#+id/video_available"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/player_view"
android:layout_centerHorizontal="true"
android:src="#drawable/video_not_available" />
<LinearLayout
android:id="#+id/player_footer_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:paddingBottom="16dp"
>
<ImageView
android:id="#+id/settings_music"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:src="#drawable/ic_settings" />
<ImageView
android:id="#+id/music_equalizer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_equalizer" />
<ImageView
android:id="#+id/music_cast"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_cast" />
<ImageView
android:id="#+id/music_add_playlist"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_library_add" />
<ImageView
android:id="#+id/music_queue"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:src="#drawable/ic_queue_music" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</com.example.user.musicstreamingapp.CustomView.SlidingUpPanel.SlidingUpPanelLayout>
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="58dp"
android:layout_gravity="bottom"
android:id="#+id/bottom_nav_menu"
android:background="#android:color/white"
android:layout_alignParentBottom="true"
app:itemBackground="#color/wh"
app:itemIconTint="#color/tab_foreground"
app:itemTextColor="#color/tab_foreground"
app:menu="#menu/bottom_nav_menu"/>
</RelativeLayout>`

How can I get this interface?

I'm debutant in android and I want to get an interface like this but I couldn't place my linearlayout interface
I tried to use a horizontal and a vertical linearlayout but it doesn't work
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"><TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:id="#+id/txt1"
android:text="AAAAAAAA"/><Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BE"
android:id="#+id/button1"/></LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:gravity="bottom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:id="#+id/txt2"
android:text="RRRRRRR"/><LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:id="#+id/txt3"
android:text="JJJJJJJJJJ"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GO"
android:id="#+id/button2"/>
</LinearLayout>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:id="#+id/button3"/>
</LinearLayout>
Can you help me to correct this code?

Try this code.Hope this helps you.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.7"
android:gravity="center_horizontal">
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:text="AAAAAAAA"
android:textSize="22sp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BE" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_gravity="center_horizontal"
android:text="RRRRRRR"
android:textSize="22sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal">
<TextView
android:id="#+id/txt3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:text="JJJJJJJJJJ"
android:textSize="22sp" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GO" />
</LinearLayout>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal"
android:text="Start" />
</LinearLayout>

you can try this use RelativeLayout
<?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:orientation="vertical">
<TextView
android:id="#+id/txt1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="AAAAAAAA"
android:textSize="22sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/myl1"
android:gravity="center"
android:text="123465" />
<LinearLayout
android:id="#id/myl1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/button3"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="123465" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:text="Start" />
</LinearLayout>
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Start" />
</RelativeLayout>

Categories

Resources