Develop Reference

How to make a second color border with MaterialCardView?

I cannot find any questions online that have asked for this specifically
Screenshot of Square Border
How would I implement a red "second" border like in the image but on one side? I am using MaterialCardView for the main outside border. Would I just make a custom shape with red border on the left and use that as the background for the MaterialCardView?

This can be achieved easily with three nested MaterialCardViews by changing only the app:cardBackgroundColor, the app:cardCornerRadius and the android:layout_margin attributes for each card.
Below is the Xml Layout sample:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
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="200dp"
android:layout_margin="10dp"
app:cardBackgroundColor="#81afdc"
app:cardCornerRadius="10dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="4dp"
app:cardBackgroundColor="#a70e09"
app:cardCornerRadius="10dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="6dp"
app:cardBackgroundColor="#ffffff"
app:cardCornerRadius="6dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Sample Text"/>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
Result:

First, create two drawable resource file like below:
bg_cardView_inner_color.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/holo_red_dark"/>
<corners android:radius="7dp"/>
</shape>
bg_cardView_outline_color.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/white" />
<stroke android:color="#android:color/holo_blue_light"
android:width="5dp"/>
<corners android:radius="10dp"/>
</shape>
Then, in your XML file, Add those files as below:
activity_main.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DemoActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/bg_cardview_outline_color"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
android:paddingBottom="5dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#drawable/bg_cardview_inner_color">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:gravity="center_vertical|center"
android:layout_marginStart="10dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/your_image"
app:tint="#color/black"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="your text"
android:textSize="30sp"
android:gravity="center"
android:textStyle="bold"
/>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Android Bottom Nav Activity

I am trying to use Bottom Navigation Activity. I use the default 3 menu items with their fragments.
My problem is, I am seeing a gap between the ActionBar and the fragment. In the activity_main, I set the height to match_parent.
I tried to see if anyone else has this problem but could not come across.
In the activity_main.xml file, I have the code that comes with a creation of a new activity:
<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:paddingTop="?attr/actionBarSize">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
<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_constraintBottom_toTopOf="#id/nav_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:navGraph="#navigation/mobile_navigation"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
bottom_nav_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_home_black_24dp"
android:title="#string/title_home" />
<item
android:id="#+id/navigation_dashboard"
android:icon="#drawable/ic_dashboard_black_24dp"
android:title="#string/title_dashboard" />
<item
android:id="#+id/navigation_notifications"
android:icon="#drawable/ic_notifications_black_24dp"
android:title="#string/title_notifications" />
</menu>
mobile_navigation.xml
<navigation 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/mobile_navigation"
app:startDestination="#+id/navigation_home">
<fragment
android:id="#+id/navigation_home"
android:name="com.zakuto.myapplication.ui.home.HomeFragment"
android:label="#string/title_home"
tools:layout="#layout/fragment_home" />
<fragment
android:id="#+id/navigation_dashboard"
android:name="com.zakuto.myapplication.ui.dashboard.DashboardFragment"
android:label="#string/title_dashboard"
tools:layout="#layout/fragment_dashboard" />
<fragment
android:id="#+id/navigation_notifications"
android:name="com.zakuto.myapplication.ui.notifications.NotificationsFragment"
android:label="#string/title_notifications"
tools:layout="#layout/fragment_notifications" />
</navigation>
Below a screenshot of the screen.

Your layout has a padding-top. Remove this line
android:paddingTop="?attr/actionBarSize"

How do you remove the gap between NoActionBar and ImageView in Android Studio

How do I remove this gap in a ConstraintLayout? The top is an ImageView with a top constraint to the top of the parent (ConstraintLayout).
Gap at the top between the toolbar and banner
This is how my styles.xml looks like:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
My activity_main.xml looks like this:
<?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"
tools:context=".MainActivity">
<ImageView
android:id="#+id/headerImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/header" />
<Button
android:id="#+id/addlog_btn"
style="#android:style/Widget.DeviceDefault.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="108dp"
android:background="#drawable/newlogbtn"
android:fontFamily="#font/roboto_regular"
android:onClick="createNewLog"
android:paddingTop="72sp"
app:layout_constraintStart_toStartOf="#+id/headerImg"
app:layout_constraintTop_toTopOf="#+id/headerImg" />
<Button
android:id="#+id/addlog_btn2"
style="#android:style/Widget.DeviceDefault.Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:background="#drawable/settingsbtn"
android:fontFamily="#font/roboto_regular"
android:paddingTop="72sp"
app:layout_constraintEnd_toEndOf="#+id/headerImg"
app:layout_constraintTop_toTopOf="#+id/addlog_btn" />
</androidx.constraintlayout.widget.ConstraintLayout>
My end goal is this:
I would like to achieve this with just editing the XML if it is possible, I tried to change the margins and padding's of both parent and I didn't do it right or it just doesn't seem to work.

