Android Create Popup Dialog Custom Light
1. Project Structure
2. Gradle
apply plugin: 'com.android.application' android { compileSdkVersion 28 defaultConfig { applicationId "dialog.androidtutorials.fyprojects.light" minSdkVersion 16 targetSdkVersion 28 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support.constraint:constraint-layout:1.1.3' testImplementation 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner:1.0.2' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' implementation 'com.android.support:design:28.0.0' implementation 'com.android.support:support-v13:27.1.1' implementation 'com.balysv:material-ripple:1.0.2' implementation 'com.github.bumptech.glide:glide:3.7.0' implementation 'de.hdodenhof:circleimageview:3.1.0' }
3. Main Activity
package dialog.androidtutorials.fyprojects.light.activity; import android.app.Dialog; import android.graphics.PorterDuff; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.AppCompatButton; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.Window; import android.view.WindowManager; import android.widget.ImageButton; import android.widget.TextView; import android.widget.Toast; import java.util.List; import de.hdodenhof.circleimageview.CircleImageView; import dialog.androidtutorials.fyprojects.light.adapter.AdapterListBasic; import dialog.androidtutorials.fyprojects.light.data.DataGenerator; import dialog.androidtutorials.fyprojects.light.model.People; import dialog.androidtutorials.fyprojects.light.utils.Tools; public class MainActivity extends AppCompatActivity { private View parent_view; private RecyclerView recyclerView; private AdapterListBasic mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); parent_view = findViewById(android.R.id.content); initToolbar(); initComponent(); } private void initToolbar() { Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setNavigationIcon(R.drawable.ic_menu); toolbar.getNavigationIcon().setColorFilter(getResources().getColor(R.color.grey_60), PorterDuff.Mode.SRC_ATOP); setSupportActionBar(toolbar); getSupportActionBar().setTitle("Custom Light"); getSupportActionBar().setDisplayHomeAsUpEnabled(true); Tools.setSystemBarColor(this, R.color.grey_5); Tools.setSystemBarLight(this); } private void initComponent() { recyclerView = (RecyclerView) findViewById(R.id.recyclerView); recyclerView.setLayoutManager(new LinearLayoutManager(this)); recyclerView.setHasFixedSize(true); List<People> items = DataGenerator.getPeopleData(this); items.addAll(DataGenerator.getPeopleData(this)); items.addAll(DataGenerator.getPeopleData(this)); //set data and list adapter mAdapter = new AdapterListBasic(this, items); recyclerView.setAdapter(mAdapter); // on item list clicked mAdapter.setOnItemClickListener(new AdapterListBasic.OnItemClickListener() { @Override public void onItemClick(View view, People obj, int position) { showCustomDialog(obj); } }); showCustomDialog(items.get(0)); } private void showCustomDialog(People p) { final Dialog dialog = new Dialog(this); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // before dialog.setContentView(R.layout.dialog_light); dialog.setCancelable(true); WindowManager.LayoutParams lp = new WindowManager.LayoutParams(); lp.copyFrom(dialog.getWindow().getAttributes()); lp.width = WindowManager.LayoutParams.WRAP_CONTENT; lp.height = WindowManager.LayoutParams.WRAP_CONTENT; ((TextView) dialog.findViewById(R.id.title)).setText(p.name); ((CircleImageView) dialog.findViewById(R.id.image)).setImageResource(p.image); ((ImageButton) dialog.findViewById(R.id.bt_close)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); } }); ((AppCompatButton) dialog.findViewById(R.id.bt_follow)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(getApplicationContext(), "Follow Clicked", Toast.LENGTH_SHORT).show(); } }); dialog.show(); dialog.getWindow().setAttributes(lp); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_search_setting, menu); Tools.changeMenuIconColor(menu, getResources().getColor(R.color.grey_60)); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { if (item.getItemId() == android.R.id.home) { finish(); } else { Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_SHORT).show(); } return super.onOptionsItemSelected(item); } }
4. Adapter
AdapterListBasic package dialog.androidtutorials.fyprojects.light.adapter; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import java.util.ArrayList; import java.util.List; import dialog.androidtutorials.fyprojects.light.activity.R; import dialog.androidtutorials.fyprojects.light.model.People; import dialog.androidtutorials.fyprojects.light.utils.Tools; public class AdapterListBasic extends RecyclerView.Adapter<RecyclerView.ViewHolder> { private List<People> items = new ArrayList<>(); private Context ctx; private OnItemClickListener mOnItemClickListener; public interface OnItemClickListener { void onItemClick(View view, People obj, int position); } public void setOnItemClickListener(final OnItemClickListener mItemClickListener) { this.mOnItemClickListener = mItemClickListener; } public AdapterListBasic(Context context, List<People> items) { this.items = items; ctx = context; } public class OriginalViewHolder extends RecyclerView.ViewHolder { public ImageView image; public TextView name; public View lyt_parent; public OriginalViewHolder(View v) { super(v); image = (ImageView) v.findViewById(R.id.image); name = (TextView) v.findViewById(R.id.name); lyt_parent = (View) v.findViewById(R.id.lyt_parent); } } @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { RecyclerView.ViewHolder vh; View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_people_chat, parent, false); vh = new OriginalViewHolder(v); return vh; } // Replace the contents of a view (invoked by the layout manager) @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) { if (holder instanceof OriginalViewHolder) { OriginalViewHolder view = (OriginalViewHolder) holder; People p = items.get(position); view.name.setText(p.name); Tools.displayImageRound(ctx, view.image, p.image); view.lyt_parent.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (mOnItemClickListener != null) { mOnItemClickListener.onItemClick(view, items.get(position), position); } } }); } } @Override public int getItemCount() { return items.size(); } }
5. Data
DataGenerator package dialog.androidtutorials.fyprojects.light.data; import android.content.Context; import android.content.res.TypedArray; import android.support.v7.content.res.AppCompatResources; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Calendar; import java.util.Collections; import java.util.List; import java.util.Locale; import java.util.Random; import dialog.androidtutorials.fyprojects.light.activity.R; import dialog.androidtutorials.fyprojects.light.model.People; import dialog.androidtutorials.fyprojects.light.utils.Tools; @SuppressWarnings("ResourceType") public class DataGenerator { private static Random r = new Random(); public static int randInt(int max) { int min = 0; return r.nextInt((max - min) + 1) + min; } /** * Generate dummy data people * * @param ctx android context * @return list of object */ public static List<People> getPeopleData(Context ctx) { List<People> items = new ArrayList<>(); TypedArray drw_arr = ctx.getResources().obtainTypedArray(R.array.people_images); String name_arr[] = ctx.getResources().getStringArray(R.array.people_names); for (int i = 0; i < drw_arr.length(); i++) { People obj = new People(); obj.image = drw_arr.getResourceId(i, -1); obj.name = name_arr[i]; obj.email = Tools.getEmailFromName(obj.name); obj.imageDrw = ctx.getResources().getDrawable(obj.image); items.add(obj); } Collections.shuffle(items); return items; } }
6. Model
People package dialog.androidtutorials.fyprojects.light.model; import android.graphics.drawable.Drawable; public class People { public int image; public Drawable imageDrw; public String name; public String email; public boolean section = false; public People() { } public People(String name, boolean section) { this.name = name; this.section = section; } }
7. Utils
Tools package dialog.androidtutorials.fyprojects.light.utils; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.PorterDuff; import android.graphics.drawable.Drawable; import android.os.Build; import android.support.annotation.ColorInt; import android.support.annotation.ColorRes; import android.support.annotation.DrawableRes; import android.support.v4.graphics.drawable.RoundedBitmapDrawable; import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory; import android.view.Menu; import android.view.View; import android.view.Window; import android.view.WindowManager; import android.widget.ImageView; import com.bumptech.glide.Glide; import com.bumptech.glide.request.target.BitmapImageViewTarget; import java.text.SimpleDateFormat; import java.util.Date; import dialog.androidtutorials.fyprojects.light.activity.R; public class Tools { public static void setSystemBarColor(Activity act) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Window window = act.getWindow(); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.setStatusBarColor(act.getResources().getColor(R.color.colorPrimaryDark)); } } public static void setSystemBarColor(Activity act, @ColorRes int color) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Window window = act.getWindow(); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.setStatusBarColor(act.getResources().getColor(color)); } } public static void setSystemBarLight(Activity act) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { View view = act.findViewById(android.R.id.content); int flags = view.getSystemUiVisibility(); flags |= View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR; view.setSystemUiVisibility(flags); } } public static String getFormattedTimeEvent(Long time) { SimpleDateFormat newFormat = new SimpleDateFormat("h:mm a"); return newFormat.format(new Date(time)); } public static String getFormattedDateEvent(Long dateTime) { SimpleDateFormat newFormat = new SimpleDateFormat("EEE, MMM dd yyyy"); return newFormat.format(new Date(dateTime)); } public static void displayImageRound(final Context ctx, final ImageView img, @DrawableRes int drawable) { try { Glide.with(ctx).load(drawable).asBitmap().centerCrop().into(new BitmapImageViewTarget(img) { @Override protected void setResource(Bitmap resource) { RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(ctx.getResources(), resource); circularBitmapDrawable.setCircular(true); img.setImageDrawable(circularBitmapDrawable); } }); } catch (Exception e) { } } public static String getEmailFromName(String name) { if (name != null && !name.equals("")) { String email = name.replaceAll(" ", ".").toLowerCase().concat("@mail.com"); return email; } return name; } public static void changeMenuIconColor(Menu menu, @ColorInt int color) { for (int i = 0; i < menu.size(); i++) { Drawable drawable = menu.getItem(i).getIcon(); if (drawable == null) continue; drawable.mutate(); drawable.setColorFilter(color, PorterDuff.Mode.SRC_ATOP); } } }
8. Layout
activity_main.xml <?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:layout_height="match_parent" android:background="@android:color/white" android:orientation="vertical"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:contentInsetStartWithNavigation="0dp" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/Toolbar.Light" /> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" android:scrollingCache="true" /> </LinearLayout>
dialog_light.xml <?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="300dp" android:layout_height="wrap_content" android:background="@android:color/white" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:orientation="horizontal"> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1" /> <ImageButton android:id="@+id/bt_close" android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="?attr/selectableItemBackgroundBorderless" android:tint="@color/grey_20" app:srcCompat="@drawable/ic_close" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:minHeight="120dp" android:orientation="vertical" android:padding="@dimen/spacing_mlarge"> <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/image" android:layout_width="90dp" android:layout_height="90dp" android:src="@drawable/photo_female_8" app:civ_border_color="@color/grey_5" app:civ_border_width="1dp" /> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_large" android:text="People name" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="@color/grey_80" android:textStyle="bold" /> <TextView android:id="@+id/content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/spacing_middle" android:layout_marginRight="@dimen/spacing_middle" android:layout_marginTop="@dimen/spacing_medium" android:text="@string/short_lorem_ipsum" android:textAlignment="center" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_40" /> <android.support.v7.widget.AppCompatButton android:id="@+id/bt_follow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_large" android:background="@drawable/btn_rounded_red" style="@style/Widget.AppCompat.Button.Borderless" android:paddingLeft="@dimen/spacing_mlarge" android:paddingRight="@dimen/spacing_mlarge" android:text="FOLLOW" android:textColor="@android:color/white" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="?attr/actionBarSize" android:layout_marginLeft="@dimen/spacing_large" android:layout_marginRight="@dimen/spacing_large" android:orientation="horizontal" android:paddingBottom="@dimen/spacing_large"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="35.7K" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="@color/grey_80" android:textStyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Followers" android:textAppearance="@style/Base.TextAppearance.AppCompat.Small" android:textColor="@color/grey_60" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="215" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="@color/grey_80" android:textStyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Following" android:textAppearance="@style/Base.TextAppearance.AppCompat.Small" android:textColor="@color/grey_60" /> </LinearLayout> </LinearLayout> </LinearLayout>
item_people_chat.xml <?xml version="1.0" encoding="utf-8"?> <com.balysv.materialripple.MaterialRippleLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/RippleStyleBlack" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:id="@+id/lyt_parent" android:layout_width="match_parent" android:layout_height="wrap_content" android:clickable="true" android:minHeight="?attr/actionBarSize" android:orientation="horizontal"> <ImageView android:id="@+id/image" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="@dimen/spacing_large" android:layout_marginRight="@dimen/spacing_large" android:layout_marginTop="@dimen/spacing_middle" android:src="@drawable/photo_female_1" /> <View android:layout_width="@dimen/spacing_medium" android:layout_height="0dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingBottom="@dimen/spacing_middle" android:paddingTop="@dimen/spacing_middle"> <TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="@dimen/spacing_middle" android:layout_marginRight="@dimen/spacing_middle" android:text="People Name" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="@color/grey_90" /> <TextView android:id="@+id/description" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="@dimen/spacing_middle" android:layout_marginRight="@dimen/spacing_middle" android:layout_marginTop="@dimen/spacing_medium" android:maxLines="2" android:text="@string/middle_lorem_ipsum" android:textAppearance="@style/TextAppearance.AppCompat.Small" android:textColor="@color/grey_40" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/grey_10" /> </LinearLayout> </LinearLayout> </com.balysv.materialripple.MaterialRippleLayout>
Toolbar.xml <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:contentInsetStartWithNavigation="0dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
9. Values
array.xml <?xml version="1.0" encoding="utf-8"?> <resources> <integer-array name="people_images"> <item>@drawable/photo_male_1</item> <item>@drawable/photo_male_2</item> <item>@drawable/photo_female_1</item> <item>@drawable/photo_female_2</item> <item>@drawable/photo_male_3</item> <item>@drawable/photo_female_3</item> <item>@drawable/photo_male_4</item> <item>@drawable/photo_female_4</item> <item>@drawable/photo_female_5</item> <item>@drawable/photo_male_5</item> <item>@drawable/photo_female_6</item> <item>@drawable/photo_male_6</item> <item>@drawable/photo_male_7</item> <item>@drawable/photo_female_7</item> <item>@drawable/photo_female_8</item> </integer-array> <string-array name="people_names"> <item>Anderson Thomas</item> <item>Adams Green</item> <item>Laura Michelle</item> <item>Betty L</item> <item>Miller Wilson</item> <item>Garcia Lewis</item> <item>Roberts Turner</item> <item>Mary Jackson</item> <item>Sarah Scott</item> <item>Kevin John</item> <item>Elizabeth</item> <item>Evans Collins</item> <item>Roberts</item> <item>Betty C</item> <item>Susan Lee</item> </string-array> </resources>
colors.xml <?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#1976D2</color> <color name="colorPrimaryDark">#1565C0</color> <color name="colorPrimaryLight">#1E88E5</color> <color name="colorAccent">#FF4081</color> <color name="colorAccentDark">#F50057</color> <color name="colorAccentLight">#FF80AB</color> <color name="light_green_600">#7CB342</color> <color name="overlay_light_80">#CCFFFFFF</color> <color name="grey_5">#f2f2f2</color> <color name="grey_10">#e6e6e6</color> <color name="grey_20">#cccccc</color> <color name="grey_40">#999999</color> <color name="grey_60">#666666</color> <color name="grey_80">#37474F</color> <color name="grey_90">#263238</color> <color name="red_300">#E57373</color> <color name="red_400">#EF5350</color> </resources>
styles.xml <resources> <style name="AppTheme" parent="BaseTheme" /> <style name="BaseTheme" 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> <item name="windowActionModeOverlay">true</item> </style> <style name="Button.Accent" parent="@style/Widget.AppCompat.Button.Colored"> <item name="colorButtonNormal">@color/colorAccent</item> <item name="android:textColor">@android:color/white</item> </style> <!--style for ripple library--> <style name="RippleStyleWhite"> <item name="mrl_rippleOverlay">true</item> <item name="mrl_rippleColor">#80FFFFFF</item> <item name="mrl_rippleHover">true</item> <item name="mrl_rippleAlpha">0.2</item> </style> <style name="RippleStyleBlack" parent="RippleStyleWhite"> <item name="mrl_rippleColor">#8096989A</item> </style> <style name="RippleStyleDark" parent="RippleStyleWhite"> <item name="mrl_rippleColor">#80000000</item> </style> <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" /> <style name="Toolbar.Light" parent="@style/AppTheme"> <item name="colorControlNormal">@color/grey_60</item> <item name="android:textColorPrimary">@color/grey_60</item> </style> </resources>
dimens.xml <resources> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="actionBarSize">56dp</dimen> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> <dimen name="nav_header_vertical_spacing">16dp</dimen> <dimen name="nav_header_height">200dp</dimen> <dimen name="fab_margin">16dp</dimen> <dimen name="viewpager_margin_overlap">-60dp</dimen> <dimen name="viewpager_margin_overlap_payment">-30dp</dimen> <!--genaral spacing--> <dimen name="spacing_xsmall">2dp</dimen> <dimen name="spacing_small">3dp</dimen> <dimen name="spacing_medium">5dp</dimen> <dimen name="spacing_xmedium">7dp</dimen> <dimen name="spacing_middle">10dp</dimen> <dimen name="spacing_large">15dp</dimen> <dimen name="spacing_smlarge">18dp</dimen> <dimen name="spacing_mlarge">20dp</dimen> <dimen name="spacing_mxlarge">25dp</dimen> <dimen name="spacing_xlarge">35dp</dimen> <dimen name="spacing_xmlarge">40dp</dimen> <dimen name="spacing_xxlarge">50dp</dimen> <dimen name="spacing_xxxlarge">55dp</dimen> <dimen name="appbar_padding_top">8dp</dimen> <dimen name="letter_tile_size">32dp</dimen> </resources>