Skip to content

Instantly share code, notes, and snippets.

@mohamedebrahim96
Last active December 12, 2018 23:10
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save mohamedebrahim96/e39a2a35a58d20fdae04c5fbdca84b53 to your computer and use it in GitHub Desktop.
Save mohamedebrahim96/e39a2a35a58d20fdae04c5fbdca84b53 to your computer and use it in GitHub Desktop.
The function of the button at the center is to call an activity and the TabLayout will be place at the bottom of the screen.
<?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"
tools:context="com.vacuum.app.cinema.MainActivity">
<!--SOME CODE FOR MY AppBarLayout-->
<!--SOME CODE FOR MY ToolBar-->
<!--INCLUDE content_main.xml here-->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/background"
android:scaleType="fitXY"
/>
<include layout="@layout/content_main" />
<!--START OF FloatingActionButton and set it to bottom|center-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="bottom|center"
android:layout_margin="10dp"
android:src="@drawable/logo"
/>
</android.support.design.widget.CoordinatorLayout>
<?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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.vacuum.app.cinema.MainActivity"
tools:showIn="@layout/activity_main">
<!--I use LinearLayout to be the container_parent-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:orientation="vertical">
<!--TOP VIEW-->
<RelativeLayout
android:id="@+id/top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</RelativeLayout>
<!--END OF TOP VIEW-->
<!--BOTTOM VIEW-->
<android.support.v7.widget.CardView
android:id="@+id/bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:cardBackgroundColor="@color/colorWhite"
app:cardCornerRadius="0dp"
app:cardElevation="20dp"
app:cardUseCompatPadding="false"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp">
<LinearLayout
android:id="@+id/bottom_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
android:gravity="center_horizontal"
android:minHeight="48dp"
android:orientation="horizontal">
<ImageButton
android:id="@+id/btn_one"
style="@style/Base.Widget.AppCompat.ActionButton"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="@drawable/if_sed_04_2232319"/>
<ImageButton
android:id="@+id/btn_two"
style="@style/Base.Widget.AppCompat.ActionButton"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="@drawable/if_sed_14_2232334" />
<!--START OF FAKE BUTTON FOR SPACER-->
<ImageButton
android:id="@+id/fake_btn_spacer"
style="@style/Base.Widget.AppCompat.ActionButton"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="@null"
android:clickable="false" />
<!--END OF START OF FAKE BUTTON FOR SPACER-->
<ImageButton
android:id="@+id/btn_three"
style="@style/Base.Widget.AppCompat.ActionButton"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="@drawable/if_sed_10_2232321" />
<ImageButton
android:id="@+id/btn_four"
style="@style/Base.Widget.AppCompat.ActionButton"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="@drawable/if_group_309042"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<!--END OF BOTTOM VIEW-->
</LinearLayout>
</android.support.constraint.ConstraintLayout>
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="24"
android:viewportHeight="24"
android:width="24dp"
android:height="24dp">
<path
android:pathData="M16.5 14c-1.5 0 -2.7 0.4 -3.6 0.9 1.4 1.2 2 2.6 2.1 2.7l0.1 0.2 0 2.2 8 0 0 -2C23 18 21.4 14 16.5 14Z"
android:fillColor="#8e8e8e" />
<path
android:pathData="M20 8.5A3.5 3.5 0 0 1 16.5 12 3.5 3.5 0 0 1 13 8.5 3.5 3.5 0 0 1 16.5 5 3.5 3.5 0 0 1 20 8.5Z"
android:fillColor="#8e8e8e" />
<path
android:pathData="M4 8.5C4 6.6 5.6 5 7.5 5 9.4 5 11 6.6 11 8.5 11 10.4 9.4 12 7.5 12 5.6 12 4 10.4 4 8.5ZM7.5 14C2.6 14 1 18 1 18l0 2 13 0 0 -2c0 0 -1.6 -4 -6.5 -4z"
android:fillColor="#8e8e8e" />
</vector>
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="48"
android:viewportHeight="48.00004"
android:width="48dp"
android:height="48.00004dp">
<path
android:pathData="M24.94067 13.43801c-0.51855 -0.51953 -1.36328 -0.51953 -1.88184 0l-9.125 9.125c-0.37646 0.37695 -0.58398 0.87793 -0.58398 1.41016l0 9.64844c0 0.7334 0.59717 1.33008 1.33057 1.33008l7.23926 0c0.19336 0 0.3501 -0.15625 0.3501 -0.34961l0 -4.92285c0 -0.22559 0.0415 -0.43848 0.12646 -0.64258 0.25684 -0.66016 0.88623 -1.08789 1.60352 -1.08789 0.46924 0 0.90234 0.17969 1.22266 0.50781 0.16895 0.16992 0.30078 0.36914 0.38477 0.58789 0.08154 0.19531 0.12256 0.4082 0.12256 0.63477l0 4.92285c0 0.19336 0.15674 0.34961 0.3501 0.34961l7.23926 0c0.73389 0 1.33105 -0.59668 1.33105 -1.33008l0 -9.64844c0 -0.5332 -0.20752 -1.0332 -0.58447 -1.41016l-9.12502 -9.125zm-9.93359 18.31738l0 -0.88867c0 -0.19336 0.15674 -0.34961 0.3501 -0.34961 0.19336 0 0.3501 0.15625 0.3501 0.34961l0 0.88867c0 0.19336 -0.15674 0.34961 -0.3501 0.34961 -0.19336 0 -0.3501 -0.15625 -0.3501 -0.34961zm0.70019 -2.54785c0 0.19336 -0.15674 0.34961 -0.3501 0.34961 -0.19336 0 -0.3501 -0.15625 -0.3501 -0.34961l0 -3.70117c0 -0.19336 0.15674 -0.34961 0.3501 -0.34961 0.19336 0 0.3501 0.15625 0.3501 0.34961l0 3.70117z"
android:fillColor="#5e2655" />
</vector>
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="48"
android:viewportHeight="48"
android:width="48dp"
android:height="48dp">
<path
android:pathData="M24 8.30664c-8.65332 0 -15.69385 7.04053 -15.69385 15.69385 0 8.65283 7.04053 15.69287 15.69385 15.69287 8.65332 0 15.69385 -7.04004 15.69385 -15.69287C39.69385 15.34717 32.65332 8.30664 24 8.30664Zm7.34717 23.60156l-14.69434 0c-0.19336 0 -0.3501 -0.15625 -0.3501 -0.34961 0 -4.24463 3.45312 -7.69775 7.69727 -7.69775 4.24415 0 7.69727 3.45312 7.69727 7.69775 0 0.19336 -0.15674 0.34961 -0.3501 0.34961zM23.99854 16.09229c2.13086 0 3.86475 1.73389 3.86475 3.86475 0 2.13086 -1.73389 3.86426 -3.86475 3.86426 -2.13086 0 -3.86475 -1.7334 -3.86475 -3.86426 0 -2.13086 1.73389 -3.86475 3.86475 -3.86475zm-2.49415 -4.53223c-0.03369 -0.19043 0.09326 -0.37207 0.28369 -0.40576 0.55273 -0.09814 1.10986 -0.16162 1.65674 -0.18896 0.19434 -0.0127 0.35742 0.13916 0.36719 0.33203 0.0098 0.19336 -0.13916 0.35742 -0.33203 0.36719 -0.51758 0.02588 -1.0459 0.08594 -1.56982 0.1792 -0.02051 0.0034 -0.04102 0.0054 -0.06152 0.0054 -0.16651 -0.00001 -0.31397 -0.11915 -0.34425 -0.28907zm-6.30859 2.86279c1.16504 -1.00342 3.01953 -2.33057 5.23877 -2.95752 0.1875 -0.0498 0.38037 0.05566 0.43213 0.2417 0.05225 0.18604 -0.05566 0.37939 -0.2417 0.43213 -2.09619 0.5918 -3.86084 1.85693 -4.97217 2.81396 -0.06641 0.05713 -0.14746 0.08496 -0.22852 0.08496 -0.09814 0 -0.1958 -0.0415 -0.26514 -0.12158 -0.12597 -0.14648 -0.10985 -0.36767 0.03663 -0.49365z"
android:fillColor="#8e8e8e" />
</vector>
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="48"
android:viewportHeight="48"
android:width="48dp"
android:height="48dp">
<path
android:pathData="M24 8.30664C15.34668 8.30664 8.30615 15.34668 8.30615 24 8.30615 32.65332 15.34668 39.69336 24 39.69336 32.65332 39.69336 39.69385 32.65332 39.69385 24 39.69385 15.34668 32.65332 8.30664 24 8.30664Zm7.12793 9.0459l-5.125 8.53027c-0.0293 0.04883 -0.07031 0.08984 -0.11963 0.11914l-8.53076 5.125c-0.05566 0.03418 -0.11816 0.0498 -0.18018 0.0498 -0.09033 0 -0.18018 -0.03418 -0.24756 -0.10254 -0.11377 -0.11328 -0.13525 -0.29004 -0.05225 -0.42773l5.12793 -8.52734C22.02979 22.07031 22.0708 22.0293 22.12012 22l8.52783 -5.12793c0.13672 -0.08398 0.31348 -0.0625 0.42773 0.05273 0.11377 0.11329 0.13526 0.29004 0.05225 0.42774zm-7.48438 -6.05078c0.0093 0.19336 -0.13916 0.35742 -0.33252 0.36719 -0.51221 0.02539 -1.04053 0.08496 -1.56934 0.17871 -0.021 0.0039 -0.04102 0.0049 -0.06152 0.0049 -0.1665 0 -0.31445 -0.11914 -0.34424 -0.28906 -0.03369 -0.19043 0.09375 -0.37207 0.28369 -0.40527 0.55811 -0.09863 1.11572 -0.16211 1.65723 -0.18848 0.19385 0 0.35694 0.13965 0.3667 0.33203zm-8.61621 3.125c1.16504 -1.00293 3.01953 -2.33105 5.23877 -2.95703 0.18945 -0.0498 0.38037 0.05664 0.43213 0.24219 0.05225 0.18555 -0.05566 0.37891 -0.2417 0.43164 -2.09619 0.59082 -3.86084 1.85644 -4.97216 2.81445 -0.06641 0.05664 -0.14746 0.08398 -0.22852 0.08398 -0.09814 0 -0.1958 -0.04102 -0.26514 -0.12109 -0.12597 -0.14649 -0.10986 -0.36719 0.03662 -0.49414z"
android:fillColor="#8e8e8e" />
</vector>
@mohamedebrahim96
Copy link
Author

the final result:

device-2018-01-09-165328

======================
To use the CardView in your app, add the CardView dependency in build.gradle and Sync the project.

dependencies { 
    // CardView  
    implementation 'com.android.support:design:27.0.2'  
    implementation 'com.android.support:cardview-v7:27.0.2'  
}

Note:

  1. if_group_309042
  2. if_sed_04_2232319
  3. if_sed_10_2232321
  4. if_sed_14_2232334

are just XML icons

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment