cutting straight to the chase. I want to have a bottom navigation bar for my application, and then at the top there is a toolbar, in the middle will be a scrollview where the contents will be placed.
The problem now here is that the ScrollView layout pushes the navigation bar out of view, and now the navigation bar won't show.
As you can see, the navigation bar isn't showing because the ScrollView takes up the bottom of the screen too.
Another solution I've tried but it turned out the navigation bar pops up on top of the ScrollView
That blue bar below the Home toolbar is the navigation bar.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="polytechnic.temasek.bluebeatsmusicapplication.HomePageActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#drawable/bluebeatsbackground2">
<TextView
android:id="#+id/toolbartitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Home"
android:textColor="#android:color/white"
android:textSize="32sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<ScrollView
android:layout_width="match_parent"
android:layout_height="539dp"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="0dp">
[Content inside]
</android.support.constraint.ConstraintLayout>
</ScrollView>
<android.support.design.widget.BottomNavigationView
android:id="#+id/the_bottom_navigation"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:itemBackground="#color/colorPrimary">
</android.support.design.widget.BottomNavigationView>
</LinearLayout>
So far, I've only been able to bruteforce the Scrollview's height to a certain dp to make room for the navigation bar, but there must be another way which I'm supposedly missing?
You could better use Relative Layout or Constraint Layout (I recommend to use Constraint Layout) to handle such situations.
I have modified your layout to Constraint Layout.
I've tricked the scrollbar's marginBottom value to height of the bottomNavigationBar [Else, some of the contents of scrollView remain behind the bottomNavBar].
<android.support.constraint.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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#000"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/toolbartitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Home"
android:textColor="#android:color/white"
android:textSize="32sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="50dp"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/long_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
<android.support.design.widget.BottomNavigationView
android:id="#+id/the_bottom_navigation"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</android.support.design.widget.BottomNavigationView>
</android.support.constraint.ConstraintLayout>
Related
So I have a bottom navigation working with 3 buttons, and they worked perfectly fine, but ever since I added a toolbar in the top right the bottom navigation won't display its buttons any more (the bar for the bottom navigation is still there, but the three buttons are gone and no longer pressable).
Anyone knows how to fix this? I tried switching the Layout type but wasn't able to fix it
This is my code for the XML file:
<?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"
tools:context=".Search"
android:background="#00AFAF">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<RelativeLayout
android:gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="#string/app_name"
android:textSize="25sp"
android:gravity="center"
android:textStyle="bold"
android:textColor="#color/purple_700"
android:layout_alignParentStart="true"
android:layout_marginStart="10dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<Spinner
android:id="#+id/spinnerTags"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:entries="#array/types"
android:gravity="center" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/random_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigator"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:scrollbars="vertical"
android:layout_marginBottom="?attr/actionBarSize"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigator"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/purple_700"
app:itemTextColor="#drawable/selector"
app:itemIconTint="#drawable/selector"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/menu" />
</LinearLayout>
I am trying to make a scrollable list of cardviews(which are housed in framelayouts) inside a linear layout, however the first cardview I placed was in the wrong position (I expect it to be at the top of the linear layout, but instead it appeared at the bottom) Is this a bug? How can I fix it?
here is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="417dp"
android:layout_marginTop="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/productDetails">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:id="#+id/history_1"
android:layout_width="380dp"
android:layout_height="102dp"
android:layout_marginTop="200dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
Here is the picture:
picture
change the orientation to horizontal
your code should be like that
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="417dp"
android:layout_marginTop="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/productDetails">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"> <!-- changed from vertical to horizontal -->
<FrameLayout
android:id="#+id/history_1"
android:layout_width="380dp"
android:layout_height="102dp"
android:layout_marginTop="200dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
I have used card view as a row item in my recycler view and every cardview has different background color.
I've done it successfully until i add corner radius in my cardview. Now it is displaying some white layout in the middle.
Here is the code for my cardView.
<androidx.cardview.widget.CardView 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"
android:layout_margin="5dp"
android:id="#+id/cvNB"
app:cardCornerRadius="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/txtNBHead"
android:layout_weight="0.9"
android:textSize="24sp"
android:fontFamily="#font/raleway_semibold"
android:textColor="#color/colorPrimary"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:id="#+id/NBOptions"
android:src="#drawable/ic_menu_icon_white_24dp"
android:layout_weight="0.1"/>
</LinearLayout>
<TextView
android:id="#+id/txtNBStory1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/raleway_thin"
android:textSize="18sp"
android:textColor="#color/colorPrimary"
android:layout_margin="2dp"/>
<TextView
android:id="#+id/txtNBStory2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/raleway_thin"
android:textSize="18sp"
android:textColor="#color/colorPrimary"
android:layout_margin="2dp"/>
<TextView
android:id="#+id/txtNBStory3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/raleway_thin"
android:textSize="18sp"
android:textColor="#color/colorPrimary"
android:layout_margin="2dp"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
I am using it in recycler view with different background colors shown in below code
if (android.os.Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP){
holder.cvNB.getBackground().setAlpha(0);
} else {
holder.cvNB.setCardBackgroundColor(ContextCompat.getColor(context, colors[index]));
}
here is what i am getting
Cardview displaying white section
I am really frustrated please help me out
Here is the code for recycler view layout
<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">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/listMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:scrollbars="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"/>
</ScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fabAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:src="#drawable/icon_add"
app:backgroundTint="#color/colorProfileText"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.airbnb.lottie.LottieAnimationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listNBAnim"
app:lottie_fileName="nb_loading_anim.json"
app:lottie_loop="true"
android:visibility="gone"
app:lottie_autoPlay="true"/>
</RelativeLayout>
I have a SwipeRefreshLayout containing a RecyclerView for a chat activity. I have its bottom constrained to the top of a linear layout at the bottom of the screen:
<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="fill_parent"
android:layout_height="fill_parent"
android:background="#color/colorPrimaryDark"
android:paddingLeft="0dp"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingRight="0dp"
android:paddingBottom="0dp"
tools:context="org.andrewedgar.theo.ChatRoomActivity">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swiperefresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/listFooter"
app:layout_constraintBottom_toTopOf="#+id/listFooter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/chatRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
app:layout_constraintBottom_toTopOf="#+id/listFooter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.v4.widget.SwipeRefreshLayout>
<LinearLayout
android:id="#+id/listFooter"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#drawable/custom_border"
android:gravity="bottom"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<EditText
android:id="#+id/messageInput"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent"
android:ellipsize="start"
android:gravity="center"
android:hint="#string/prompt_msg"
android:imeActionLabel="#string/action_send"
android:imeOptions="actionUnspecified"
android:inputType="textCapSentences|textAutoCorrect"
android:maxLines="2"
android:textColor="#color/white"
android:textColorHint="#color/hintColor"
android:importantForAutofill="no" tools:targetApi="o"/>
<ImageButton
android:id="#+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:contentDescription="#string/action_send"
android:padding="10dp"
android:src="#android:drawable/ic_menu_send" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
..but the SwipeRefreshLayout still takes up the whole screen and the messages appear behind the message input:
Is there a special type of constraint required for this to work?
Change the height of SwipeRefreshLayout to 0dp
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swiperefresh"
android:layout_width="match_parent"
android:layout_height="0dp"
Why?
As per the documentation:
You can set the view size to a ratio such as 16:9 if at least one of
the view dimensions is set to "match constraints" (0dp).
Also
Note: You cannot use match_parent for any view in a ConstraintLayout. Instead use "match constraints" (0dp).
I am trying to use custom toolbar. I want icon and title in center of my toolbar. I have tried lot for set it in center but I am unable to do it. My XML is like below
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?actionBarSize"
android:layout_width="match_parent"
android:background="#color/colorPrimary">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="horizontal">
<ImageView
android:padding="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:text="MyApplication"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title"
android:textColor="#color/colorWhite" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
But its not display perfect as per my need. I want first logo and than title in center of toolbar but its look like this
Look
Let me know if someone can help me for do it. I am really sorry if its very simple. I am learning yet. Thanks
Try this instead:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?actionBarSize"
android:layout_width="match_parent"
android:paddingRight="16dp"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:padding="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_launcher"/>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MyApplication"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title"
android:textColor="#color/colorWhite" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
Using LinearLayout will allow you to easily make sure the views don't overlap. I also added 16dp of padding to the right side to compensate for the 16dp margin android automatically adds to the left side.
Try giving layout margin for the image view and Align the textview center horizontal which will give you your desired output.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?actionBarSize"
android:layout_width="match_parent"
android:background="#color/colorPrimary">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="300dp"
android:padding="5dp"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="MyApplication"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title"
android:textColor="#color/colorWhite" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Try this! A little bit easier to just use a LinearLayout with a horizontal orientation imo. Change the imageview source and title text as needed:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?actionBarSize"
android:layout_width="match_parent"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Title"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>