You can remove this gap by adding android:scaleType="centerCrop" to the banner ImageView so that it will fill the entire assigned room to it.
So the layout will be after this change:
<?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"
tools:context=".MainActivity">
<ImageView
android:id="#+id/headerImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/header" />
<Button
android:id="#+id/addlog_btn"
style="#android:style/Widget.DeviceDefault.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="108dp"
android:background="#drawable/newlogbtn"
android:fontFamily="#font/roboto_regular"
android:onClick="createNewLog"
android:paddingTop="72sp"
app:layout_constraintStart_toStartOf="#+id/headerImg"
app:layout_constraintTop_toTopOf="#+id/headerImg" />
<Button
android:id="#+id/addlog_btn2"
style="#android:style/Widget.DeviceDefault.Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:background="#drawable/settingsbtn"
android:fontFamily="#font/roboto_regular"
android:paddingTop="72sp"
app:layout_constraintEnd_toEndOf="#+id/headerImg"
app:layout_constraintTop_toTopOf="#+id/addlog_btn" />
</androidx.constraintlayout.widget.ConstraintLayout>

How can I declare my LinearLayout element?

In my IDE the LinearLayout-tag' is marked as red and the error message reads: "Element LinearLayout must be declared". I have my directory set up like this:
https://imgur.com/a/deneVxN
activity_main.xml:
<?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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_first_fragment"
android:icon="#drawable/ic_1"
android:title="First"
tools:ignore="HardcodedText" />
<item
android:id="#+id/nav_second_fragment"
android:icon="#drawable/ic_2"
android:title="Second"
tools:ignore="HardcodedText" />
<item
android:id="#+id/nav_third_fragment"
android:icon="#drawable/ic_3"
android:title="Third"
tools:ignore="HardcodedText" />
</group>
</menu>
</LinearLayout>
activity_main.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageButton
android:id="#+id/twitchBtn"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="124dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:scaleType="centerInside"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/twitch" />
<ImageButton
android:id="#+id/youtubeBtn"
android:layout_width="253dp"
android:layout_height="249dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/twitchBtn"
app:layout_constraintVertical_bias="0.336"
app:srcCompat="#drawable/youtube" />
<TextView
android:id="#+id/textPlattform"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="36dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Choose platform"
android:textAppearance="#style/TextAppearance.AppCompat"
android:textSize="38sp"
app:fontFamily="sans-serif"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- This DrawerLayout has two children at the root -->
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The navigation drawer that comes from the left -->
<!-- Note that `android:layout_gravity` needs to be set to 'start' -->
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_weight="1"
android:background="#android:color/white"
app:menu="#menu/drawer_view.xml"/>
<!-- This LinearLayout represents the contents of the screen -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The ActionBar displayed at the top -->
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- The main content view where fragments are loaded -->
<FrameLayout
android:id="#+id/flContent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I want to acheive a hamburger menu and I'am following this tutorial: https://github.com/codepath/android_guides/wiki/Fragment-Navigation-Drawer but if I run the program now I get a NullPointerExeptionbut I think it's because of drawer_view.xml not working.

Is because the definiton of the drawer_view.xml is wrong
drawer_view.xml is
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_first_fragment"
android:icon="#drawable/ic_1"
android:title="First"
tools:ignore="HardcodedText" />
<item
android:id="#+id/nav_second_fragment"
android:icon="#drawable/ic_2"
android:title="Second"
tools:ignore="HardcodedText" />
<item
android:id="#+id/nav_third_fragment"
android:icon="#drawable/ic_3"
android:title="Third"
tools:ignore="HardcodedText" />
</group>
</menu>
In the activity_main.xml the menu not contains the extesion .xml

Android ToolBar icon positioning

I am trying to recreate this menu setup in Android:
But I can only get this:
I can't seem to get rid of the WebBrowser text in the toolbar without the app crashing. Additionally I can't space out the icons.
There is a small Progress bar between the forward and back buttons.
Any help?
Here is my menu_main.xml
<menu 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"
tools:context="net.txisystems.txiwebbrowser.MainActivity">
<item
android:id="#+id/action_home"
android:icon="#drawable/ic_house"
android:menuCategory="secondary"
android:orderInCategory="1"
android:title="#string/action_refresh"
app:showAsAction="always" />
<item
android:id="#+id/action_back"
android:icon="#drawable/ic_back"
android:menuCategory="secondary"
android:orderInCategory="2"
android:title="#string/action_refresh"
app:showAsAction="always" />
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<item
android:id="#+id/action_forward"
android:icon="#drawable/ic_forward"
android:menuCategory="secondary"
android:orderInCategory="3"
android:title="#string/action_refresh"
app:showAsAction="always" />
<item
android:id="#+id/action_refresh"
android:icon="#drawable/ic_refresh"
android:menuCategory="secondary"
android:orderInCategory="4"
android:title="#string/action_refresh"
app:showAsAction="always" />
</menu>
Placing the progress bar in my activity_main.xml under the toolbar I get this:
Here is the activity_main.xml code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
tools:context="net.txisystems.webbrowser.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<ProgressBar
android:indeterminate="true"
android:visibility="visible"
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleSmall"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />

To remove title use in your activity/fragment
toolbar.setTitle(null)
You cannot put progressbar into menu.xml file
Use RelativeLayout inside Toolbar and put all views you need there like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:elevation="4dp"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/gradient"
app:popupTheme="#style/AppTheme.PopupOverlay">
<ProgressBar
android:indeterminate="true"
android:visibility="invisible"
android:id="#+id/toolbar_progress_bar"
android:layout_width="28dp"
android:layout_marginRight="16dp"
android:layout_height="28dp"
android:indeterminateTint="#fff"
android:indeterminateTintMode="src_in"
android:layout_gravity="right"
/>