I'm trying to create the following layout:
Basically, I have two TextViews and two icons. The icons are on the same row as the mobile header and the the mobile number. I have created the following XML:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/phone_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/primaryDarkColor"
android:textStyle="bold"
android:text="Phone number"
android:textSize="18sp"
android:layout_marginBottom="5dp" />
<TextView
android:id="#+id/phone_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textStyle="bold"
android:layout_alignBottom="#id/phone_header" />
<ImageView
android:id="#+id/phone_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/phone_info"
android:layout_alignEnd="#id/phone_info"
app:srcCompat="#drawable/ic_call_white_24dp" />
<ImageView
android:id="#+id/message_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/phone_icon"
android:layout_alignEnd="#id/phone_icon"
app:srcCompat="#drawable/ic_meessage_white_24dp" />
</RelativeLayout>
But it didn't set the layout properly. What is the best way would be to set the icons on the same row as the two TextViews?
I made something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="mobile" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+1 32004 1001" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:srcCompat="#drawable/ic_baseline_info_24" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:srcCompat="#drawable/ic_baseline_info_24" />
</LinearLayout>
And it looks like this:
Or just do it like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_toStartOf="#+id/img1"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="mobile" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+1 32004 1001" />
</LinearLayout>
<ImageView
android:layout_toStartOf="#+id/img2"
android:id="#+id/img1"
android:adjustViewBounds="true"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:srcCompat="#drawable/ic_baseline_info_24" />
<ImageView
android:adjustViewBounds="true"
android:id="#+id/img2"
android:layout_alignParentEnd="true"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:srcCompat="#drawable/ic_baseline_info_24" />
</RelativeLayout>
Second way I think is better and ll not affect your icons if the screen is small and text wide
This gets you
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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"
android:orientation="horizontal"
tools:context=".MainActivity">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 1 " />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 2 " />
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center_vertical|end"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Icon 1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Icon 2 " />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
design
You can simply do this using constraint layout like below.
<?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:background="#color/color_black"
android:padding="10dp"
android:layout_height="wrap_content"
tools:context=".ui.activities.MainActivity">
<TextView
android:id="#+id/phone_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/color_white"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:text="Mobile"
android:textSize="18sp" />
<TextView
android:id="#+id/phone_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
android:text="+1 302024 101"
android:textColor="#color/color_white"
android:layout_marginTop="2dp"
app:layout_constraintTop_toBottomOf="#id/phone_header"
android:textStyle="bold"/>
<ImageView
android:id="#+id/phone_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/message_icon"
app:layout_constraintBottom_toBottomOf="#id/message_icon"
android:layout_marginEnd="5dp"
app:layout_constraintEnd_toStartOf="#id/message_icon"
app:srcCompat="#drawable/ic_check_white_24dp" />
<ImageView
android:id="#+id/message_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_error_white_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
output:
Related
I'm trying to create a recyclerview of cards. I get the information from the firebase realtime database but cards didn't fill the width of screen.
find_tournament.xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="#3E2743"
android:orientation="vertical"
tools:context=".FindTournamentActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:orientation="vertical">
<ImageView
android:id="#+id/tournamentImageParticipant"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"/>
<TextView
android:id="#+id/tournamentLabelParticipant"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/baloo"
android:text="Tournament Name"
android:textAlignment="center"
android:textColor="#color/jitrino"
android:textSize="20sp" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginBottom="20dp"/>
</LinearLayout>
</ScrollView>
Desing view of find tournament:
find_tournament.xml
tournament_row.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.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:elevation="20dp"
app:cardBackgroundColor="#4F2A36"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp">
<ImageView
android:id="#+id/tournamentImageRow"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:orientation="vertical">
<TextView
android:id="#+id/tournamentNameRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tournament Name"
android:textColor="#color/white"
android:textSize="20sp" />
<TextView
android:id="#+id/tournamentGameRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tournament Game"
android:textColor="#color/white"
android:textSize="20sp" />
<TextView
android:id="#+id/tournamentRewardRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reward"
android:textColor="#color/white"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:orientation="horizontal">
<TextView
android:id="#+id/tournamentPersonRow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:text="N"
android:textColor="#color/white"
android:textSize="20sp" />
<TextView
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:text="Vs"
android:textColor="#color/white"
android:textSize="20sp" />
<TextView
android:id="#+id/tournamentPerson2Row"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:text="N"
android:textColor="#color/white"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
Desing view of tournament row:
tournament_row.xml
Here is the result when i run the app. How can i fill gaps?
result
<androidx.cardview.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:elevation="20dp"
app:cardBackgroundColor="#4F2A36"
app:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp">
<ImageView
android:id="#+id/tournamentImageRow"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_toRightOf="#id/tournamentImageRow"
android:layout_toLeftOf="#+id/end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:orientation="vertical">
<TextView
android:id="#+id/tournamentNameRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tournament Name"
android:textColor="#color/white"
android:textSize="20sp" />
<TextView
android:id="#+id/tournamentGameRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tournament Game"
android:textColor="#color/white"
android:textSize="20sp" />
<TextView
android:id="#+id/tournamentRewardRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reward"
android:textColor="#color/white"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/tournamentImageRow"
android:layout_alignBottom="#id/tournamentImageRow"
android:layout_alignParentRight="true"
android:layout_marginLeft="20dp"
android:orientation="horizontal">
<TextView
android:id="#+id/tournamentPersonRow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:text="N"
android:textColor="#color/white"
android:textSize="20sp" />
<TextView
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:text="Vs"
android:textColor="#color/white"
android:textSize="20sp" />
<TextView
android:id="#+id/tournamentPerson2Row"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:text="N"
android:textColor="#color/white"
android:textSize="20sp" />
</LinearLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>
The width of the LinearLayout below the image is wrap_content. You can go around this problem by using weight.
Refer to this link for more information about weight
https://android--examples.blogspot.com/2016/06/android-understanding-linearlayout.html
Please note that it is recommended to use ConstraintLayout.
I have one FloatingActionButton. I want it to be end|bottom like
What I want
this.
Currently, My design is like this
What I have
I want it to be at the exact end|bottom of the screen. How to do that?
Which layout is best to use?
This is my whole xml code
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="30dp">
<ImageView
android:id="#+id/post_request_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/general_back_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:fontFamily="#font/muli_black"
android:text="#string/_post_request_header_name"
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/how_requests_work"
android:textColor="#color/colorAccent"
android:textSize="10sp" />
<ListView
android:id="#+id/postlist"
android:layout_width="match_parent"
android:layout_height="420dp"
android:layout_marginStart="0dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="0dp"
app:layout_constraintBottom_toTopOf="#+id/postadd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/postadd"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="#drawable/postrequest_add_btn" />
</LinearLayout>
You can wrap your FAB button into a RelativeLayout and keep other views in your LinearLayout
<?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:padding="30dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/post_request_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/general_back_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:fontFamily="#font/muli_black"
android:text="#string/_post_request_header_name"
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/how_requests_work"
android:textColor="#color/colorAccent"
android:textSize="10sp" />
<ListView
android:id="#+id/postlist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" />
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/postadd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_margin="16dp"
android:layout_marginTop="20dp"
android:src="#drawable/postrequest_add_btn" />
</RelativeLayout>
Note: I removed the Constraints you added to the ListView as they are related to ConstraintLayout, also made its height as wrap_content
And here is with the ConstraintLayout
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="30dp">
<ImageView
android:id="#+id/post_request_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/general_back_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_post_request_header_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:fontFamily="#font/muli_black"
android:text="#string/_post_request_header_name"
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="30sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/post_request_back_button" />
<TextView
android:id="#+id/id_how_requests_work"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/how_requests_work"
android:textColor="#color/colorAccent"
android:textSize="10sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_post_request_header_name" />
<ListView
android:id="#+id/postlist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_how_requests_work" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/postadd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_margin="16dp"
android:layout_marginTop="20dp"
android:src="#drawable/postrequest_add_btn" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am using a fragment to display cardview and a common Bottomnavigation for all fragments. Here I have more than 5 cards as per my data but I am not able to scroll to see all cards. only scrollable up to the second card and the second one is also not fully visible due to the bottom navigation.
main_activity.xml
<?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"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff293353"
android:paddingTop="20dp">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_above="#id/nav_view"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/mobile_navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="#drawable/bottom_tab_style"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
Then Recycleview
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:layout_marginBottom="10dp"
android:weightSum="1"
android:layout_marginStart="70dp"
android:layout_marginEnd="70dp"
android:layout_gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:background="#drawable/left_enabled"
android:layout_weight="0.5"
android:textAlignment="center"
android:id="#+id/btn_normal"
android:text="#string/normal"
android:textColor="#color/white"
android:textStyle="bold" />
<TextView
android:id="#+id/btn_cognitive"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#drawable/right_disabled"
android:gravity="center"
android:text="#string/cognitive"
android:textAlignment="center"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_height="wrap_content">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
</ScrollView>
Then cardview content
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:background="#drawable/cardstyle"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
>
<com.google.android.material.card.MaterialCardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent"
card_view:cardBackgroundColor="#color/transparent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
card_view:cardCornerRadius="12dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#3f4865"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dp"
>
<TextView
android:id="#+id/txt_recordTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/poppins"
android:paddingStart="12dp"
android:text="Normal Test 01"
android:gravity="center_vertical"
android:textColor="#color/white"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_card_walk" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/parameter1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.12"
android:text="No: of gait cycles"
android:textColor="#cecece"
android:textSize="12sp" />
<TextView
android:id="#+id/p1_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.16"
android:text="Details"
android:textColor="#FFF"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_card_walk" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/parameter2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.12"
android:text="Stride Length"
android:textColor="#cecece"
android:textSize="12sp" />
<TextView
android:id="#+id/p2_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.16"
android:text="Details"
android:textColor="#FFF"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="10dp"
android:src="#drawable/ic_card_walk" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/parameter3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.12"
android:text=" Gait time"
android:textColor="#cecece"
android:textSize="12sp" />
<TextView
android:id="#+id/p3_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins"
android:letterSpacing="0.16"
android:text="p2"
android:textColor="#FFF"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#drawable/info_button_style"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/total_n_gait_score"
android:textAlignment="center"
android:textColor="#FFF" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ProgressBar
android:id="#+id/card_progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_centerInParent="true"
android:layout_marginTop="10dp"
android:background="#drawable/circle_shape"
android:indeterminate="false"
android:max="100"
android:progress="65"
android:progressDrawable="#drawable/card_progress" />
<TextView
android:id="#+id/text_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="60%"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#color/white" />
</FrameLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal"
android:paddingBottom="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:id="#+id/card_date"
android:text="date"
android:textColor="#FFF"
android:textSize="1sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:ellipsize="end"
android:maxLines="1"
android:text="time"
android:id="#+id/card_time"
android:textColor="#FFF"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Please check my code and help me with this.
This is wrong in your main_activity.xml for fragment android:layout_above="#id/nav_view", it is used for RelativeLayout. Instead use app:layout_constraintBottom_toTopOf="#id/nav_view". This will solve your second issue(the second one is also not fully visible due to the bottom navigation).
Change your ScrollView to NestedScrollView.
In your cardview content you don't need ConstraintLayout, LinearLayout is sufficient as root element (remove ConstraintLayout as you are not utilising its power of flat view hierarchy). And if your LinearLayout background can be moved to background for MaterialCardView then you don't need LinearLayout too.
For your recyclerview set the nestedScrollingEnabled to false either through xml or by code. Try these things, it will solve your problem.
How can i create some TextView beside an ImageView in xml? I've tried my best, but still I can't make it.
Like this:
Display frame
I need 4 texts containing the title and description. The texts are intended to describe the image, any pointers or help would be appreciated
This is my xml code(end up getting a messy layout)
<?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:background="#android:color/white"
android:padding="#dimen/activity_vertical_margin"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_item_photo"
android:layout_width="150dp"
android:layout_height="200dp"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:src="#drawable/oneplus_7_pro_r1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/img_item_photo"
android:layout_toRightOf="#id/img_item_photo"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="165dp"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:text="#string/Hape_name"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_item_Desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin" />
</LinearLayout>
</RelativeLayout>
Just remove android:layout_marginBottom="165dp" from your textview
Try this
<?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:background="#android:color/white"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_item_photo"
android:layout_width="150dp"
android:layout_height="200dp"
android:src="#drawable/ic_search_black" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/img_item_photo"
android:layout_toRightOf="#id/img_item_photo"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/load_available"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_item_Desc"
android:text="#string/load_available"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Also, try with LinearLayout
<?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:background="#android:color/white"
android:orientation="horizontal"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img_item_photo"
android:layout_width="150dp"
android:layout_height="200dp"
android:src="#drawable/ic_search_black" />
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/load_available"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/load_available"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/load_available"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_item_Desc"
android:text="#string/load_available"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
You can simply do this view using ConstraintLayout and it will look like below image and I posted the XML also use this:
Small Note: AndroidX is used here. If you are not familiar with androidX then, please take a small break to know about androidX and then try this.
if you are using support library (not androidX) then replace androidx.constraintlayout.widget.ConstraintLayout with android.support.constraint.ConstraintLayout in below code
<?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:background="#android:color/white">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/tv_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_8dp"
android:text="textView 1"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#color/black"
app:layout_constraintBottom_toTopOf="#id/tv_2"
app:layout_constraintStart_toEndOf="#id/imageView1"
app:layout_constraintTop_toTopOf="#id/imageView1" />
<TextView
android:id="#+id/tv_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_8dp"
android:text="textView 2"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#color/black"
app:layout_constraintBottom_toTopOf="#id/tv_3"
app:layout_constraintStart_toEndOf="#id/imageView1"
app:layout_constraintTop_toBottomOf="#id/tv_1" />
<TextView
android:id="#+id/tv_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_8dp"
android:text="textView 3"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#color/black"
app:layout_constraintBottom_toTopOf="#id/tv_4"
app:layout_constraintStart_toEndOf="#id/imageView1"
app:layout_constraintTop_toBottomOf="#id/tv_2" />
<TextView
android:id="#+id/tv_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_8dp"
android:text="textView 4"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="#id/imageView1"
app:layout_constraintStart_toEndOf="#id/imageView1"
app:layout_constraintTop_toBottomOf="#id/tv_3" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can use layout weight for better result in every case,as shown below,...
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:TextViewandroid="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/icons"
android:orientation="horizontal"
android:weightSum="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="#dimen/margin_10dp"
android:layout_weight="1"
android:background="#color/icons"
android:gravity="center">
<ImageView
android:id="#+id/img_item_photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/background_img" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#color/icons">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_5dp"
android:background="#drawable/style_curve_accent"
android:text="Title"
android:textSize="#dimen/margin_15sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_5dp"
android:background="#drawable/style_edittext"
android:text="Descripltion is Here. Descripltion is Here."
android:textSize="#dimen/margin_15sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_5dp"
android:layout_marginTop="#dimen/margin_5dp"
android:background="#drawable/style_curve_accent"
android:text="Title"
android:textSize="#dimen/margin_20dp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_5dp"
android:background="#drawable/style_edittext"
android:text="Descripltion is Here.Descripltion is Here."
android:textSize="#dimen/margin_15sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_5dp"
android:background="#drawable/style_curve_accent"
android:text="Title"
android:textSize="#dimen/margin_20dp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_5dp"
android:background="#drawable/style_edittext"
android:text="Descripltion is Here.Descripltion is Here."
android:textSize="#dimen/margin_15sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_5dp"
android:background="#drawable/style_curve_accent"
android:text="Title"
android:textSize="#dimen/margin_20dp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_5dp"
android:background="#drawable/style_edittext"
android:text="Description is here. Description is Here."
android:textSize="#dimen/margin_15sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
Hope this it will help you!
Thanks!!
Though your code seems fine with minor improvements.
Here is some alternate code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#android:color/white"
android:padding="#dimen/activity_vertical_margin"
android:orientation="horizontal"
android:layout_height="match_parent">
<ImageView
android:padding="10dp"
android:layout_weight="1"
android:id="#+id/img_item_photo"
android:layout_width="0dp"
android:layout_height="200dp"
android:src="#drawable/side_nav_bar" />
<LinearLayout
android:padding="10dp"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_item_Desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test 1"
/>
<TextView
android:id="#+id/tv_item_name1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test"
android:layout_marginTop="5dp"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_item_Desc2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test 2"
/>
</LinearLayout>
Here is solution,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/img_item_photo"
android:layout_width="150dp"
android:layout_height="200dp"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin" />
<LinearLayout
android:id="+#id/layout_field"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:text="Hape_name"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_item_Desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin" />
</LinearLayout>
</LinearLayout>
Add more textView inside layout_field.
I have the following activity_main.xml file, and I want to align the three buttons inside the LinearLayout to the bottom of the page. I've tried layout_alignParentBotton="true"
but that doesn't work.. is there any setting that would let me bring the linearLayout to the bottom of the activity?
thanks
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blueBackground"
tools:context="org.pctechtips.george.dailyquotes.MainActivity">
<TextView
android:id="#+id/main_title"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:text="Daily Quotes"
android:textSize="30dp"
android:textColor="#color/whiteText"
android:textAlignment="center"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="16dp" />
<ImageView
android:id="#+id/main_image"
android:layout_width="100dp"
android:layout_height="100dp"
app:srcCompat="#mipmap/ic_launcher_round"
android:layout_centerHorizontal="true"
tools:layout_editor_absoluteY="89dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="#+id/quote_text"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:text="This is a random text"
android:textColor="#color/whiteText"
android:textSize="20dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="246dp" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/previous_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_previous"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="473dp" />
<ImageView
android:id="#+id/share_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="473dp" />
<ImageView
android:id="#+id/next_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_next"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="473dp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Change android:layout_alignParentBottom="true" to app:layout_constraintBottom_toBottomOf="parent". Here is an example that also stretches that layout to the width of the parent and centers the views within it
...
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
...
Add following Constraints to Your Linear layout .
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
Some of your views are not constraints properly. If you want to use RelativeLayout then try the solution below .
<?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="#color/blueBackground"
tools:context="org.pctechtips.george.dailyquotes.MainActivity">
<TextView
android:id="#+id/main_title"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:text="Daily Quotes"
android:textSize="30dp"
android:textAlignment="center"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="16dp" />
<ImageView
android:id="#+id/main_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="#+id/main_title"
app:srcCompat="#mipmap/ic_launcher_round"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/quote_text"
android:layout_width="match_parent"
android:layout_below="#+id/main_image"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerHorizontal="true"
android:text="This is a random text"
android:textSize="20dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/previous_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_previous"
/>
<ImageView
android:id="#+id/share_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView
android:id="#+id/next_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_next"
/>
</LinearLayout>
</RelativeLayout>
Replace the parent constraint layout with a RelativeLayout
Try editing your layout this way:
<?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:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical" android:background="#color/blueBackground" tools:context="org.pctechtips.george.dailyquotes.MainActivity">
<LinearLayout android: layout_weight="1" android orientation="vertical" android:layout_width="match_parent" android:layout_height="0dp">
<TextView android:id="#+id/main_title" android:layout_width="368dp" android:layout_height="wrap_content" android:text="Daily Quotes" android:textSize="30dp" android:textColor="#color/whiteText" android:textAlignment="center" /> <ImageView android:id="#+id/main_image" android:layout_width="100dp" android:layout_height="100dp" app:srcCompat="#mipmap/ic_launcher_round" /> <TextView android:id="#+id/quote_text" android:layout_width="368dp" android:layout_height="wrap_content" android:text="This is a random text" android:textColor="#color/whiteText" android:textSize="20dp"/>
</LinearLayout>
<LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_alignParentBottom="true"> <ImageView android:id="#+id/previous_quote" android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="#android:drawable/ic_media_previous"/> <ImageView android:id="#+id/share_quote" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <ImageView android:id="#+id/next_quote" android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="#android:drawable/ic_media_next"/> </LinearLayout> </LinearLayout>
Note the layout weight in the Linear Layout.
Your root layout is a ConstraintLayout so you should position its children using the appropriate constraints listed in the documentation. In order to position the LinearLayout at the bottom center and wrap its content you should use the following:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
You can also optimize your layout by removing the LinearLayout altogether and constraining the three ImageViews in a horizontal chain as direct children of the root ConstraintLayout like this:
<ImageView
android:id="#+id/previous_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_previous"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/share_quote"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/share_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/next_quote"
app:layout_constraintStart_toEndOf="#id/previous_quote"/>
<ImageView
android:id="#+id/next_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_next"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/share_quote" />
Try this..
<?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-
8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_light">
<TextView
android:id="#+id/main_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Daily Quotes"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/main_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#mipmap/ic_launcher_round"
tools:layout_editor_absoluteY="89dp" />
<TextView
android:id="#+id/quote_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="This is a random text"
android:textColor="#android:color/white"
android:textSize="20dp"
app:layout_constraintTop_toBottomOf="#id/main_image" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/previous_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_previous" />
<ImageView
android:id="#+id/share_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/next_quote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#android:drawable/ic_media_next" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>