Question

Build an app that scales properly to different screen sizes (use the appropriate layout to accomplish...

  1. Build an app that scales properly to different screen sizes (use the appropriate layout to accomplish this). Test it on an Android emulator (or Android hardware connected to your computer).
Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

The below application is built using Bootstrap that is compatible across devices. Please save below file as App.html or by name with .html exptension to view across different devices:

App.Html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample Application</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
padding: 15px;
background-color: #f5f5f5;
}
.footer p {
text-align: center;
}
</style>
</head>
<body>

<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MyApp</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Sample Application</h1>
<p>This is a sample applications that contains three sections</p>
<p><a class='btn btn-primary'>Navigate</a></p>
</div>
</div>
<div class="container">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#sample1" aria-expanded="true" aria-controls="collapseOne">
Sample 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
This contains Sample 1 Content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#sample2" aria-expanded="true" aria-controls="collapseOne">
Sample 2
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
This contains Sample 2 Content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#sample3" aria-expanded="true" aria-controls="collapseOne">
Sample 3
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
This contains Sample 3 Content
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Footer content goes here. This contains copyright information</p>
</div>
</footer>

</body>
</html>

Please find below screenshots tested across devices:

iPad Mini:

Android Galaxy:

Google Pixel 2:

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
Scenario: You recently started working as the mobile app developer for a University and have been...
Scenario: You recently started working as the mobile app developer for a University and have been assigned to build a mobile app that calculates the students' grade. Your app should contain following screens: Screen 1 Labels for subject1, subject2, and subject3 Textboxes for subject1, subject2, and subject3 Labels for MaxGrade, MinGrade, and Avg.Grade Submit button Once user clicks submit button, you need to display letter grade in a label Screen 2 Screen that allows students to register for the course...
Task: Design and Build a 3-to-1 MUX–4 Design a circuit that takes three different 4-bit words...
Task: Design and Build a 3-to-1 MUX–4 Design a circuit that takes three different 4-bit words and selects one to be connected to the output. In your template provide the design schematic as well as the approach you would use to test the circuit.
You may need to use the appropriate technology to answer this question. Three different methods for...
You may need to use the appropriate technology to answer this question. Three different methods for assembling a product were proposed by an industrial engineer. To investigate the number of units assembled correctly with each method, 30 employees were randomly selected and randomly assigned to the three proposed methods in such a way that each method was used by 10 workers. The number of units assembled correctly was recorded, and the analysis of variance procedure was applied to the resulting...
Introduction Purpose Your goal is to create a design for a software interface. You will experience...
Introduction Purpose Your goal is to create a design for a software interface. You will experience the scope of the design process from brainstorming ideas and gathering information about users’ needs to storyboarding, prototyping, and finally, testing and refining your product. As you work on the software interface, you will demonstrate your ability to apply fundamental Human-Computer Interaction principles to interface analysis, design, and implementation. You will be responsible for delivering project components to your professor at several points during...
(Use the case of “Global Treps”) You have been selected as the project manager for the...
(Use the case of “Global Treps”) You have been selected as the project manager for the Global Treps project. You helped to run a local shark tank like event at your college last year as part of a class project, so you have a general idea of what is involved. The schedule goal is six months, and the budget is $120,000. Your favorite professor, Dr. K., and a few of her associates have agreed to fund the project. Your strengths...
Plagiarism Certification Tests for Undergraduate College Students and Advanced High School Students These tests are intended...
Plagiarism Certification Tests for Undergraduate College Students and Advanced High School Students These tests are intended for undergraduate students in college or those under 18 years of age. Read these directions carefully! The below test includes 10 questions, randomly selected from a large inventory. Most questions will be different each time you take the test, You must answer at least 9 out of 10 questions correctly to receive your Certificate. You have 40 minutes to complete each test, and you...
Using the model proposed by Lafley and Charan, analyze how Apigee was able to drive innovation....
Using the model proposed by Lafley and Charan, analyze how Apigee was able to drive innovation. case:    W17400 APIGEE: PEOPLE MANAGEMENT PRACTICES AND THE CHALLENGE OF GROWTH Ranjeet Nambudiri, S. Ramnarayan, and Catherine Xavier wrote this case solely to provide material for class discussion. The authors do not intend to illustrate either effective or ineffective handling of a managerial situation. The authors may have disguised certain names and other identifying information to protect confidentiality. This publication may not be...
Mattel Responds to Ethical Challenges Business Ethics This case was written by Debbie Thorne, John Fraedrich,...
Mattel Responds to Ethical Challenges Business Ethics This case was written by Debbie Thorne, John Fraedrich, O. C. Ferrell, and Jennifer Jackson, with the editorial assistance of Jennifer Sawayda. This case was developed for classroom discussion rather than to illustrate either effective or ineffective handling of an administrative, ethical, or legal discussion by management. All sources used for this case were obtained through publicly available material. Mattel, Inc. is a world leader in the design, manufacture, and marketing of family...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT